<!--智慧排水左侧面板 -->
<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="(item, index) in ranLeng[timeActive]" :key="index">
            <span :class="index == 0 ? 'sBorder' : ''" :style="`background:${item.color}`"></span>
            <div class="number"><em v-show="index == ranLeng[timeActive].length - 1">></em>{{ item.value }}</div>
          </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 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: '双拥大道东十里铺' },
]);
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;
  console.log('index', index);
  initRainImage([images[index]]);
}
const timeActive = ref(0);
const ranLeng = [
  [
    { 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, 55, 168, 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 = '110%';
  canvas.style.width = '110%';
  canvas.style.position = 'relative';
  canvas.style.top = '-17px';
  //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(() => {
  getData();
  initRainImage([images[0]]);
});
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: 14px;
          color: #ffffff;
        }
      }
    }
    .partList {
      width: 450px;
      height: calc(100% - 85px);
      // background: yellowgreen;
      .head {
        height: 38px;
        width: 430px;
        margin: 0 auto;
        background: linear-gradient(0deg, rgba(22, 193, 216, 0.8) 0%, rgba(0, 43, 67, 0.8) 100%);
        border-radius: 6px;
        border: 1px solid #15d2fd;
        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: #00344f;
        text-align: center;
        margin-top: 5px;
        margin-left: 10px;
      }
      .activedright {
        border: 1px solid #2cfce9;
        color: #e4f5ff;
        background: #166f84;
      }
    }
    .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;
        }
        .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>