<!-- 
/* @name    可选范围日期组件
 * @authors pen (you@example.org)
 * @date    2022-03-25 
 * @version 1.0.1
 */
 -->
<template>
  <el-date-picker
    v-model="item.value"
    :size="inputSize"
    type="daterange"
    :disabled="item.disabled"
    @change="change"
    :picker-options="item.pickerOptions || pickerOptions"
    :format="item.format"
    :value-format="item.valueFormat || 'yyyy-MM-dd'"
    :range-separator="item.rangeSeparator || '至'"
    :readonly="item.readonly"
    :style="item.inputStyle ? item.inputStyle : inputStyle"
    :clearable="item.clearable === undefined ? true : item.clearable"
    :start-placeholder="
      item.dateHolder && item.dateHolder.start
        ? item.dateHolder.start
        : '开始日期'
    "
    :end-placeholder="
      item.dateHolder && item.dateHolder.end ? item.dateHolder.end : '结束日期'
    "
  ></el-date-picker>
</template>
<script>
export default {
  name: "picker-option-date-view",
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
    inputSize: {
      type: String,
    },
    inputStyle: Object,
  },
  data() {
    let _this = this;
    return {
      minDate: "",
      pickerOptions: {
        disabledDate(time) {
          const times = 86400000 * 90; //一周的毫秒数
          let curSelectTime = new Date(_this.minDate).getTime();
          let before = curSelectTime - times; //前一周毫秒数
          let after = curSelectTime + times; //后一周毫秒数
          return time.getTime() > after || time.getTime() < before;
        },
        onPick({ maxDate, minDate }) {
          if (!maxDate) {
            _this.minDate = minDate;
          }
        },
        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]);
            },
          },
        ],
      },
    };
  },
  created() {
    if (this.item.hasOwnProperty("value")) {
      let endDate = new Date();
      let start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      let eDate =
        endDate.getFullYear() +
        "-" +
        (endDate.getMonth() + 1) +
        "-" +
        endDate.getDate() +
        " 23:59:59";
      let sDate =
        start.getFullYear() +
        "-" +
        (start.getMonth() + 1) +
        "-" +
        start.getDate() +
        " 00:00:00";
      this.item.value = [sDate, eDate];
    }
  },
  methods: {
    change() {
      this.$emit("change", this.item);
    },
  },
};
</script>
<style scoped></style>
