<template>
  <k-actionbar
    class="picker-birth"
    :defaultIndex="defaultIndexDate"
    ref="uPickerBirth"
    :columns="columnsDate"
    @confirm="confirmTime"
    @change="changeHandlerDate"
    v-bind="$attrs"
    v-on="$listeners"
    :closeOnClickOverlay="true"
  ></k-actionbar>
</template>
<script lang="ts">
interface PickerItem {
  indexs: number[];
  value: any[];
  values: any[];
}
import Vue from 'vue';
export default Vue.extend({
  name: 'k-actionbar-time',
  data() {
    return {
      defaultIndexDate: Array<number>(),
      columnsDate: [] as any,
      selectedDate: '',
    };
  },
  props: {
    defaultIndex: {
      default: [0, 0, 0],
    },
    startYear: {
      type: Number,
      default: 1970,
    },
    endYear: {
      type: Number,
      default: new Date().getFullYear(),
    },
    showDay: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    defaultIndex: {
      handler(val) {
        this.setDefaultIndexBirth();
      },
      immediate: true,
    },
  },
  methods: {
    changeHandlerDate(e: any) {
      const uPickerBirth = this.$refs.uPickerBirth as any;
      const { columnIndex, value } = e;
      if (columnIndex == 0 || columnIndex == 1) {
        //用户改变的是年份或者月份
        let curYear = value[0];
        let curmonth = value[1].substring(0, value[1].length - 1);
        this.getDateLinkAge(curYear, Number(curmonth));
      }
    },
    setDefaultIndexBirth() {
      this.defaultIndexDate = [];
      let [curYear, curMonth, curDay] = [
        new Date().getFullYear(),
        new Date().getMonth() + 1,
        new Date().getDate(),
      ];
      let curDateArr = [curYear, curMonth, curDay];
      this.getDateLinkAge(curYear, curMonth);
      for (let i = 0; i < this.columnsDate.length; i++) {
        curDateArr[i] = Number(this.defaultIndex[i]);
        let colIndex: number =
          this.findCurColumIndex(this.columnsDate[i], curDateArr[i]) || -1;
        this.defaultIndexDate.push(colIndex);
      }
    },
    findCurColumIndex(arr: any, curData: number): number {
      return (
        (arr.length > 0 &&
          arr.findIndex(
            (item: any) =>
              Number(String(item).substring(0, item.length - 1)) == curData
          )) ||
        -1
      );
    },
    getDateLinkAge(curYear: number, curMonth: number) {
      this.columnsDate = [];
      let curDays = 31;
      let years: Array<string> = [],
        months: Array<string> = [],
        days: Array<string> = [];
      if (curMonth == 4 || curMonth == 6 || curMonth == 9 || curMonth == 11) {
        //月份为4,6,9,11,，每月天数为30
        curDays = 30;
      } else if (curMonth == 2) {
        //月份为2
        if (curYear % 4 == 0 || (curYear % 400 == 0 && curYear % 100 != 0)) {
          //如果年份是闰年,，每月天数为29
          curDays = 29;
        } else {
          //如果年份不是闰年,，每月天数为28
          curDays = 28;
        }
      } else {
        //月份为1,3,5,7,8,10,12，每月天数为31
        curDays = 31;
      }
      for (let d = 1; d <= curDays; d++) {
        days.push(d + '日');
      }
      for (let m = 1; m <= 12; m++) {
        months.push(m + '月');
      }
      if (this.startYear > this.endYear) {
        return;
      }
      for (let y = this.startYear; y <= this.endYear; y++) {
        years.push(y + '年');
      }
      this.columnsDate.push(years);
      this.columnsDate.push(months);
      this.showDay && this.columnsDate.push(days);
    },
    confirmTime(e: PickerItem) {
      if (Array.isArray(e.value)) {
        e.value = e.value.map((item) => {
          if (typeof item == 'string') {
            if (item.includes('月') || item.includes('日')) {
              item = ('0' + item.substring(0, item.length - 1)).slice(-2);
            }
            if (item.includes('年')) {
              item = item.slice(0, item.length - 1);
            }
          }
          return item;
        });
        this.selectedDate = e.value.join('.');
      } else {
        this.selectedDate = e.value;
      }
      this.$emit('confirmTime', {
        selectedDate: this.selectedDate,
        columnsDate: this.columnsDate,
      });
    },
  },
});
</script>
