<template>
  <div class="go-alarm-trend">
    <div class="header">
      <div class="title">
        <svg-icon icon-class="rocket" class="title-icon"></svg-icon>
        <span :style="{ color: chartConfig.option.titleColor, fontSize: chartConfig.option.titleSize + 'px' }">{{ chartConfig.option.title }}</span>
      </div>
      <n-dropdown trigger="hover" :options="dropdownOptions" @select="handleSelect">
        <n-button type="primary" size="small">
          {{ selectedOption }}
          <template #icon>
            <n-icon>
              <svg-icon icon-class="arrow-down" />
            </n-icon>
          </template>
        </n-button>
      </n-dropdown>
    </div>
    <v-chart
      :key="chartConfig.key"
      :option="option"
      :autoresize="true"
    ></v-chart>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, PropType } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components'
import { CreateComponentType } from '@/packages/index.d'
import { useChartDataFetch } from '@/hooks/useChartDataFetch.hook'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'

use([
  CanvasRenderer,
  LineChart,
  GridComponent,
  TooltipComponent
])

const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
    required: true
  }
})

const { option } = useChartDataFetch(props.chartConfig, useChartEditStore)

const selectedOption = ref(props.chartConfig.option.dropdownDefault)

const dropdownOptions = computed(() => {
  return props.chartConfig.option.dropdownOptions.map(opt => ({
    label: opt,
    key: opt
  }))
})

const handleSelect = (key: string) => {
  selectedOption.value = key
  // You can add logic here to update chart data based on selection
}
</script>

<style lang="scss" scoped>
.go-alarm-trend {
  width: 100%;
  height: 100%;
  background-color: #0F1C3D;
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    margin-bottom: 10px;

    .title {
      display: flex;
      align-items: center;
      .title-icon {
        font-size: 24px;
        margin-right: 10px;
        color: #00E5FF;
      }
    }
  }

  .echarts {
    flex: 1;
    width: 100%;
    height: 100%;
  }
}
</style>
