<template>
  <div class="xd-stat-trade-date">
    <el-select style="width: 80px;" v-model="cyc_type" @change="handleType">
      <el-option v-for="(item,index) in typeOptions" :key="index" :label="item.label" :value="item.value"></el-option>
      <!-- <el-option label="按月" value="month"></el-option>
      <el-option label="按年" value="year"></el-option> -->
    </el-select>
    <div v-show="cyc_type === 'month'">
      <el-date-picker
        v-if="isRangeMonth"
        v-model="monthValue"
        value-format="timestamp"
        type="monthrange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
        @change="handleRangeChange"
        :picker-options="monthPickerOptions">
      </el-date-picker>
      <el-date-picker
        v-else
        v-model="monthValue"
        value-format="timestamp"
        type="month"
        placeholder="选择月"
        @change="handleCommonChange"
      >
      </el-date-picker>
    </div>
    <div v-show="cyc_type === 'year'">
      <el-date-picker
        v-model="yearValue"
        value-format="timestamp"
        type="year"
        placeholder="选择年"
        @change="handleCommonChange"
      >
      </el-date-picker>
    </div>
    
  </div>
</template>

<script>
  import moment from 'moment';
  export default {
    props: {
      isRangeMonth: {
        type: Boolean,
        default: false
      },
      defaultDate: {
        type: Array | Number,
        default: () => []
      },
      defaultType: {
        type: String,
        default: "month"
      },
      typeOptions: {
        type: Array,
        default: [
          {
            label: "按月",
            value: "month"
          },
          {
            label: "按年",
            value: "year"
          }
        ]
      }
    },
    data(){
      return {
        cyc_type: "month",
        monthValue: "",
        yearValue: "",
        monthPickerOptions: {
          shortcuts: [{
            text: '本月',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()]);
            }
          }, {
            text: '今年至今',
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit('pick', [start, end]);
            }
          }]
        }
      }
    },
    created(){
      this.cyc_type = this.defaultType;
      let lastMonth = moment().subtract(1, 'month').startOf('month').format("x");
      this.yearValue = moment().startOf('year').format("x");
      if(this.cyc_type === 'month'){
        if(this.isRangeMonth){
          if(this.defaultDate && this.defaultDate[0] && this.defaultDate[1]){
            this.monthValue = this.defaultDate;
          }else{
            this.monthValue = [lastMonth, lastMonth];
          }
          this.handleRangeChange(this.monthValue);
        }else{
          this.monthValue = lastMonth;
          this.handleCommonChange(this.monthValue);
        }
      }else if(this.cyc_type === 'year'){
        this.handleCommonChange(this.yearValue);
      }
    },
    methods: {
      handleType(value){
        if(value === 'month'){
          if(this.isRangeMonth) this.handleRangeChange(this.monthValue);
          else this.handleCommonChange(this.monthValue);
        }else{
          this.handleCommonChange(this.yearValue);
        }
      },
      handleRangeChange(value){
        console.log('handleRangeChange', value);
        let data = {
          cyc_type: this.cyc_type
        }
        if(value && value[0] && value[1]){
          data['time_range_start'] = Number(value[0]/1000).toFixed(0);
          data['time_range_end'] = Number(value[1]/1000).toFixed(0);
        }
        this.$emit('input', data);
      },
      handleCommonChange(value){
        console.log('handleCommonChange', value);
        this.$emit('input', {
          cyc_type: this.cyc_type,
          time_range_start: value ? Number(value/1000).toFixed(0) : "",
        });
      },
    }
  }
</script>
<style lang="less" scoped>
.xd-stat-trade-date{
  display: flex;
  align-items: center;
}
</style>