<template>
  <div class="iot-pie">
    <div class="title"></div>
    <div class="pie-box">
      <img src="../../../assets/imgs/IOTImage/pie-bg.png" />
      <div class="pie-content" ref="pieRef"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { QueryListEquipment} from "../../../service/iotService";
import * as echarts from "echarts";

const pieRef = ref(null);
const colorStart =  ref(["#44C8FF","#04BE65","#EADC5C","#1CE2FF","#E57A29","#9589F4","#4A90E2","#00C853","#FF5858"]);
const colorEnd =  ref(["#009CFF","#00F5C5","#FFF100","#00FFF1","#FFC163","#BDA9FB","#007AFF","#00E676","#FF2B2B"]);

//设备消息趋势折线图options
const pieInfoOption = (dataList) => {
  let data = [];
  for (let i in dataList) {
    data.push({
      value: dataList[i].num,
      name: dataList[i].name,
      itemStyle: {
        normal: {
          color: {
            type: "linear",
            colorStops: [
              { offset: 0, color: "#44C8FF" },
              { offset: 1, color: "#009CFF" },
            ],
          },
          borderRadius: "50%",
          borderWidth: 5,
        },
      },
    })
  }
  return {
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        name: "高频感知事件",
        type: "pie",
        radius: ["85%", "97%"],
        avoidLabelOverlap: false,
        labelLine: {
          show: false,
        },
        label: {
          show: false,
          position: "center",
        },
        data: data,
      },
    ],
  };
};
// const option = {
//   tooltip: {
//     trigger: "item",
//   },
//   series: [
//     {
//       name: "Access From",
//       type: "pie",
//       radius: ["85%", "97%"],
//       avoidLabelOverlap: false,
//       labelLine: {
//         show: false,
//       },
//       label: {
//         show: false,
//         position: "center",
//       },
//       data: [
//         {
//           value: 60.25,
//           name: "Search Engine",
//           itemStyle: {
//             normal: {
//               color: {
//                 type: "linear",
//                 colorStops: [
//                   { offset: 0, color: "#44C8FF" },
//                   { offset: 1, color: "#009CFF" },
//                 ],
//               },
//               borderRadius: "50%",
//               borderWidth: 5,
//             },
//           },
//         },
//         {
//           value: 60.25,
//           name: "Direct",
//           itemStyle: {
//             normal: {
//               color: {
//                 type: "linear",
//                 colorStops: [
//                   { offset: 0, color: "#04BE65" },
//                   { offset: 1, color: "#00F5C5" },
//                 ],
//               },
//               borderRadius: "50%",
//               borderWidth: 5,
//             },
//           },
//         },
//         {
//           value: 45.25,
//           name: "Email",
//           itemStyle: {
//             normal: {
//               color: {
//                 type: "linear",
//                 colorStops: [
//                   { offset: 0, color: "#EADC5C" },
//                   { offset: 1, color: "#FFF100" },
//                 ],
//               },
//               borderRadius: "50%",
//               borderWidth: 5,
//             },
//           },
//         },
//         {
//           value: 40.25,
//           name: "Union Ads",
//           itemStyle: {
//             normal: {
//               color: {
//                 type: "linear",
//                 colorStops: [
//                   { offset: 0, color: "#1CE2FF" },
//                   { offset: 1, color: "#00FFF1" },
//                 ],
//               },
//               borderRadius: "50%",
//               borderWidth: 5,
//             },
//           },
//         },
//         {
//           value: 25.25,
//           name: "Video Ads",
//           itemStyle: {
//             normal: {
//               color: {
//                 type: "linear",
//                 colorStops: [
//                   { offset: 0, color: "#E57A29" },
//                   { offset: 1, color: "#FFC163" },
//                 ],
//               },
//               borderRadius: "50%",
//               borderWidth: 5,
//             },
//           },
//         },
//         {
//           value: 14.25,
//           name: "Video Ads",
//           itemStyle: {
//             normal: {
//               color: {
//                 type: "linear",
//                 colorStops: [
//                   { offset: 0, color: "#9589F4" },
//                   { offset: 1, color: "#BDA9FB" },
//                 ],
//               },
//               borderRadius: "50%",
//               borderWidth: 5,
//             },
//           },
//         },
//         {
//           value: 14.25,
//           name: "1111",
//           itemStyle: {
//             normal: {
//               color: {
//                 type: "linear",
//                 colorStops: [
//                   { offset: 0, color: "#4A90E2" },
//                   { offset: 1, color: "#007AFF" },
//                 ],
//               },
//               borderRadius: "50%",
//               borderWidth: 5,
//             },
//           },
//         },
//         {
//           value: 14.25,
//           name: "2222",
//           itemStyle: {
//             normal: {
//               color: {
//                 type: "linear",
//                 colorStops: [
//                   { offset: 0, color: "#FF5858" },
//                   { offset: 1, color: "#FF2B2B" },
//                 ],
//               },
//               borderRadius: "50%",
//               borderWidth: 5,
//             },
//           },
//         },
//         {
//           value: 14.25,
//           name: "3333",
//           itemStyle: {
//             normal: {
//               color: {
//                 type: "linear",
//                 colorStops: [
//                   { offset: 0, color: "#00C853" },
//                   { offset: 1, color: "#00E676" },
//                 ],
//               },
//               borderRadius: "50%",
//               borderWidth: 5,
//             },
//           },
//         },
//       ],
//     },
//   ],
// };

//设备类型/设备分布数据
const GetListEquipment = async () => {
  try {
    let res = await QueryListEquipment();

    if (res?.data?.code == "200") {
      const data = res?.data?.data;
      const typeObj = {};
      let total = 0;
      data.list.forEach((item) => {
        if(item.onlineState === 2){            //onlineState: 设备状态 0:未激活;1:在线;2:离线
          total++;
        }
      });
      let iotPieData = [];
      iotPieData.push({"name":"设备离线","num":total});
      iotPieData.push({"name":"雨水液位异常","num":0});
      iotPieData.push({"name":"污水液位异常","num":0});
      iotPieData.push({"name":"水务供应压力异常","num":0});
      iotPieData.push({"name":"其他","num":0});
      const option = pieInfoOption(iotPieData);
      const myChart = echarts.init(pieRef.value);
      option && myChart.setOption(option);
    }else{
      console.log('QueryListEquipment返回值有误')
    }
  } catch (error) {
    console.log(error)
  }
};


onMounted(() => {
  GetListEquipment();
});
</script>

<style scoped lang="scss">
.iot-pie {
  width: 100%;
  height: 180px;
  padding-left: 30px;
  padding-top: 20px;
  .pie-box {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    width: 315px;
    height: 230px;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .pie-content {
      position: relative;
      left: -7px;
      top: -20px;
      width: 180px;
      height: 180px;
      z-index: 255;
    }
  }
}
</style>
