<template>
  <div class="titleBox">重要敏感用户暂降告警统计</div>
  <div v-loading="loading" element-loading-background="#343849c7" class="pl10">
    <dv-scroll-ranking-board
      :config="config"
      color="#ccc"
      ref="rankingRef"
      style="width: 96%; height: 320px"
    />
  </div>
  <!-- 弹框 -->
  <sendPopUpBox ref="sendPopUpBoxRef" />
</template>

<script lang="ts" setup>
import { onMounted, ref, onBeforeUnmount } from "vue";

import * as echarts from "echarts";
import { color, deptId } from "@/constant/index";
import { rightImportUser } from "@/api/statistics/index";
import { useStore } from "vuex";
import sendPopUpBox from "@/views/VoltageSag_BJ/components/popUpFrame/sendPopUpBox.vue";

const store = useStore();

const rankingRef = ref();
const loading = ref(false);
const config: any = ref({
  data: [
    // {
    //   name: "长鑫集电",
    //   value: 7,
    // },
  ],
  unit: "次",
  color: "#0a73ff",
  rowNum: 7,
});
const sendPopUpBoxRef = ref();
const init = () => {
  loading.value = true;
  config.value.data = [];
  rightImportUser({
    deptId: store.state.deptId,
    type: store.state.timeType,
    searchBeginTime: store.state.timeValue[0],
    searchEndTime: store.state.timeValue[1],
  }).then((res: any) => {
    // dataSource.value = res.data;

    if (res.data.length > 0) {
      config.value.data = res.data.map((item) => {
        return {
          customId:item.customId,
          name: item.name,
          value: item.count,
          eventList: item.eventList,
        };
      });
    }

    // renderChart();
    loading.value = false;
  });
};
// 点击事件处理器
let clickHandler = null;

// 处理点击事件
const handleRowClick = (name) => {
  let eventList = config.value.data.filter((item) => item.name == name);
  sendPopUpBoxRef.value.open(eventList[0]);

  // 这里可以使用获取到的名称进行后续操作
};
onMounted(() => {
  // 获取组件DOM
  const rankingEl = rankingRef.value?.$el;

  if (rankingEl) {
    clickHandler = (e) => {
      // 查找点击的行元素（类名为row-item）
      const rowEl = e.target.closest(".row-item");
      if (rowEl) {
        // 查找行内的名称元素（类名为info-name）
        const nameEl = rowEl.querySelector(".info-name");
        if (nameEl) {
          // 获取并传递名称文本
          handleRowClick(nameEl.textContent.trim());
        }
      }
    };

    // 添加事件监听
    rankingEl.addEventListener("click", clickHandler);
  }
});
onBeforeUnmount(() => {
  const rankingEl = rankingRef.value?.$el;
  if (rankingEl && clickHandler) {
    rankingEl.removeEventListener("click", clickHandler);
  }
});
defineExpose({
  init,
});
</script>
<style lang="scss" scoped>
@use "@/assets/scss/index.scss";
.titles {
  margin-right: 10px;
  .react-right {
    width: 50px !important;
    line-height: 20px !important;
    font-size: 14px !important;
  }
}
:deep(.row-item) {
  cursor: pointer;
}
</style>
