<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-21 16:26:44
 * @LastEditTime: 2019-08-23 17:52:51
 * @LastEditors: Please set LastEditors
 -->
<template>
  <el-popover class="zte-multi-month"
    popper-class="zte-multi-month-popover"
    placement="bottom-start"
    width="400"
    @hide="submit"
    trigger="click">
    <template>
      <el-row v-for="i in 3" :key="(i-1)">
        <el-col v-for="j in 4" :key="(i-1) * 4 + (j-1)" >
          <div class="month"
          :class="{ checked: months.includes(String((i-1)*4+(j-1) + 1)) }"
          @click="monthPicker(String((i-1) * 4 + (j-1) + 1))">
            {{toChineseMonth((i-1) * 4 + (j-1))}}
          </div>
        </el-col>
      </el-row>
    </template>
    <el-input
      slot="reference"
      :value="mouthValue"
      :title="mouthValue"
    />
  </el-popover>
</template>

<script type="text/javascript">
import { toChineseMonth, monthValue } from './utils/monthTrans';

export default {
  name: 'multiMonth',
  props: {
    value: String,
  },
  data() {
    return {
      months: this.value && this.value.split(',') || [],
    };
  },
  computed: {
    mouthValue() {
      return monthValue(this.months);
      // if (this.months.length === 12) {
      //   return '全年';
      // } else if (this.months.length > 0) {
      //   const monthsValue = this.months
      //   .sort((a, b) => a - b)
      //   .reduce((monthsValue, month, index, months) => {
      //     // 检测到为空则按照排序最小月份第一个月直接编程
      //     const cMonth = this.toChineseMonth(parseInt(month)-1);
      //     if (!monthsValue) {
      //       return cMonth; 
      //     }
      //     // 当月与上一选定月份差别超过1个月
      //     else if (parseInt(month) - parseInt(months[index - 1]) > 1) {
      //       return monthsValue += `,${cMonth}`;
      //     }
      //     // 当与上一选定月份相连，且不为数组最后一位，且与下一选定月份不相连
      //     else if ( months.length - 1 == index || parseInt(months[index + 1]) - parseInt(month) > 1 ) {
      //       return monthsValue += `至${cMonth}`;
      //     }
      //     return monthsValue;
      //   }, '');
      //   return monthsValue;
      // }
      // return '无';
    }
  },
  watch: {
  },
  methods: {
    toChineseMonth,
    monthPicker(month) {
      if (this.months.includes(month)) {
        const index = this.months.findIndex(i => parseInt(i) === parseInt(month));
        this.months.splice(index, 1);
      } else {
        this.months.push(month);
      }
    },
    submit() {
      this.$emit('input', this.months.join(','));
    }
  },
};
</script>

<style lang="scss">
.zte-multi-month-popover{
  display: flex;
  flex-direction: column;
  .el-row {
    display: flex;
    .el-col {
      width: 25%;
      margin: auto;
      .month {
        display: flex;
        height: 40px;
        margin: 5px;
        border-radius: 20px;
        justify-content: center;
        align-items: center;
        &.checked {
          background-color: #42b983;
          color: #fff;
        }
      }
    }
  }
}
  
</style>

