<template>
  <Card title="图表" :loading="loading">
    <div ref="chartRef" :style="{ width, height }"></div>
  </Card>
</template>
<script lang="ts" setup>
import { Ref, nextTick, onMounted, ref, watch } from "vue";
import { Card } from "ant-design-vue";
import { useECharts } from "@/hooks/web/useECharts";
import { EChartsOption } from "echarts/types/dist/shared";

const props = defineProps({
  loading: Boolean,
  width: {
    type: String as PropType<string>,
    default: "100%",
  },
  height: {
    type: String as PropType<string>,
    default: "620px",
  },
  echartsXData: {
    type: Array as PropType<any>,
    default: [],
  },
  echartsYData: {
    type: Array as PropType<any>,
    default: [],
  },
});
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

onMounted(() => {
  initChart(props.echartsYData);
});
const initChart = (y) => {
  console.log("pppp");
  const options = {
    title: {
      text: "单位：次",
    },
    grid: {
      x: 0,
      y: 50,
      x2: 0,
      y2: 0,
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: [
        "非平层开门",
        "按键报警",
        "坠梯故障",
        "平层困人",
        "开门行梯",
        "非平层困人",
        "非平层停梯",
        "冲顶故障",
        "停梯困人",
        "超速",
        "蹲底故障",
        "停电困人",
        "启动困人",
        "停电故障",
        "梯困困人",
      ],
      axisLabel: {
        interval: 0,

        // rotate: 30 ,  文字倾斜角度

        formatter: function (value) {
          return value.split("").join("\n"); //垂直显示
        },
      },
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: y,
        type: "bar",
        showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
      },
    ],
  };
  setOptions(options);
};
watch(
  () => props.echartsYData,
  () => {
    console.log("watch");
    initChart(props.echartsYData);
  },
  { immediate: true }
);
</script>
