<template>
  <div class="d-flex flex-nowrap">
    <a-date-picker
      v-model="startValue"
      :disabled-date="disabledStartDate"
      allow-clear
      locale="zh-cn"
      :format="monthFormat"
      placeholder="起始时间"
      class="box box1"
      :show-today="false"
      :open="startOpen"
      @openChange="handleStartOpenChange"
    >
      <template slot="renderExtraFooter">
        <a-button size="small" type="primary" ghost @click="setYesterday('startValue', 'startOpen')">昨天</a-button>
        <a-button class="ml-3" size="small" type="primary" ghost @click="setToday('startValue', 'startOpen')">今天</a-button>
      </template>
    </a-date-picker>
    <a-date-picker
      v-model="endValue"
      :disabled-date="disabledEndDate"
      allow-clear
      :format="monthFormat"
      class="box box2"
      :show-today="false"
      placeholder="截止时间"
      :open="endOpen"
      @openChange="handleEndOpenChange"
    >
      <template slot="renderExtraFooter">
        <a-button size="small" type="primary" ghost @click="setYesterday('endValue', 'endOpen')">昨天</a-button>
        <a-button class="ml-3" size="small" type="primary" ghost @click="setToday('endValue', 'endOpen')">今天</a-button>
      </template>
    </a-date-picker>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  data() {
    return {
      monthFormat: 'YYYY-MM-DD',
      startValue: null,
      endValue: null,
      startOpen: false,
      endOpen: false,
    };
  },
  watch: {
    startValue(val) {
      if (val) {
        const startTime = this.$moment(val).format('x');
        this.setStartTime(startTime);
      } else {
        const time = this.$moment(Date.now()).format('YYYY-MM-DD');
        this.setStartTime(this.$moment(`${time} 00:00`).format('x') - 0);
        if (!this.endValue) {
          this.$emit('changeTime');
        }
      }
    },
    endValue(val) {
      if (val) {
        const endTime = this.$moment(val).format('x');
        this.setEndTime(endTime);

        if (val && !this.startValue) {
          this.$message.error('请选择起始时间');
          return;
        }
      } else {
        const time = this.$moment(Date.now()).format('YYYY-MM-DD');
        this.setEndTime(this.$moment(`${time} 23:59`).format('x') - 0);
      }

      this.$emit('changeTime');
    },
  },

  methods: {
    ...mapMutations('home', ['setStartTime', 'setEndTime']),

    // 昨天
    setYesterday(value, open) {
      this[value] = this.$moment(new Date().getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD');
      this[open] = false;
      if (open === 'startOpen' && !this.startOpen) {
        this.endOpen = true;
      }
    },

    // 今天
    setToday(value, open) {
      this[value] = this.$moment(new Date()).format('YYYY-MM-DD');
      this[open] = false;
      if (open === 'startOpen' && !this.startOpen) {
        this.endOpen = true;
      }
    },

    disabledStartDate(startValue) {
      const endValue = this.endValue;
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.startValue;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    handleStartOpenChange(open) {
      this.startOpen = open;
      if (!open) {
        this.endOpen = true;
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  min-width: auto !important;
  width: 53% !important;
}

.box1 {
  margin-right: 2%;
}

.box2 {
  margin-left: 2%;
}
</style>
