<template>
  <view
    class="Mall4j component-user-datails-picker animation-element-wrapper"
    :animation="animation"
    :class="{show: props.showPicker}"
    @tap.stop="hiddenFloatView(0)"
  >
    <view
      class="animation-element"
      :class="{show: props.showPicker}"
      @tap.stop="nono"
    >
      <view
        class="left-bt"
        @tap.stop="hiddenFloatView(0)"
      >
        取消
      </view>
      <view
        class="right-bt"
        @tap.stop="hiddenFloatView"
      >
        确定
      </view>
      <view class="line" />
      <!-- 性别 -->
      <picker-view
        v-if="type === 'sex'"
        indicator-style="height: 70rpx;"
        :value="modelValue"
        :class="{show: props.showPicker}"
        @change="bindChangeOfGendersPicker"
        @tap.stop="nono"
      >
        <picker-view-column>
          <view
            v-for="(item, idx) in props.genderArray"
            :key="idx"
          >
            {{ item }}
          </view>
        </picker-view-column>
      </picker-view>
      <!-- 日期 -->
      <picker-view
        v-if="type === 'birthDate' && (years?.length>0 && months?.length>0 && days?.length>0)"
        indicator-style="height: 70rpx;"
        :value="daysValue"
        :class="{show: props.showPicker}"
        @change="bindChangeOfBirthPicker"
        @tap.stop="nono"
      >
        <picker-view-column>
          <view
            v-for="(item, idx) in years"
            :key="idx"
          >
            {{ item }}年
          </view>
        </picker-view-column>
        <picker-view-column>
          <view
            v-for="(item, idx) in months"
            :key="idx"
          >
            {{ item }}月
          </view>
        </picker-view-column>
        <picker-view-column>
          <view
            v-for="(item, idx) in days"
            :key="idx"
          >
            {{ item }}日
          </view>
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</template>

<script setup>

let moveY = 200
const date = new Date()
const nowYear = date.getFullYear()
const nowMonth = date.getMonth() + 1
const nowDay = date.getDate()
const daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

const props = defineProps({
  genders: {
    type: Number,
    default: 0
  },
  birthDate: {
    type: String,
    default: ''
  },
  genderArray: {
    type: Array,
    default: () => {}
  },
  showPicker: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['setUserInfo'])

const animation = ref('')
const type = ref(null)
let index = [0]
const modelValue = ref(index)

// 日期
const years = ref([])
const months = ref([])
const days = ref([])
let year = nowYear
let month = nowMonth
let day = nowDay
const daysValue = ref([9999, 1, 1])

const init = (_type) => {
  type.value = _type
  setDate(year, month, day)
  if (_type === 'sex') {
    index = [0]
    modelValue.value = props.genders ? [props.genders] : index
  } else if (_type === 'birthDate' && props.birthDate) {
    const birthDate = props.birthDate.split('/')
    setDate(parseInt(birthDate[0]), parseInt(birthDate[1]), parseInt(birthDate[2]))
  }
}
defineExpose({
  init
})
// 根据年月 获取当月的总天数
const getDays = (year, month) => {
  if (month === 2) {
    return ((year % 4 === 0) && ((year % 100) !== 0)) || (year % 400 === 0) ? 29 : 28
  } else {
    return daysInMonth[month - 1]
  }
}

/**
 * 根据年月日设置当前月有多少天 并更新年月日数组
 * @param _year
 * @param _month
 * @param _day
 */
const setDate = (_year, _month, _day) => {
  const daysNum = _year === nowYear && _month === nowMonth ? nowDay : getDays(_year, _month)
  _day = _day > daysNum ? 1 : _day
  const monthsNum = _year === nowYear ? nowMonth : 12
  const _years = []
  const _months = []
  const _days = []
  let yearIdx = 9999
  let monthIdx = 0
  let dayIdx = 0

  // 重新设置年份列表
  for (let i = 1890; i <= nowYear; i++) {
    _years.push(i)
  }
  _years.forEach((v, idx) => {
    if (v === _year) {
      yearIdx = idx
    }
  })
  // 重新设置月份列表
  for (let i = 1; i <= monthsNum; i++) {
    _months.push(i)
  }
  _months.forEach((v, idx) => {
    if (v === _month) {
      monthIdx = idx
    }
  })
  // 重新设置日期列表
  for (let i = 1; i <= daysNum; i++) {
    _days.push(i)
  }
  _days.forEach((v, idx) => {
    if (v === _day) {
      dayIdx = idx
    }
  })

  years.value = _years // 年份列表
  months.value = _months // 月份列表
  days.value = _days // 日期列表
  daysValue.value = [yearIdx, monthIdx, dayIdx]
  year = _year
  month = _month
  day = _day
}

const bindChangeOfBirthPicker = (e) => {
  const val = e.detail.value // 判断滑动的是第几个column
  setDate(years.value[val[0]], months.value[val[1]], days.value[val[2]])
}

const bindChangeOfGendersPicker = (e) => {
  index = e.detail.value
}

/**
 * 隐藏弹窗浮层
 */
const hiddenFloatView = (isChange) => {
  moveY = 200
  if (type.value === 'birthDate') {
    const date = year + '/' + month + '/' + day
    emit('setUserInfo', type.value, date, isChange)
    return
  }
  if (type.value === 'sex') {
    emit('setUserInfo', type.value, index, isChange)
    return
  }
  animationEvents(moveY)
}

/**
 * 动画事件
 */
const animationEvents = (moveY) => {
  animation.value = uni.createAnimation({
    transformOrigin: '50% 50%',
    duration: 400,
    timingFunction: 'ease',
    delay: 0
  })
  animation.value.translateY(moveY + 'vh').step()
  animation.value = animation.value.export()
}

// 空方法
const nono = () => {}

</script>

<style lang="scss" scoped>
@use "index";
</style>
