<template>
  <div class="fl time">
    <el-date-picker
      v-model="startTime"
      class="date-picker"
      type="date"
      :size="size"
      style="width: 170px"
      placeholder="开始日期"
      value-format="timestamp"
      :picker-options="pickerOptions1"
      :editable="false"
      :clearable="true"
      :disabled="isEdit"
      @change="timeChange"
    />
    <samp>至</samp>
    <el-date-picker
      :size="size"
      v-model="endTime"
      class="date-picker"
      style="width: 170px"
      type="date"
      placeholder="结束日期"
      :disabled="isEdit"
      :picker-options="pickerOptions2"
      :editable="false"
      value-format="timestamp"
      :clearable="true"
      @change="timeChange"
    />
  </div>
</template>

<script>
// 选择时间段(只有日期)组件
// timeReturned 返回值{startTime: Number,endTime: Number}
export default {
  name: "PeriodDatePicker",
  props: {
    start: {
      type: String,
      default: "",
    },
    end: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: "mini",
    },
  },
  data() {
    return {
      startTime: "",
      endTime: "",
      isEdit: this.disabled,
      pickerOptions1: {
        disabledDate: (time) => {
          if (this.endTime != null && this.endTime != "" && time) {
            return time.getTime() >= this.endTime;
          }
        },
      },
      pickerOptions2: {
        disabledDate: (time) => {
          if (this.startTime != null && this.startTime != "" && time) {
            return time.getTime() <= this.startTime;
          }
        },
      },
    };
  },
  watch: {
    disabled(a, b) {
      this.isEdit = a;
      //  console.log(a, b,this.isEdit);
    },
  },
  mounted() {
    // setTimeout(() => {
    //   this.isEdit = this.disabled;
    //   this.startTime = this.start;
    //   this.endTime = this.end;
    // }, 500);
  },
  methods: {
    timeChange() {
      if (
        this.startTime !== "" &&
        this.startTime !== null &&
        this.endTime !== "" &&
        this.endTime !== null
      ) {
        if (
          this.endTime &&
          this.endTime - this.startTime > 24 * 3600 * 365 * 1000
        ) {
          this.$message.error("时间跨度不能超过一年");
          this.startTime = "";
          this.endTime = "";
          this.timeReturned();
          return;
        } else if (this.endTime < this.startTime) {
          this.$message.error("结束时间不大于开始时间！");
          this.startTime = "";
          this.endTime = "";
          this.timeReturned();
          return;
        } else {
          this.timeReturned();
        }
      } else {
        this.timeReturned();
      }
    },
    timeReturned() {
      this.$emit("timeReturned", {
        startTime: this.startTime == null ? "" : this.startTime,
        endTime: this.endTime == null ? "" : this.endTime,
      });
    },
  },
};
</script>
<style lang="scss">
.date-picker.el-input {
  width: 150px !important;
}
</style>
