<!-- 日期周选择框 -->
<template>
  <span style="display: inline-block; width: 220px; position: relative">
    <el-date-picker
      type="week"
      v-model="currentValue"
      class="week-select-picker"
      :size="size"
      :picker-options="{ firstDayOfWeek: 1 }"
      @change="changeWeek"
      :clearable="false"
      icon
    ></el-date-picker>
    <el-input
      class="week-show-picker"
      v-model="week"
      prefix-icon="el-icon-date"
      size="mini"
    ></el-input>
  </span>
</template>
<script>
export default {
  name: "CsFieldWeek",
  props: {
    value: {
      //type: Object,
      default: {
        BeginDate: null,
        EndDate: null,
      },
    },
    size: {
      type: String,
      default: "mini",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  components: {},
  data() {
    return {
      currentValue: {},
      week: null,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    currentValue: {
      handler(val) {
        const item = {
          BeginDate: null,
          EndDate: null,
        };

        if (val) {
          item.BeginDate = this.$moment(val)
            .add(-1, "days")
            .format("YYYY-MM-DD");
          item.EndDate = this.$moment(item.BeginDate)
            .add(6, "days")
            .format("YYYY-MM-DD");
        }
        this.$emit("input", item);
      },
      immediate: false, // 首次绑定是否执行
      deep: true, // 对象内部的属性监听，也叫深度监听
    },
  },
  //方法集合
  methods: {
    /** 选择周显示时间段 */
    changeWeek(val) {
      let startTime = this.$moment(val.valueOf() - 86400000).format(
        "YYYY-MM-DD"
      );
      let endTime = this.$moment(val.valueOf() + 5 * 86400000).format(
        "YYYY-MM-DD"
      );
      this.week = "{0} ~ {1}".format(startTime, endTime); // 2020-11-02~2020-11-08
    },

    setDate(val) {
      let currentDate;
      let currentWeek;
      if (val) {
        if (val instanceof Date || typeof val == "string") {
          currentWeek = new Date(val).getDay();
          currentDate = val;
        } else {
          if (val.BeginDate) {
            currentWeek = new Date(val.BeginDate).getDay();
            currentDate = val.BeginDate;
          } else if (val.beginDate) {
            currentWeek = new Date(val.beginDate).getDay();
            currentDate = val.beginDate;
          } else if (val.begindate) {
            currentWeek = new Date(val.begindate).getDay();
            currentDate = val.begindate;
          }
        }
      } else {
        currentWeek = new Date().getDay();
        currentDate = this.$moment();
      }
      let minusDay = 2 - currentWeek;
      this.currentValue = new Date(
        this.$moment(currentDate).add(minusDay, "days").format("YYYY-MM-DD")
      );
      this.changeWeek(this.currentValue);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.setDate(this.value);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
.week-select-picker {
  width: 100%;
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  opacity: 0;
}
.week-show-picker {
  width: 100%;
}
</style>