<template>
  <div>
    <div  v-if="type === 'select'" class="date-query">
      <Select v-model="selectTime"  @on-change="dateQuery" class="select-wrap">
        <Option value="all">全部</Option>
        <Option v-for="(item,index) in section"
                :key="item.value"
                :value="item.value"
        >{{item.label}}</Option>
        <Option value="custom"> 自定义 </Option>
      </Select>
      <div v-if="isShowDate" class="custom-wrap">
        <DatePicker type="date"
                    placeholder="Select date"
                    style="width: 120px;margin-left: 10px"
                    v-model="startDate"
                    @on-change="submitStartDate"
                    @on-clear = "cleanStartDate"
        ></DatePicker>
        <span>-</span>
        <DatePicker type="date"
                    placeholder="Select date"
                    style="width: 120px"
                    v-model="endDate"
                    @on-change="submitEndDate"
                    @on-clear = "cleanEndDate"
        ></DatePicker>
      </div>
    </div>
    <div   v-if="type==='button'" class="enum-query-button">
      <div :class="{active:isActive === -1,commonClass}" @click="submitDate('all',-1)">
        全部
        <span class="enum-item-separator">|</span>
      </div>
      <div v-for="(item,index) in section"
           :key="item.value"
           :value="item.value"
           @click="submitDate(item.value,index)"
           :class="{active:isActive === index,commonClass}">
        {{item.label}}
        <span class="enum-item-separator" v-if="index !== (section.length-1)">|</span>
      </div>
      <div  class="custom-wrap">
        <DatePicker type="date"
                    placeholder="Select date"
                    style="width: 120px;margin-left: 10px"
                    v-model="startDate"
                    @on-change="submitStartDate"
                    @on-clear = "cleanStartDate"
        ></DatePicker>
        <span>-</span>
        <DatePicker type="date"
                    placeholder="Select date"
                    style="width: 120px"
                    v-model="endDate"
                    @on-change="submitEndDate"
                    @on-clear = "cleanEndDate"
        ></DatePicker>
      </div>
    </div>
  </div>
</template>
<script>
import {oneOf} from "../assist/assist";
export default{
    model:{
     event:'on-change',
    },
    props:{
      field:String, //查询字段
      section:Array, //自定义查询时间段
      type:{
        String,
        validator(value){
          return oneOf(value,['select', 'button'])
        },
        default:'select',
      },//样式类型
    },
    data(){
      return{
        selectTime:'all',
        isShowDate:false,
        startDate:'',
        endDate:'',
        commonClass: 'commonClass',
        isActive:-1,
      }
    },
    methods: {
      //查询方法
      dateQuery(selectTime){
        if(selectTime === 'custom'){
          this.isShowDate = true;
          this.getQueryTime(selectTime,"")
        }else{
          this.isShowDate = false;
          this.startDate = "";
          this.endDate = "";
          this.axios.post(this.$store.state.sysApi+'/sys/user/getCurrentTime').then(
            res=>{
              let queryTime = this.getQueryTime(selectTime,res)
              this.$emit('on-change',queryTime);
            }
          ).catch(error=>{
            this.$Message.info("请求服务器时间失败！")
          })
        }
      },

      //解析section.value
      getQueryTime(selectTime,currTime){
        let currDay = new Date(currTime);
        let currYear = currDay.getFullYear();
        currYear += (currYear < 2000) ? 1900 : 0;
        let startTime =''; let endTime ='';
        let selectedTime = selectTime.replace(/\s+/g,"");
        if(selectedTime.indexOf("@currDay")=== 0 ) {
          let dayCount = parseInt(selectedTime.slice(8));
          if(selectedTime === "@currDay"){dayCount = 0;}
          currTime +=   1000 * 60 * 60 * 24 * dayCount; //开始毫秒
          startTime = new Date(currTime);
          endTime = new Date(currTime+1000 * 60 * 60 * 24 );
        }else if(selectedTime.indexOf("@currWeek")=== 0){
          let weekCount = parseInt(selectedTime.slice(9));
          let dayOfWeek = currDay.getDay();
          if(selectedTime==='@currWeek'){weekCount=0;}
          currTime +=  1000 * 60 * 60 * 24 * (weekCount*7-dayOfWeek+1);//开始毫秒
          startTime = new Date(currTime);
          endTime = new Date(currTime+1000 * 60 * 60 * 24 *7);
        }else if(selectedTime.indexOf("@currMouth")=== 0){
          let mouthCount = parseInt(selectedTime.slice(10));
          let currMonth = currDay.getMonth();
          if(selectedTime==='@currMouth'){mouthCount=0;}
            startTime = new Date(currYear, currMonth+mouthCount, 1);
            endTime = new Date(currYear,currMonth+mouthCount+1, 1);
        }else if(selectedTime.indexOf("@currQuarter")=== 0){
          let quarterCount = parseInt(selectedTime.slice(12));
          let currMonth = currDay.getMonth();
          let quarterStartMonth = this.getQuarterStartMonth(currMonth);
            if(selectedTime === "@currQuarter"){quarterCount = 0;}
            startTime = new Date(currYear,quarterStartMonth+3*quarterCount, 1);
            endTime = new Date(currYear,quarterStartMonth+3*quarterCount+3, 1);
        } else if(selectedTime.indexOf("@currYear")=== 0){
          let yearCount = parseInt(selectedTime.slice(9));
            if(selectedTime === "@currYear"){yearCount = 0;}
            startTime = new Date(currYear+yearCount,0, 1);
            endTime = new Date(currYear+yearCount+1,0, 1);
        }else {
          if(selectedTime === "between"){
            this.isShowDateRange = true;
            this.isShowDate = false;
          }else if(selectedTime === "all"){
          }else{
            this.isShowDate = true;
            this.isShowDateRange = false;
          }
        }
        let startDate ="";
        let endDate = "";
        if(selectedTime !== "all"){
          startDate = this.formatDate(startTime);
          endDate = this.formatDate(endTime);
        }
        let queryTime = {
          sub:startDate,
          upper:endDate,
          name:this.field
        };
        return queryTime;
      },

      //日期格式化
      formatDate(date) {
        let year = date.getFullYear();
        let month = date.getMonth()+1;
        let day = date.getDate();
        if(month < 10){
          month = "0" + month;
        }
        if(day < 10){
          day = "0" + day;
        }
        return (year+"-"+month + "-" + day +" 00:00");
      },

      //获得本季度的开始月份
      getQuarterStartMonth(month){
      let quarterStartMonth = 0;
       if( month<3){
      quarterStartMonth = 0;
       }
      if(2<month && month<6){
        quarterStartMonth = 3;
      }
       if(5<month && month<9){
        quarterStartMonth = 6;
      }
       if(month>8){
        quarterStartMonth = 9;
      }
      return quarterStartMonth;
  },

      //日期选择器查询
      submitStartDate(date){
        this.isActive = -2;
        this.startDate = date;
        this.submitPickerDate();
      },
      submitEndDate(date){
        this.isActive = -2;
        this.endDate = date;
        this.submitPickerDate();
      },
      //清除查询
      cleanStartDate(){
        this.isActive = -2;
        this.startDate = '';
        this.submitPickerDate();
      },
      cleanEndDate(){
        this.isActive = -2;
        this.endDate = '';
        this.submitPickerDate();
      },
      //返回数据组装
      submitPickerDate(){
        if(!this.startDate && !this.endDate){
          this.isActive = -1;
        }
        let queryTime = {
          sub: this.startDate,
          upper:this.endDate,
          name:this.field
        };
        this.$emit('on-change',queryTime);
      },

      //type=button点击事件
      submitDate(value,index){
        this.isActive = index;
        let selectedTime = value;
        this.dateQuery(selectedTime);
  }
  }
  }
</script>
<style scoped>
  .date-query{
    display: flex;
    flex-wrap: wrap;
  }
  .select-wrap{
    width: 80px;
  }
  .custom-wrap span{
    width: 20px;
    text-align: center;
  }
  .search-icon{
    line-height: 32px;
    height: 32px;
    color: #808695;
    border: 1px solid #dcdee2;
    background-color: #f8f8f9; width: 30px;
    text-align: center;
    border-radius: 4px;
  }
  .enum-query-button{
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    cursor: pointer;
  }
  .commonClass{
    color: #2b85e4;
    margin: 0 15px 0 0;
    font-size: 13px;
  }
  .active{
    color: red;
  }
  .active > .enum-item-separator{
    color: #2b85e4;
  }
  .enum-item-separator{
    margin-left: 5px;
  }
</style>
