<template>
  <div class="date-picker-prop">
    <FormItem label="默认值" v-if="info.form.formType.includes('range')">
      <Input
        v-model="defaultArr[0]"
        placeholder="开始时间"
        style="width:45%;marginRight:10px"
        :disabled="!info.isNew"
        readonly></Input>
      <Input
        v-model="defaultArr[1]"
        placeholder="结束时间"
        style="width:45%"
        :disabled="!info.isNew"
        readonly></Input>
      <!-- 不在页面中渲染 info.default 无法触发 watch -->
      <!-- <span style="display:none"> {{info.defaultValue}}</span> -->
    </FormItem>
    <FormItem label="默认值" v-else>
      <Input
        v-model="defaultArr"
        placeholder="请输入默认值"
        readonly
        :disabled="!info.isNew"></Input>
    </FormItem>
    <FormItem label="占位提示">
      <Input v-model="info.form.placeholder" placeholder="请输入占位提示"></Input>
    </FormItem>
    <FormItem label="类型选择">
      <Select v-model="info.form.formType" type="button">
        <Option value="date">date</Option>
        <!-- <Option value="daterange">daterange</Option> -->
        <Option value="datetime">datetime</Option>
        <!-- <Option value="datetimerange">datetimerange</Option> -->
        <Option value="year">year</Option>
        <Option value="month">month</Option>
      </Select>
    </FormItem>
    <FormItem label="时间格式">
      <Input v-model="info.form.format" placeholder="如:yyyy-MM-dd"></Input>
    </FormItem>
    <FormItem label="分割">
      <Input v-model="info.form.separator" placeholder="如:'-'"></Input>
    </FormItem>
    <FormItem label="能否清空">
      <i-switch v-model="info.form.clearable" />
    </FormItem>
  </div>
</template>
<script>
export default {
  name: 'DatePickerProp',
  props: {
    info: Object,
  },
  data() {
    return {
      defaultArr: null,
    }
  },
  watch: {
    //切换type 时 更改默认值
    'info.form.formType'(v) {
      const map = {
        'date': 'yyyy-MM-dd',
        'daterange': 'yyyy-MM-dd',
        'datetime': 'yyyy-MM-dd HH:mm:ss',
        'datetimerange': 'yyyy-MM-dd HH:mm:ss',
        'year': 'yyyy',
        'month': 'yyyy-MM',
      }
      this.info.form.format = map[v]
      if (v.includes('range')) {
        this.defaultArr = ['', '']
      }
    },
    //default变化时 展示 格式化后的数据
    'info.defaultValue': {
      handler(v) {
        const { formType, format } = this.info.form
        if (formType.includes('range')) {
          this.defaultArr[0] = this.format(v[0], format)
          this.defaultArr[1] = this.format(v[1], format)
        } else {
          this.defaultArr = this.format(v, format)
        }
      },
      deep: true,
    },
  },
  created() {
    //默认值
    const list = [
      { key: 'formType', default: 'date' },
      { key: 'format', default: 'yyyy-MM-dd' },
      { key: 'clearable', default: false },
      { key: 'separator', default: '-' },
    ]
    for (const val of list) {
      if (!this.info.form[val.key] && this.info.form[val.key] !== 0) {
        this.$set(this.info.form, val.key, val.default)
      }
    }
  },
  methods: {
    format(date, format) {
      if (!date) { return }
      let res = format
      const o = {
        'M+': date.getMonth() + 1, //month
        'd+': date.getDate(), //day
        'H+': date.getHours(), //hour
        'm+': date.getMinutes(), //minute
        's+': date.getSeconds(), //second
        'q+': Math.floor((date.getMonth() + 3) / 3), //quarter
        'S': date.getMilliseconds(), //millisecond
      }
      if (/(y+)/.test(res)) {
        res = res.replace(RegExp.$1,
          (`${date.getFullYear()}`).substr(4 - RegExp.$1.length))
      }
      for (const k in o) {
        if (new RegExp(`(${k})`).test(res)) {
          res = res.replace(RegExp.$1,
            RegExp.$1.length === 1 ? o[k] :
              (`00${o[k]}`).substr((`${o[k]}`).length))
        }
      }
      return res
    },
  },
}
</script>