<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">
          <div
            class="textTop"
            style="background-color: #28a74570"
            @click="openterminalPopUpBox('')"
          >
            <span>{{ data.allCount }}</span>
            <span>已安装终端数</span>
          </div>
          <div
            class="textTop"
            style="background-color: #28a74590"
            @click="openterminalPopUpBox('1')"
          >
            <span>{{ data.onLine }}</span>
            <span>在线终端数</span>
          </div>
          <div
            class="textTop"
            style="background-color: #ff250070"
            @click="openterminalPopUpBox('0')"
          >
            <span>{{ data.offLine }}</span>
            <span>离线终端数</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>
  <!-- 详情弹框 -->
  <terminalPopUpBox ref="terminalPopUpBoxRef" />
</template>

<script lang="ts" setup>
import { onMounted, ref, getCurrentInstance, onUnmounted } from "vue";
const { proxy }: any = getCurrentInstance();
import { color } from "@/constant/index";
import terminalPopUpBox from "@/views/VoltageSag_BJ/components/popUpFrame/terminalPopUpBox.vue";
import { devFlagCount } from "@/api/statistics/index";
import "echarts-liquidfill";
import { isEqual } from "lodash";
import { useStore } from "vuex";
const store = useStore();
const loading = ref(false);
const data: any = ref({
  alarmCount: 0,
  eventCount: 0,
  lookALarmCount: 0,
  lookNoticeCount: 0,
  lookWarnCount: 0,
  noticeCount: 0,
  warnCount: 0,
});
const eacharts1 = ref(null);

const terminalPopUpBoxRef = ref();
const myChart = ref(null);
const renderChart = (key: any) => {
  // 如果实例存在，则销毁它
  if (myChart.value) {
    myChart.value.dispose();
  }

  myChart.value = proxy.$echarts.init(key);
  myChart.value.setOption({
    color: ["#28a74590", "#ff250070"],
    title: {
      text: "终端运行状态占比",
      left: "center",
      top: "10",
      textStyle: {
        color: "#fff",
      },
    },
    legend: {
      orient: "vertical",
      right: 10,
      top: 10,
      itemGap: 10,
      textStyle: {
        color: "#fff",
      },
      fontSize: 12,
      padding: [2, 0, 0, 0], //[上、右、下、左]
      itemWidth: 15,
      itemHeight: 10,
      data: ["在线终端", "离线终端"],
    },
    tooltip: {
      trigger: "item",
      formatter: function (el) {
        return el.marker + el.name + " : " + el.value;
      },
      // formatter: "{b} : {c} ({d}%)",
    },
    series: [
      {
        showEmptyCircle: true,
        type: "pie",
        center: ["50%", "55%"],
        radius: "55%",
        selectedOffset: 100, // 设置偏离距离
        minAngle: 10,

        label: {
          show: true,
          overflow: "none",

          formatter: function (data) {
            return (
              "{name|" +
              data.name +
              ": " +
              data.value +
              "台" +
              "\n}" +
              " \n{value|占比：" +
              data.percent.toFixed(1) +
              "%}"
            );
          },
          rich: {
            name: {
              fontSize: 12,
              color: "#ffffff",
            },
            value: {
              fontSize: 12,
              color: "#ffffff",
            },
          },
        },
        labelLine: {
          show: true,
          normal: {
            length: 15,
            length2: 0,

            lineStyle: {
              width: 3,
            },
          },
        },

        itemStyle: {
          normal: {
            borderColor: "#03060F",
            borderWidth: "5",
          },
        },
        data: [
          {
            name: "在线终端",
            value: data.value.onLine,
          },
          {
            name: "离线终端",
            value: data.value.offLine,
          },
        ],
      },
    ],
  });
  // 添加点击事件
  myChart.value.off("click"); // 先移除之前的点击事件
  myChart.value.on("click", function (params: any) {
    if (params.name == "在线终端") {
      openterminalPopUpBox("1");
    } else {
      openterminalPopUpBox("0");
    }
  });
};

const openterminalPopUpBox = (status: string) => {
  terminalPopUpBoxRef.value.open("", status);

  // devFlagCountDetail({
  //     deptId: store.state.deptId,
  //     type: store.state.timeType,
  // }).then((res: any) => {

  // })
};
const init = () => {
  devFlagCount({
    deptId: store.state.deptId,
    type: store.state.timeType,
    startTime: store.state.timeValue[0],
    endTime: store.state.timeValue[1],
  }).then((res: any) => {
    let isSame = isEqual(data.value, res.data);

    data.value = res.data;
    if (!isSame) {
      loading.value = true;

      renderChart(eacharts1.value);
      loading.value = false;
    }
  });
};
// 保存定时器ID
const timer = ref(null);
onMounted(() => {
  // 保存定时器引用
  timer.value = setInterval(() => {
    init();
  }, 60000);
});
// 组件卸载时清除定时器
onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
});
defineExpose({
  init,
});
</script>
<style lang="scss" scoped>
@use "@/assets/scss/index.scss";

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

  .eachartsBox {
    height: 100%;
    padding: 10px;
    display: grid;
    gap: 5px;
    grid-template-columns: 1.3fr 1fr;

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

      .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: 92%;
      height: 70%;

      grid-template-rows: 1fr;
      grid-template-columns: 1fr 1fr 1fr;
      .textTop {
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        &:nth-child(1) {
          border-radius: 10px 0 0 10px;
          // border-right: 1px solid #fff;
          border-bottom: none;
        }
        &:nth-child(3) {
          border-radius: 0 10px 10px 0;
          // border-right: 1px solid #fff;
        }
        span {
          cursor: pointer;
          &:nth-child(2) {
            // margin-top: 10px;
            font-size: 14px;
            width: 120px;
          }
          &: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>
<!--  -->
