<!--
 * @Author: huangl
 * @Date: 2020-04-17 16:12:27
 * @LastEditors: huangl
 * @LastEditTime: 2020-05-06 17:04:33
 * @Description: file content
 * @FilePath: \vsuite\src\components\date\base\quarter-table.vue
 -->
<template>
  <div :class="classes">
      <template  v-for="(cell, index) in cells">
        <span :class="getCellCls(cell)" :key="index">
          <em :index="index+1" @click="handleClick(cell)">{{ cell.text }}</em>
        </span>
      </template>
   </div>
</template>
<script>
import { getDateRang, getquarterRange, getDateByquarter } from "../util";
import { deepCopy } from "../../../utils/assist";
import Locale from "../../../mixins/locale";
import { prefix } from "../../var";
const datePrefix = prefix + "date-cells";

export default {
  mixins: [Locale],
  props: {
    type: {
      default: "range"
    },
    date: {},
    minDate: {},
    maxDate: {},
    min: {},
    max: {},
    maxRangeDay: "",
    rows: {
      type: [String, Number],
      default: 4
    },
    maxRangequarter: "",
    handleDate: {},
    quarter: {
      type: Number
    },
    disabledDate: {},
    selectionMode: {
      default: "quarter"
    },
    beginStatus: {}
  },
  data() {
    return {
      datePrefix: datePrefix,
      handleDateType: this.handleDate,
      begin: false //默认点击自然月不显示选中，选择之后才选中
    };
  },
  watch: {
    handleDate(val) {
      this.handleDateType = this.handleDate;
    },
    beginStatus(val) {
      this.begin = val;
    }
  },
  computed: {
    classes() {
      return [`${datePrefix}`, `${datePrefix}-quarter`, `${datePrefix}-quarter-row-${this.rows}`];
    },
    cells() {
      let cells = [];
      const cell_tmpl = {
        text: "",
        value:"",
        date:"",
        selected: false,
        disabled: false,
        start: false,
        end: false,
        range: false
      };
      const minDate = new Date(this.minDate);
      const maxDate = new Date(this.maxDate);
      const lastDayInMaxDate = this.getLastDaysInMonth(
        maxDate.getFullYear(),
        Number(maxDate.getMonth()) + 1
      );

      const lastMaxDate = new Date(
        maxDate.getFullYear(),
        maxDate.getMonth(),
        lastDayInMaxDate
      );
      for(let i = 0;i<4;i++){
        const cell = deepCopy(cell_tmpl);
        cell.text = "Q"+(i + 1); 
        cell.value = i+1
        const date = new Date(this.date);
        date.setMonth(3*i);
        date.setDate(1);
        cell.date = date;
        cell.disabled =
          typeof this.disabledDate === "function" && this.disabledDate(date);
        // if(this.type=="quarterrange"){
          //选择时间段的开始时间
          if (
            date.getFullYear() === minDate.getFullYear() &&
            (3*i) === Number(minDate.getMonth()) &&
            1 <= Number(minDate.getDate())
          ) {
            cell.selected = true;
            cell.start = true;
          }
          //选择时间段的结束时间
          if (
            date.getFullYear() === maxDate.getFullYear() &&
            (3*i+2) === Number(maxDate.getMonth())
            &&
            lastDayInMaxDate >= Number(maxDate.getDate())
          ) {
            cell.selected = true;
            cell.end = true;
          }
          //选择时间段的开始时间到结束
          if (
            date.getFullYear() >= minDate.getFullYear() &&
            date.getFullYear() <= maxDate.getFullYear()
          ) {
            if (
              minDate.getFullYear() === maxDate.getFullYear() &&
              (3*i) >= Number(minDate.getMonth()) &&
              (3*i+2) <= Number(maxDate.getMonth())
            ) {
              cell.range = true;
            } else if (minDate.getFullYear() != maxDate.getFullYear()) {
              cell.range =
                (date.getFullYear() === minDate.getFullYear() &&
                  (3*i) >= Number(minDate.getMonth())) ||
                (date.getFullYear() === maxDate.getFullYear() &&
                  (3*i+2) <= Number(maxDate.getMonth())) ||
                (date.getFullYear() > minDate.getFullYear() && date.getFullYear() < maxDate.getFullYear());
            }
          }
        // }else{
        //   cell.selected = Number(cell.value)===i+1
        // }
        cells.push(cell);
      }
      return cells;
    }
  },
  methods: {
    getCellCls(cell) {
      return [
        `${datePrefix}-cell`,
        {
          [`${datePrefix}-cell-selected`]: cell.selected,
          [`${datePrefix}-cell-selected-start`]: cell.start,
          [`${datePrefix}-cell-selected-end`]: cell.end,
          [`${datePrefix}-cell-disabled`]: cell.disabled,
          [`${datePrefix}-cell-range`]: cell.range && !cell.start && !cell.end
        }
      ];
    },
    //获取这个月的最后一天
    getLastDaysInMonth(year, month) {
      const date = new Date();
      date.setFullYear(Number(year));
      date.setMonth(Number(month));
      const lastDay = new Date(date.setDate(0));
      return lastDay.getDate();
    },
    handleClick(cell){
        if (cell.disabled) return;
          const quarter = cell.value;
        if (this.type === "quarter") {
          const newDate = new Date(this.date);
          newDate.setMonth(3*(quarter-1));
          let minDate = new Date(newDate.setDate(1));
          minDate.setMonth(3*(quarter-1));
          let maxDate = new Date(newDate.setDate(1));
          maxDate.setMonth(3*(quarter-1)+3);
          maxDate.setDate(0);
          this.$emit("on-pick", { minDate, maxDate }, true, "start");
        } else {
          this.begin = true;
          const newDate = new Date(this.date);
          newDate.setMonth(3*(quarter-1));
          if (this.handleDateType === "start") {
            let minDate = new Date(newDate.setDate(1));
            minDate.setMonth(3*(quarter-1));
            let maxDate = new Date(newDate.setDate(1));
            maxDate.setMonth(3*(quarter-1)+3);
            maxDate.setDate(0);
            this.$emit("on-pick", { minDate, maxDate }, false, "end");
          } else {
              if (newDate >= this.minDate) {
                //顺选
                newDate.setMonth(3*(quarter-1)+4);
                newDate.setDate(0);
                let minDate = new Date(this.minDate.getTime());
                let maxDate = new Date(newDate.setDate(0));
                this.$emit(
                  "on-pick",
                  { minDate, maxDate },
                  false,
                  "start",
                  "straight",
                  "false"
                );
              }else{
                //逆选
                let minDate = new Date(newDate.setDate(1));
                minDate.setMonth(3*(quarter-1));
                let maxDate = new Date(this.maxDate.getTime());
                
                this.$emit(
                  "on-pick",
                  { minDate, maxDate },
                  false,
                  "start",
                  "reverse",
                  "false"
                );
              }
          }
          
        }


    }
  }
};
</script>
