<template>
  <a-modal
    :title="title"
    style="top: 20px;"
    v-model="visible"
    :width="'900px'"
    :zIndex="12000"
    :footer="null"
    @cancel="cancel"
    centered
  >
    <a-row>
      <a-col :span="5">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="年份"
        >
          <a-select
            style="width:80px"
            :getPopupContainer="triggerNode=>triggerNode.parentNode"
            @change="selectTime"
            placeholder="请选择"
            id="selectMonthModal-OneY"
            v-model="OneY" >
            <a-select-option v-for="(i,j) in DateList" :key="j" :value="i.TimeYear">{{ i.TimeYear }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="19">
        <div class="conterList">
          <a-checkbox-group id="selectMonthModal-queryTime" v-model="optTime[curIndex].queryTime" @change="onChange" >
            <a-checkbox
              v-for="(item,index) in DateList[curIndex].queryTime"
              :key="index"
              :value="`${DateList[curIndex].TimeYear}-${(item<=9)?`0${item}`:item}`"
              class="onSelect">
              {{ item }}月
            </a-checkbox>
          </a-checkbox-group>
        </div>
      </a-col>
    </a-row>
    <div class="btn-cont">
      <a-button @click="cancel" id="selectMonthModal-cancel" style="margin-right: 15px;">取消</a-button>
      <a-button type="primary" id="selectMonthModal-submit" @click="handleSubmit">确定</a-button>
    </div>
  </a-modal>
</template>
<script>
export default {
  data () {
    return {
      visible: false, // 弹窗是否显示
      title: '月份选择', // 弹窗标题
      DateList: [], // 已选择月份数据
      labelCol: {// 调整表单距离
        xs: { span: 24 },
        sm: { span: 10 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
      optTime: [], // 月份数据
      OneY: null, // 选择年份
      curIndex: 0, // 当前选中年份下标值
      optTimes: null, // 选中的月份
      ctype: null
    }
  },
  created () { // 初始化数据
    this.init()
  },
  methods: {
    // 关闭弹窗
    cancel () {
      this.visible = false
    },
    // info 选中的数据 type 可传可不传 主要做区分
    showModal (info, type) {
      this.visible = true
      this.ctype = type
      this.optTimes = info || null
      if (info) this.editTime(info)
    },
    // 初始化
    init () {
      const _this = this
      const _opt = {}
      const _optTime = {}
      const arr = new Array(12)
      const optDate = this.getDateList()
      optDate.map((item, index) => {
        _opt[index] = { TimeYear: item, queryTime: [] }
        _optTime[index] = { TimeYear: item, queryTime: [] }
        for (let i = 1; i <= arr.length; i++) {
          _opt[index].queryTime.push(i)
        }
      })
      _this.optTime = _optTime
      _this.DateList = _opt
    },
    // 获取当前年月数据
    getDateList () {
      const Dates = new Date()
      const year = Dates.getFullYear()
      this.OneY = year
      const optDate = []
      for (let i = 2022; i <= year; i++) {
        optDate.push(i)
      }
      return optDate.reverse()
    },
    // 选中年份
    editTime (info) {
      const _optTime = this.optTime
      const _opt = this.optTimes.map(v => { return v.substring(0, 4) })
      for (const item in _optTime) {
        _opt.map((items, indexs) => {
          if (items == _optTime[item].TimeYear) {
            _optTime[item].queryTime.push(this.optTimes[indexs])
          }
        })
      }
      // console.log(_optTime,'_optTime_optTime')
    },
    // 确定提交
    handleSubmit () {
      const _this = this
      _this.visible = false
      _this.$emit('ok', _this.optTimes, _this.ctype)
      _this.optTimes = []
      for (const i in _this.optTime) {
        _this.optTime[i].queryTime = []
      }
    },
    // 选择时间
    selectTime (info, Node) {
      const _this = this
      _this.OneY = info
      _this.curIndex = parseInt(Node.key)
    },
    // 选择月份 change
    onChange (info) {
      const _this = this
      const _opt = _this.optTime
      const arr = []
      for (const item in _opt) {
        if (_opt[item].queryTime.length > 0) _opt[item].queryTime.filter(v => { arr.push(v) })
      }
      _this.optTimes = arr
    },
    // 关闭时间选择弹窗
    closeTime (index, time) {
      this.optTime[index].queryTime = this.optTime[index].queryTime.filter(v => {
        return v !== time
      })
      // let _opt = this.optTime;
      // let s = {};
      // for ( let i in _opt ){
      //  if(_opt[i].queryTime.length > 0) _opt[i].queryTime.filter(v=>{
      //         return v !== time
      //     })
      // }
      this.optTimes = this.optTimes.filter(v => {
        return v !== time
      })
    }
  }
}
</script>
<style lang="less" scoped>
.conterList{
    display: block;
    width: 100%;
    border-radius: 6px;
    .onSelect{
        width: 110px;
        margin: 0 0 10px 0;
    }
}
.btn-cont {
    text-align: center;
    margin: 35px 0 10px;
  }
</style>
