<script setup lang="ts">
import { useFullscreen } from '@vueuse/core'
import { FullScreen } from '@element-plus/icons-vue'

import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart, PieChart, LineChart, PictorialBarChart, FunnelChart, RadarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
import VChart from 'vue-echarts'
import 'echarts-wordcloud'

use([
  CanvasRenderer,
  BarChart,
  PieChart,
  LineChart,
  PictorialBarChart,
  FunnelChart,
  RadarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
])

const props = withDefaults(
  defineProps<{ title?: string; options?: any; loading?: boolean; hasFullscreen?: boolean }>(),
  {
    hasFullscreen: true,
  }
)

const el = ref<HTMLElement | null>(null)
const { isFullscreen, toggle } = useFullscreen(el)
const isEmpty = computed(() => {
  if (!props.options) return true
  return !Object.keys(props.options)
})
const color = ['#af1c40', '#c17933', '#8f0034', '#d45548', '#ab3259', '#dec34c', '#8b8920', '#a25a6d']
</script>

<template>
  <div class="chart-card" ref="el" :class="{ isFullscreen }">
    <div class="chart-hd">
      <slot name="title">
        <h3>{{ props.title }}</h3>
      </slot>
      <div class="tools">
        <slot name="tools"></slot>
        <el-tooltip effect="dark" :content="isFullscreen ? '退出全屏' : '全屏'" v-if="hasFullscreen">
          <el-icon class="icon-fullscreen" @click="toggle"><FullScreen /></el-icon>
        </el-tooltip>
      </div>
    </div>
    <div class="chart-bd" v-loading="loading">
      <slot>
        <el-empty v-if="isEmpty" />
        <v-chart class="chart" :option="{ ...options, color }" autoresize ref="chart" v-else />
      </slot>
    </div>
  </div>
</template>

<style lang="scss">
.chart-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: rgba(234, 234, 234, 0.6);
  border-radius: 6px;
  overflow: hidden;
  &.isFullscreen {
    .chart {
      height: 100%;
    }
  }
}
.chart-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 10px 20px;
  height: 30px;
  color: rgba(0, 0, 0, 0.8);
  h3 {
    font-weight: bold;
    font-size: 16px;
    line-height: 30px;
  }
  .tools {
    display: flex;
    align-items: center;
  }
  .icon-fullscreen {
    margin-left: 10px;
    font-size: 16px;
    cursor: pointer;
  }
}
.chart-bd {
  flex: 1;
  background-color: #fff;
  margin: 0 20px 20px;
  border-radius: 4px;
  .chart {
    height: 290px;
  }
}
</style>
