<template>
  <div class="uif-calendar">
    <div class="uif-calendar-header">
      <u-icon type="chevrons-left" scene="action" @click="jumpList(-1, 'year')"></u-icon>
      <u-icon type="chevron-s-left" scene="action" @click="jumpList(-1, 'month')"></u-icon>
      <span class="uif-calendar-title">{{listDate.format('YYYY年MM月')}}</span>
      <u-icon type="chevrons-right" scene="action" @click="jumpList(1, 'month')"></u-icon>
      <u-icon type="chevron-s-right" scene="action" @click="jumpList(1, 'year')"></u-icon>
    </div>
    <div class="uif-calendar-content clearfix">
      <div class="uif-calendar-week">日</div>
      <div class="uif-calendar-week">一</div>
      <div class="uif-calendar-week">二</div>
      <div class="uif-calendar-week">三</div>
      <div class="uif-calendar-week">四</div>
      <div class="uif-calendar-week">五</div>
      <div class="uif-calendar-week">六</div>
      <div v-for="item in list" :key="item.key" class="uif-calendar-item">
        <div :class="item.className" @click="handleClick(item)">{{item.text}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import UIcon from '@uif/hq/src/components/icon'
import {isDate, dayjs} from '@uif/hq/src/utils/day'

function formatToDate (val) {
  if (val === 0) {
    return dayjs()
  } else if (typeof val === 'number') {
    return dayjs().add(val, 'day')
  }
  return dayjs(val)
}

export default {
  name: 'u-calendar',
  components: {
    UIcon
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    min: {
      type: [String, Number],
      default: '1700-01-01'
    },
    max: {
      type: [String, Number],
      default: '2700-01-01'
    }
  },
  data () {
    return {
      minDate: formatToDate(this.min),
      maxDate: formatToDate(this.max),
      date: dayjs(),
      listDate: dayjs(),
      list: []
    }
  },
  computed: {
    val () {
      return dayjs(this.value)
    }
  },
  watch: {
    value: {
      immediate: true,
      handler (val) {
        this.parseValue()
      }
    },
    min () {
      this.setMinMax()
    },
    max () {
      this.setMinMax()
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    // 设置取值范围
    setMinMax () {
      this.minDate = formatToDate(this.min)
      this.maxDate = formatToDate(this.max)
    },
    // value 转 date
    parseValue () {
      const date = isDate(this.value) ? dayjs(this.value) : dayjs()
      this.setDate(date)
    },
    // 设置 date
    setDate (date) {
      if (date !== this.date) {
        this.date = date
        this.listDate = date
        this.syncList()
      }
    },
    // 用户点击
    handleClick ({date, disabled}) {
      if (disabled) return false
      this.setDate(date)
      const value = date.format('YYYY-MM-DD')
      if (this.value !== value) {
        this.$emit('input', value)
      }
      this.$emit('u-change', date.format('YYYY-MM-DD'))
    },
    jumpList (step, init) {
      this.listDate = this.listDate.add(step, init)
      this.syncList()
    },
    // date -> list
    syncList () {
      this.list = []
      // 起点
      const start = this.listDate.set('date', 1).day(0)
      for (let i = 0; i < 42; i++) {
        const date = start.add(i, 'day')
        const disabled = date.isBefore(this.minDate, 'date') || date.isAfter(this.maxDate, 'date')
        this.list.push({
          date,
          disabled,
          key: date.unix(),
          text: date.format('D'),
          className: this.itemClasses(date, disabled)
        })
      }
      this.$emit('update-list', this.list)
    },
    // 类名
    itemClasses (date, disabled) {
      return [
        'uif-calendar-day',
        {
          'available': !disabled,
          'disabled': disabled,
          'month': date.isSame(this.listDate, 'month'),
          'active': this.value && date.isSame(dayjs(this.value), 'date')
        }
      ]
    }
  }
}
</script>
