<template>
  <div ref="chartsWarp" class="hot-charts">
    <section class="_top_btns">
      <span class="left_btn" @click="handleChange(-1)"></span>
      <span class="right_btn" @click="handleChange(1)"></span>
      {{ current.info.name }}
    </section>
    <custom-echart-triangle :chart-data="data" height="100%" :option="option" :active-index="current.info.level - 1" />
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';

const data = ref([
  { value: 40, name: '一级', reaVal: '20', itemStyle: { color: '#56b1c0' } },
  { value: 80, name: '二级', reaVal: '30', itemStyle: { color: '#77c8ca' } },
  { value: 120, name: '三级', reaVal: '50', itemStyle: { color: '#7bb9cf' } },
]);
const option = reactive({});
onMounted(() => {});

const list = ref([
  {
    name: '茶叶',
    value: '1',
    level: 1,
  },
  {
    name: '核桃',
    value: '2',
    level: 2,
  },
  {
    name: '玉米',
    value: '3',
    level: 3,
  },
]);
const current = reactive({
  index: 0,
  length: list.value.length - 1,
  info: {
    name: '茶叶',
    value: '1',
    level: 1,
  },
});
function handleChange(n) {
  if (current.index == 0 && n == -1) {
    current.index = current.length;
  } else if (current.index == current.length && n == 1) {
    current.index = 0;
  } else {
    current.index += n;
  }
  current.info = list.value[current.index];
}
</script>
<style lang="scss" scoped>
.hot-charts {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  ._top_btns {
    position: relative;
    height: 40px;
    width: 30%;
    font-size: 20px;
    text-align: center;
    color: #fff;
    line-height: 40px;
    background: url('../../../assets/images/basic/tagBG-small.png') no-repeat center center / cover;
    span {
      display: block;
      position: absolute;
      top: 8px;
      width: 24px;
      height: 24px;
      text-shadow: 2px 0px 10px 0px #01eeff;
    }
    .left_btn {
      left: -10px;
      background: url('../../../assets/images/basic/leftArrowIcon.png') no-repeat center center / cover;
    }
    .right_btn {
      right: -10px;
      background: url('../../../assets/images/basic/rightArrowIcon.png') no-repeat center center / cover;
    }
  }
}
</style>
