<template>
  <div class="select">
    <van-field
      v-model="result"
      v-bind="$attrs"
      readonly
      is-link
      @click="show = !show"
    />
    <van-popup v-model="show" position="bottom">
      <!-- $attrs 可以把根节点的attr放到目标组件上，如此可以像使用 DatePicker 组件一样使用这个新组件 -->
      <van-datetime-picker
        v-bind="$attrs"
        :type="type"
        title="请选择日期"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="cancel"
        @confirm="confirm"
      />
    </van-popup>
  </div>
</template>

<script>
  export default {
    name: 'VantFieldDate',
    model: {
      prop: 'selectValue'
    },
    props: {
      type: {
        type: String,
        default: null
      },
      selectValue: {
        type: [String, Number, Date],
        default: undefined // 值不能是 null，DatePicker会报错
      },
      minDate: {
        type: Date,
        default: undefined
      },
      maxDate: {
        type: Date,
        default: undefined
      },
      // 展示的格式化
      format: {
        type: String,
        default: null
      }
    },
    data() {
      return {
        show: false
      }
    },
    computed: {
      // 展示的格式化，时间提交的值是Date类型数据
      formatFormula() {
        if (this.format) {
          return this.format
        } else if (this.type === 'date') {
          return 'yyyy-MM-dd'
        } else if (this.type === 'datetime') {
          return 'yyyy-MM-dd hh:mm'
        } else if (this.type === 'time') {
          return 'hh:mm'
        } else if (this.type === 'year-month') {
          return 'yyyy-MM'
        }
      },
      result() {
        return this.selectValue ? this.dateFormat(this.selectValue, this.formatFormula) : ''
      }
    },
    methods: {
      dateFormat: (value, format) => {
        if (!value) return
        if (!(value instanceof Date)) {
          value = new Date(value)
        }
        let o = {
          'M+': value.getMonth() + 1, // month
          'd+': value.getDate(), // day
          'h+': value.getHours(), // hour
          'm+': value.getMinutes(), // minute
          's+': value.getSeconds(), // second
          'q+': Math.floor((value.getMonth() + 3) / 3), // quarter
          'S': value.getMilliseconds() // millisecond
        }
        if (!format || format === '') {
          format = 'yyyy-MM-dd hh:mm:ss'
        }

        if (/(y+)/.test(format)) {
          format = format.replace(RegExp.$1, (value.getFullYear() + '').substr(4 - RegExp.$1.length))
        }

        for (let k in o) {
          if (new RegExp('(' + k + ')').test(format)) {
            format = format.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))
          }
        }
        return format
      },
      confirm(value) {
        // 更新 v-model 绑定的 value 值，第二个参数是毫秒数，第三个参数是原始值，根据自己的项目的数据结构来修改
        // input 事件同时也会触发 vee-validate 的验证事件
        this.$emit('input', value.getTime(), value)
        // onChange事件，虽然重写 @input可以实现，但这样会破坏 v-model 写法。
        this.$emit('change', value.getTime(), value)
		  this.show = false;
      },
      cancel() {
		this.$emit('cancelDate');
        this.show = false
      }
    }
  }
</script>
