<!--智慧排水左侧面板 -->
<template>
  <!-- 普查现状 -->
  <div class="CensusStatus">
    <div class="ListBoxHeader">
      <div class="ListBoxHeader_font">普查现状</div>
    </div>
    <div class="partTop">
      <div class="partTP flex flex-justcontent-spacebetween">
        <div
          class="part"
          v-for="(item, index) in tableData"
          :key="index"
          @click="partClick(item)"
          :class="partName == item.name ? 'activedright' : ''"
        >
          <div class="parttop">
            <img :src="item.Imgurl" class="upImg" />
          </div>
          <div class="upper">
            <div class="upperNum">
              <div
                class="oflower"
                :style="{
                  color:
                    item.name == '易涝点'
                      ? '#a2fff8FF'
                      : item.name == '风险点'
                      ? '#faecabFF'
                      : '#92edbfFF',
                }"
              >
                {{ item.num }}
              </div>
              <div class="oflowerDw">{{ item.dw }}</div>
            </div>
            <div class="upperMc">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div v-if="partName == '缺陷管网'" class="defect">
        <ChartRy :echartData="ryData" :refresh="ryRefresh" />
      </div>

      <div class="partList" v-else>
        <div class="head">
          <span style="width: 10%; text-align: center">序号</span>
          <span style="width: 45%; padding-left: 30px">{{ partName }}</span>
          <span style="width: 45%; padding-left: 130px">位置</span>
        </div>
        <Vue3SeamlessScroll
          :list="dataList"
          :singleHeight="36"
          :singleWaitTime="1500"
          :hover="true"
          class="scrollCont"
        >
          <div class="scrollCont">
            <li
              v-for="(item, index) in dataList"
              :key="index"
              :class="Pointname == item.yls ? 'activedright' : ''"
              @click="Pointclick(item, index)"
            >
              <span class="tableBodyList_span1">{{ item.num }}</span>
              <div class="tableBodyList_span2" :title="item.yls">{{ item.yls }}</div>
              <div class="tableBodyList_span3" :title="item.wz">{{ item.wz }}</div>
            </li>
          </div>
        </Vue3SeamlessScroll>
      </div>
    </div>
  </div>
  <!-- 降雨实况 -->
  <div class="RainfallForecast">
    <div class="ListBoxHeader">
      <div class="ListBoxHeader_font">降雨实况</div>
    </div>
    <div class="RainfallTop">
      <div class="subRightBox">
        <div
          class="headcenter"
          v-for="(item, index) in yearList"
          :key="item"
          :class="activedname == item.name ? 'activedright' : ''"
          @click="yearclick(item, index)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="rainImgBox">
        <div class="rainend" id="rainend">
          <!-- <mapbox style="position: relative"></mapbox> -->
        </div>
        <div class="rainLegend flex flex-align-center">
          <div class="flex flex-align-center" v-for="i in showRainList" :key="i">
            <span :style="{ background: i.color }"></span>{{ i.value }}
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 群众反馈 -->
  <div class="PublicFeedback">
    <div class="ListBoxHeader">
      <div class="ListBoxHeader_font">群众反馈</div>
    </div>
    <div class="BarChart">
      <qzfk_3d />
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import mapbox from "@/views/oneMap/map/mapboxInTable.vue";
import fxd from "@/assets/images/zhps/fxd.png"; //风险点
import qxgw from "@/assets/images/zhps/qxgw.png"; //缺陷管网
import yld from "@/assets/images/zhps/yld.png"; //易涝点

import qzfk_3d from "./qzfk_3d.vue"; //
import ChartRy from "./chartRy.vue";
import bus from "@/bus";
const AllData = reactive({});
const ryData = ref({});
const ryRefresh = ref("");
const tableData = ref([
  { name: "易涝点", num: "7", Imgurl: yld, dw: "处" },
  { name: "风险点", num: "9", Imgurl: fxd, dw: "处" },
  { name: "缺陷管网", num: "6.1", Imgurl: qxgw, dw: "km" },
]);
const showRainList = ref([]);
const Pointname = ref("");
const dataList = ref([
  { num: "1", yls: "永安路", wz: "百米大道永安路" },
  { num: "2", yls: "永昌路北口", wz: "双拥大道永昌路" },
  { num: "3", yls: "桥儿沟隧道", wz: "双拥大道桥儿沟" },
  { num: "4", yls: "原水果市场", wz: "双拥大道东十里铺" },
  { num: "5", yls: "王家坪旧址", wz: "圣地路" },
  { num: "6", yls: "桥儿沟隧道口", wz: "双拥大道桥儿沟" },
  { num: "7", yls: "水果市场", wz: "双拥大道东十里铺" },
  { num: "8", yls: "动水果市场", wz: "双拥大道东十里铺" },
  { num: "9", yls: "王家坪旧址门口", wz: "圣地路" },
]);
const images = [
  "https://server1.wh-nf.cn:6082/tif/0819_8.tif",
  "https://server1.wh-nf.cn:6082/tif/0819_9.tif",
  "https://server1.wh-nf.cn:6082/tif/0819_10.tif",
  "https://server1.wh-nf.cn:6082/tif/0819_11.tif",
];
// 普查现状点击事件
function Pointclick(val) {
  Pointname.value = val.yls;
}

const yearList = ref([
  { name: "1小时", value: 1 },
  { name: "3小时", value: 2 },
  { name: "12小时", value: 3 },
  { name: "24小时", value: 4 },
]);
const activedname = ref("1小时");
// 时间点击事件
function yearclick(val, index) {
  activedname.value = val.name;

  showRainList.value =
    index == 0
      ? ranLeng[0]
      : index == 1
      ? ranLeng[1]
      : index == 2
      ? ranLeng[2]
      : ranLeng[3];

  console.log("index", index);
  initRainImage([images[index]]);
}
const timeActive = ref(0);
const ranLeng = [
  [
    { value: "0-0.2", color: "rgba(7, 213, 118, 0)" },
    { value: "0.2-5", color: "rgb(38, 129, 240,1)" },
    { value: "5-16", color: "rgba(222,230,0,1)" },
    { value: "16-25", color: "rgba(255,184,15,1)" },
    { value: ">25", color: "rgb(255, 26, 26,1)" },
  ],
  [
    { value: "0-5", color: "rgba(7, 213, 118, 0)" },
    { value: "5-15", color: "rgba(7, 213, 118, 1)" },
    { value: "15-30", color: "rgba(38, 129, 240,1)" },
    { value: "30-70", color: "rgba(247, 223, 56, 1)" },
    { value: "70-140", color: "rgba(230, 85, 41, 1)" },
    { value: ">140", color: "rgba(255, 26, 26, 1)" },
  ],
  [
    { value: "0-5", color: "rgba(7, 213, 118, 0)" },
    { value: "5-15", color: "rgba(7, 213, 118, 1)" },
    { value: "15-30", color: "rgba(38, 129, 240,1)" },
    { value: "30-70", color: "rgba(247, 223, 56, 1)" },
    { value: "70-140", color: "rgba(230, 85, 41, 1)" },
    { value: ">140", color: "rgba(255, 26, 26, 1)" },
  ],
  [
    { value: "0-10", color: "rgba(7, 213, 118, 0)" },
    { value: "10-25", color: "rgba(7, 213, 118, 1)" },
    { value: "25-50", color: "rgba(38, 129, 240,1)" },
    { value: "50-100", color: "rgba(247, 223, 56, 1)" },
    { value: "100-250", color: "rgba(230, 85, 41, 1)" },
    { value: ">250", color: "rgba(255, 26, 26, 1)" },
  ],
];

const partName = ref("易涝点");
// 普查切换
function partClick(val) {
  partName.value = val.name;
  if (partName.value == "风险点") {
    bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: true });
    bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: false });
    newfiberMapbox.map.easeTo({
      center: [109.488, 36.596],
      zoom: 13,
    });
    dataList.value = [
      { num: "1", yls: "长青路石油小", wz: "石油小区后门" },
      { num: "2", yls: "长青路纺织花园车", wz: "太阳鸟健身房" },
      { num: "3", yls: "凯泽世纪花园", wz: "凯泽世纪花园" },
      { num: "4", yls: "七里铺街 ", wz: "勘探公司" },
      { num: "5", yls: "南关街大礼堂", wz: "大礼堂" },
      {
        num: "6",
        yls: "柳林隧道博城向柳林方向引桥",
        wz: "柳林隧道博城向柳林方向引桥入口",
      },
      { num: "7", yls: "杨家湾超市门前", wz: "杨家湾路延大萃园校园公寓对面" },
      { num: "8", yls: "马家湾博城至培植中学", wz: "博城至培植中学门前" },
      { num: "9", yls: "百米大道延安小学十字", wz: "百米大道延安小学十字" },
    ];
  } else if (partName.value == "易涝点") {
    bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: false });
    bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: true });
    newfiberMapbox.map.easeTo({
      center: [109.488, 36.596],
      zoom: 13,
    });
    dataList.value = [
      { num: "1", yls: "永安路", wz: "百米大道永安路" },
      { num: "2", yls: "永昌路北口", wz: "双拥大道永昌路" },
      { num: "3", yls: "桥儿沟隧道", wz: "双拥大道桥儿沟" },
      { num: "4", yls: "原水果市场", wz: "双拥大道东十里铺" },
      { num: "5", yls: "王家坪旧址", wz: "圣地路" },
      { num: "6", yls: "桥儿沟隧道口", wz: "双拥大道桥儿沟" },
      { num: "7", yls: "水果市场", wz: "双拥大道东十里铺" },
      { num: "8", yls: "动水果市场", wz: "双拥大道东十里铺" },
      { num: "9", yls: "王家坪旧址门口", wz: "圣地路" },
    ];
  } else {
    bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: false });
    bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: false });
    newfiberMapbox.map.easeTo({
      center: [109.488, 36.596],
      zoom: 13,
    });
  }
}
async function urlToFile(url, fileName) {
  // 使用 fetch 获取图片并转换为 Blob
  const response = await fetch(url);
  const blob = await response.blob();
  // 将 Blob 转换为 File 对象
  const file = new File([blob], fileName, { type: blob.type });
  return file;
}

const createCanvas = (id) => {
  let canvas = document.createElement("canvas");
  canvas.id = "canvas" + id;
  canvas.style.height = "90%";
  canvas.style.width = "90%";
  canvas.style.position = "relative";
  canvas.style.top = "5px";
  //canvas.style.display = 'none';
  document.getElementById("rainend").append(canvas);
  return canvas;
};

const createPlot = async (e, canvas) => {
  var tif = await GeoTIFF.fromArrayBuffer(e.target.result);
  var tifImg = await tif.getImage();
  var readRasters = await tifImg.readRasters();
  plot == null &&
    (plot = new plotty.plot({
      canvas,
      data: readRasters[0],
      width: tifImg.getWidth(),
      height: tifImg.getHeight(),
      domain: [0, 256],
      colorScale: "mycolorscale",
    }));
  plot.setData(readRasters[0], tifImg.getWidth(), tifImg.getHeight());
  plot.render();
};

const createCanvasLayer = (canvasId, i, bbox) => {
  bbox = [
    [bbox[0], bbox[3]],
    [bbox[2], bbox[3]],
    [bbox[2], bbox[1]],
    [bbox[0], bbox[1]],
  ];
  if (newfiberMapbox_table.map.getLayer("canvas-layer" + i)) {
    newfiberMapbox_table.map.removeLayer("canvas-layer" + i);
    newfiberMapbox_table.map.removeSource("canvas-source" + i);
  }
  newfiberMapbox_table.map.addSource("canvas-source" + i, {
    type: "canvas",
    canvas: canvasId,
    coordinates: bbox,
    animate: true,
  });

  newfiberMapbox_table.map.addLayer({
    id: "canvas-layer" + i,
    type: "raster",
    source: "canvas-source" + i,
  });
  newfiberMapbox_table.map.moveLayer("canvas-layer" + i);
};

const plotInit = (colorScale = colorScale) => {
  const minVal = colorScale[0].value;
  const maxVal = colorScale[colorScale.length - 1].value;
  let color = colorScale.filter((i) => Number(i.value) / maxVal <= 1);
  if (color[color.length - 1].value / maxVal < 1)
    color.push({ value: maxVal, color: colorScale[color.length].color });
  plotty.addColorScale(
    "mycolorscale",
    color.map((i) => i.color),
    color.map((i) => (i.value / maxVal).toFixed(5))
  );
};

let colorScale = [
  { value: "0", color: "rgba(7, 213, 118, 0)" },
  { value: "0.1", color: "rgba(7, 213, 118, 0)" },
  { value: "5", color: "rgba(7, 213, 118, 1)" },
  { value: "15", color: "rgba(38, 129, 240,1)" },
  { value: "30", color: "rgba(247, 223, 56, 1)" },
  { value: "70", color: "rgba(230, 85, 41, 1)" },
  { value: "140", color: "rgba(255, 26, 26, 1)" },
];
let imageFiles = [];
let canvas = [];
let plot = null;
const initRainImage = async (imagesList) => {
  imageFiles = await Promise.all(
    imagesList.map((url) => urlToFile(url, _.last(_.split(url, "/"))))
  );

  canvas = createCanvas(0);
  plotInit(colorScale);
  setRainImage(0);
  //createCanvasLayer(canvas.id, 0, [109.36903069276376, 36.53005543707354, 109.62694602722712, 36.7105574823517]);
  setRainImage(0);
  // newfiberMapbox_table.map.setZoom(10);
  // newfiberMapbox_table.map.setPitch(50);
  // let i = 0;
  // let interval = setInterval(() => {
  //   if (i >= imageFiles.length) i = 0;
  //   setRainImage(i++);
  // }, 1000);
};

const setRainImage = (index) => {
  var reader = new FileReader();
  reader.onload = (e) => createPlot(e, canvas);
  reader.readAsArrayBuffer(imageFiles[index]);
};

// 缺陷逛网
function getData() {
  let obj = {
    xData: [
      "脱节",
      "接口材料脱落",
      "支管暗接",
      "异物穿入",
      "渗漏",
      "沉积",
      "结垢",
      "障碍物",
      "残墙与坝根",
      "树根",
      "浮渣",
    ],
    data: [0.3, 0.8, 0.6, 0.4, 0.1, 0.2, 0.5, 0.7, 0.4, 0.1, 0.1],
    num: [],
  };
  let max = JSON.parse(JSON.stringify(obj.data));
  let one = max.sort((a, b) => b - a)[0];
  max.forEach((i) => {
    obj.num.push(one);
  });
  ryData.value = obj;
  ryRefresh.value = Math.random();
}

onMounted(() => {
  showRainList.value = ranLeng[0];
  getData();
  initRainImage([images[0]]);
  bus.emit("clearAllLayer");
  bus.emit("SetLayerShow", ["排水监测", "雨水管网流向"]);
});
onBeforeUnmount(() => {
  bus.emit("setLayerVisible", { layername: "fengXianPoint", isCheck: false });
  bus.emit("setLayerVisible", { layername: "yiLaoPoint", isCheck: false });
  var canvas = document.getElementById("canvas0");
  canvas.remove();
});
</script>

<style lang="scss" scoped>
.CensusStatus {
  width: 450px;
  height: 44%;
  .partTop {
    width: 450px;
    height: calc(100% - 55px);
    margin-top: 5px;
    .partTP {
      width: 430px;
      height: 85px;
      // background: red;
      margin: 0 auto;
      .part {
        width: 133px;
        height: 76px;
        cursor: pointer;
        .parttop {
          height: 76px;
          .upImg {
            width: 100%;
            height: 100%;
          }
        }
      }
      .upper {
        width: 60px;
        height: 60px;
        position: relative;
        top: -67px;
        left: 60px;
        .upperNum {
          display: flex;
          height: 50%;
          // background: red;
          .oflower {
            width: 50%;
            font-family: DINPro;
            font-weight: bold;
            font-size: 22px;
            color: #33ffcc;
            // background: linear-gradient(0deg, #faffff 0%, #00ffea 100%);
            // -webkit-background-clip: text;
            // -webkit-text-fill-color: transparent;
            line-height: 40px;
            display: flex;
            justify-content: space-around;
          }
          .oflowerDw {
            width: 50%;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 12px;
            color: #ffffff;
            line-height: 40px;
            display: flex;
            justify-content: space-around;
          }
        }
        .upperMc {
          display: flex;
          justify-content: space-around;
          align-items: center;
          height: 50%;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 15px;
          color: #ffffff;
        }
      }
    }
    .partList {
      width: 450px;
      height: calc(100% - 85px);
      // background: yellowgreen;
      .head {
        height: 38px;
        width: 430px;
        margin: 0 auto;
        background: linear-gradient(
          0deg,
          rgba(74, 164, 255, 0.6392156863) 0%,
          rgba(0, 251, 255, 0) 100%
        );
        border-radius: 6px;
        border: 1px solid #004285;
        display: flex;
        align-items: center;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
      }
      .scrollCont {
        width: 430px;
        margin: 0 auto;
        height: calc(100% - 40px);
        overflow: hidden;
        cursor: pointer;
        // background: red;
        li {
          width: 100%;
          height: 34px;
          display: flex;
          // justify-content: space-between;
          align-items: center;
          margin-top: 2px;
          background: url("@/assets/images/zhps/liebiao.png") no-repeat;
          background-size: 100% 100%;
          .tableBodyList_span1 {
            width: 10%;
            // background: rgb(160, 155, 155);
            padding-left: 15px;
            font-family: DINPro;
            font-weight: bold;
            font-size: 22px;
            color: #ffffff;
            line-height: 58px;
          }
          .tableBodyList_span2 {
            // background: red;
            padding-left: 30px;
            width: 45%;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            white-space: nowrap; /* 确保文本在一行内显示 */
            text-overflow: ellipsis; /* 使用省略号表示文本被裁剪 */
            overflow: hidden;
          }
          .tableBodyList_span3 {
            // background: red;
            width: 45%;
            text-align: right;
            padding-right: 25px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #00f2ff;
            overflow: hidden;
            white-space: nowrap; /* 确保文本在一行内显示 */
            text-overflow: ellipsis; /* 使用省略号表示文本被裁剪 */
          }
        }
        .activedright {
          background: url("@/assets/images/zhps/lbxz.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
    .defect {
      margin: auto;
      width: 430px;
      height: calc(100% - 85px);
      // background: url('@/assets/images/zhps/gwEhs.png') no-repeat;
      // background-size: 100% 100%;
    }
  }
}
.RainfallForecast {
  width: 450px;
  height: 28%;
  .RainfallTop {
    width: 450px;
    height: calc(100% - 52px);
    margin-top: 5px;
    .subRightBox {
      width: 440px;
      margin: 0 auto;
      height: 35px;
      display: flex;
      cursor: pointer;
      font-size: 14px;
      color: #ffffff;
      .headcenter {
        width: 98px;
        height: 26px;
        padding: 2px 3px;
        background: #0d4c7d;
        text-align: center;
        margin-top: 5px;
        margin-left: 10px;
        font-size: 16px;
      }
      .activedright {
        border: 1px solid #1c8aff;
        color: #e4f5ff;
        background: #004285;
      }
    }
    .rainImgBox {
      margin: 0 auto;
      width: 440px;
      height: calc(100% - 35px);
      // background: rgb(153, 153, 214);
      .rainend {
        width: 440px;
        height: 85%;
        background: url("@/assets/images/zhps/hsRain.png") no-repeat;
        background-size: 100% 100%;
      }
      .rainLegend {
        width: 440px;
        height: 15%;
        justify-content: space-evenly;
        color: #fff;
        z-index: 10;

        .flex {
          height: 24px;
        }
        .number {
          font-size: 14px;
          color: #fff;
        }
        span {
          display: block;
          width: 14px;
          height: 14px;
          border-radius: 4px;
          margin-right: 5px;
          border: 1px solid #fff;
        }
        .sBorder {
          border: 1px solid #39f7ff;
        }
      }
    }
  }
}
.PublicFeedback {
  width: 450px;
  height: 25%;

  .BarChart {
    margin: 8px auto;
    width: 420px;
    height: calc(100% - 60px);
    // background: url('@/assets/images/zhps/bingtu.png') no-repeat;
    // background-size: 100% 100%;
  }
}
.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;
  }
}
::-webkit-scrollbar {
  width: 5px; /* 设置滚动条的宽度 */
}
</style>