<template>
  <div>
    <van-field
      :name="field.label"
      :required="field.required"
      :disabled="disabled"
      :value="field.value"
      :label="field.label"
      :placeholder="`${field.isSCT ? '自动获取系统时间' : '请选择' + field.label}`"
      :rules="rules(field)"
      readonly
      clickable
      @click="disabled ? () => {}:openPicker()"
    />
    <van-popup
      v-model="showPicker"
      position="bottom"
    >
      <van-datetime-picker
        v-model="currentDate"
        :type="datetimePickerType[field.type]"
        :title="`请选择${field.label}`"
        :min-date="minDate"
        :max-date="maxDate"
        :min-hour="minHour"
        :min-minute="minMinute"
        :max-hour="maxHour"
        :max-minute="maxMinute"
        @confirm="confirm"
        @cancel="cancel"
        @change="change"
      />
    </van-popup>
  </div>
</template>
<script>
import { dateFormatter } from 'utils-cs'

export default {
  name: 'FormDateTime',
  props: {
    field: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 校验规则
    rules: {
      type: Function,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      // 展示弹框
      showPicker: false,
      // 选择的时间
      currentDate: new Date(),
      // 渲染不同的picker类型
      datetimePickerType: {
        'DateTime': 'datetime',
        'Date': 'date',
        'Time': 'time'
      },
      convertType: {
        'DateTime': 'yyyy-MM-dd HH:mm:ss',
        'Date': 'yyyy-MM-dd'
      },
      // 最小日期-默认10年前
      minDate: this.getYear(-10),
      // 最大日期-默认100年后
      maxDate: this.getYear(100),
      // 最小小时
      minHour: 0,
      // 最小分钟
      minMinute: 0,
      // 最大小时
      maxHour: 23,
      // 最大分钟
      maxMinute: 59,
      // 当前时间
      currentTime: new Date()
    }
  },
  computed: {
    // 是否禁用
    disabled ({ field }) {
      // isSCT 自动获取系统时间 代表后端存储 前端不进行配置
      return field.disabled || field.isSCT
    }
  },
  methods: {
    // 初始化
    init () {
      if (this.field.type === 'DateTime' || this.field.type === 'Date') {
        this.initDateTimeOrDate()
      } else if (this.field.type === 'Time') {
        this.initTime()
      }
    },
    // 初始化DateTime/Date类型
    initDateTimeOrDate () {
      // 初始化打开显示时间的标志
      let flag = ''
      // 当前时间
      const now = new Date()
      if (this.field.limitTime === 'gt') {
        // 大于当前时间
        // 判断是DateTime及Date类型
        if (this.field.type === 'DateTime') {
          now.setMinutes(now.getMinutes() + 1)
        } else {
          now.setDate(now.getDate() + 1)
        }
        this.minDate = now
        flag = 'min'
      } else if (this.field.limitTime === 'egt') {
        // 大于等于当前时间
        this.minDate = now
        flag = 'min'
      } else if (this.field.limitTime === 'lt') {
        // 小于当前时间
        if (this.field.type === 'DateTime') {
          now.setMinutes(now.getMinutes() - 1)
        } else {
          now.setDate(now.getDate() - 1)
        }
        this.maxDate = now
        flag = 'max'
      } else if (this.field.limitTime === 'elt') {
        // 小于等于当前时间
        this.maxDate = now
        flag = 'max'
      }
      // 如果配置的时间不符合规则会自动初始化暂时为最小时间
      this.currentDate = this.field.value ? this.convertDateFromString(this.field.value, this.field.type) : flag ? flag === 'min' ? this.minDate : this.maxDate : now
    },
    // 初始化时间
    initTime () {
      this.currentTime = new Date()
      if (this.field.value) {
        // 获取已配置的值
        const hour = +this.field.value.split(':')[0]
        if (this.field.limitTime === 'gt') {
          this.minHour = this.currentTime.getHours()
        } else if (this.field.limitTime === 'egt') {
          this.minHour = this.currentTime.getHours()
        } else if (this.field.limitTime === 'lt') {
          this.maxHour = this.currentTime.getHours()
        } else if (this.field.limitTime === 'elt') {
          this.maxHour = this.currentTime.getHours()
        }
        this.reviseMinute(hour)
        this.currentDate = this.field.value
      } else {
        if (this.field.limitTime === 'gt') {
          // 大于当前时间
          this.minHour = this.currentTime.getHours()
          this.minMinute = this.currentTime.getMinutes() + 1
        } else if (this.field.limitTime === 'egt') {
          // 大于等于当前时间
          this.minHour = this.currentTime.getHours()
          this.minMinute = this.currentTime.getMinutes()
        } else if (this.field.limitTime === 'lt') {
          // 小于当前时间
          this.maxHour = this.currentTime.getHours()
          this.maxMinute = this.currentTime.getMinutes() - 1
        } else if (this.field.limitTime === 'elt') {
          // 小于等于当前时间
          this.maxHour = this.currentTime.getHours()
          this.maxMinute = this.currentTime.getMinutes()
        }
        const hour = dateFormatter(this.currentTime, 'HH')
        const minute = dateFormatter(this.currentTime, 'mm')
        this.currentDate = hour + ':' + minute
      }
    },
    // 打开时间选择picker
    openPicker () {
      // 点击确认按钮后就初始化上次确认按钮的时间
      this.init()
      this.showPicker = true
    },
    // 确定按钮
    confirm () {
      // 赋值
      let value = ''
      if (this.field.type === 'Time') {
        value = this.currentDate
      } else {
        value = dateFormatter(this.currentDate, this.convertType[this.field.type])
      }
      this.field.value = value
      this.showPicker = false
    },
    // 取消按钮
    cancel () {
      this.showPicker = false
    },
    // 为了解决最小分钟数的问题
    change (e) {
      if (this.field.type === 'Time') {
        const hour = e.getColumnValue(0)
        this.reviseMinute(hour)
      }
    },
    // 为了解决最小分钟数的问题进行修正最小分钟数
    reviseMinute (hour) {
      if (this.field.limitTime === 'gt') {
        if (hour > this.minHour) {
          this.minMinute = 0
        } else {
          this.minMinute = this.currentTime.getMinutes() + 1
        }
      } else if (this.field.limitTime === 'egt') {
        if (hour > this.minHour) {
          this.minMinute = 0
        } else {
          this.minMinute = this.currentTime.getMinutes()
        }
      } else if (this.field.limitTime === 'lt') {
        // 小于当前时间
        if (hour < this.maxHour) {
          this.maxMinute = 59
        } else {
          this.maxMinute = this.currentTime.getMinutes() - 1
        }
      } else if (this.field.limitTime === 'elt') {
        // 小于等于当前时间
        if (hour < this.maxHour) {
          this.maxMinute = 59
        } else {
          this.maxMinute = this.currentTime.getMinutes()
        }
      }
    },
    /**
       * @description 获取n年前及n年后的00:00:00
       * @param {number} n 正数是n年后 负数是n年前
       */
    getYear (n) {
      const time = new Date()
      const year = time.getFullYear() + n
      const month = time.getMonth()
      const day = time.getDate()
      return new Date(year, month, day)
    },
    /**
       * @description 输出日期类型
       * @param {string} dateString 时间字符串
       * @param {number} type 类型-DateTime(上方格式为yyyy-MM-dd HH:mm:ss)、Date(上方格式为yyyy-MM-dd)
       */
    convertDateFromString (dateString, type = 'DateTime') {
      if (dateString) {
        if (type === 'DateTime') {
          const dateArray = dateString.split(' ')
          const ymd = dateArray[0].split('-')
          const hms = dateArray[1] ? dateArray[1].split(':') : ''
          return new Date(ymd[0], ymd[1] - 1, ymd[2], hms[0], hms[1], hms[2])
        } else if (type === 'Date') {
          const dateArray = dateString.split(' ')
          const ymd = dateArray[0].split('-')
          return new Date(ymd[0], ymd[1] - 1, ymd[2])
        }
      }
      return ''
    }
  }
}
</script>
