<template>
  <div class="inline-date">
    <div>
      <el-date-picker
        ref="startDate"
        clearable
        v-model="startDate"
        align="right"
        :type="type"
        placeholder=">="
        @change="startDateChange"
      ></el-date-picker>
    </div>
    <div style="margin-top: 8px">
      <el-date-picker
        ref="endDate"
        clearable
        v-model="endDate"
        align="right"
        :type="type"
        placeholder="<="
        @change="endDateChange"
      ></el-date-picker>
  </div>
  </div>
</template>

<script>
export default {
  name: "InlineDate",
  props: {
    format: {
      type: String
    },
    type: {
      type: String,
      default: 'date'
    },
    value: {
      type: [Array,String],
      default: ""
    },
  },
  watch: {
    value: {
      handler: function (val, oldVal) {
        if (val) {
          if (!this.$_.isEqual(val, oldVal)) {
            if (Array.isArray(val)) {
                this.startDate = val[0] ? val[0] : ''
                this.endDate = val[1] ? val[1] : ''
            } else {
              const array = val.split(this.separators)
              if (array.length === 2) {
                this.startDate = array[0]
                this.endDate = array[1]
              }
            }
          }
        } else {
          this.startDate = ''
          this.endDate = ''
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      startDate: "",
      endDate: "",
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          },
          {
            text: "30天前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", date);
            }
          },
          {
            text: "90天前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", date);
            }
          },{
            text: "一年前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit("pick", date);
            }
          },{
            text: "两年前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 365 * 2);
              picker.$emit("pick", date);
            }
          },{
            text: "三年前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 365 * 3);
              picker.$emit("pick", date);
            }
          }
        ]
      }
    };
  },
  methods: {
    handleInput() {
      this.$refs.startDate.focus();
      this.$refs.endDate.focus();
    },
    startDateChange(date) {
      this.startDate = date
      this.$emit("end", this.fullDateArray, date);
    },
    endDateChange(date) {
      this.endDate = date
      this.$emit("end", this.fullDateArray, date);
    },
    reset () {
      this.startDate = ''
      this.endDate = ''
    }
  },
  computed: {
    fullDateArray() {
      const fullDateArray = ['','']
      let format = this.format
      if (!format) format = 'yyyy-mm-dd hh:mm:ss'
      if (format === 'yyyy-mm-dd hh24:mi:ss') {
        format = 'yyyy-mm-dd hh:mm:ss'
      }
      if (this.startDate) {
        let startDate = this.startDate
        startDate = this.$time.formatTime(startDate, format)
        fullDateArray[0] = startDate
      }
      if (this.endDate) {
        let endDate = this.endDate
        endDate = this.$time.formatTime(endDate, format)
        fullDateArray[1] = endDate
      }
      return fullDateArray;
    },
  }
};
</script>
