<template>
  <report-content-base :title="title">
    <isp-data-load :loading="loading" :empty-text="emptyText" :empty="yData.length === 0">
      <view class="charts-box" :style="{ height: `${height}rpx` }">
        <qiun-data-charts
          type="bar"
          canvas2d
          :opts="opts"
          :tooltipShow="false"
          :chartData="chartData"
        />
      </view>
    </isp-data-load>
    <!-- <view :id="htmlId" ref="echartsRef" :style="{ width: '100%', height: `${height}rpx` }"></view> -->
  </report-content-base>
</template>

<script setup lang="ts">
import ReportContentBase from '@/pages/inspector/student-detail/components/report-content-base.vue';
import * as echarts from 'echarts';
import { computed, nextTick, onMounted, ref, watchEffect } from 'vue';
const props = defineProps({
  title: String,
  emptyText: String,
  htmlId: String,
  yData: {
    type: Array,
    default: () => [],
  },
  xData: {
    type: Array,
    default: () => [],
  },
});
const opts = ref({
  padding: [0, 42, 0, 0],
  enableScroll: false,
  legend: {
    position: 'top',
    padding: 2,
    show: false,
  },
  xAxis: {
    boundaryGap: 'justify',
    disableGrid: false,
    min: 0,
    max: 10,
    axisLine: false,
    labelCount: 4, // 标签数
    type: 'grid', // X轴类型
    gridType: 'dash', // X轴网格线类型
    gridColor: '#d4d4d4',
    splitNumber: 10,
  },
  yAxis: {},
  extra: {
    bar: {
      type: 'group',
      width: 25,
      meterBorde: 1,
      meterFillColor: '#FFFFFF',
      activeBgColor: '#000000',
      activeBgOpacity: 0.05,
      barBorderCircle: false,
      seriesGap: 2,
      categoryGap: 2,
    },
  },
});
const chartData = ref({
  categories: [] as any,
  series: [
    {
      data: [] as any,
    },
  ],
});
const height = computed(() => {
  return props.yData.length * 120;
});
const loading = ref(false);
watchEffect(() => {
  if (props.yData && props.yData.length > 0) {
    nextTick(() => {
      chartData.value.categories = props.yData;
      for (let i in props.xData) {
        chartData.value.series[0].data[i] = props.xData[i];
      }
      console.log('props.yData', props.yData, props.xData);
    });
  }
});
// const props = defineProps({
//   title: String,
//   htmlId: String,
//   yData: {
//     type: Array,
//     default: () => [],
//   },
//   xData: {
//     type: Array,
//     default: () => [],
//   },
// });
// const echartsRef = ref(null);

// const colors = [
//   '#FBCA85',
//   '#F5EB82',
//   '#FB8F85',
//   '#82F58B',
//   '#85FBDE',
//   '#85DEFB',
//   '#9FA7FB',
//   '#D59FFB',
//   '#FB9FD5',
// ];

// const height = computed(() => {
//   return props.yData.length * 100;
// });

// const seriesData = computed(() => {
//   return props.xData.map((item, index) => {
//     return {
//       value: item,
//       itemStyle: {
//         color: colors[index],
//       },
//     };
//   });
// });

// const initEcharts = async () => {
//   const myChart = echarts.init(document.getElementById(props.htmlId));
//   const option = {
//     grid: {
//       left: '40px',
//       right: '20px',
//       top: '0%',
//       bottom: '20',
//     },
//     xAxis: {
//       type: 'value',
//     },
//     yAxis: {
//       type: 'category',
//       data: props.yData,
//     },
//     series: [
//       {
//         data: props.xData.map((item, index) => {
//           return {
//             value: item,
//             itemStyle: {
//               color: colors[index],
//             },
//           };
//         }),
//         type: 'bar',
//         label: {
//           show: true,
//           position: 'right',
//           valueAnimation: true,
//         },
//       },
//     ],
//   };
//   setTimeout(() => {
//     myChart.setOption(option);
//   }, 300);
// };
</script>
<style lang="scss" scoped>
:deep(.not-data) {
  padding: 30rpx 0;
  background-color: #fff;
  border-radius: 20rpx;
}
</style>
