<template>
  <div>
    <el-popover popper-class="mycc-quarter-popper" title="" content="" width="320" trigger="click">
      <template #reference>
        <el-input v-model="choseQuarter" placeholder="请选择" />
      </template>
      <div class="show1">
        <p>
          <el-link type="primary" @click="prev" style="width: 60px;">上一年</el-link>
          <span role="button" class="span-year">{{ year }}年</span>
          <el-link type="primary" @click="next" style="width: 60px;">下一年</el-link>
        </p>
        <div>
          <span v-for="(item, index) in fullMonth" :key="index" class="selectMonth" @click="selectQuarter(item)">{{ item
            }}</span>
        </div>
      </div>
    </el-popover>
  </div>
</template>
<script>
export default {
  props: {
    isBn: Boolean,
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      year: new Date().getFullYear(),
      fullMonth: [],
      choseQuarter: '',
      visible: false
    }
  },
  beforeMount() {
    this.choseQuarter = this.$props.title || ''
    this.fullMonth = this.$props.isBn ? ['上半年', '下半年'] : ['第1季度', '第2季度', '第3季度', '第4季度']
  },
  watch: {
    title: {
      handler(newVal) {
        this.choseQuarter = newVal
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 上一年
    prev() {
      this.year = this.year * 1 - 1
    },
    // 下一年
    next() {
      this.year = this.year * 1 + 1
    },
    // 点击选项事件
    selectQuarter(item) {
      let label = ''
      let bn = ''
      switch (item) {
        case '第1季度':
          label = this.year + '-' + '第1季度'
          this.choseQuarter = label
          bn = 'Q1'
          break
        case '第2季度':
          label = this.year + '-' + '第2季度'
          this.choseQuarter = label
          bn = 'Q2'
          break
        case '第3季度':
          label = this.year + '-' + '第3季度'
          this.choseQuarter = label
          bn = 'Q3'
          break
        case '第4季度':
          label = this.year + '-' + '第4季度'
          this.choseQuarter = label
          bn = 'Q4'
          break
        case '上半年':
          label = this.year + '-' + '上半年'
          this.choseQuarter = label
          bn = 'H1'
          break
        case '下半年':
          label = this.year + '-' + '下半年'
          this.choseQuarter = label
          bn = 'H2'
          break
      }
      this.$emit('change', { year: this.year, bn, label })
      this.visible = false
    }
  }
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.show1 {
  width: 320px;
  height: auto;
  background: #fff;
  padding: 5px;
}

.show1 p:nth-child(1) {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: end;
  padding: 0 10px;
}

.show1>div {
  width: 100%;
  height: auto;
}

.show1>div span {
  width: 50%;
}

.selectMonth {
  display: inline-block;
  float: left;
  width: 78px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}

.selectMonth:hover {
  background: rgba(19, 131, 255, 0.052);
}
.span-year {
  width: 90%;
  margin: 0 auto;
  display: inline-block;
  text-align: center;
  line-height: 40px;
}
</style>
