<template>
  <div class="inline-date">
    <el-popover placement="bottom" width="600" trigger="click">
      <div style="display: flex;justify-content: center;align-items: center">
        <div style="display: flex;flex-direction: column;justify-content: center;align-items: center">
          <span>开始时间</span>
          <el-date-picker
            ref="startDate"
            v-model="startDate"
            align="right"
            type="date"
            placeholder="选择开始日期"
            :picker-options="pickerOptions"
            @change="startDateChange"
          ></el-date-picker>
        </div>
        <div style="display: flex;flex-direction: column;justify-content: center;align-items: center">
          <span>结束时间</span>
          <el-date-picker
            ref="endDate"
            v-model="endDate"
            align="right"
            type="date"
            placeholder="选择结束日期"
            :picker-options="pickerOptions"
            @change="endDateChange"
          ></el-date-picker>
        </div>
      </div>
      <el-input slot="reference" v-model="fullDate" @input="handleInput" placeholder="请选择起始时间"></el-input>
    </el-popover>
  </div>
</template>

<script>
export default {
  name: "InlineDate",
  props: {
    value: {
      type: [Array,String],
      required: true
    }
  },
  data() {
    return {
      startDate: "",
      endDate: "",
      copyValue: "",
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          },
          {
            text: "30天前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", date);
            }
          },
          {
            text: "90天前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", date);
            }
          },{
            text: "一年前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit("pick", date);
            }
          },{
            text: "两年前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 365 * 2);
              picker.$emit("pick", date);
            }
          },{
            text: "三年前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 365 * 3);
              picker.$emit("pick", date);
            }
          }
        ]
      }
    };
  },
  methods: {
    handleInput() {
      this.$refs.startDate.focus();
      this.$refs.endDate.focus();
    },
    startDateChange(date) {
      this.$emit("end", this.fullDateArray, date);
    },
    endDateChange(date) {
      this.$emit("end", this.fullDateArray, date);
    }
  },
  created() {
    this.copyValue = this.value;
  },
  computed: {
    fullDateArray() {
      return [this.$time.formatTime(this.startDate, 'yyyy-mm-dd'), this.$time.formatTime(this.endDate, 'yyyy-mm-dd')];
    },
    fullDate() {
      return this.$time.formatTime(this.startDate, 'yyyy-mm-dd') + '至' + this.$time.formatTime(this.endDate, 'yyyy-mm-dd');
    }
  }
};
</script>
