<template>
  <el-date-picker
    class="ag-date-picker"
    v-model="dateArr"
    v-bind="attrs"
    v-on="inputListeners"
  />
</template>

<script>
/**
 * agDatePicker 时间选择器
 */
import isEmpty from "../../../src/utils/isEmpty";

export default {
  name: "agDatePicker",
  props: {
    value: {
      type: Array,
      default: () => [null, null],
    },
  },
  data() {
    return {
      dateArr: [null, null],
    };
  },
  computed: {
    attrs() {
      return {
        size: "small",
        type: "daterange",
        format: "yyyy/MM/dd",
        "value-format": "yyyy-MM-dd",
        "start-placeholder": "开始日期",
        "end-placeholder": "结束日期",
        "range-separator": "-",
        "picker-options": {
          disabledDate(time) {
            return (
              time.getTime() >
              new Date(new Date().toLocaleDateString()).getTime() +
                24 * 60 * 60 * 1000 -
                1
            );
          },
          shortcuts: [
            {
              text: "本月",
              onClick(picker) {
                const end =
                  new Date(new Date().toLocaleDateString()).getTime() +
                  24 * 60 * 60 * 1000 -
                  1;
                const time = new Date();
                time.setDate(1);
                time.setHours(0);
                time.setSeconds(0);
                time.setMinutes(0);
                var start = time.getTime();
                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]);
              },
            },
            {
              text: "近六个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "最近一年",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
                picker.$emit("pick", [start, end]);
              },
            },
          ],
        }, //多选日期
        ...this.$attrs,
      };
    },
    // 所有父级事件
    inputListeners() {
      return Object.assign({}, this.$listeners, {
        input: (value) => {
          let date1 = "";
          let date2 = "";

          if (!isEmpty(value) && value.length === 2 && value[0] && value[1]) {
            date1 = `${value[0]} 00:00:00`;
            date2 = `${value[1]} 23:59:59`;
          }
          this.$emit("input", [date1, date2]);
        },
      });
    },
  },
  watch: {
    value: {
      handler(newVal) {
        if (!Array.isArray(newVal)) {
          throw new Error("agDatePicker date请传入数组");
        }

        let [date1, date2] = newVal;
        if (!this.dateArr) {
          this.dateArr = [date1 || "", date2 || ""];
          return;
        }
        this.$set(this.dateArr, 0, date1 || "");
        this.$set(this.dateArr, 1, date2 || "");
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {},
};
</script>

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