<template>
    <div>
        <dateTimeSelect v-if="!(barData && barData.hiddenTime)" :dateShowType="dateShowType" @dataChange="dataChangeValue"></dateTimeSelect>
        <div :id="`barChart` + num" style="width:100%;height: 100%;" />
    </div>
</template>

<script setup>
    import * as echarts from 'echarts'
    import DateTimeSelect from "./dateTimeSelect";
    export default {
      name: "echartsBar",
      components: {DateTimeSelect},
      props: {
        barData: {
          type: Object,
          default: () => {}
        },
        title: {
          type: String,
          default: null
        },
        dateShowType: {
          type: String,
          default: null
        },
        chartData: {
          type: Function,
          default: () => {
          }
        }
      },
      watch: {
        barData: {
          handler(val) {
            this.$nextTick(() => {
              this.getList(this.title, this.barData);
            });
          },
          deep: true,
          immediate: true
        }
      },
      data() {
        return {
          barDataList: '',
          num: ''
        }
      },
      created() {
        this.num = Math.floor(Math.random() * 9000);
      },
      mounted() {
        // console.log('barData=',this.barData);
        if (this.barData && this.barData.hiddenTime) {
          this.getList(this.title,this.barData)
        }
      },
      methods: {
        getList(title, dataXY) {
          const barDataListIntance = echarts.init(document.getElementById('barChart' + this.num));
          let option = {
            title: [{
              text: title,
              x: dataXY && dataXY.titleVal && dataXY.titleVal.x || '50%',
              y: dataXY && dataXY.titleVal && dataXY.titleVal.y || '3%',
              textAlign: dataXY && dataXY.titleVal && dataXY.titleVal.textAlign || 'center',
              textStyle: {
                fontSize: dataXY && dataXY.titleVal && dataXY.titleVal.fontSize || 16
              },
            }],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              top: dataXY && dataXY.gridTop || '80px',
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: dataXY && dataXY.yAxis ? 'value' :'category',
                data: dataXY && dataXY.yAxis ? [] : dataXY.lineXData,
                // 去掉x轴线
                axisLine: { show: false },
                // 去掉x轴刻度线
                axisTick: { show: false },
                // 去掉X轴网格线（竖向网格）
                splitLine: { show: false },
                // x轴标签样式（保留标签便于阅读）
                axisLabel: {
                  show: dataXY && dataXY.hidAxisLabel ? false : true
                }
              }
            ],
            yAxis: [
              {
                type: dataXY && dataXY.yAxis ? 'category' :'value',
                name: dataXY.name || '单位Mbps',
                inverse: dataXY && dataXY.yAxis ? true : false,
                // 去掉y轴线
                axisLine: { show: false },
                // 去掉y轴刻度线
                axisTick: { show: false },
                // 去掉y轴网格线（横向网格）
                splitLine: { show: dataXY && dataXY.hidSplitLine ? false : true },
                // Y轴标签样式（保留标签便于阅读）
                axisLabel: {
                  show: true
                },
                data: dataXY && dataXY.yAxis ? dataXY.lineXData : [],
              }
            ],
            series: [
              {
                // name: 'Direct',
                type: 'bar',
                barWidth: '60%',
                data: dataXY.data,
                label: {
                  show: dataXY && dataXY.seriesLabel || false,
                  position: 'insideLeft',
                  offset: [-4, 0]
                }
              }
            ]
          };
          barDataListIntance.setOption(option);
          window.addEventListener("resize", () => {
            barDataListIntance.resize()
          })
        },

        dataChangeValue(val, timeArr, iconVal) {
          if (timeArr) {
            this.chartData(timeArr);
          }
          // let newbarData = {...this.barData};
          // newbarData['lineXData'] = days && days.length > 0 ? days: this.barData.lineXData;
          // this.getList(this.title, newbarData);
        }
      }
    }
</script>
