<template>
  <div class="el-quarter-wrap">
    <el-popover title="" content="" width="320" :visible="visible" trigger="click" popper-class="mycc-quarter-popper">
      <template #reference>
        <el-input v-model="quarterDateName" placeholder="请选择季度" :prefix-icon="Calendar" readonly @click="visible = true"
          @change="quarterDateChange">
          <template #suffix>
            <el-icon v-if="quarterDate" class="el-quarter-clear" @click="clearData">
              <Close />
            </el-icon>
          </template>
        </el-input>
      </template>

      <div class="el-quarter__header">
        <span class="el-quarter-btn el-quarter-btn__pre" @click="changeShowYear(-1)">
          <el-icon>
            <DArrowLeft />
          </el-icon>
        </span>
        <div class="el-quarter__header-text" @click="showYearList">
          {{ quarterTitle }}
        </div>

        <span class="el-quarter-btn el-quarter-btn__next" @click="changeShowYear(1)">
          <el-icon>
            <DArrowRight />
          </el-icon>
        </span>
      </div>

      <div class="el-quarter__content" v-if="!isEditYear">
        <div class="el-quarter__row">
          <span class="quarter-index" :class="{ 'is-active': showYear === pickerYear && quarterIndex === 1 }"
            @click="pickerQuarte(1)">第一季度</span>
          <span class="quarter-index" :class="{ 'is-active': showYear === pickerYear && quarterIndex === 2 }"
            @click="pickerQuarte(2)">第二季度</span>
        </div>
        <div class="el-quarter__row">
          <span class="quarter-index" :class="{ 'is-active': showYear === pickerYear && quarterIndex === 3 }"
            @click="pickerQuarte(3)">第三季度</span>
          <span class="quarter-index" :class="{ 'is-active': showYear === pickerYear && quarterIndex === 4 }"
            @click="pickerQuarte(4)">第四季度</span>
        </div>
      </div>

      <div class="el-year__content" v-else>
        <div class="el-year-item" v-for="item in yearList">
          <div class="cell" :class="{ 'is-active': showYear == item }" @click="selectYear(item)">
            {{ item }}
          </div>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script setup>
import { DArrowLeft, DArrowRight, Close, Calendar } from "@element-plus/icons-vue";
import { computed, onMounted, reactive, ref, watch } from "vue";
let visible = ref(false);

const props = defineProps(['modelValue']);

const emits = defineEmits(["update:modelValue", "change"]);

// 绑定日期
let quarterDate = ref("");
const quarters = ["第一季度", "第二季度", "第三季度", "第四季度"];
// let quarterDateName = ref("");

// 选择的年
let pickerYear = ref("");
// 展示的年
let showYear = ref("");
// 选择的季度
let quarterIndex = ref(0);

// 是否展示年份列表
let isEditYear = ref(false);

// 年份列表开始年份
let startYear = ref("");

// 年份列表
let yearList = reactive([]);

const quarterTitle = computed(() => {
  if (isEditYear.value) {
    return startYear.value + "年 - " + (startYear.value + 9) + "年";
  } else {
    return showYear.value + "年";
  }
});

const quarterDateName = computed(() => {
  // let _data = props.modelValue.split('-')
  // let _quart = _data[1].replace('Q','')
  // let str = _data[0] + '年' + quarters[_quart - 1]
  // return str
  return pickerYear.value ? pickerYear.value + "-" + quarters[quarterIndex.value - 1] : "";
});
// 选择某季度
const pickerQuarte = (index) => {
  quarterIndex.value = index;
  pickerYear.value = showYear.value;

  let oldValue = quarterDate.value; // 记录上一次数据
  quarterDate.value = pickerYear.value + "-Q" + index;
  // quarterDate.value = pickerYear.value + "-" + quarters[index-1];
  // quarterDateName.value = pickerYear.value + "-" + quarters[quarterIndex.value-1];
  // let _data = {
  //   year:pickerYear.value,
  //   quarters:index
  // }
  emits("update:modelValue", quarterDate.value);
  // 新老数据不一致，触发change时间
  if (oldValue !== quarterDate.value) {
    emits("change", quarterDate.value);
    // emits("change", quarterDate.value);
  }

};

// 更改展示的年
const changeShowYear = (num) => {
  if (isEditYear.value) {
    startYear.value = startYear.value + num * 10;
    changeYearList();
  } else {
    showYear.value = showYear.value * 1 + num;
  }
};

// 清空选择的数据
const clearData = () => {
  quarterDate.value = "";
  pickerYear.value = "";
  showYear.value = new Date().getFullYear();
  quarterIndex.value = 0;
};

// 选择的数据
const quarterDateChange = (value) => {
  const splitArray = value.split("-Q");
  if (splitArray.length < 2) {
    pickerYear.value = "";
    showYear.value = new Date().getFullYear();
    quarterIndex.value = 0;
  } else {
    pickerYear.value = splitArray[0];
    showYear.value = splitArray[0];
    quarterIndex.value = splitArray[1];
  }
};

// 更改年份列表函数
const changeYearList = () => {
  yearList = [];
  let year = startYear.value;
  for (let i = 0; i < 10; i++) {
    yearList.push(year++);
  }
};

// 切换展示年份列表 和 季度
const showYearList = () => {
  if (!isEditYear.value) {
    startYear.value = Number(Math.floor(showYear.value / 10) + "0");
    changeYearList();
    isEditYear.value = true;
  } else {
    isEditYear.value = false;
  }
};

// 选中某个年份列表
const selectYear = (item) => {
  showYear.value = item;
  isEditYear.value = false;
};

onMounted(() => {
  // 初始化展示的年为当前年份
  showYear.value = new Date().getFullYear();
  startYear.value = Number(Math.floor(showYear.value / 10) + "0");
  changeYearList();
  quarterDate.value = props.modelValue;
  quarterIndex.value = props.modelValue.split("Q")[1] * 1;
  pickerYear.value = props.modelValue.split("-")[0];
  showYear.value = props.modelValue.split("-")[0];
});
watch(() => props.modelValue, (val) => {
  quarterDate.value = val;
  quarterIndex.value = val.split("Q")[1] * 1;
  pickerYear.value = val.split("-")[0];
  showYear.value = val.split("-")[0];
  visible.value = false
})
</script>

<style lang="scss" scoped>
.el-quarter-wrap {
  .el-icon.el-quarter-clear {
    margin-top: 8px;
    cursor: pointer;
  }
}

.mycc-quarter-popper {
  .el-quarter__header {
    padding-bottom: 12px;
    border-bottom: 1px solid #ebeef5;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-quarter-btn {
      font-size: 12px;
      cursor: pointer;
    }

    .el-quarter__header-text {
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      cursor: pointer;
    }

    .el-icon {
      cursor: pointer;
    }
  }

  .el-quarter__content {
    min-height: 100px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .el-quarter__row {
      display: flex;
      justify-content: space-around;

      .quarter-index {
        display: flex;
        padding: 4px 10px;
        width: fit-content;
        cursor: pointer;

        &:hover {
          color: #337ecc;
        }
      }

      .is-active {
        color: #409eff;
      }
    }
  }

  .el-quarter-clear {
    position: relative;
    color: #909399;
    display: none;
    height: 12px;
    width: 12px;

    &::after {
      content: "";
      position: absolute;
      height: 14px;
      width: 14px;
      margin: auto;
      border-radius: 50%;
      border: 1px solid #909399;
    }
  }

  .el-input {
    &:hover {
      .el-quarter-clear {
        display: flex;
      }
    }
  }

  .el-year__content {
    min-height: 100px;
    display: flex;
    padding: 10px 0;
    flex-wrap: wrap;

    .el-year-item {
      width: calc(100% / 4);
      display: flex;
      align-items: center;
      justify-content: center;

      .cell {
        padding: 4px 10px;
        width: fit-content;
        cursor: pointer;
        cursor: pointer;
        white-space: nowrap;

        &:hover {
          color: #337ecc;
        }
      }

      .is-active {
        color: #409eff;
      }
    }
  }
}
</style>
