<template>
  <view class="ml-date-quick-range-picker" :class="className">
    <view class="ml-date-quick-range-picker-left">
      <ml-select-picker v-model="selectType" :options="typeList" :border="border" @change="changeTypeEvent"></ml-select-picker>
    </view>
    <view class="ml-date-quick-range-picker-right">
      <ml-date-picker v-model="selectVal" v-if="selectType === 1" :border="border" :minDate="minDate" :maxDate="maxDate" :clearable="clearable" @change="changeDateEvent"></ml-date-picker>
      <FixUniDatetimePicker v-else v-model="selectDates" type="daterange" :start="minDate" :end="maxDate" @change="changeDaterangeEvent" :border="border" :clear-icon="clearable"/>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import FixUniDatetimePicker from '../fix-uni-datetime-picker/fix-uni-datetime-picker.vue'
import XEUtils from 'xe-utils'

export default defineComponent({
  name: 'MlDateQuickRangePicker',
  options: {
    virtualHost: true
  },
  components: {
    FixUniDatetimePicker
  },
  props: {
    dateType: Number,
    border: Boolean,
    startDate: String,
    endDate: String,
    minDate: [String, Number],
    maxDate: [String, Number],
    clearable: Boolean,
    className: String
  },
  data () {
    return {
      selectVal: '' as any,
      selectType: 5,
      selectDates: [] as any[]
    }
  },
  computed: {
    typeList () {
      return [
        { label: '日', value: 1 },
        { label: '周', value: 2 },
        { label: '月', value: 3 },
        { label: '年', value: 4 },
        { label: '自定义', value: 5 }
      ]
    }
  },
  watch: {
    startDate () {
      this.$nextTick(() => {
        this.updateValue()
      })
    }
  },
  created () {
    if (this.startDate) {
      this.updateValue()
    }
    if (this.dateType) {
      this.selectType = this.dateType
      this.$nextTick(() => {
        if (!this.startDate) {
          this.changeTypeEvent()
        }
      })
    }
  },
  methods: {
    updateValue () {
      if (this.dateType === 1) {
        this.selectVal = this.startDate
      } else {
        this.selectDates = this.startDate && this.endDate ? [this.startDate, this.endDate] : []
      }
    },
    changeTypeEvent () {
      let startStr = ''
      let enStr = ''
      if (this.selectType === 5) {
        this.$emit('update:dateType', this.selectType)
        return
      }
      if (this.selectType !== null) {
        let startDate = new Date()
        const endDate = new Date()
        switch (this.selectType) {
          case 1:
            startDate = new Date()
            break
          case 2:
            startDate = XEUtils.getWhatWeek(endDate, -1)
            break
          case 3:
            startDate = XEUtils.getWhatDay(XEUtils.getWhatMonth(endDate, -1), 1)
            break
          case 4:
            startDate = XEUtils.getWhatDay(XEUtils.getWhatYear(endDate, -1), 1)
            break
        }
        startStr = XEUtils.toDateString(startDate, 'yyyy-MM-dd')
        enStr = XEUtils.toDateString(endDate, 'yyyy-MM-dd')
      }
      if (this.selectType === 1) {
        this.selectVal = startStr
      } else {
        this.selectVal = ''
      }
      this.selectDates = startStr && enStr ? [startStr, enStr] : []
      this.$emit('update:dateType', this.selectType)
      this.$emit('update:startDate', startStr)
      this.$emit('update:endDate', enStr)
      this.$emit('change', { startDate: startStr, endDate: enStr })
    },
    changeDateEvent () {
      const value = this.selectVal || ''
      this.changeDaterangeEvent([value, value])
    },
    changeDaterangeEvent (value: any) {
      const [startDate, endDate] = value
      if (!startDate || !endDate) {
        this.selectType = 5
        this.$emit('update:dateType', this.selectType)
      }
      this.$emit('update:startDate', startDate || '')
      this.$emit('update:endDate', endDate || '')
      this.$emit('change', { startDate, endDate })
    }
  }
})
</script>

<style lang="scss">
.ml-date-quick-range-picker {
  display: flex;
  flex-direction: row;
  .ml-date-quick-range-picker-left {
    width: 170rpx;
    flex-shrink: 0;
  }
  .ml-date-quick-range-picker-right {
    flex-grow: 1;
    margin-left: 16rpx;
  }
}
</style>
