<template>
  <div class="titleWrap">
    <div class="box">
      <span class="shape"></span>
      <span>{{title}}</span>
    </div>
    <div class="right">
      <el-radio-group v-model="timer" size="mini" @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"
        size="mini"
        @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"
        size="mini"
      @change="changeWeek"
   :picker-options="bigin()"
      >
      </el-date-picker>


    </div>
  </div>
</template>
<script>
import {
  getNowDateAndSunday,
  getNowDateAndMonday,
} from "@/utils/date";
export default {
  props:['title','dates','isShowQuert'],
  data() {
    return {
      timer: "",
      date:this.dates,
    };
  },
  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") {
        // 获取本月的第一天 获取本月的今天
        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") {
        startDate = this.$helpers
          .dayjs(new Date())
          .set("month", 0)
          .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 == "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) {
            return time.getTime() >= Date.now()-24 * 60 * 60 * 1000;
        },
      };
    }
  },
};
</script>
<style lang="scss" scoped>
.titleWrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .right {
    margin-top: 15px;
  }
}
</style>
