<template>
  <div>
    <slot></slot>
    <el-date-picker
      v-model="queryDate"
      :picker-options="pickerOptions"
      type="daterange"
      align="right"
      unlink-panels
      value-format="yyyy-MM-dd"
      range-separator="-"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="$emit('change')"
    />
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "ZxDatePicker",
  props: {
    startDate: {
      type: String,
      required: false,
    },
    endDate: {
      type: String,
      required: true,
    },
    intervalDays: {
      type: String,
      required: false,
      default: "0",
    },
  },
  data() {
    return {
      queryDate: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const start = new Date();
              picker.$emit("pick", [start, start]);
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit("pick", [start, start]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {
    let startDate = "";
    let endDate = "";
    if (this.endDate == "today") {
      endDate = moment().format("YYYY-MM-DD");
    } else if (this.endDate == "yesterday") {
      endDate = moment().subtract(1, "days").format("YYYY-MM-DD");
    } else {
      endDate = this.endDate;
    }

    if (
      this.startDate != "" &&
      this.startDate != undefined &&
      this.startDate != null
    ) {
      startDate = this.startDate;
    } else {
      if (
        this.intervalDays != "" &&
        this.intervalDays != undefined &&
        this.intervalDays != null
      ) {
        startDate = moment(endDate)
          .add(0 - this.intervalDays, "days")
          .format("YYYY-MM-DD");
      }
    }

    this.queryDate = [startDate, endDate];
  },
  // 子组件监控日期组件的值发生变化的时候，通过emit传给父组件，父组件用v-model接收。这样就把子组件的v-model功能，传给了父组件
  watch: {
    queryDate(val) {
      this.$emit("input", val);
    },
  },

  methods: {},
};
</script>
