<template>
<!--  <el-form ref="form" label-width="80px" class="demo-form-inline" :inline="true">-->
  <div>
    <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
       <el-form-item label="时间间隔:">
        <el-select  v-model="interval" placeholder="请选择">
        <el-option
          v-for="item in timeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
       </el-form-item>
       <el-form-item>
        <el-date-picker 
        :readonly="pickDisabled"
        v-model="timeValue"
        type="daterange"
        :clearable="false"
        format="yyyy-MM-dd"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right">
      </el-date-picker>
    
       </el-form-item>
       <el-form-item>
        <el-button :disabled="backDisabled" type="primary" icon="el-icon-d-arrow-left" @click="preClick"></el-button>
        <el-button @click="nowTime" type="primary">当前</el-button>
        <el-button :disabled="preDisabled" type="primary" icon="el-icon-d-arrow-right"></el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="yearonyear" type="primary" >同比</el-button>
        <el-button @click="ringratio" type="primary">环比</el-button>
        <el-button @click="querfromdata" type="primary" icon="el-icon-search">查询</el-button>
        
        <el-button type="primary" icon="el-icon-thumb" size="mini" circle></el-button>
      </el-form-item>
    </el-form>
    
  </div>
<!--  </el-form>-->
</template>

<script>
export default {
  name: "index",
  props:{
  
  },
  watch: {
    interval(val) {
      if (val != 5) {
        let endTime = this.getEndTime();
        let startTime = this.getStartTime(this.interval, endTime)
        this.timeValue = [startTime, endTime]
        this.pickDisabled = false
        this.buttonShow = true
      } else {
        this.buttonShow = false
        this.pickDisabled = false
      }
    }
  },
  created() {

    let endTime = this.getEndTime();
    let startTime = this.getStartTime(this.interval, endTime)
    this.timeValue = [startTime, endTime]

  },
  data() {
    return {
      ruleForm:{},
      buttonShow: true, //向前向后按钮显示隐藏控制按钮
      pickDisabled: true,//时间组件只读控制
      falg:false,
      falg1:true,
      interval: 1,//类型 0.年份 1.季度
      timeOptions: [{label: '年份', value: 1}, {label: '季度', value: 2}, {label: '月份', value: 3}, {
        label: '周',
        value: 4
      }, {label: '自定义', value: 5}],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      timeValue: [],
      backDisabled: false,
      preDisabled: false

    };
  },
  methods: {
    // 获取当前日期，精确到日
    getEndTime() {
      var now = new Date();
      var sep = "-";
      var year = now.getFullYear();
      var month = now.getMonth() + 1;
      if (month < 10) {
        month = "0" + month;
      }
      var date = now.getDate();
      if (date < 10) {
        date = "0" + date;
      }
      // 拼接当前的日期
      var endTime = year + sep + month + sep + date;
      return endTime;
    },
    // 获取起始日期
    getStartTime(interval, endTime) {
      var sep = "-";
      var arr = endTime.split("-");
      var year = arr[0];
      var month = arr[1];
      var date = arr[2];
      // 按月份间隔
      if (interval == 3) {
        date = "01";
        // 按季度间隔
      } else if (interval == 2) {
        if (month > 0 & month < 4) {// 第一季度
          month = "01";
          date = "01";
        } else if (month > 3 && month < 7) {// 第二季度
          month = "04";
          date = "01";
        } else if (month > 6 && month < 10) {// 第三季度
          month = "07";
          date = "01";
        } else {// 第四季度
          month = 10;
          date = "01";
        }
      } else if (interval == 1) {
        month = "01";
        date = "01";
      } else if (interval == "半年") {
        if (month < 7) {
          month = "01";
          date = "01";
        } else {
          month = "07";
          date = "01";
        }
      } else if (interval == 4) {
        //周
        var start = new Date(year, month - 1, date);
        var dayOfWeek = (start.getDay() == 0) ? 7 : start.getDay(); // 如果为周日，则置为7天
        start.setDate(start.getDate() - dayOfWeek + 1);// 计算开始时间

        if (this.formatTime(new Date()) != endTime) { // 如果结束时间不是当前时间
          var end = new Date(start);
          end.setDate(end.getDate() + 6);
          //  $("#endTime").val(this.formatTime(end));
        }

        return this.formatTime(start);
      }

      var startTime = year + sep + month + sep + date;
      return startTime;
    },
    // 时间格式化
    formatTime(time) {
      return time.getFullYear() + '-' + ((time.getMonth() + 1) < 10 ? '0' : '') + (time.getMonth() + 1) + '-' + (time.getDate() < 10 ? '0' : '') + time.getDate();
    },
    //向前
    preClick() {
      let interval = this.interval
      let startTime = this.timeValue[0]
      let endTime = this.timeValue[1]
      let year = parseInt(startTime.substring(0, 4));
      let month = parseInt(startTime.substring(5, 7));
      let date = parseInt(startTime.substring(8, 10));

      if (interval == 3) {
        // 换年份
        if (month == 1) {
          year = year - 1;
          startTime = year + "-12-01";
          endTime = year + "-12-31";
        } else if (month <= 10) {
          month = month - 1;
          startTime = year + "-0" + month + "-01";
          let day = this.getDays(year, month);
          endTime = year + "-0" + month + "-" + day;
        } else {
          month = month - 1;
          startTime = year + "-" + month + "-01";
          let day = this.getDays(year, month);
          endTime = year + "-" + month + "-" + day;
        }
      } else if (interval == 4) {
        //根据开始时间推
        let start = new Date(year, month - 1, date);
        start.setDate(start.getDate() - 7);
        startTime = this.formatTime(start);
        var end = new Date(start);
        end.setDate(start.getDate() + 6);
        endTime = this.formatTime(end);
      } else if (interval == 2) {
        // 换年份
        if (month == 1) {
          year = year - 1;
          startTime = year + "-10-01";
          endTime = year + "-12-31";
        } else {
          // 还是本年
          month = month - 3;
          startTime = year + "-0" + month + "-01";
          month = month + 2;
          var day = this.getDays(year, month);
          endTime = year + "-0" + month + "-" + day;
        }
      } else if (interval == 5) {

      } else if (interval == 1) {
        year = year - 1;
        startTime = year + "-01-01";
        endTime = year + "-12-31";
      } else if (interval == 6) {
        if (month <= 6) {
          year = year - 1;
          startTime = year + "-07-01";
          endTime = year + "-12-31";
        } else {
          startTime = year + "-01-01";
          endTime = year + "-06-30";
        }
      }

      this.timeValue = [startTime, endTime]

      // 判断向后键的状态
      var temp = this.getEndTime();
      this.timeStatus(temp, endTime);
    },
    //当前按钮点击事件
    nowTime() {
      let interval = this.interval
      let endTime = this.getEndTime();
      let startTime = this.getStartTime(interval, endTime);
      this.timeValue = [startTime, endTime]
      // 判断向后键的状态
      let temp = this.getEndTime();
      this.timeStatus(temp, endTime);
    },
    //判断向后按钮
    timeStatus(temp, endTime) {
      // 判断next按钮的状态
      if (temp == endTime) {
        this.preDisabled = true
      } else {
        this.preDisabled = false
      }
    },
    // 获取月份的天数
    getDays(year, month) {
      let max = new Date(year, month, 0).getDate();
      return max;
    },
    querfromdata(){
       var data =this.timeValue
      this.$emit("querfromdata",data);
    },
    yearonyear(){

    },
    ringratio(){
      
    }
  }
}
</script>

<style scoped>
</style>
