<script lang="ts" setup name="BarChartVertical">
/**
 * 垂直条形图，支持渐变，支持增加背景颜色
 */
import * as echarts from 'echarts/core'
import type { ECharts } from 'echarts'
import { init } from 'echarts'
import type { Ref } from 'vue'
import type { ECBasicOption } from 'echarts/types/dist/shared'
import type { barOption, barSeriesOption, lineDataI } from '@/components/Echart/echart-interface'
import tdTheme from '@/components/Echart/theme.json' // 引入默认主题
const props = defineProps({
  /**
   * id
   */
  id: {
    type: String,
    default: 'chart',
  },
  /**
   * 标题
   */
  title: {
    type: String,
    default: '',
  },
  /**
   * 加载状态
   */
  loading: {
    type: Boolean,
    default: false,
  },
  /**
   * 网格配置
   */
  grid: {
    type: Object,
    default: () => {
      return {
        top: 20,
        left: 5,
        right: 5,
        bottom: 10,
        containLabel: true, // 是否包含坐标轴的刻度标签
      }
    },
  },
  /**
   * 图例设置对象
   */
  legend: {
    type: Object,
    default: () => {
      return {
        show: true,
        icon: 'circle',
        orient: 'vertile', // 图例方向
        align: 'left', // 图例标记和文本的对齐，默认自动
        top: 5,
        right: 20,
        itemWidth: 12,
        itemHeight: 12,
        padding: [0, 0, 0, 120],
      }
    },
  },
  /**
   * 图例列表，非必传
   */
  legendData: {
    type: Array<string>,
    default: () => { return [] },
  },
  /**
   * 图表宽
   */
  width: {
    type: String,
    default: '100%',
  },
  /**
   * 图表高
   */
  height: {
    type: String,
    default: '100%',
  },
  /**
   * X轴刻度数据，格式为['周一','周二'...]
   */
  xAxisData: {
    type: Array<string>,
    default: () => { return [] },
  },
  /**
   * 数据，格式为[{name:'系列名',data:[0,0,0,...0], color:'可选'},...]
   */
  data: {
    type: Array,
    default: () => { return [] },
  },
  /**
   * 固定纵轴最大值，非必填
   */
  max: {
    type: [Number, String],
    default: '',
  },
  /**
   * 单位
   */
  unit: {
    type: String,
    default: '',
  },
  /**
   * 调色盘取色策略： series按照系列，data按照数据项
   */
  colorBy: {
    type: String,
    default: 'series',
  },
  /**
   * 柱子颜色，渐变，
   * 若colorBy为data, 格式[['柱1颜色1','柱1颜色2','柱1颜色3'],['柱2颜色1','柱2颜色2','柱2颜色3']]
   * 若colorBy为series, 格式[['柱1颜色1','柱1颜色2','柱1颜色3']]
   */
  colors: {
    type: Array,
    default: () => {
      return [
        ['#2d8cf0', '#fff'],
        ['#2352d6', '#fff'],
        ['#fed700', '#fff'],
        ['#feb501', '#fff'],
      ]
    },
  },
  /**
   * 柱子背景颜色
   */
  backgroundColor: {
    type: String,
    default: '',
  },
  /**
   * 柱子圆角
   */
  barConer: {
    type: [Number, Array],
    default: 50,
  },
  /**
   * 柱子宽度
   */
  barWidth: {
    type: [Number, String],
    default: '',
  },
  // 是否显示X轴线
  showXAxis: {
    type: Boolean,
    default: true,
  },
  // 是否显示Y轴线
  showYAxis: {
    type: Boolean,
    default: false,
  },
  // 是否显示Y轴线
  showYSplitLine: {
    type: Boolean,
    default: true,
  },
  /**
   * 轴线颜色
   */
  axisLineColor: {
    type: String,
    default: '#96989b',
  },
  /**
   * 轴线上文字颜色
   */
  fontColor: {
    type: String,
    default: '#000000',
  },
  // 轴线文本宽度
  axisLabelWidth: {
    type: [Number, String],
    default: '',
  },
  /**
   * 是否显示标签
   */
  showLabel: {
    type: Boolean,
    default: true,
  },
  /**
   * 图形上文本标签颜色
   */
  labelColor: {
    type: String,
    default: '#3d7eff',
  },
  /**
   * 标签位置，top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
   */
  labelPosition: {
    type: String,
    default: 'top',
  },
  /**
   * 标签格式化
   */
  labelFormatter: {
    type: String,
    default: '{c}',
  },
  /**
   * 是否为渐变柱状图
   */
  gradient: {
    type: Boolean,
    default: true,
  },
})

// 图表对象
let chart: ECharts
const chartRef: Ref<HTMLElement | null> = ref(null)

// 监听数据变化
watch(
  [() => props.xAxisData, props.data], ([newName, newNums], [oldName, oldNums]) => {
    refreshChart()
  },
  {
    immediate: true,
    deep: true,
  },
)
// 构建option
function buildOption() {
  const option: barOption = {
    grid: props.grid,
    legend: props.legend, // 图例
    tooltip: {
      trigger: 'axis',
      textStyle: {
        fontSize: 16,
      },
      axisPointer: {
        type: 'cross',
        label: {
          fontSize: 13,
        },
      },
      valueFormatter: (value: string | number) => {
        return value ? value + props.unit : ''
      },
    }, // 提示框
    yAxis: [
      {
        name: props.unit,
        type: 'value',
        boundaryGap: true,
        axisLine: {
          show: props.showYAxis,
          lineStyle: {
            color: props.axisLineColor, // 轴线的颜色
          },
        },
        nameTextStyle: { // 坐标轴名称的文字样式
          color: props.fontColor,
          fontSize: '60%',
          verticalAlign: 'middle',
        },
        axisLabel: {
          show: true,
          color: props.fontColor, // y轴名称颜色
          fontSize: 14,
        },
        splitLine: {
          show: props.showYSplitLine,
          lineStyle: {
            color: ['#7a6b74'],
            type: 'dashed',
          },
        },
      },
    ],
    xAxis: [
      {
        type: 'category',
        boundaryGap: true,
        axisLine: {
          show: props.showXAxis,
          lineStyle: {
            color: props.axisLineColor, // 轴线的颜色
          },
        },
        // axisLabel: {
        //   color: props.fontColor,
        //   fontSize: 15,
        // },
        axisLabel: {
          color: props.fontColor,
          fontSize: 15,
          show: true, // 是否显示刻度标签，默认显示
          // interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
          rotate: -30, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
          // inside: true, // 刻度标签是否朝内，默认朝外
          // margin: 6, // 刻度标签与轴线之间的距离
          formatter: (value: string) => {
            if (String(value).length > 6) {
              return `${String(value).substring(0, 5)}...`
            }
            else {
              return value
            }
          }, // 刻度标签的内容格式器
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [] as barSeriesOption[],
  }
  // 标题
  if (props.title) {
    option.title = {
      show: false,
      text: props.title,
      textStyle: {
        color: props.fontColor,
        fontWeight: 'normal',
        fontSize: 16,
      },
      top: 0,
      left: '35%',
      textAlign: 'cenetr',
      // right: 'middle',
    }
  }
  // 图例
  if (props.legend && props.legendData.length > 0) {
    option.legend!.data = props.legendData
  }
  // 横轴数据
  if (props.xAxisData && props.xAxisData.length > 0) {
    if (Array.isArray(option.xAxis) && option.xAxis.length > 0) {
      option.xAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
    }
  }
  // 轴线文本宽度
  if (props.axisLabelWidth && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
    option.xAxis[0].axisLabel!.width = props.axisLabelWidth
  }
  // 如果有最大值规定，固定最大值
  if (props.max && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
    option.yAxis[0].max = props.max
  }
  // 数据
  if (props.data && props.data.length > 0) {
    option.series = [
      {
        data: props.data as any[],
        type: 'bar',
        barWidth: 15,
      },
    ] // 横轴, 水平柱状图，y轴为横轴
  }
  // if (props.data) {
  //   const newSeries: barSeriesOption[] = []
  //   // 遍历data， 拆分柱状图名称，数据和颜色
  //   for (let itemIndex = 0; itemIndex < props.data.length; itemIndex++) {
  //     const item = props.data[itemIndex]
  //     const series: barSeriesOption = {
  //       name: item.name,
  //       type: 'bar',
  //       colorBy: props.colorBy,
  //       label: {
  //         normal: {
  //           show: props.showLabel,
  //           color: props.labelColor,
  //           position: props.labelPosition,
  //           fontSize: 15,
  //           formatter: props.labelFormatter,
  //           align: 'center',
  //           verticalAlign: 'middle',
  //         },
  //       },
  //       showBackground: !!props.backgroundColor,
  //       backgroundStyle: {
  //         color: props.backgroundColor,
  //         borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
  //       },
  //       itemStyle: {
  //         borderRadius: Array.isArray(props.barConer) ? props.barConer as number[] : props.barConer,
  //       },
  //       data: item.data,
  //     }
  //     // 如果规定了柱宽度
  //     if (props.barWidth) {
  //       series.barWidth = props.barWidth
  //     }
  //     // 如果要固定显示在图标右边
  //     if (props.labelPosition == 'fixedEnd' && chartRef.value?.clientWidth) {
  //       let chartWidth = chartRef.value?.clientWidth - props.grid.left || 0 - props.grid.right || 0
  //       if (props.axisLabelWidth && typeof props.axisLabelWidth === 'number') {
  //         chartWidth = chartWidth - props.axisLabelWidth
  //       }
  //       else {
  //         chartWidth = chartWidth - 80
  //       }
  //       series.label.normal!.position = [chartWidth, '50%']
  //     }
  //     // 如果开启渐变
  //     if (props.gradient && props.colors.length > 0) {
  //       if (props.colorBy == 'series') { // 如果一系列是一个颜色
  //         if (props.colors.length > 0 && Array.isArray(props.colors[0])) {
  //           const colorCount = props.colors[0].length
  //           const colorList = []
  //           for (let i = 0; i < colorCount; i++) {
  //             colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[0][i] })
  //           }
  //           series.itemStyle!.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, colorList)
  //         }
  //       }
  //       else if (props.colorBy === 'data') { // 每个数据是一个颜色
  //         series.itemStyle!.color = (params: { dataIndex: number }) => {
  //           if (Array.isArray(props.colors) && props.colors.length > 0 && Array.isArray(props.colors[0])) {
  //             var index = params.dataIndex
  //             const colorIndex = index % props.colors.length
  //             console.log('colorIndex', colorIndex)
  //             const colorCount = props.colors[0].length // 渐变颜色数，最多为3
  //             const colorList = []
  //             for (let i = 0; i < colorCount; i++) {
  //               colorList.push({ offset: 0 + i * (1.0 / (colorCount - 1)), color: props.colors[colorIndex][i] })
  //             }
  //             console.log(colorList)
  //             return new echarts.graphic.LinearGradient(0, 0, 0, 1, colorList)
  //           }
  //         }
  //       }
  //     }
  //     newSeries.push(series)
  //   }
  //   console.log(newSeries)
  //   option.series = newSeries
  // }
  return option
}
// 初始化图表
function initChart() {
  chart = init(chartRef.value as HTMLElement, tdTheme)
  chart.setOption({})
}

// 刷新图表
function refreshChart() {
  if (chart) {
    const option = buildOption()
    chart.setOption(option as unknown as ECBasicOption, true)
  }
}

window.addEventListener('resize', () => {
  chart.resize()
})

onMounted(() => {
  initChart()
})
</script>

<template>
  <div :id="id" ref="chartRef" v-loading="loading" class="chart" :style="{ height, width }" />
</template>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>