<template>
  <div class="aos-date-type">
    <el-date-picker
      ref="datePicker"
      class="picker"
      @change="handlePickerChange"
      v-model="pickerValue"
      :format="format"
      :picker-options="pickerOptions"
      :type="pickerType"
      :appendToBody="true"
      :placeholder="placeholder">
    </el-date-picker>
  </div>
</template>
<script>
export default {
  name: 'AosDateType',
  props: {
    dateType: {
      type: Array,
      default: function () {
        return ['年','月','周','日']
      }
    }
  },
  watch: {
    dateType: {
      handler: function (val, oldVal) {
        if (val && Array.isArray(val) && val.length > 0 && !this.$_.isEqual(val, oldVal)) {
          this.pickerOptions.shortcuts = []
          val.forEach(item => {
            this.pickerOptions.shortcuts.push(this.shortcutsData[item])
          })
        }
      },
      immediate: true,
      deep: true
    } 
  },
  data(){
    const vm = this;
    return {
      dateTypeDate: {
        '年': 'year',
        '月': 'month',
        '周': 'week',
        '日': 'date' 
      },
      pickerValue: '',
      pickerType: 'date',
      placeholderData: {
        '年': '请选择年',
        '月': '请选择月',
        '周': '请选择周',
        '日': '请选择日期' 
      },
      placeholder: '请选择日期',
      formatData : {
        '年': 'yyyy',
        '月': 'yyyy-MM',
        '周': 'yyyy 第 WW 周',
        '日': 'yyyy-MM-dd' 
      },
      shortcutsData: {
        '年': {
            text: '年',
            onClick: function () {
              vm.handleDateType('年')
            }
          },
        '月': {
            text: '月',
            onClick: function () {
              vm.handleDateType('月')
            }
          },
        '周': {
            text: '周',
            onClick: function () {
              vm.handleDateType('周')
            }
          },
        '日': {
            text: '日',
            onClick: function () {
              vm.handleDateType('日')
            }
          } 
      },
      format: 'yyyy-MM-dd',
      pickerOptions: {
        shortcuts: [
          {
            text: '年',
            onClick: function () {
              vm.handleDateType('年')
            }
          },
          {
            text: '月',
            onClick: function () {
              vm.handleDateType('月')
            }
          },
          {
            text: '周',
            onClick: function () {
              vm.handleDateType('周')
            }
          },
          {
            text: '日',
            onClick: function () {
              vm.handleDateType('日')
            }
          }
        ],
        disabledDate (time) {
          return time.getTime() > Date.now();
        }
      },
    }
  },
  methods: {
    handleDateType (dateType) {
      this.pickerType = this.dateTypeDate[dateType]
      this.placeholder = this.placeholderData[dateType]
      this.format = this.formatData[dateType]
      this.$refs.datePicker.hidePicker()
      this.$nextTick(() => {
        this.$refs.datePicker.showPicker()
      })
    },
    handlePickerChange (value) {
      this.$emit('change', value, this.pickerType)
    }
  }
}
</script>
