<script>
import NOptionsDatePaster from './options-date-paster'
import NOptionsDateRangePaster from './options-date-range-paster'
import NOptionsMonthPaster from './options-month-paster'
import NOptionsMonthRangePaster from './options-month-range-paster'
import {Paster, prop} from '@uif/next/lib/utils/tools'

function getCtorComponent (type) {
  switch (type) {
    case 'date':
    case 'minute':
    case 'time':
      return NOptionsDatePaster
    case 'dates':
      return NOptionsDateRangePaster
    case 'month':
      return NOptionsMonthPaster
    case 'months':
      return NOptionsMonthRangePaster
  }
}

export default {
  name: 'n-options-date',
  props: {
    /**
     * date
     * **/
    // 'date', 'minute', 'time', 'month' => '2022-02-02 02:02:02'   能够使用dayjs序列化的时间格式
    // 'dates', 'months' => ['2022-01-02 02:02:02', '2022-02-02 03:02:02'] 能够使用dayjs序列化的时间格式数组
    activeValue: {},
    // 类型
    type: prop.inArray(['date', 'minute', 'time', 'dates', 'month', 'months'], 'date'),
    // 最小时间
    min: prop.stringNumber('1700-01-01'),
    // 最大时间
    max: prop.stringNumber('2700-01-01'),
    // 最大时间跨度(天) date-range有效
    maxlength: prop.stringNumber(),
    // 底部
    footer: prop.object(),
    /**
     * paster
     * **/
    // 贴片名：如果有wrap，则将有div包裹，如果没有，则由外部控制
    wrap: prop.string(),
    // 是否可见
    value: prop.boolean(),
    // 禁用
    disabled: prop.boolean(),
    /**
     * paster
     * **/
    // 自定义选项
    pasterOptions: prop.object(),
    /**
     * options
     * **/
    // 延迟2分钟自动销毁
    autoDestroy: prop.boolean(),
    // 点击自动关闭 ADD
    autoClose: prop.boolean(true)
  },
  data () {
    return {
      nValue: false
    }
  },
  render (h) {
    const {wrap, onClick, $scopedSlots} = this
    if (!wrap) {
      return $scopedSlots.default?.({onClick})
    }
    return h('div', {staticClass: wrap, on: {click: onClick}}, $scopedSlots.default?.())
  },
  watch: {
    value (value) {
      this.setNValue(value)
    },
    nValue (nValue) {
      if (this.value !== nValue) {
        this.$emit('input', nValue)
        this.$emit('update:value', nValue)
      }
    },
    // activeValue 变更，更新 props
    activeValue (value) {
      return this.paster?.popperComponent?.setProps('activeValue', value)
    },
    // footer 变更，更新 props
    footer (value) {
      return this.paster?.popperComponent?.setProps('footer', value)
    }
  },
  methods: {
    // 点击
    onDateClick (date) {
      this.$emit('click', date)
    },
    // 值改变
    onUChange (date) {
      this.$emit('u-change', date)
      if (this.autoClose) {
        this.setNValue(false)
      }
    },
    /**
     * paster
     * **/
    // 设置状态
    setNValue (value) {
      if (this.nValue !== value) {
        this.nValue = value
        this.updatePaster()
      }
    },
    // 点击
    onClick () {
      if (!this.disabled) {
        this.setNValue(true)
      }
    },
    // 展开选项
    updatePaster () {
      this.paster = this.paster || new Paster({
        reference: this.$el,
        ctor: {
          creator: this,
          component: getCtorComponent(this.type),
          props: {
            activeValue: this.activeValue,
            maxlength: this.maxlength,
            type: this.type,
            min: this.min,
            max: this.max,
            footer: this.footer
          },
          scopedSlots: this.$scopedSlots,
          on: {
            click: this.onDateClick,
            'u-change': this.onUChange,
            'option-click': (option) => this.$emit('option-click', option)
          }
        },
        options: {
          placement: 'bottom-start',
          offset: [0, 4],
          ...this.pasterOptions
        },
        autoDestroy: this.autoDestroy,
        onStateChange: (value) => this.setNValue(value)
      })
      this.nValue ? this.paster.show() : this.paster.hidden()
    },
    // 销毁
    destroyPaster () {
      if (this.paster) {
        this.paster.destroy()
        this.paster = null
      }
    }
  }
}
</script>
