<template>
  <div class="titleBox">监测点规模统计</div>
  <div class="Box">
    <div class="eachartsBox">
      <div
        class="totalBox"
        @click="clickNum('站点详情')"
        style="background-color: #28a74570"
      >
        <div>
          <span>站点总数：</span>
          <span class="text">{{ statisticsObj.stationAll }}</span>
        </div>
        <div>
          <span>运行站点数： </span>
          <span>{{ statisticsObj.stationRun }} </span>
        </div>
      </div>
      <div
        class="eacharts1"
        ref="eacharts1"
        style="width: 100%; height: 100%"
      ></div>
    </div>

    <div class="eachartsBox">
      <div
        class="totalBox"
        @click="clickNum('终端详情')"
        style="background-color: #07ccca70"
      >
        <div>
          <span>终端总数：</span>
          <span class="text">{{ statisticsObj.devAll }}</span>
        </div>
        <div>
          <span>运行终端数： </span>
          <span>{{ statisticsObj.devRun }} </span>
        </div>
      </div>
      <div
        class="eacharts2"
        ref="eacharts2"
        style="width: 100%; height: 100%"
      ></div>
    </div>
    <div class="eachartsBox">
      <div
        class="totalBox"
        @click="clickNum('监测点详情')"
        style="background-color: #007bff70"
      >
        <div>
          <span>监测点总数：</span>
          <span class="text">{{ statisticsObj.lineAll }}</span>
        </div>
        <div>
          <span>在线监测点数：</span>
          <span>{{ statisticsObj.lineRun }} </span>
        </div>
      </div>
      <div
        class="eacharts3"
        ref="eacharts3"
        style="width: 100%; height: 100%"
      ></div>
    </div>
    <Table ref="tableRef" />
    <DevTable ref="devTableRef" />
    <LineTable ref="lineTableRef" />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, getCurrentInstance, reactive } from "vue";
import { ledgerScale } from "@/api/manage_wx/index";

const { proxy }: any = getCurrentInstance();
import * as echarts from "echarts";
import Table from "./table.vue";
import DevTable from "./devTable.vue";
import LineTable from "./lineTable.vue";
import "echarts-liquidfill";
import { useStore } from "vuex";
const store = useStore();

const eacharts1 = ref(null);
const eacharts2 = ref(null);
const eacharts3 = ref(null);
const tableRef = ref();
const devTableRef = ref();
const lineTableRef = ref();
const renderChart = (
  key: any,
  color: string,
  point: number,
  title: string,
  clickHandler: Function
) => {
  var myChart = proxy.$echarts.init(key);
  myChart.setOption({
    title: [
      {
        text: title,
        x: title == "监测点在线率" ? "17%" : "22%",
        y: "60%",
        textStyle: {
          fontSize: 14,
          fontWeight: "500",
          color: "#fff",
          lineHeight: 14,
        },
      },
    ],
    series: [
      {
        type: "liquidFill",
        radius: "95%",
        center: ["50%", "50%"],
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: color + "80", // 0% 处的颜色
              },
              {
                offset: 1,
                color: color,
              },
            ],
            globalCoord: false,
          },
        ],
        data: [point], // data个数代表波浪数
        backgroundStyle: {
          borderWidth: 1,
          color: "RGBA(51, 66, 127, 0.7)",
        },
        label: {
          fontSize: 20,
          color: "#fff",

          position: ["50%", "45%"],
        },
        outline: {
          show: false,
          borderDistance: 10,
          itemStyle: {
            borderWidth: 2,
            borderColor: "#112165",
          },
        },
      },
    ],
  });
  // 注册图表点击事件
  myChart.on("click", clickHandler);
};
const clickNum = (title: string) => {
  if (title == "站点详情") {
    tableRef.value.open(title);
  }
  if (title == "终端详情") {
    devTableRef.value.openDev(title);
  }

  if (title == "监测点详情") {
    lineTableRef.value.openLine(title);
  }
  // tableRef.value.open(title);
  // devTableRef.value.openDev(title);
};

// 为每个图表创建专门的点击处理函数
const handleStationChartClick = (params: any) => {
  // 打开站点详情
  tableRef.value.open("站点详情");
};

const handleTerminalChartClick = (params: any) => {
  // 打开终端详情
  devTableRef.value.openDev("终端详情");
};

const handleLineChartClick = (params: any) => {
  // 打开监测点详情
  lineTableRef.value.openLine("监测点详情");
};

// 监测点规模统计
const statisticsObj = reactive({
  devAll: "",
  devRun: "",
  lineAll: "",
  lineRun: "",
  stationAll: "",
  stationRun: "",
});

// 场站在线率
const stationOnlineRate = ref(0);
// 终端在线率
const terminalOnlineRate = ref(0);
// 监测点在线率
const onlineRate = ref(0);

onMounted(() => {
  // renderChart(eacharts1.value, "#28a745", stationOnlineRate.value, "场站在线率");
  // renderChart(eacharts2.value, "#07CCCA", terminalOnlineRate.value, "终端在线率");
  // renderChart(eacharts3.value, "#007bff", onlineRate.value, "监测点在线率");
});

const initialData = () => {
  ledgerScale({ deptId: store.state.deptId }).then((res: any) => {
    if (res.code == "A0000") {
      Object.assign(statisticsObj, res.data);
      onlineRate.value = res.data.lineRun / res.data.lineAll;
      stationOnlineRate.value = res.data.stationRun / res.data.stationAll;
      terminalOnlineRate.value = res.data.devRun / res.data.devAll;
      renderChart(
        eacharts1.value,
        "#28a745",
        stationOnlineRate.value,
        "场站在线率",
        handleStationChartClick
      );
      renderChart(
        eacharts2.value,
        "#07CCCA",
        terminalOnlineRate.value,
        "终端在线率",
        handleTerminalChartClick
      );
      renderChart(
        eacharts3.value,
        "#007bff",
        onlineRate.value,
        "监测点在线率",
        handleLineChartClick
      );
    }
  });
};

defineExpose({
  initialData,
});
</script>
<style lang="scss" scoped>
@use "@/assets/scss/index.scss";

.Box {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(3, 1fr);
  height: 275px;

  .eachartsBox {
    height: 95%;
    padding: 0 5px;
    display: grid;
    gap: 5px;
    place-items: center;
    grid-template-rows: 1.1fr 1fr;

    .totalBox {
      height: 100%;
      display: grid;
      gap: 5px;
      height: 80%;
      width: 105%;
      // margin: 10% auto;
      grid-template-rows: repeat(2, 1fr);
      border-radius: 10px;
      cursor: pointer;

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