<template>
  <div class="echart_type">
    <span
      class="chart_icon_item"
      v-for="item in chartTypeList"
      :key="item.value"
      :class="[current === item.value ? `${item.value}_cur` : item.value]"
      @click="ChangeEchartType(item.value)"
    >
      {{ item.label }}
    </span>
  </div>
</template>

<script lang="ts" setup>
// 定义列表项类型
interface ChartItem {
  lable: string
  value: string | number
  [key: string]: unknown
}

// 定义自定义事件类型
type Emits = {
  ChangeEchartType: (value: string | number) => void
}

// 声明 emit
const emit = defineEmits<Emits>()

// 定义 props 并做类型校验 + 默认值
const props = defineProps({
  current: {
    type: String as () => string | number,
    default: ''
  },
  chartTypeList: {
    type: Array as () => ChartItem[],
    default: () => []
  }
})

/**
 * 切换图表类型
 * @param value 选中项标识
 */
const ChangeEchartType = (value: string | number) => {
  // 遵循单向数据流，不修改 props，仅向外派发事件
  emit('ChangeEchartType', value)
}
</script>

<style lang="scss" scoped>
.echart_type {
  width: auto;
  height: auto;
  display: flex;
  justify-content: flex-end;
  gap: 12px;

  .chart_icon_item {
    font-weight: 400;
    font-size: 14px;
    color: #909399;
    line-height: 16px;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 0 50%;
    text-indent: 20px;
    cursor: pointer;
  }

  // 堆叠图
  .stacked_chart {
    background-image: url("@/assets/chart/stacked_chart.webp");
  }
  .stacked_chart_cur {
    font-weight: 500;
    font-size: 14px;
    color: #2e64fa;
    background-image: url("@/assets/chart/stacked_chart_cur.webp");
  }

  // 水平条形图
  .horizontal_bar {
    background-image: url("@/assets/chart/horizontal_bar.webp");
  }
  .horizontal_bar_cur {
    font-weight: 500;
    font-size: 14px;
    color: #2e64fa;
    background-image: url("@/assets/chart/horizontal_bar_cur.webp");
  }

  // 垂直条形图
  .vertical_bar {
    background-image: url("@/assets/chart/vertical_bar.webp");
  }
  .vertical_bar_cur {
    font-weight: 500;
    font-size: 14px;
    color: #2e64fa;
    background-image: url("@/assets/chart/vertical_bar_cur.webp");
  }

  // 率差图
  .difference_chart {
    background-image: url("@/assets/chart/difference_chart.webp");
  }
  .difference_chart_cur {
    font-weight: 500;
    font-size: 14px;
    color: #2e64fa;
    background-image: url("@/assets/chart/difference_chart_cur.webp");
  }

  // 雷达图
  .radar_chart {
    background-image: url("@/assets/chart/radar_chart.webp");
  }
  .radar_chart_cur {
    font-weight: 500;
    font-size: 14px;
    color: #2e64fa;
    background-image: url("@/assets/chart/radar_chart_cur.webp");
  }

  // 折线图
  .line_chart {
    background-image: url("@/assets/chart/line_chart.webp");
  }
  .line_chart_cur {
    font-weight: 500;
    font-size: 14px;
    color: #2e64fa;
    background-image: url("@/assets/chart/line_chart_cur.webp");
  }

  // 折线柱状组合图
  .line_bar_chart {
    background-image: url("@/assets/chart/line_bar_chart.webp");
  }
  .line_bar_chart_cur {
    font-weight: 500;
    font-size: 14px;
    color: #2e64fa;
    background-image: url("@/assets/chart/line_bar_chart_cur.webp");
  }

  .chart_switch {
    background-image: url("@/assets/chart/chart_switch.webp");
    &:hover {
      background-image: url("@/assets/chart/chart_switch_cur.webp");
      color: #2e64fa;
    }
  }
}
</style>