<template>
  <el-date-picker
    v-bind="$attrs"
    v-on="$listeners"
    v-model="input"
    value-format="yyyy-MM-dd"
    type="daterange"
    align="left"
    unlink-panels
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :picker-options="pickerOptions"
  >
  </el-date-picker>
</template>

<script>
export default {
  props: {
    value: null,
  },
  data() {
    return {
      input: '',
      pickerOptions: {
        shortcuts: [
          {
            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]);
            },
          },
        ],
      },
    };
  },
  watch: {
    input(val) {
      this.changeVal(val)
    },
    value: {
      handler(val) {
        this.input = val
        this.changeVal(val)
      },
      immediate: true,
    },
  },
  methods: {
    changeVal (val) {
      if (val && val.length) {
        this.$emit("input", val);
        this.$emit("update:start", val[0]);
        this.$emit("update:end", val[1]);
        this.$emit("update:startValueOf", this.$dayjs(val[0]).valueOf());
        this.$emit("update:endValueOf", this.$dayjs(val[1]).valueOf());
      } else {
        this.$emit("input", val);
        this.$emit("update:start", '');
        this.$emit("update:end", '');
        this.$emit("update:startValueOf", '');
        this.$emit("update:endValueOf", '');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
</style>