
<template>
  <div class="row items-center">
    <kyb-date
      v-model="valueInner[0]"
      @input="$emit('input',valueInner)"
      :type="type"
      :with-seconds="withSeconds"
      :input-bg-color="startError?'red-2':''"
      input-show
    />
    <div class="q-mr-xs">至</div>
    <kyb-date
      v-model="valueInner[1]"
      @input="endUpdate()"
      :type="type"
      :with-seconds="withSeconds"
      :input-bg-color="endError?'red-2':''"
      input-show
    />
    <div class="row" v-if="type==='date'">
      <q-btn
        v-for="(item,index) in dataBtns"
        :key="index"
        :label="item.name"
        :outline="selectBtn!==item._id"
        :color="selectBtn===item._id?'primary':''"
        class="q-mr-xs"
        @click="quickSet(item._id)"
      />
    </div>
    <div class="col-12 row items-center q-pa-xs" v-if="startError||endError">
      <q-icon name="error_outline" class="text-negative q-mr-xs" size="1.2em" />
      <span v-text="errorMsg" class="text-negative"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'kyb-date-section',
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    type: { type: String, default: 'date' },
    value: Array,
    showonly: Boolean
  },
  data: function() {
    return {
      date: null,
      time: null,
      withSeconds: false,
      showSelectWin: false,
      valueInner: this.value ? this.value : [],
      selectBtn: null,
      dataBtns: [
        { _id: 'today', name: '今天' },
        { _id: 'yesterday', name: '昨天' },
        { _id: '7days', name: '过去7天' }
      ]
    }
  },
  computed: {
    startError() {
      if (!this.valueInner || !this.valueInner.length) return 0
      if (this.valueInner.length === 1 && this.valueInner[0] === 0) return 0
      if (
        this.valueInner.length === 2 &&
        this.valueInner[1] > 0 &&
        this.valueInner[0] === 0
      ) {
        return 1
      }
      return 0
    },
    endError() {
      if (!this.valueInner || !this.valueInner.length) return 0
      if (
        (this.valueInner.length === 1 && this.valueInner[0] > 0) ||
        (this.valueInner.length === 2 &&
          this.valueInner[0] > 0 &&
          this.valueInner[1] === 0)
      ) {
        return 2
      }
      if (
        this.valueInner.length === 2 &&
        this.valueInner[0] > 0 &&
        this.valueInner[0] > this.valueInner[1]
      ) {
        return 3
      }
      return 0
    },
    errorMsg() {
      if (this.startError === 1) return '开始时间必须填写'
      if (this.endError === 2) return '结束时间必须填写'
      if (this.endError === 3) return '开始时间必须小于结束时间'
      return null
    }
  },
  watch: {
    value(old) {
      this.valueInner = old
    }
  },
  methods: {
    quickSet(type) {
      this.selectBtn = type
      let t = new Date().getTime()
      if (type === 'today') {
        this.valueInner = [
          new Date(t).setDayStart().getTime(),
          new Date(t).setDayEnd().getTime()
        ]
      } else if (type === 'yesterday') {
        let y = new Date(t).addDays(-1)
        this.valueInner = [y.setDayStart().getTime(), y.setDayEnd().getTime()]
      } else if (type === '7days') {
        this.valueInner = [
          new Date(t)
            .addWeeks(-1)
            .setDayStart()
            .getTime(),
          new Date(t).setDayEnd().getTime()
        ]
      }
    },
    endUpdate() {
      // 结束时间特殊一点
      this.$emit('input', [
        this.valueInner[0],
        new Date(this.valueInner[1]).setDayEnd().getTime()
      ])
    }
  }
}
</script>
