<template>
  <div class="titleBox">电压暂降告警统计</div>
  <div class="Box" v-loading="loading" element-loading-background="#343849c7">
    <dv-border-box-7 :color="color[3]">
      <div class="eachartsBox eachartsBoxTop" style="place-items: center">
        <div class="totalBox" style="background-color: #28a74570">
          <div class="textTop" @click="openalarmPopUpBox(0, data.importId)">
            <span>{{ data.importNum || 0 }}</span>
            <span style="font-size: 13px">半导体及精密加工企业<br />监测总数</span>
          </div>
          <div
            class="textTop"
            @click="openalarmPopUpBox(0, data.otherImportId)"
          >
            <span>{{ data.otherImportNum || 0 }}</span>
            <span style="font-size: 13px">其他敏感用户<br />监测总数</span>
          </div>
          <div class="textTop" @click="openalarmPopUpBox(0, data.otherId)">
            <span>{{ data.otherNum || 0 }}</span>
            <span style="font-size: 13px">非敏感用户<br />监测总数</span>
          </div>
        </div>
        <div
          class="totalBox"
          style="background-color: #28a74570; margin-top: 10px"
        >
          <div class="textTop" @click="openalarmPopUpBox(1, data.importId)">
            <span>{{ data.importDevNum || 0 }}</span>
            <span style="font-size: 13px"
              >半导体及精密加工企业<br />受影响户数</span
            >
          </div>
          <div
            class="textTop"
            @click="openalarmPopUpBox(1, data.otherImportId)"
          >
            <span>{{ data.otherImportDevNum || 0 }}</span>
            <span style="font-size: 13px">其他敏感用户<br />受影响户数</span>
          </div>
          <div class="textTop" @click="openalarmPopUpBox(1, data.otherId)">
            <span>{{ data.otherDevNum || 0 }}</span>
            <span style="font-size: 13px">非敏感用户<br />受影响户数</span>
          </div>
        </div>
      </div>
    </dv-border-box-7>
    <dv-border-box-7 :color="color[3]">
      <div class="boxCenter" style="place-items: center">
        <div
          class="eacharts1"
          ref="eacharts1"
          style="width: 100%; height: 100%"
        ></div>
      </div>
    </dv-border-box-7>
  </div>
  <!-- 弹框 -->
  <!--  <alarmPopUpBox ref="alarmPopUpBoxRef" />
  &lt;!&ndash; 终端弹框 &ndash;&gt;
  <sensitivePopUpBox ref="sensitivePopUpBoxRef" />-->

  <!-- 弹框 -->
  <userLedgerPopUpBox ref="alarmPopUpBoxRef" />
  <!-- 终端弹框 -->
  <userEventPopUpBox ref="sensitivePopUpBoxRef" />

  <alarmPopUpBox ref="alarmPopUpBoxRefEvent" />
</template>

<script lang="ts" setup>
import { onMounted, ref, getCurrentInstance } from "vue";
const { proxy }: any = getCurrentInstance();
import { color } from "@/constant/index";
import alarmPopUpBox from "@/views/VoltageSag_BJ/components/popUpFrame/alarmPopUpBox.vue";
import sensitivePopUpBox from "@/views/VoltageSag_BJ/components/popUpFrame/sensitivePopUpBox.vue";

import userLedgerPopUpBox from "@/views/VoltageSag_BJ/components/popUpFrame/userLedgerPopUpBox.vue";
import userEventPopUpBox from "@/views/VoltageSag_BJ/components/popUpFrame/userEventPopUpBox.vue";
import { rightEvent } from "@/api/statistics/index";
import "echarts-liquidfill";
import { useStore } from "vuex";
const store = useStore();
const loading = ref(false);
const data: any = ref({});
const eacharts1 = ref(null);

const alarmPopUpBoxRef = ref();
const sensitivePopUpBoxRef = ref();

const alarmPopUpBoxRefEvent = ref();

const renderChart = (key: any) => {
  var myChart = proxy.$echarts.init(key);
  const color = ["#2E8B57", "#0a73ff", "#DAA520"];
  myChart.setOption({
    title: {
      text: "电压暂降用户分类统计(单位：次)",
      left: "center",
      top: "10",
      textStyle: {
        color: "#fff",
        fontSize: 16,
      },
    },

    tooltip: {
      formatter: (params) => {
        let str = params.marker + params.name;
        return str;
      },
    },
    //  {
    //             name: "半导体及\n精密加工",
    //             itemStyle: {
    //               color: "#2E8B57",
    //             },
    //             label: {
    //               rotate: "radial",
    //               color: "#ffffff",
    //               fontSize: 10,
    //             },
    //             children: [
    //               {
    //                 name: "半导体（8次）",
    //                 value: 10,
    //                 itemStyle: {
    //                   color: "#2E8B57",
    //                 },
    //                 label: {
    //                   position: "outside",
    //                   fontSize: 10,
    //                   color: "#ffffff",
    //                 },
    //                 labelLine: {
    //                   show: true,
    //                   length1: 10,
    //                   smooth: true,
    //                   length2: 10,
    //                 },
    //               },
    //               {
    //                 name: "半导体（12次）",
    //                 value: 10,
    //                 itemStyle: {
    //                   color: "#2E8B57",
    //                 },
    //                 label: {
    //                   position: "outside",
    //                   fontSize: 10,
    //                   color: "#ffffff",
    //                 },
    //                 labelLine: {
    //                   show: true,
    //                   length1: 10,
    //                   smooth: true,
    //                   length2: 10,
    //                 },
    //               },
    //             ],
    //           },

    series: [
      {
        type: "sunburst",
        nodeClick: false,
        data: data.value.innerList.map((item, i) => {
          return {
            name: insertNewLine(item.name),
            itemStyle: {
              color: color[i],
            },
            parentId: item.children[0].parentId,
            label: {
              rotate: "radial",
              color: "#ffffff",
              fontSize: 11,
              lineHeight: 12,
            },
            children: item.children.map((k) => {
              return {
                name: k.name + `(${k.count})`,
                value: k.count,
                parentId: k.parentId,
                treeId: k.treeId,
                itemStyle: {
                  color: color[i],
                },
                // label: {
                //   position: "outside",
                //   fontSize: 10,
                //   distance: 20, // 调整标签与图形的距离
                //   color: "#ffffff",
                //   avoidLabelOverlap: true,
                // },
                // labelLine: {
                //   show: true,
                //   length: 10,
                //   length2: 30,
                // },
                label: {
                  position: "outside",
                  distance: 20, // 增加距离避免重叠
                  fontSize: 12,
                  color: "#ffffff",
                  avoidLabelOverlap: true, // 启用避让
                },
                labelLine: {
                  show: true,
                  smooth: true,
                  minTurnAngle: 60,
                  length: 10,
                  length2: 10,
                },
              };
            }),
          };
        }),
        radius: [0, "60%"],
        center: ["50%", "55%"],
        itemStyle: {
          borderWidth: 2,
          normal: {
            label: {
              rotate: 0,
              fontSize: 13,
              lineHeight: 20,
              rich: {
                fontSize16: {
                  fontSize: "16px",
                },
                fontSize12: {
                  fontSize: "12px",
                },
              },
            },
          },
        },
        levels: [
          {},
          {
            nodeClick: false,
            r0: "0%",
            r: "40%",
            itemStyle: {
              borderWidth: 2,
            },
            label: {
              rotate: "tangential",
            },
            sort: null,
          },
          {
            r0: "40%",
            r: "60%",
            label: {
              align: "right",
            },
          },
        ],
        sort: null,
      },
    ],
  });
  myChart.on("click", function (params: any) {
    console.log("🚀 ~ renderChart ~ params:", params);
    alarmPopUpBoxRefEvent.value.open(
      params.data.parentId,
      params.data.treeId || ""
    );
  });
};
function insertNewLine(str) {
  // 检查字符串长度是否至少为4
  if (str.length < 4) {
    return str; // 长度不足4时直接返回原字符串
  }

  // 计算插入位置（倒数第4位）
  const position = str.length - 4;

  // 在指定位置插入\n并返回新字符串
  return str.substring(0, position) + "\n" + str.substring(position);
}
const openalarmPopUpBox = (event: any, id: string) => {
  if (event == 0) {
    alarmPopUpBoxRef.value.open(id);
  } else {
    sensitivePopUpBoxRef.value.open(id);
  }
};
const init = async () => {
  loading.value = true;

  // 列表
  await rightEvent({
    deptId: store.state.deptId,
    type: store.state.timeType,
    searchBeginTime: store.state.timeValue[0],
    searchEndTime: store.state.timeValue[1],
  }).then((res: any) => {
    data.value = res.data;
    // data.value = {
    //   importId: "033b2aad6b6947b4aeb67fc6ecf267ca",
    //   importNum: 419,
    //   importDevNum: 65,
    //   otherImportId: "7452d56b80b641af81748fca11ea48da",
    //   otherImportNum: 2583,
    //   otherImportDevNum: 381,
    //   otherId: "2824e58eacba446abf7ef1415f6fe0a0",
    //   otherNum: 1117,
    //   otherDevNum: 190,
    //   innerList: [
    //     {
    //       treeId: null,
    //       parentId: null,
    //       customId: null,
    //       name: "其他干扰源用户",
    //       code: null,
    //       count: 0,
    //       eventList: null,
    //       children: [
    //         {
    //           treeId: "e61a9de99dd149c78314b4f571ab45b3",
    //           parentId: "2824e58eacba446abf7ef1415f6fe0a0",
    //           customId: null,
    //           name: "变电站母线所带的干扰源用户",
    //           code: null,
    //           count: 1117,
    //           eventList: null,
    //           children: null,
    //         },
    //       ],
    //     },
    //     {
    //       treeId: null,
    //       parentId: null,
    //       customId: null,
    //       name: "其他敏感用户",
    //       code: null,
    //       count: 0,
    //       eventList: null,
    //       children: [
    //         {
    //           treeId: "8f257925fd6740c9972d74b23273f698",
    //           parentId: "7452d56b80b641af81748fca11ea48da",
    //           customId: null,
    //           name: "数据中心",
    //           code: null,
    //           count: 161,
    //           eventList: null,
    //           children: null,
    //         },
    //         {
    //           treeId: "0351b2c3f7fa4ee0874b88bbf14ec94a",
    //           parentId: "7452d56b80b641af81748fca11ea48da",
    //           customId: null,
    //           name: "机场",
    //           code: null,
    //           count: 137,
    //           eventList: null,
    //           children: null,
    //         },
    //         {
    //           treeId: "2891af9d6cfc4f3e8794c6ea244961fb",
    //           parentId: "7452d56b80b641af81748fca11ea48da",
    //           customId: null,
    //           name: "交通枢纽（公交场站、客运站、火车站等）",
    //           code: null,
    //           count: 662,
    //           eventList: null,
    //           children: null,
    //         },
    //         {
    //           treeId: "9d4b431a7b8c411d9725519117e28b78",
    //           parentId: "7452d56b80b641af81748fca11ea48da",
    //           customId: null,
    //           name: "易燃易爆品制造",
    //           code: null,
    //           count: 10,
    //           eventList: null,
    //           children: null,
    //         },
    //         {
    //           treeId: "b476c88dc5724d8ebfc695cc2183ddf0",
    //           parentId: "7452d56b80b641af81748fca11ea48da",
    //           customId: null,
    //           name: "金融",
    //           code: null,
    //           count: 10,
    //           eventList: null,
    //           children: null,
    //         },
    //         {
    //           treeId: "13b030c4c6bb47068b9b1673122030ca",
    //           parentId: "7452d56b80b641af81748fca11ea48da",
    //           customId: null,
    //           name: "危险化学品",
    //           code: null,
    //           count: 151,
    //           eventList: null,
    //           children: null,
    //         },
    //         {
    //           treeId: "5a025836e8104ae68f20a2950ef96712",
    //           parentId: "7452d56b80b641af81748fca11ea48da",
    //           customId: null,
    //           name: "医院",
    //           code: null,
    //           count: 650,
    //           eventList: null,
    //           children: null,
    //         },
    //         {
    //           treeId: "7a681baf2e39451caba5da2b17d2425b",
    //           parentId: "7452d56b80b641af81748fca11ea48da",
    //           customId: null,
    //           name: "党政机关",
    //           code: null,
    //           count: 1664,
    //           eventList: null,
    //           children: null,
    //         },
    //         {
    //           treeId: "82da40795f6e44c28a9aec6a7cf31e33",
    //           parentId: "7452d56b80b641af81748fca11ea48da",
    //           customId: null,
    //           name: "大型场馆（体育场、剧院等）",
    //           code: null,
    //           count: 236,
    //           eventList: null,
    //           children: null,
    //         },
    //       ],
    //     },
    //     {
    //       treeId: null,
    //       parentId: null,
    //       customId: null,
    //       name: "半导体及精密加工",
    //       code: null,
    //       count: 0,
    //       eventList: null,
    //       children: [
    //         {
    //           treeId: "4f8b85fa810d4f188d12159f33bbe001",
    //           parentId: "033b2aad6b6947b4aeb67fc6ecf267ca",
    //           customId: null,
    //           name: "精密加工",
    //           code: null,
    //           count: 335,
    //           eventList: null,
    //           children: null,
    //         },
    //         {
    //           treeId: "36d0f463ae4642f3b28c4380cc770882",
    //           parentId: "033b2aad6b6947b4aeb67fc6ecf267ca",
    //           customId: null,
    //           name: "半导体制造",
    //           code: null,
    //           count: 113,
    //           eventList: null,
    //           children: null,
    //         },
    //       ],
    //     },
    //   ],
    // };

    renderChart(eacharts1.value);

    loading.value = false;
  });
};
onMounted(() => {});
defineExpose({
  init,
});
</script>
<style lang="scss" scoped>
@use "@/assets/scss/index.scss";

.Box {
  display: grid;
  gap: 5px;
  height: 550px;
  grid-template-rows: 1fr 1.3fr;
  padding: 10px 10px 15px 10px;

  .eachartsBox {
    height: 100%;
    padding: 10px;
    // display: grid;
    display: flex;
    flex-direction: column;
    justify-content: center;
    // gap: 5px;
    grid-template-columns: 1.3fr 1fr;

    .totalBox {
      height: 100%;
      display: grid;
      gap: 5px;
      height: 80%;
      width: 85%;
      grid-template-rows: repeat(2, 1fr);

      &:nth-child(1) {
      }
      .textBox {
        display: flex;
        align-items: center;

        // justify-content: center;
        &:nth-child(1) {
          border-bottom: 1px solid #fff;
        }
        span {
          cursor: pointer;
          &:nth-child(1) {
            font-size: 14px;
            width: 120px;
            text-align: end;
          }
          &:nth-child(2) {
            font-weight: 700;
            font-size: 22px;
          }
        }
      }
    }
  }
  .eachartsBoxTop {
    grid-template-columns: 1fr;
    .totalBox {
      width: 95%;
      height: 45%;

      grid-template-rows: 1fr;
      grid-template-columns: 1.2fr 1fr 1fr;
      &:nth-child(1) {
        border-radius: 10px ;
      }
      &:nth-child(2) {
        border-radius:  10px;
      }
      .textTop {
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        &:nth-child(1) {
          border-right: 1px solid #fff;
          border-bottom: none;
        }
        &:nth-child(2) {
          border-right: 1px solid #fff;
        }
        span {
          cursor: pointer;
          &:nth-child(2) {
            // margin-top: 10px;
            font-size: 12px;
            width: 100%;
          }
          &:nth-child(1) {
            font-weight: 700;
            // margin-bottom: 5px;
            line-height: 30px;
            font-size: 30px;
          }
        }
      }
    }
  }
}
.boxCenter {
  height: 100%;
  display: grid;
  gap: 5px;
  grid-template-rows: repeat(1, 1fr);
  .box {
    // height: 100%;
    width: 100%;
    height: 100%;
    padding: 10px;
    display: grid;
    gap: 5px;
    grid-template-columns: 1.3fr 1fr;
    // place-items: center;

    .totalBox {
      display: grid;
      gap: 5px;
      height: 80%;
      width: 85%;
      grid-template-rows: repeat(2, 1fr);
      border-radius: 10px;

      margin: auto;
      .textBox {
        display: flex;
        align-items: center;

        // justify-content: center;
        &:nth-child(1) {
          border-bottom: 1px solid #fff;
        }
        span {
          cursor: pointer;
          &:nth-child(1) {
            font-size: 14px;
            width: 120px;
            text-align: end;
          }
          &:nth-child(2) {
            font-weight: 700;
            font-size: 22px;
          }
        }
      }
    }
  }
}
</style>
<!--  -->
