<template>
  <div class="QuarterlyPicker1" id="QuarterlyPicker">
    <!--  按月统计  -->
    <a-range-picker
      :placeholder="['开始月份', '结束月份']"
      format="YYYY-MM"
      :value="Months"
      :mode="mode2"
      @panelChange="monthChange"
      v-if="dateType==='MONTH'"
    />
    <!--  按季度统计、按半年度统计  -->
    <div class="begin" v-if="dateType==='QUARTER' || dateType==='HYEAR'">
      <input
        size="large"
        class="zjl-input"
        readonly="readonly"
        :value="dateValue"
        @click.stop="showChose"
      />
      <i class="img" ></i>
    </div>
    <!--  下拉选择框  -->
    <div
      v-show="openOnOff"
      v-if="dateType==='QUARTER' || dateType==='HYEAR'"
      @click.stop
      class="selectOption flex-row"
    >
      <!--  第一个选择框  -->
      <div class="child">
        <div class="con">
          <ul class="content-one">
            <li class="lefticon" @click.stop="iconChangeClick('-')" v-show="years ? years.indexOf(year) : false"><<</li>
            <li class="righticon" @click.stop="iconChangeClick('+')" v-show="years ? years.indexOf(year) + 1 !== years.length : false" style="display: twoDisplay">>></li>
            {{ year }}
          </ul>
        </div>
        <div class="TimerXhlleft">
          <ul class="quaterleft" v-if="dateType === 'QUARTER'">
            <li class="quaterleftli">
              <a-button type="link" @click.stop="choseQuarter(1)" :class="{ active: before == 1 }">第一季度</a-button>
            </li>
            <li class="quaterleftli">
              <a-button type="link" @click.stop="choseQuarter(2)" :class="{ active: before == 2 }">第二季度</a-button>
            </li>
            <li class="quaterleftli">
              <a-button type="link" @click.stop="choseQuarter(3)" :class="{ active: before == 3 }">第三季度</a-button>
            </li>
            <li class="quaterleftli">
              <a-button type="link" @click.stop="choseQuarter(4)" :class="{ active: before == 4 }">第四季度</a-button>
            </li>
          </ul>
          <ul class="quaterleft" v-if="dateType === 'HYEAR'">
            <li class="quaterleftli">
              <a-button type="link" @click.stop="choseQuarter('be')" :class="{ active: before == 'be' }">上半年</a-button>
            </li>
            <li class="quaterleftli">
              <a-button type="link" @click.stop="choseQuarter('af')" :class="{ active: before == 'af' }">下半年</a-button>
            </li>
          </ul>
        </div>
      </div>
      <!--  第二个选择框  -->
      <div class="child" v-if="before">
        <div class="con">
          <ul class="content-one">
            <li class="lefticon" @click.stop="iconChangeClick1('-')" v-show="years ? years.indexOf(year1) : false"><<</li>
            <li class="righticon" @click.stop="iconChangeClick1('+')" v-show="years ? years.indexOf(year1) + 1 !== years.length : false" style="display: twoDisplay">>></li>
            {{ year1 }}
          </ul>
        </div>
        <div class="TimerXhlleft">
          <ul class="quaterleft" v-if="dateType === 'QUARTER'">
            <li class="quaterleftli">
              <a-button
                type="link"
                :disabled="before >= 2 && parseInt(year1) <= parseInt(year)"
                @click.stop="choseAfter(1)"
                :class="{ active: after == 1 }"
              >第一季度</a-button>
            </li>
            <li class="quaterleftli">
              <a-button
                type="link"
                :disabled="before >= 3 && parseInt(year1) <= parseInt(year)"
                @click.stop="choseAfter(2)"
                :class="{ active: after == 2 }"
              >第二季度</a-button>
            </li>
            <li class="quaterleftli">
              <a-button
                type="link"
                :disabled="before >= 4 && parseInt(year1) <= parseInt(year)"
                @click.stop="choseAfter(3)"
                :class="{ active: after == 3 }"
              >第三季度</a-button>
            </li>
            <li class="quaterleftli">
              <a-button
                type="link"
                @click.stop="choseAfter(4)"
                :class="{ active: after == 4 }"
              >第四季度</a-button>
            </li>
          </ul>
          <ul class="quaterleft" v-if="dateType === 'HYEAR'">
            <li class="quaterleftli">
              <a-button
                type="link"
                :disabled="before == 'af' && parseInt(year1) <= parseInt(year)"
                @click.stop="choseAfter('be')"
                :class="{ active: after == 'be' }"
              >上半年</a-button>
            </li>
            <li class="quaterleftli">
              <a-button type="link" @click.stop="choseAfter('af')" :class="{ active: after == 'af' }">下半年</a-button>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!--  按年统计  -->
    <a-range-picker
      :placeholder="['开始年份', '结束年份']"
      format="YYYY"
      :value="Years"
      :mode="mode1"
      @panelChange="yearChange"
      v-if="dateType==='YEAR'"
    />
    <!--  自定义日期  -->
<!--    <a-range-picker-->
<!--      :placeholder="['开始日期', '结束日期']"-->
<!--      format="YYYY-MM-DD"-->
<!--      @change="dateChange"-->
<!--      v-if="dateType==='Section'"-->
<!--    />-->
  </div>
</template>

<script>
  import moment from 'moment'
  export default {
    name: 'TableList',
    props: {
      dateType: {
        type: String,
        default: 'MONTH'
      },
      monDate: {
        type: Object,
        default: null
      }
    },
    data () {
      return {
        Years: [], // 获取年的数组
        mode1: ['year', 'year'], // 显示年份
        Months: [], // 获取月的数组
        mode2: ['month', 'month'], // 显示月份
        Date: [], // 获取日期数组
        years: [],
        years1: [],
        year: '',
        year1: '',
        yearBefore: '',
        yearAfter: '',
        YEAR: null,
        openOnOff: false,
        openYear: false,
        dateValue: '请选择',
        result: {},
        before: null, // 按季度统计、按半年度统计（前高亮）
        after: null // 按季度统计、按半年度统计（后高亮）
      }
    },
    created () {
      // 创建默认前十年到当前时间的数据
      this.initializationYears()
    },
    mounted () {
      window.addEventListener('click', this.clickOther)
    },
    beforeDestroy() {
      // 实例销毁之前对点击事件进行解绑
      window.removeEventListener('click', this.clickOther)
    },
    watch: {
      dateType (newName, oldName) {
        if (newName !== oldName) {
          this.dateValue = '请选择'
          this.before = null
        }
      }
    },
    methods: {
      moment,
      // 初始化年
      initializationYears () {
        this.year = parseInt(moment().format('YYYY'))
        this.year1 = parseInt(moment().format('YYYY'))
        for (var i = 9; i >= 0; i--) {
          this.years.push(this.year - i)
        }
      },
      // vue项目中某个页面监听全局点击事件方法
      clickOther () {
        this.openOnOff = false
      },
      // 月份面板变化时的回调
      monthChange (value, mode) {
        const _this = this
        _this.Months = value
        const stime = moment(_this.Months[0]).startOf('month').format('YYYY-MM-DD')
        const etime = moment(_this.Months[1]).endOf('month').format('YYYY-MM-DD')
        _this.$emit('timeback', { s: stime, e: etime })
      },
      // 月份面板变化时的回调
      yearChange (value, mode) {
        const _this = this
        _this.Years = value
        const stime = moment(_this.Years[0]).format('YYYY') + '-' + '01-01'
        const etime = moment(_this.Years[1]).format('YYYY') + '-' + '12-31'
        _this.$emit('timeback', { s: stime, e: etime })
      },
      // 日期面板变化时的回调
      dateChange (value) {
        const _this = this
        if (value.length < 1) return
        const stime = moment(value[0]).format('YYYY-MM-DD')
        const etime = moment(value[1]).format('YYYY-MM-DD')
        _this.$emit('timeback', { s: stime, e: etime })
      },
      showChose () {
        this.openOnOff = true
      },
      // 按季度统计、按半年度统计（之前）
      choseQuarter (quarter) {
        this.before = quarter
        switch (quarter) {
          case 1:
            this.yearBefore = this.year + ' - 第一季度'
            this.result.s = this.year + '-' + '01-01'
            break
          case 2:
            this.yearBefore = this.year + ' - 第二季度'
            this.result.s = this.year + '-' + '04-01'
            break
          case 3:
            this.yearBefore = this.year + ' - 第三季度'
            this.result.s = this.year + '-' + '07-01'
            break
          case 4:
            this.yearBefore = this.year + ' - 第四季度'
            this.result.s = this.year + '-' + '10-01'
            break
          case 'be':
            this.yearBefore = this.year + ' - 上半年'
            this.result.s = this.year + '-' + '01-01'
            break
          case 'af':
            this.yearBefore = this.year + ' - 下半年'
            this.result.s = this.year + '-' + '07-01'
            break
        }
      },
      // 按季度统计、按半年度统计（之后）
      choseAfter (quarter) {
        this.openOnOff = false
        this.after = quarter
        switch (quarter) {
          case 1:
            this.yearAfter = this.year1 + ' - 第一季度'
            this.result.e = this.year1 + '-' + '03-31'
            break
          case 2:
            this.yearAfter = this.year1 + ' - 第二季度'
            this.result.e = this.year1 + '-' + '06-30'
            break
          case 3:
            this.yearAfter = this.year1 + ' - 第三季度'
            this.result.e = this.year1 + '-' + '09-30'
            break
          case 4:
            this.yearAfter = this.year1 + ' - 第四季度'
            this.result.e = this.year1 + '-' + '12-31'
            break
          case 'be':
            this.yearAfter = this.year1 + ' - 上半年'
            this.result.e = this.year1 + '-' + '06-30'
            break
          case 'af':
            this.yearAfter = this.year1 + ' - 下半年'
            this.result.e = this.year1 + '-' + '12-31'
            break
        }
        this.dateValue = this.yearBefore + ' ~ ' + this.yearAfter
        this.$emit('timeback', this.result)
      },
      iconChangeClick (v) {
        this.year = v === '+' ? this.years[this.years.indexOf(this.year) + 1] : this.years[this.years.indexOf(this.year) - 1]
        this.choseQuarter(this.before)
      },
      iconChangeClick1 (v) {
        if (v === '-') {
          if (parseInt(this.year1) <= parseInt(this.year)) {
            this.$message.warning('结束日期不能大于当前起始日期！')
            return
          }
        }
        this.year1 = v === '+' ? this.years[this.years.indexOf(this.year1) + 1] : this.years[this.years.indexOf(this.year1) - 1]
      },
      dayChange (value) {
        this.days = moment(value).format('YYYY-MM-DD')
        const day = moment(value).format('YYYY-MM-DD')
        this.$emit('timeback', { s: day, e: day })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .QuarterlyPicker1 {
    //width: 190px;
    height: 100%;
    min-height: 22px;
    min-width: 245px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    font-feature-settings: 'tnum';
    position: relative;
    display: inline-block;
    outline: none;
    cursor: text;
    transition: opacity 0.3s;
    .begin{
      position: relative;
      height: 100%;
      .zjl-input{
        text-overflow: ellipsis;
        touch-action: manipulation;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-variant: tabular-nums;
        list-style: none;
        font-feature-settings: 'tnum';
        position: relative;
        display: inline-block;
        width: 100%;
        height: 100%;
        padding: 4px 11px;
        color: rgba(0, 0, 0, 0.65);
        font-size: 14px;
        line-height: 1.5;
        background-color: #fff;
        background-image: none;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        transition: all 0.3s;
        &:hover{
          border-color: #40a9ff;
          border-right-width: 1px !important;
        }
        &:focus {
          border-color: #40a9ff;
          border-right-width: 1px !important;
          outline: 0;
          box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }
      }
      .zjl-input[disabled] {
        color: rgba(0, 0, 0, 0.25);
        background-color: #f5f5f5;
        cursor: not-allowed;
        opacity: 1;
      }
      .default_input{
        color: rgba(0, 0, 0, 0.25);
      }
      .img{
        display: inline-block;
        position: absolute;
        top: 50%;
        right: 12px;
        height: 14px;
        width: 14px;
        margin-top: -7px;
        background-size: 100% 100%;
        color: rgba(0, 0, 0, 0.25);
        font-size: 14px;
        line-height: 1;
        z-index: 1;
        transition: all 0.3s;
        user-select: none;
      }
    }
    .child{
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      color: rgba(0, 0, 0, 0.65);
      font-variant: tabular-nums;
      line-height: 1.5;
      list-style: none;
      font-feature-settings: 'tnum';
      //width: 171px;
      font-size: 14px;
      line-height: 1.5;
      text-align: left;
      list-style: none;
      background-color: #fff;
      background-clip: padding-box;
      outline: none;
      .zjl-but {
        position: relative;
        height: auto;
        text-align: right;
        padding: 0 12px;
        line-height: 38px;
        border-top: 1px solid #e8e8e8;
        span{
          position: relative;
          display: inline-block;
          font-weight: 400;
          white-space: nowrap;
          text-align: center;
          background-image: none;
          border: 1px solid transparent;
          box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
          cursor: pointer;
          transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
          user-select: none;
          touch-action: manipulation;
          height: 32px;
          padding: 0 15px;
          color: #fff;
          background-color: #1890ff;
          border-color: #1890ff;
          text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
          -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
          box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
          height: 24px;
          padding: 0 7px;
          font-size: 14px;
          border-radius: 4px;
          line-height: 22px;
          &:hover{
            color: #fff;
            background-color: #40a9ff;
            border-color: #40a9ff;
          }
        }
      }
      .zjl-timehear{
        height: 34px;
        padding: 6px 10px;
        border-bottom: 1px solid #e8e8e8;
        span{
          display: inline-block;
          width: 100%;
          margin: 0;
          cursor: default;
        }
      }
      .TimerXhlleft{
        .quaterleft{
          display: flex;
          width: 121px;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-between;
          padding-inline-start: 0px;
          margin-bottom: 0;
          .quaterleftli{
            width: 100%;
            margin-right: 0 !important;
            text-align: center;
            line-height: 50px;
            height: 50px;
            color: #333;
            cursor: pointer;
            ::v-deep .ant-btn-link {
              color: #333;
              width: 100%;
              height: 100%;
              background-color: white;
              &.active {
                color: white;
                background-color: #1890ff;
              }
              &[disabled] {
                color: rgba(0, 0, 0, 0.25);
                background-color: #f5f5f5;
              }
            }
            .normalcolor{
              display: inline-block;
              line-height: 30px;
              height: 30px;
              padding: 0 20px;
              cursor: pointer;
              &:hover{
                background: #e6f7ff;
                cursor: pointer;
              }
              &.nonormaocolor{
                background: #bae7ff;
                border-radius: 1px;
                // color: #fff;
              }
              &.warnnodata{
                background: #F5f5f5;
                color: rgba(0, 0, 0, 0.25);
                cursor: not-allowed;
              }
            }
          }
        }
      }
      .con{
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-bottom: 1px solid #e8e8e8;
        user-select: none;
        .content-one{
          white-space: nowrap;
          overflow: hidden;
          position: relative;
          padding-inline-start: 0px;
          .lefticon{
            position: absolute;
            z-index: 100;
            top: 0;
            left: 0;
            font-size: 18px;
            cursor: pointer;
            width: 30px;
            margin: 0 10px;
            &:hover{
              color: #40a9ff;
            }
          }
          .righticon{
            position: absolute;
            z-index: 100;
            top: 0;
            right: 0;
            font-size: 18px;
            cursor: pointer;
            width: 30px;
            margin: 0 10px;
            &:hover{
              color: #40a9ff;
            }
          }
          li {
            display: inline-block;
            text-align: center;
            cursor: default;
          }
        }
      }
    }
  }
  .selectOption {
    position: absolute;
    z-index: 1050;
    border: 1px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    >div {
      &:first-child {
        border-radius: 4px;
      }
    }
  }
</style>
