

<template>
  <div class="d-flex flex-wrap pb-3">
    <div>
      <a-date-picker
        v-model="startValue"
        :disabled-date="disabledStartDate"
        show-time
        placeholder="开始时间"
        :default-value="$moment(`${timeObj.startTime}`, dateFormat)"
        :format="dateFormat"
        @openChange="handleStartOpenChange"
        @change="getStartDate"
        :allow-clear="clear"
      />
      <a-date-picker
        v-model="endValue"
        :disabled-date="disabledEndDate"
        show-time
        placeholder="结束时间"
        :open="endOpen"
        :default-value="$moment(timeObj.endTime, dateFormat)"
        :format="dateFormat"
        @openChange="handleEndOpenChange"
        @change="getEndDate"
        :allow-clear="clear"
      />
      <a-button @click="handleTableChange" class="mx-2" type="primary">搜索</a-button>
      <a-button @click="downFile" icon="download" class="mx-2 down-btn" type="primary">下载</a-button>
    </div>
  </div>
</template>

<script>
import { weightExport } from 'config/api';

export default {
  name: 'Search',
  data() {
    return {
      timeObj: {
        startTime: this.$moment(Date.parse(new Date()) - 3600 * 30 * 24 * 1000).format('YYYY-MM-DD'),
        endTime: this.$moment(Date.parse(new Date())).format('YYYY-MM-DD'),
      },
      dateFormat: 'YYYY-MM-DD',
      startValue: null,
      endValue: null,
      endOpen: false,
      clear: false,
    };
  },
  methods: {
    disabledStartDate(startValue) {
      const endValue = this.endValue;
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf() || startValue.valueOf() < endValue.valueOf() - 3600 * 30 * 24 * 1000;
    },
    disabledEndDate(endValue) {
      const startValue = this.startValue;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf() || startValue.valueOf() < endValue.valueOf() - 3600 * 30 * 24 * 1000;
    },
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true;
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },
    getStartDate(e) {
      this.timeObj.startTime = this.$moment(e._d).unix() * 1000;
    },
    getEndDate(e) {
      this.timeObj.endTime = this.$moment(e._d).unix() * 1000;
    },
    handleTableChange() {
      if (typeof this.timeObj.startTime === 'string') {
        this.timeObj.startTime = this.$moment(this.timeObj.startTime).unix() * 1000;
      }
      if (typeof this.timeObj.endTime === 'string') {
        this.timeObj.endTime = this.$moment(this.timeObj.endTime).unix() * 1000;
      }
      this.$emit('getData', this.timeObj);
    },
    // 下载附件
    downFile() {
      window.open(
        `http://test.tall.wiki/gateway/wisdomcar/record/weightExport?startTime=${this.timeObj.startTime}&&endTime=${this.timeObj.endTime}`,
      );
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
.down-btn {
  position: absolute;
  right: 25px;
}
</style>
