<template>
  <div class="chart-wrapper">
    <div class="header">
      <div class="header-left">
        <div class="chart-item" v-for="item, index in chartItemList" :key="index" @click="handleClickChartItem(item)">
          <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">
        <slot name="chart-box"></slot>
      </div>
      <div class="tip-box">
        <TipTab />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } 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'
import TipTab from '@/components/base/TipTab/index.vue'

const defaultChartTypeList = [
  {
    name: '折线图',
    active: false,
    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 emit = defineEmits('clickChartItem')

const handleClickChartItem = (item) => {
  chartItemList.value.forEach(chart => {
    chart.active = false
  })
  item.active = true
  emit('clickChartItem', item)
}

const props = defineProps({
  chartTitle: {
    type: String,
    default: ''
  },
  chartTypeList: {
    type: Array,
    default: []
  }
})

const chartItemList = computed(() => {
  let arr = []
  props.chartTypeList.forEach(item => {
    defaultChartTypeList.forEach(val => {
      if (val.name === item) {
        arr.push(val)
      }
    })
  })

  arr.forEach(item => {
    item.active = false
  })
  arr[0].active = true

  // console.log('arr', arr);

  return arr
})

</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;
      top: 12px;
      color: var(--text-primary-80-color);
    }

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

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .main {
    .chart-box {
      width: 1520px;
      height: 580px;
    }

    .tip-box {
      height: 54px;
      box-sizing: border-box;
      padding-top: 10px;
      // background: orange;
    }
  }
}
</style>