<!-- 日期区间选择框 -->
<template>
  <span>
    <el-date-picker
      :style="{ width : beginDateWidth }"
      v-model="currentValue.BeginDate"
      type="date"
      :size="size"
      :disabled="disabled"
      :placeholder="currentBeginPlaceholder"
      :picker-options="beginDatePickerOptions"
      value-format="yyyy-MM-dd"
      :clearable="clearable"
    ></el-date-picker>
    <span style="margin:0 5px;">-</span>
    <el-date-picker
      :style="{ width : endDateWidth }"
      v-model="currentValue.EndDate"
      type="date"
      :size="size"
      :disabled="disabled"
      :placeholder="currentEndPlaceholder"
      :picker-options="endDatePickerOptions"
      value-format="yyyy-MM-dd"
      :clearable="clearable"
    ></el-date-picker>
  </span>
</template>
<script>
export default {
  name: "CsDateRange",
  props: {
    value: {
      type: Object,
      default: {
        BeginDate: null,
        EndDate: null,
      },
    },
    size: {
      type: String,
      default: "mini",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    placeholderBeginDate: {
      type: String,
      default: null,
    },
    placeholderEndDate: {
      type: String,
      default: null,
    },
    beginDatePickerOptions: {
      type: Object,
      default: null,
    },
    endDatePickerOptions: {
      type: Object,
      default: null,
    },
    beginDateWidth: {
      type: String,
      default: "145px",
    },
    endDateWidth: {
      type: String,
      default: "145px",
    },
  },
  components: {},
  data() {
    return {
      currentValue: {
        BeginDate: null,
        EndDate: null,
      },
    };
  },
  //监听属性 类似于data概念
  computed: {
    /* 开始日期占位符提示 */
    currentBeginPlaceholder() {
      if (this.placeholderBeginDate) {
        return this.placeholderBeginDate;
      } else {
        return this.$t("common.placeholderBeginDate");
      }
    },

    /* 结束日期占位符提示 */
    currentEndPlaceholder() {
      if (this.placeholderEndDate) {
        return this.placeholderEndDate;
      } else {
        return this.$t("common.placeholderEndDate");
      }
    },
  },
  //监控data中的数据变化
  watch: {
    currentValue: {
      handler(val) {
        const item = {
          BeginDate: null,
          EndDate: null,
        };

        if (val) {
          if (val.BeginDate) {
            item.BeginDate = this.$moment(val.BeginDate).format("YYYY-MM-DD");
          }
          if (val.EndDate) {
            item.EndDate = this.$moment(val.EndDate).format("YYYY-MM-DD");
          }
        }
        this.$emit("input", item);
      },
      immediate: false, // 首次绑定是否执行
      deep: true, // 对象内部的属性监听，也叫深度监听
    },
    value: {
      handler(val) {
        this.setDate();
      },
      immediate: false, // 首次绑定是否执行
      deep: true, // 对象内部的属性监听，也叫深度监听
    },
  },
  //方法集合
  methods: {
    setDate() {
      if (this.value) {
        if (this.value.BeginDate) {
          this.currentValue.BeginDate = this.$moment(
            this.value.BeginDate
          ).format("YYYY-MM-DD");
        } else if (this.value.beginDate) {
          this.currentValue.BeginDate = this.$moment(
            this.value.beginDate
          ).format("YYYY-MM-DD");
        } else {
          this.currentValue.BeginDate = null;
        }

        if (this.value.EndDate) {
          this.currentValue.EndDate = this.$moment(this.value.EndDate).format(
            "YYYY-MM-DD"
          );
        } else if (this.value.endDate) {
          this.currentValue.EndDate = this.$moment(this.value.endDate).format(
            "YYYY-MM-DD"
          );
        } else {
          this.currentValue.EndDate = null;
        }
      } else {
        this.currentValue = {
          BeginDate: null,
          EndDate: null,
        };
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.value) {
      if (this.value.BeginDate) {
        this.currentValue.BeginDate = this.$moment(this.value.BeginDate).format(
          "YYYY-MM-DD"
        );
      } else if (this.value.beginDate) {
        this.currentValue.BeginDate = this.$moment(this.value.beginDate).format(
          "YYYY-MM-DD"
        );
      }

      if (this.value.EndDate) {
        this.currentValue.EndDate = this.$moment(this.value.EndDate).format(
          "YYYY-MM-DD"
        );
      } else if (this.value.endDate) {
        this.currentValue.EndDate = this.$moment(this.value.endDate).format(
          "YYYY-MM-DD"
        );
      }
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
</style>