<template>
  <div class="titleWrap">
    <div class="box">
      <span class="shape"></span>
      <span>{{ title }}</span>
    </div>
    <div class="right">
      <el-radio-group v-model="timer" @change="changeQuick" v-if="isShowQuert">
        <el-radio-button label="month">本月</el-radio-button>
        <el-radio-button label="year">本年度</el-radio-button>
        <el-radio-button label="lastYear">去年</el-radio-button>
      </el-radio-group>
      <el-date-picker
        v-if="isShowQuert"
        v-model="date"
        type="daterange"
        style="width: 300px; padding: 0 10px"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        @change="changeValue"
        :picker-options="bigin()"
      >
      </el-date-picker>
      <el-date-picker
        v-else
        v-model="date"
        type="daterange"
        style="width: 300px; padding: 0 10px"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        @change="changeWeek"
        :picker-options="bigin()"
      >
      </el-date-picker>
    </div>
  </div>
</template>
<script>
import { getNowDateAndSunday, getNowDateAndMonday } from "@/utils/date";
export default {
  props: ["title", "dates", "isShowQuert", "endDate"],

  data() {
    return {
      timer: "",
      date: this.dates,
    };
  },
  mounted() {},

  watch: {
    dates(val) {
      this.date = val;
    },
  },

  methods: {
    changeWeek(val) {
      this.date = [getNowDateAndMonday(val[0]), getNowDateAndSunday(val[1])];
      this.submitDate(this.date);
    },
    changeValue(val) {
      this.timer = "";
      this.date = val;
      this.submitDate(this.date);
    },
    changeQuick(val) {
      let startDate;
      let endDate;
      if (val == "month") {
        // 获取本月的第一天 获取本月的今天
        let nowDate = this.$helpers.dayjs(new Date()).get("date");

        if (nowDate == 1) {
          startDate = this.$helpers
            .dayjs()
            .add(-1, "month")
            .startOf("month")
            .format("YYYY-MM-DD");
          endDate = this.$helpers
            .dayjs(new Date())
            .subtract(1, "day")
            .format("YYYY-MM-DD");
        } else {
          startDate = this.$helpers
            .dayjs(new Date())
            .set("date", 1)
            .format("YYYY-MM-DD");
          endDate = this.$helpers
            .dayjs(new Date())
            .subtract(1, "day")
            .format("YYYY-MM-DD");
        }
        this.date = [startDate, endDate];
        this.submitDate(this.date);
      } else if (val == "year") {
        let nowDate = this.$helpers.dayjs(new Date()).get("date");
        let nowMonth = this.$helpers.dayjs(new Date()).get("month") + 1;
        if (nowDate == 1 && nowMonth == 1) {
          startDate = this.$helpers
            .dayjs(new Date())
            .add(-1, "year")
            .set("month", 0)
            .set("date", 1)
            .format("YYYY-MM-DD");
          endDate = this.$helpers
            .dayjs(new Date())
            .subtract(1, "day")
            .format("YYYY-MM-DD");
        } else {
          startDate = this.$helpers
            .dayjs(new Date())
            .set("month", 0)
            .set("date", 1)
            .format("YYYY-MM-DD");
          this.endDate
            ? (endDate = this.endDate)
            : (endDate = this.$helpers
                .dayjs(new Date())
                .subtract(1, "day")
                .format("YYYY-MM-DD"));
        }
        this.date = [startDate, endDate];
        this.submitDate(this.date);
      } else if (val == "lastYear") {
        startDate = this.$helpers
          .dayjs(new Date())
          .subtract(1, "year")
          .set("month", 0)
          .set("date", 1)
          .format("YYYY-MM-DD");
        endDate = this.$helpers
          .dayjs()
          .subtract(1, "year")
          .endOf("year")
          .format("YYYY-MM-DD");
        this.date = [startDate, endDate];
        this.submitDate(this.date);
      }
    },
    submitDate(date) {
      this.$emit("changeValue", date);
    },
    bigin() {
      let self = this;
      return {
        firstDayOfWeek: 1,
        disabledDate(time) {
          if (self.endDate) {
            let endTime = self.$helpers.dayjs(self.endDate).valueOf();
            return time.getTime() > endTime;
          } else {
            return time.getTime() >= Date.now() - 24 * 60 * 60 * 1000;
          }
        },
      };
    },
    initStatue(val) {
      if (val) {
        this.timer = val;
      } else {
        this.timer = "";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.titleWrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 55px;
}
</style>
