import dayjs from 'dayjs';

const useTimePicker = Behavior({
  properties: {
    time: {
      type: String,
      observer(value) {
        const t = dayjs(value);
        if (t.$y != NaN) {
          this._setTime(t.format(this.data.timeFormat));
        } else {
          this._setTime(value);
        }
      },
    },
    timeFormat: {
      type: String,
      value: 'YYYY-MM',
    },
    timeMode: {
      type: String,
      value: 'month',
    },
    start: {
      type: String,
      value: '2000-01-01 00:00:00',
    },
    end: {
      type: String,
      value: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    },
  },
  data: {
    timeText: '',
    timeValue: '',
    // start: '2000-01-01 00:00:00',
    // end: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  },
  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
      const t = dayjs().format(this.data.timeFormat);
      this.setData({
        timeText: t,
        timeValue: t,
      });
      this.onTimeInitialValue();
    },
  },
  methods: {
    // 初始值
    onTimeInitialValue() {
      let { timeText, timeValue } = this.data;
      this.triggerEvent(`timeInitValue`, {
        timeText,
        timeValue,
      });
    },
    // 弹出框
    onTimePicker() {
      this.setData({ [`timeVisible`]: true });
    },
    onPicker(e) {
      const { key } = e.currentTarget.dataset;
      this.setData({ [`${key}Visible`]: true });
    },
    onTimePickerChange(e) {
      const { value } = e.detail;
      this.setData({
        [`timeVisible`]: false,
        [`timeValue`]: value,
        [`timeText`]: value,
      });
      this._timeConfirm();
    },
    onTimePickerCancel(e) {
      this.setData({
        [`timeVisible`]: false,
      });
    },

    // 确认事件
    _timeConfirm() {
      let { [`timeText`]: text, [`timeValue`]: value } = this.data;
      this.triggerEvent(`timePickerChange`, {
        [`timeText`]: text,
        [`timeValue`]: value,
      });
    },

    _setTime(value) {
      this.setData({ timeValue: value, timeText: value });
    },
  },
});

export { useTimePicker };