<!-- 总体概览右侧面板 -->
<template>
  <!-- 风险评估 -->
  <div class="RiskAssessment">
    <div class="ListBoxHeader">
      <div class="ListBoxHeader_font">风险评估</div>
    </div>
    <div class="RiskProportion">
      <div class="TopProportion">
        <div class="riskMc">
          <div class="icon"></div>
          <div class="text">风险占比</div>
        </div>
        <div class="riskZs">
          <div class="eachDescribe">
            <div class="icon bgcblue"></div>
            <div class="text">总数</div>
          </div>
          <div class="eachDescribe">
            <div class="icon bgcYellow"></div>
            <div class="text">风险数量</div>
          </div>
        </div>
      </div>
      <div class="ContentNum">
        <div class="dfFlxa" v-for="(item, index) in riskData">
          <div class="middleextA flex">
            <div>
              <img :src="item.Imgurl" alt="" />
            </div>
            <div style="margin-left: 4px; cursor: pointer" @click="FxClick(item.name)">
              {{ item.name }}
            </div>
          </div>
          <div class="middleextB flex">
            <div class="BJ_CenBox1" :style="getWidth(item, 1)"></div>
            <div
              style="
                font-family: Source Han Sans CN;
                font-weight: bold;
                font-size: 13px;
                color: #f8744b;
                text-align: right;
                line-height: 12px;
                margin-left: 5px;
              "
            >
              {{ item.sl }}
            </div>
          </div>
          <div class="middleextC flex">
            <div
              style="
                font-family: Source Han Sans CN;
                font-weight: bold;
                font-size: 16px;
                color: #00b8f7;
                width: 65%;
                text-align: right;
              "
            >
              {{ item.num }}
            </div>

            <div
              style="
                font-family: Source Han Sans CN;
                font-weight: bold;
                font-size: 13px;
                color: #00b8f7;
              "
            >
              {{ item.dw }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="DrainageRisk">
      <div class="TopProportion">
        <div class="riskMc">
          <div class="icon"></div>
          <div class="text">{{ FxClickName }}风险评估</div>
        </div>
      </div>

      <tslyqk_constituent_3d />
    </div>
  </div>
  <!-- 预警处置 -->
  <div class="WarningSisposal">
    <div class="ListBoxHeader">
      <div class="ListBoxHeader_font">预警处置</div>
    </div>
    <div class="WarningSj">
      <div class="TopProportion">
        <div class="WarningSl">
          <div class="eachDescribe">
            <div class="icon bgcls"></div>
            <div class="text">预警数量</div>
          </div>
          <div class="eachDescribe">
            <div class="icon bgcYellow"></div>
            <div class="text">处置数量</div>
          </div>
        </div>
        <div class="WarningNy">
          <div class="head-right" style="">
            <div
              class="head-item"
              v-for="(item, index) in yearList"
              :key="item"
              :class="activedname == item.name ? 'activedright' : ''"
              @click="yearclick(item, index)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="WarningList">
        <div class="Warningpart flex flex-justcontent-spacebetween">
          <div class="part" v-for="(item, index) in tableData" :key="index">
            <div class="parttop">
              <div class="upper">
                <div class="Major">
                  <img :src="item.Imgurl" class="upImg" />
                </div>
                <div class="lower">{{ item.name }}</div>
              </div>
              <div class="below">
                <div class="handIn">{{ item.num }}</div>
                <div
                  class="oflower"
                  :style="{
                    color:
                      item.gm == '较多'
                        ? '#FF4D5DFF'
                        : item.gm == '正常'
                        ? '#2BE7ABFF'
                        : '#F8E270FF',
                  }"
                >
                  {{ item.gm }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="WarningEcharts">
      <AssessmentjsEcharts
        :data="chartData2"
        :refresh="chartData2.refresh"
      ></AssessmentjsEcharts>
    </div>
  </div>
</template>

<script setup>
import tslyqk_constituent_3d from "@/views/oneMap/Echarts/tslyqk_constituent_3d.vue"; //3d图例
import AssessmentjsEcharts from "@/views/oneMap/Echarts/AssessmentjsEcharts.vue";

import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
const AllData = reactive({});
import yjsj from "@/assets/newImgs/yjsj.png"; //预警数据
import czsj from "@/assets/newImgs/czsj.png"; //处置数据
import czl from "@/assets/newImgs/czl.png"; //处置率

import ranqi_icon from "@/assets/newImgs/ranqi_icon.png"; //燃气
import qiaoliang from "@/assets/newImgs/qiaoliang.png"; //桥梁
import sd_icon from "@/assets/newImgs/sd_icon.png"; //隧道
import ps_icon from "@/assets/newImgs/ps_icon.png"; //隧道
import fxzb from "@/assets/newImgs/fxzb.png"; //风险占比
import bus from "@/bus";
import mapBoxVectorLayer from "@/utils/GISdocument/mapboxVectorLayer.js";
const yearList = ref([
  { name: "月", value: 1 },
  { name: "年", value: 2 },
]);
const chartData2 = ref({
  xAxis: ["12/1", "12/2", "12/3", "12/4", "12/5", "12/6"],
  refresh: 1,
});
const riskData = ref([
  { name: "燃气", num: 4979.88, sl: 149, Imgurl: ranqi_icon, dw: "公里" },
  { name: "排水", num: 435.7, sl: 118, Imgurl: ps_icon, dw: "公里" },
  { name: "桥梁", num: 84, sl: 0, Imgurl: qiaoliang, dw: "座" },
  { name: "隧道", num: 1, sl: 0, Imgurl: sd_icon, dw: "座" },
]);
const tableData = ref([
  { name: "预警数量", num: "60", gm: "较多", Imgurl: yjsj },
  { name: "处置数量", num: "60", gm: "正常", Imgurl: czsj },
  { name: "处置率", num: "75%", gm: "未完成", Imgurl: czl },
]);

const activedname = ref("月");
function yearclick(val) {
  activedname.value = val.name;
}
// 动态计算盒子的宽度
const getWidth = (item, Num) => {
  let widthNum = 0;
  if (Num == 1) {
    widthNum = (item.sl / (item.num + item.sl)) * 100;
  }
  return `width:${widthNum}%`;
};

// 风险评估点击事件
const FxClickName = ref("燃气");
const obj = ref([
  {
    name: "低风险  70%  104.3",
    value: 104.3,
    itemStyle: {
      color: "#2BE7ABFF",
    },
  },
  {
    name: "一般风险 20%  29.8",
    value: 29.8,
    itemStyle: {
      color: "#18A7F2FF",
    },
  },
  {
    name: "较大风险 5%  7.45",
    value: 7.45,
    itemStyle: {
      color: "#F8E270FF",
    },
  },
  {
    name: "重大风险 5%  7.45",
    value: 7.45,
    itemStyle: {
      color: "#FF5D6CFF",
    },
  },
]);

function FxClick(val) {
  FxClickName.value = val;
  if (FxClickName.value == "燃气") {
    let obj = [
      {
        name: "低风险  70%  1345.5",
        value: 1345.5,
        itemStyle: {
          color: "#2BE7ABFF",
        },
      },
      {
        name: "一般风险 20%  384.5",
        value: 384.5,
        itemStyle: {
          color: "#18A7F2FF",
        },
      },
      {
        name: "较大风险 5%  91.11",
        value: 91.11,
        itemStyle: {
          color: "#F8E270FF",
        },
      },
      {
        name: "重大风险 5%  91",
        value: 91,
        itemStyle: {
          color: "#FF5D6CFF",
        },
      },
    ];
    bus.emit("FxVisible", obj);

    bus.emit("clearAllLayer");
    bus.emit("SetLayerShow", ["燃气风险评估"]);
    // bus.emit("SiSeTuBol", true);
    bus.emit("SetLayerShow", ["燃气视角"]);
  } else if (FxClickName.value == "排水") {
    let obj = [
      {
        name: "低风险  65%  76.7",
        value: 76.7,
        itemStyle: {
          color: "#2BE7ABFF",
        },
      },
      {
        name: "一般风险 20%  23.6",
        value: 23.6,
        itemStyle: {
          color: "#18A7F2FF",
        },
      },
      {
        name: "较大风险 10%  11.8",
        value: 11.8,
        itemStyle: {
          color: "#F8E270FF",
        },
      },
      {
        name: "重大风险 5%  5.9",
        value: 5.9,
        itemStyle: {
          color: "#FF5D6CFF",
        },
      },
    ];
    bus.emit("FxVisible", obj);

    bus.emit("clearAllLayer");
    bus.emit("SetLayerShow", ["排水风险评估", "综合视角"]);
    // bus.emit("SiSeTuBol", true);
  } else if (FxClickName.value == "桥梁") {
    let obj = [
      {
        name: "低风险  0%  0",
        value: 0,
        itemStyle: {
          color: "#2BE7ABFF",
        },
      },
      {
        name: "一般风险  0%  0",
        value: 0,
        itemStyle: {
          color: "#18A7F2FF",
        },
      },
      {
        name: "较大风险  0%  0",
        value: 0,
        itemStyle: {
          color: "#F8E270FF",
        },
      },
      {
        name: "重大风险  0%  0",
        value: 0,
        itemStyle: {
          color: "#FF5D6CFF",
        },
      },
    ];
    bus.emit("FxVisible", obj);
    let heatMapList = [
      { lonlat: [109.483918489923, 36.61249884561792], value: 2 },
      { lonlat: [109.49124949683474, 36.60775434074279], value: 2 },
      { lonlat: [109.50572853744899, 36.604187093623594], value: 2 },
      { lonlat: [109.5132346699733, 36.608741935164794], value: 2 },
      { lonlat: [109.51904613562726, 36.611042774763824], value: 2 },
      { lonlat: [109.53198346589791, 36.61636440529855], value: 2 },
      { lonlat: [109.54373268160329, 36.62722667094952], value: 2 },
      { lonlat: [109.55451083074375, 36.63431209655593], value: 2 },
      { lonlat: [109.57940016110899, 36.64686611882419], value: 2 },
      { lonlat: [109.6012150494243, 36.65907698436654], value: 2 },
      { lonlat: [109.61124926974423, 36.66415805243906], value: 2 },
      { lonlat: [109.61784004029477, 36.67516787032632], value: 2 },
      { lonlat: [109.62919460452721, 36.67788106032265], value: 2 },
      { lonlat: [109.63196929767449, 36.67928099390055], value: 2 },
      { lonlat: [109.46480514943485, 36.62360094904237], value: 2 },
      { lonlat: [109.46681140209512, 36.62561194970287], value: 2 },
      { lonlat: [109.45369327487766, 36.62328969949192], value: 2 },
      { lonlat: [109.443303636095, 36.62474923155087], value: 2 },
      { lonlat: [109.44253820357403, 36.62516596076744], value: 2 },
      { lonlat: [109.43462173954586, 36.62753072368888], value: 2 },
      { lonlat: [109.43142085679224, 36.62788342400572], value: 2 },
      { lonlat: [109.39106668692392, 36.63072241385541], value: 2 },
      { lonlat: [109.38132672192305, 36.63163653873149], value: 2 },
      { lonlat: [109.37824301325273, 36.63040238705813], value: 27 },
      { lonlat: [109.37798122397636, 36.63011639738166], value: 2 },
      { lonlat: [109.37831675562222, 36.63067146665423], value: 27 },
      { lonlat: [109.45808259115762, 36.64141836784447], value: 27 },
      { lonlat: [109.45252356495284, 36.64605023114681], value: 27 },
      { lonlat: [109.44790551030523, 36.649213742325166], value: 27 },
      { lonlat: [109.45036882152101, 36.65071418592719], value: 27 },
      { lonlat: [109.45281846503426, 36.652553881255365], value: 27 },
      { lonlat: [109.45326421337076, 36.65291233679495], value: 27 },
      { lonlat: [109.4536673368842, 36.658868012328924], value: 27 },
      { lonlat: [109.45294461614503, 36.659015596859966], value: 27 },
      { lonlat: [109.4510201368656, 36.67300515322296], value: 27 },
      { lonlat: [109.44381236996472, 36.68160182382983], value: 27 },
      { lonlat: [109.44144112268805, 36.68059085074304], value: 2 },
      { lonlat: [109.49931192498602, 36.60090167752511], value: 2 },
      { lonlat: [109.49902156203582, 36.59724500678111], value: 2 },
      { lonlat: [109.49840537722008, 36.58936418409113], value: 2 },
      { lonlat: [109.49699505923651, 36.58701118890556], value: 2 },
      { lonlat: [109.49461410678568, 36.58333134844861], value: 2 },
      { lonlat: [109.49111259069487, 36.57930391823156], value: 2 },
      { lonlat: [109.48858414500634, 36.57771295040469], value: 2 },
      { lonlat: [109.48677981843753, 36.57709276592818], value: 2 },
      { lonlat: [109.48281921942416, 36.57541727734781], value: 2 },
      { lonlat: [109.48006673878221, 36.575126922804415], value: 2 },
      { lonlat: [109.4761270437505, 36.5750411530202], value: 2 },
      { lonlat: [109.47084671389513, 36.5750022383416], value: 2 },
      { lonlat: [109.46891109753669, 36.5745583596313], value: 2 },
      { lonlat: [109.46741115045506, 36.57421153657004], value: 2 },
    ];
    let heatMapJeojson = {};
    let heatMapFeatures = [];
    heatMapList.forEach((element) => {
      let heatmap = turf.point(element.lonlat);
      heatmap.properties.value = element.value;
      gcoord.transform(heatmap, gcoord.BD09, gcoord.WGS84);
      heatMapFeatures.push(heatmap);
    });
    heatMapJeojson = turf.featureCollection(heatMapFeatures);
    mapBoxVectorLayer.removeByIds(["heatMapLayer"]);
    mapBoxVectorLayer.addHeatMapLayer("heatMapLayer", heatMapJeojson, "value");
    heatMapJeojson.features.forEach((feature) => {
      gcoord.transform(feature, gcoord.WGS84, gcoord.BD09);
    });
    bus.emit("clearAllLayer");
    bus.emit("SetLayerShow", ["仿真地图", "桥梁视角"]);
  } else {
    let obj = [
      {
        name: "低风险  0%  0",
        value: 0,
        itemStyle: {
          color: "#2BE7ABFF",
        },
      },
      {
        name: "一般风险  0%  0",
        value: 0,
        itemStyle: {
          color: "#18A7F2FF",
        },
      },
      {
        name: "较大风险  0%  0",
        value: 0,
        itemStyle: {
          color: "#F8E270FF",
        },
      },
      {
        name: "重大风险  0%  0",
        value: 0,
        itemStyle: {
          color: "#FF5D6CFF",
        },
      },
    ];
    bus.emit("FxVisible", obj);
    bus.emit("clearAllLayer");
    bus.emit("SetLayerShow", ["仿真地图", "隧道视角"]);
  }
}

const showPanel = ref(true); //面板展开收起
// 面板内容展开收起控制
const props = defineProps({
  showPanel: {
    type: Boolean,
  },
});
watch(
  () => props.showPanel,
  () => {
    showPanel.value = props.showPanel;
  },
  { immediate: true }
);
onMounted(() => {
  bus.emit("FxVisible", obj.value);
});
onBeforeUnmount(() => {
  mapBoxVectorLayer.removeByIds(["heatMapLayer"]);
});
</script>

<style lang="scss" scoped>
.RiskAssessment {
  width: 450px;
  height: 410px;
  // background: yellowgreen;
  z-index: 999;
  .RiskProportion {
    width: 450px;
    height: 175px;
    // background: red;
    .ContentNum {
      margin-top: 4px;
      width: 450px;
      height: 140px;
      .dfFlxa {
        width: 420px;
        height: 30px;
        margin: 5px auto;
        display: flex;

        .middleextA {
          height: 30px;
          width: 17%;
          align-items: center;
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 14px;
          color: #ebfeff;
        }
        .middleextB {
          height: 14px;
          width: 58%;
          margin-top: 8px;
          background: linear-gradient(
            0deg,
            rgba(0, 43, 67, 0.8) 0%,
            rgba(0, 76, 118, 0.8) 100%
          );
          border-radius: 16px;
          // border: 1px solid #00B8F7;
          // background: yellow;
          .BJ_CenBox1 {
            display: inline-block;
            height: 12px;
            background: #00b8f7;
            border-radius: 15px;
            box-sizing: border-box;
            // padding: 0 5px;
          }
        }
        .middleextC {
          margin-left: 13px;
          height: 30px;
          width: 22%;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }
  .DrainageRisk {
    margin-top: 5px;
    width: 450px;
    // height: 41%;
    height: calc(100% - 225px);
    // background: blue;
  }
}
.WarningSisposal {
  width: 450px;
  height: calc(100vh - 530px);
  // background: red;
  .WarningSj {
    width: 450px;
    height: 190px;
    margin-top: 5px;
    // background: yellowgreen;
    .WarningList {
      margin-top: 5px;
      width: 425px;
      height: 85%;
      // background: yellow;
      margin: auto;
      .Warningpart {
        margin-top: 5px;
        .part {
          width: 130px;
          height: 160px;
          background: url("@/assets/newImgs/iSpt.png") no-repeat;
          background-size: 100% 100%;
          .parttop {
            height: 160px;
            .upper {
              height: 50%;
              .Major {
                height: 70%;
                .upImg {
                  width: 30px;
                  height: 30px;
                  position: relative;
                  top: 20px;
                  left: 38%;
                }
              }
              .lower {
                height: 30%;
                font-family: Source Han Sans CN;
                font-weight: 500;
                font-size: 14px;
                color: #c1d3d4;
                display: flex;
                // align-items: center;
                justify-content: center;
              }
            }
            .below {
              height: 50%;
              .handIn {
                height: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: Source Han Sans CN;
                font-weight: bold;
                font-size: 22px;
                color: #12f9ff;
              }
              .oflower {
                height: 50%;
                display: flex;
                // align-items: center;
                justify-content: center;
                font-family: Source Han Sans CN;
                font-weight: 500;
                font-size: 14px;
                color: #c1d3d4;
              }
            }
          }
        }
      }
    }
  }
  .WarningEcharts {
    margin-top: 5px;
    width: 450px;
    // height: 38%;
    height: calc(100% - 245px);
    // background: rgb(228, 228, 228);
  }
}
.partTitleHM {
  top: 8px;
  position: relative;
  width: 408px;
  height: 44px;
  background: url("@/assets/newImgs/partBg.png") no-repeat;
  background-size: 100% 100%;
  font-family: PangMenZhengDao;
  font-weight: 400;
  font-size: 23px;
  color: #ebfeff;
  line-height: 44px;
  padding-left: 35px;
  margin-left: 10px;
}
.TopProportion {
  display: flex;
  width: 100%;
  .riskMc {
    display: flex;
    width: 60%;
    .icon {
      margin-left: 5px;
      width: 25px;
      height: 25px;
      background: url("@/assets/newImgs/xtb_img.png") no-repeat;
    }
    .text {
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 16px;
      color: #ebfeff;
      line-height: 25px;
      padding-left: 5px;
      // background: linear-gradient(
      //   0deg,
      //   rgba(0, 242, 255, 0.5) 0%,
      //   rgba(0, 242, 255, 0) 100%
      // );
      background: linear-gradient(
        0deg,
        rgba(28, 138, 255, 0.5) 0%,
        rgba(28, 138, 255, 0) 100%
      );
      height: 10px;
      line-height: 0px;
      margin-top: 10px;
    }
  }
  .riskZs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 40%;
    .eachDescribe {
      display: flex;
      align-items: center;
      font-family: Source Han Sans CN;
      font-weight: 400;
      // padding-top: 5px;
      .icon {
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }
      .bgcYellow {
        background: #f8744b;
      }
      .bgcblue {
        background: #00b8f7;
      }
      .text {
        padding: 0 10px 0 6px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
      }
    }
  }
  .WarningSl {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 55%;
    .eachDescribe {
      display: flex;
      align-items: center;
      font-family: Source Han Sans CN;
      font-weight: 400;
      // padding-top: 5px;
      .icon {
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }
      .bgcYellow {
        background: #2be7abff;
      }
      .bgcls {
        background: #18a7f2ff;
      }
      .text {
        padding: 0 10px 0 6px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 14px;
        color: #ffffff;
      }
    }
  }
  .WarningNy {
    display: flex;
    width: 45%;
    .head-right {
      cursor: pointer;
      font-size: 14px;
      color: #ffffff;
      display: flex;
      line-height: 18px;
      .head-item {
        width: 70px;
        margin-right: 10px;
        padding: 2px 3px;
        // background: #00344f;
        background: #0d4c7d;
        color: #ffffff;
        height: 23px;
        text-align: center;
        position: relative;
        left: 40px;
      }
      .activedright {
        background: #004285;
        border-radius: 2px;
        border: 1px solid #1c8aff;
        color: #ffffff;
      }
    }
  }
}
.ListBoxHeader {
  height: 44px;
  line-height: 50px;
  width: 98%;
  background: url("@/assets/newImgs/partBg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 7px 0px 0px 8px;
  .ListBoxHeader_font {
    font-family: PangMenZhengDao;
    font-weight: 400;
    font-size: 23px;
    color: #ebfeff;
    padding-left: 34px;
  }
}
</style>