<template>
  <div class="QuarterlyPicker" id="QuarterlyPicker">
    <div class="begin">
      <input
        class="zjl-input"
        readonly="readonly"
        :value="dateValue"
        @click.stop="showChose"
      />
      <i class="img"></i>
    </div>
    <div class="child" v-show="openOnOff" @click.stop>
      <div class="con">
        <ul class="content-one">
          <li class="lefticon" @click="iconChangeClick('-')" v-show="years ? years.indexOf(year) : false"><<</li>
          <li class="righticon" @click="iconChangeClick('+')" v-show="years ? years.indexOf(year) + 1 !== years.length : false" style="display: twoDisplay">>></li>
          {{ year }}
        </ul>
      </div>
      <div class="TimerXhlleft">
        <ul class="quaterleft">
          <li v-for="(item, index) in listYearSection[year]" :key='index' class="quaterleftli" @click="choseSection(item)">
            第{{item.section}}期: {{item.sDate}} 至 {{item.eDate}}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  export default {
  name: 'TableList',
  components: {
    moment
  },
  props: {
    dateType: {
      type: String,
      default: 'MONTH'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    monDate: {
      type: Object,
      default: null
    },
    listSection: {
      type: Array,
      default: null
    },
    defultValue: {
      type: String,
      default: '请选择'
    },
    closeStatus: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      years: [],
      year: null,
      YEAR: null,
      openOnOff: false,
      openYear: false,
      dateValue: '请选择',
      result: {},
      months: null,
      listYearSection: {}
    }
  },
  created () {
    // 创建默认前十年到当前时间的数据
    this.initializationYears()
    this.months = this.monDate
    this.dateValue = this.defultValue ? this.defultValue : this.dateValue
  },
    mounted () {
      window.addEventListener('click', this.clickOther)
    },
    beforeDestroy() {
      // 实例销毁之前对点击事件进行解绑
      window.removeEventListener('click', this.clickOther)
    },
  watch: {
    dateType (newName, oldName) {
      if (newName !== oldName) {
        this.dateValue = newName
      }
      this.initializationYears()
    },
    monDate (news, olds) {
      this.months = news
    },
    listSection (newSection) {
      this.listSection = newSection
      this.initializationYears()
    },
    defultValue (text) {
      this.dateValue = text
    },
    closeStatus (status) {
      if (status) this.openOnOff = false
    }
  },
  methods: {
    moment,
    // vue项目中某个页面监听全局点击事件方法
    clickOther () {
      this.openOnOff = false
    },
    // 初始化年
    initializationYears () {
      this.years = []
      if (this.listSection.length > 0) {
        this.year = moment(this.listSection[0].sDate).format('YYYY')
        this.listYearSection = this.listSection.length > 0 ? this.getSectionofYear(this.listSection) : this.listYearSection
        for (const index in this.listYearSection) {
          this.years.push(index)
        }
      }
    },
    showChose () {
      this.$emit('close')
      this.openOnOff = true
    },
    // 自定义期数回调
    choseSection (item) {
      this.openOnOff = false
      this.dateValue = '第' + item.section + '期:' + item.sDate + '至' + item.eDate
      this.$emit('timeback', { s: item.sDate, e: item.eDate })
    },
    iconChangeClick (v) {
      this.year = v === '+' ? this.years[this.years.indexOf(this.year) + 1] : this.years[this.years.indexOf(this.year) - 1]
    },
    // 按年获取选期
    getSectionofYear (list) {
      const listYears = {}
      let yearNow = ''
      list.forEach((item) => {
        if (yearNow === '' || yearNow !== moment(item.sDate).format('YYYY')) {
          listYears[moment(item.sDate).format('YYYY')] = []
          listYears[moment(item.sDate).format('YYYY')].push(item)
          yearNow = moment(item.sDate).format('YYYY')
        } else {
          listYears[moment(item.sDate).format('YYYY')].push(item)
        }
      })
      return listYears
    }
  }
}
</script>

<style lang="scss" scoped>
  .QuarterlyPicker{
    width: 100%;
    height: 100%;
    min-height: 22px;
    min-width: 90px;
    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';
      position: absolute;
      z-index: 1050;
      width: 100%;
      font-size: 14px;
      line-height: 1.5;
      text-align: left;
      list-style: none;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid #fff;
      border-radius: 4px;
      outline: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      .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{
        width: 100%;
        .quaterleft{
          display: flex;
          width: 100%;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-between;
          padding-inline-start: 0px;
          max-height: 230px;
          overflow-y:auto;
          .quaterleftli{
            width: 100%;
            margin-right: 0 !important;
            text-align: center;
            line-height: 50px;
            height: 50px;
            color: #333;
            cursor: pointer;
            .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-left: 20px;
            &:hover{
              color: #40a9ff;
            }
          }
          .righticon{
            position: absolute;
            z-index: 100;
            top: 0;
            right: 0;
            font-size: 18px;
            cursor: pointer;
            width: 30px;
            margin-right: 20px;
            &:hover{
              color: #40a9ff;
            }
          }
          li {
            display: inline-block;
            text-align: center;
            cursor: default;
          }
        }
      }
    }
  }
</style>
