<script lang="ts" setup name="BarChartHorizontal">
/**
 * 水平条形图，支持渐变，支持增加背景颜色，支持标签在最末尾显示
 */
import * as echarts from 'echarts/core'
import type { ECharts } from 'echarts'
import { init, number } from 'echarts'
import type { Ref } from 'vue'
import type { ECBasicOption } from 'echarts/types/dist/shared'
import type { barOption, barSeriesOption, lineDataI } from './echart-interface'
import tdTheme from './theme.json' // 引入默认主题
const props = defineProps({
  /**
   * id
   */
  id: {
    type: String,
    default: 'chart',
  },
  /**
   * 标题
   */
  title: {
    type: String,
    default: '',
  },
  /**
   * 标题样式
   */
  titleTextStyle: {
    type: Object,
    default: () => {
      return {
        color: '#333',
        fontStyle: 'normal',
        fontWeight: 'bolder',
        fontSize: 14,
        lineHeight: 56,
      }
    },
  },
  /**
   * 加载状态
   */
  loading: {
    type: Boolean,
    default: false,
  },
  /**
   * 网格配置
   */
  grid: {
    type: Object,
    default: () => {
      return {
        top: 20,
        left: 20,
        right: 60,
        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<lineDataI>,
    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', '#2352d6', '#3e29ce'],
        ['#fed700', '#fdb302', '#fb9600'],
        ['#68dfe3', '#2fade0', '#0182de'],
        ['#fd9a19', '#fd6f1b', '#fe421c'],
        ['#fed700', '#feb501', '#fd9502'],
        ['#2d8cf0', '#2352d6', '#3e29ce'],
        ['#fed700', '#fdb302', '#fb9600'],
        ['#68dfe3', '#2fade0', '#0182de'],
        ['#fd9a19', '#fd6f1b', '#fe421c'],
        ['#fed700', '#feb501', '#fd9502'],
      ]
    },
  },
  color: {
    type: String,
    default: '#3e29ce',
  },
  /**
   * 柱子背景颜色
   */
  backgroundColor: {
    type: String,
    default: '#caddff',
  },
  /**
   * 柱子圆角
   */
  barConer: {
    type: [Number, Array],
    default: 50,
  },
  barWidth: {
    type: [Number, String],
    default: '15',
  },
  // 是否显示轴线
  showAxis: {
    type: Boolean,
    default: false,
  },
  /**
   * 轴线颜色
   */
  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',
  },
  /**
   * 标签位置，如果设置为fixedEnd，请务必设置axisLabelWidth
   */
  labelPosition: {
    type: String,
    default: 'fixedEnd',
  },
  /**
   * 标签格式化
   */
  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: 'item',
      formatter: (p) => {
        if (p.seriesName === 'total') {
          return ''
        }
        return `${p.name}<br/>${p.value}`
      },
    },
    xAxis: {
      type: 'value',
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    yAxis: [{
      type: 'category',
      inverse: true,
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        show: false,
        inside: false,
      },
      data: props.xAxisData,
    }, {
      type: 'category',
      inverse: true,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        // inside: true,
        // verticalAlign: 'bottom',
        lineHeight: '40',
        textStyle: {
          color: '000',
          fontSize: '14',
          fontFamily: 'PingFangSC-Regular',
        },
        formatter(val) {
          return `${val}`
        },
      },
      splitArea: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      data: props.data,
    }],
    series: [] as barSeriesOption[],
  }
  // 标题
  if (props.title) {
    option.title = {
      show: true,
      text: props.title,
      textStyle: props.titleTextStyle,
      padding: 0,
      top: -16,
    }
  }
  // 图例
  if (props.legend && props.legendData.length > 0) {
    option.legend!.data = props.legendData
  }
  // 横轴数据
  if (props.xAxisData && props.xAxisData.length > 0) {
    if (Array.isArray(option.yAxis) && option.yAxis.length > 0) {
      option.yAxis[0].data = props.xAxisData // 横轴, 水平柱状图，y轴为横轴
    }
  }
  // 轴线文本宽度
  if (props.axisLabelWidth && Array.isArray(option.yAxis) && option.yAxis.length > 0) {
    option.yAxis[0].axisLabel!.width = props.axisLabelWidth
  }
  // 如果有最大值规定，固定最大值
  if (props.max && Array.isArray(option.xAxis) && option.xAxis.length > 0) {
    option.xAxis[0].max = props.max
  }
  // 数据
  if (props.data) {
    const newSeries: barSeriesOption[] = [{
      name: 'total',
      type: 'bar',
      zlevel: 1,
      barGap: '-100%',
      barWidth: '10px',
      data: props.xAxisData.map((item, index) => ({
        name: item,
        value: props.data[index],
        color: props.colors[index],
        barGap: '-100%',
        itemStyle: {
          normal: {
            show: true,
            // color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            //   offset: 0,
            //   color: props.colors[index],
            // }, {
            //   offset: 1,
            //   color: props.colors[index],
            // }], false),
            barBorderRadius: 10,
          },
          emphasis: {
            shadowBlur: 15,
            shadowColor: 'rgba(0, 0, 0, 0.1)',
          },
        },
      })),
      legendHoverLink: false,
    }, {
      name: 'bar',
      type: 'bar',
      zlevel: 2,
      barWidth: '10px',
      data: props.xAxisData.map((item, index) => ({
        value: props.data[index],
        itemStyle: {
          color: props.colors[index],
          barBorderRadius: 10,
        },
      })),
      label: {
        normal: {
          color: '#b3ccf8',
          show: true,
          position: [0, '-24px'],
          textStyle: {
            fontSize: 16,
          },
          formatter(a) {
            let num = ''
            let str = ''
            if (a.dataIndex + 1 < 10) {
              num = `0${a.dataIndex + 1}`
            }
            else {
              num = (a.dataIndex + 1)
            }
            if (a.dataIndex === 0) {
              str = `{color1|${num}} {color4|${a.name}}`
            }
            else if (a.dataIndex === 1) {
              str = `{color2|${num}} {color4|${a.name}}`
            }
            else {
              str = `{color3|${num}} {color4|${a.name}}`
            }
            return str
          },
          rich: {
            color1: {
              color: '#3D6FB6',
              fontWeight: 700,
            },
            color2: {
              color: '#3D6FB6',
              fontWeight: 700,
            },
            color3: {
              color: '#3D6FB6',
              fontWeight: 700,
            },
            color4: {
              color: '#3D6FB6',
            },
          },
        },
      },
    }]
    option.series = newSeries
  }
  return option
}
// 初始化图表
function initChart() {
  chart = init(chartRef.value as HTMLElement, tdTheme)
  chart.setOption({})
  refreshChart()
  chart.resize()
}

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

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>