<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>
