<template>
  <div class="chart-wrapper">
    <div class="header">
      <div class="header-left">
        <div class="chart-item" v-for="item, index in chartItemList" :key="index">
          <img v-if="!item.active" :src="item.icon" alt="">
          <img v-else :src="item.activeIcon" alt="">
        </div>
      </div>
      <div class="header-center text-title-3-bold">{{ chartTitle }}</div>
      <div class="header-right">
        <img src="./assets/icons/download.svg" alt="">
      </div>
    </div>
    <div class="main">
      <div class="chart-box" id="chart-box"></div>
      <div class="tip-box"></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Line from './assets/icons/line.svg'
import LineActive from './assets/icons/line-active.svg'
import Bar from './assets/icons/bar.svg'
import BarActive from './assets/icons/bar-active.svg'
import Pie from './assets/icons/pie.svg'
import PieActive from './assets/icons/pie-active.svg'
import Radar from './assets/icons/radar.svg'
import RadarActive from './assets/icons/radar-active.svg'
const chartItemList = ref([
  {
    name: '折线图',
    active: true,
    icon: Line,
    activeIcon: LineActive
  },
  {
    name: '柱状图',
    active: false,
    icon: Bar,
    activeIcon: BarActive
  },
  {
    name: '饼状图',
    active: false,
    icon: Pie,
    activeIcon: PieActive
  },
  {
    name: '雷达图',
    active: false,
    icon: Radar,
    activeIcon: RadarActive
  },
])

const props = defineProps({
  chartTitle: {
    type: String,
    default: ''
  }
})

</script>

<style lang="scss" scoped>
.chart-wrapper {
  width: 1520px;
  height: 682px;
  border-radius: 10px;
  border: 1px solid var(--bg-black-5);

  .header {
    height: 48px;
    border-bottom: 1px solid var(--bg-black-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 13px 0 16px;
    position: relative;

    .header-left {
      width: 152px;
      height: 32px;
      display: flex;
      gap: 8px;

      .chart-item {
        width: 32px;
        height: 32px;
        border-radius: 4px;
        cursor: pointer;
        &:hover{
          background: var(--color-primary-2);
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .header-center {
      position: absolute;
      width: 1120px;
      height: 24px;
      text-align: center;
      left: 200px;
      height: 12px;
      color: var(--text-primary-80-color);
    }

    .header-right {
      width: 32px;
      height: 32px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>