<template>
  <PageWrapper dense>
    <Card title="故障电梯分布" :loading="loading">
      <template #extra
        ><a-button type="link" @click="handlMoreTable">更多</a-button></template
      >
      <div
        style="padding-top: 14px; padding-left: 25px; display: flex; padding-right: 50px"
      >
        <a-button
          style="margin-right: 12px"
          size="small"
          :type="currentIndex === 1 ? 'primary' : 'default'"
          @click="handlWeekTable"
          >近7天</a-button
        >
        <a-button
          style="margin-right: 12px"
          size="small"
          :type="currentIndex === 2 ? 'primary' : 'default'"
          @click="handlMonthTable"
          >近30天</a-button
        >
        <DatePicker
          size="small"
          style="width: 100px; height: 25px"
          @change="handleRangeChange"
        ></DatePicker>
        <div style="white-space: nowrap; margin-left: 16px">单位：（个）</div>
      </div>
      <div ref="chartRef" :style="{ width, height }"></div>
    </Card>
    <commonTableModal @register="registerModal"></commonTableModal>
  </PageWrapper>
</template>
<script lang="ts" setup>
import { Ref, onMounted, reactive, ref, watch, defineEmits } from "vue";
import { Card, DatePicker, RangePicker } from "ant-design-vue";
import { useECharts } from "@/hooks/web/useECharts";
import commonTableModal from "./commonTableModal.vue";

import dayjs from "dayjs";
import { useModal } from "@/components/Modal";
const props = defineProps({
  loading: Boolean,
  width: {
    type: String as PropType<string>,
    default: "100%",
  },
  height: {
    type: String as PropType<string>,
    default: "480px",
  },
  xData: {
    type: Array as PropType<any>,
    default: [],
  },
  yData: {
    type: Array as PropType<any>,
    default: [],
  },
});
const emit = defineEmits(["parent-event"]);
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
const commonTableModalRef = ref<any>(null);
interface commonObj {
  title: string;
}
const currentIndex = ref<number>(-1);
const commonObj: commonObj = reactive({
  title: "故障电梯分布详细数据",
});
const passDate = ref<any>({
  startTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
  endTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
});
function handlMoreTable() {
  openModal(true, { passDate: passDate.value });
}
const [registerModal, { openModal }] = useModal();
onMounted(() => {
  initChart(props.xData, props.yData);
});
const handleRangeChange = (e) => {
  console.log(dayjs(e).format("YYYY-MM-DD HH:mm:ss"));
  if (dayjs(e).format("YYYY-MM-DD HH:mm:ss") === "Invalid Date") {
    emit("parent-event", {
      startTime: dayjs().subtract(1, "week").format("YYYY-MM-DD HH:mm:ss"),
      endTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    });
    return;
  }
  const date = {
    startTime: dayjs(e).format("YYYY-MM-DD HH:mm:ss"),
    endTime: dayjs(e).format("YYYY-MM-DD HH:mm:ss"),
  };
  emit("parent-event", date);
  passDate.value = date;
  currentIndex.value = 3;
};
const handlWeekTable = () => {
  const date = {
    startTime: dayjs().subtract(1, "week").format("YYYY-MM-DD HH:mm:ss"),
    endTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
  };
  emit("parent-event", date);
  currentIndex.value = 1;
  passDate.value = date;
};
const handlMonthTable = () => {
  const date = {
    startTime: dayjs().subtract(1, "month").format("YYYY-MM-DD HH:mm:ss"),
    endTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
  };
  emit("parent-event", date);
  currentIndex.value = 2;
  passDate.value = date;
};
const initChart = (x, y) => {
  const options = {
    // title: {
    //   text: "单位：个",
    //   textStyle: {
    //     fontSize: 12, //这里设置文字大小为16像素，你可以根据需求调整这个数值
    //     fontWeight: "normal",
    //   },
    // },

    xAxis: {
      type: "category",
      data: x,
    },
    yAxis: {
      type: "value",
    },
    graphic: {
      type: "text",
      left: "center",
      top: "middle",
      silent: true,
      invisible: y.length,
      style: {
        fill: "black",
        fontWeight: "normal",
        text: "暂无数据",
        fontSize: "26px",
      },
    },
    series: [
      {
        data: y,
        type: "bar",
        barWidth: 30, //这里设置柱子宽度为30像素
        itemStyle: { color: "#1677ff" },
      },
    ],
  };
  setOptions(options);
};
watch(
  () => props.yData,
  () => {
    console.log(props.yData, "watch");
    initChart(props.xData, props.yData);
  },
  { immediate: true }
);
</script>
<style lang="less" scoped>
/deep/.ant-card-body {
  padding: 0 !important;
}
</style>
