<template>
  <div class="chanChuJiXiao">
    <div class="partTitleHM">
      黑臭水体
      <div class="tabs flex">
        <div class="tabItem" v-for="item in tabs" :key="item.id" :class="{ active: curTab === item.id }" @click="tabClick(item)">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="ListBoxBody">
      <div class="content">
        <div class="target flex flex-j-left flex-align-center">
          <div class="titles titlesmb">
            <div class="mbs">目标</div>
          </div>
          <div class="valsText">{{ quotaInfo.improveGoals }}</div>
        </div>
        <div class="measures flex flex-j-left flex-align-center">
          <div class="titles titlecs">
            <div class="mbs">措施</div>
          </div>
          <div class="valsText">{{ quotaInfo.reformMethod }}</div>
        </div>

        <el-table ref="table" :data="tableData" height="120" v-if="curTab == 1">
          <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
          <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
        </el-table>

        <el-table ref="table" :data="tableData" height="120" v-if="curTab == 2">
          <el-table-column label="污水处理厂" prop="partitionName" show-overflow-tooltip />
          <el-table-column label="进水量(万t/d)" prop="reformAchievement" show-overflow-tooltip />
        </el-table>

        <el-table ref="table" :data="tableData" height="120" v-if="curTab == 3">
          <el-table-column label="污水处理厂" prop="partitionName" show-overflow-tooltip />
          <el-table-column label="进水BOD浓度(mg/L)" prop="reformAchievement" show-overflow-tooltip />
        </el-table>

        <div class="achievements flex flex-j-left flex-align-center">
          <div class="titles titlecg">
            <div class="mbs">成果</div>
          </div>
          <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
            {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
          </div>
        </div>
        <div class="bottom flex-v">
          <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
        </div>
      </div>
    </div>

    <!-- 地图水体点击弹窗 -->
    <el-dialog v-model="dialogShow" :title="ExamineYearA + blackWaterNameA + '水质监测详情'" append-to-body width="900px">
      <div class="hcstDialog">
        <div class="part">
          <div class="title">透明度(cm)</div>
          <ChartBar3D :echartData="echartData1" class="chart" :key="refresh1"></ChartBar3D>
        </div>
        <div class="part">
          <div class="title">氨氮(mg/L)</div>
          <ChartBar3D :key="refresh2" :echartData="echartData2" class="chart"></ChartBar3D>
        </div>
        <div class="part">
          <div class="title">溶解氧(mg/L)</div>
          <ChartBar3D :key="refresh3" :echartData="echartData3" class="chart"></ChartBar3D>
        </div>
        <div class="part">
          <div class="title">氧化还原电位(mV)</div>
          <ChartBar3D :echartData="echartData4" class="chart" :key="refresh4"></ChartBar3D>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import bus from '@/bus';
import { blackWaterInfoList, queryYearStatistic } from '@/api/spongePerformance/prevention';
import ChartBar3D from '@/views/sponeScreen/Echarts/echartBar3D.vue';
import { quotaCommomInfoList, hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js';
import kaifengShengHuoWS from '@/assets/geojson/kaifeng/kaifengShengHuoWS.json'; //生活污水
import kaifengBOD from '@/assets/geojson/kaifeng/kaifengBOD.json'; //进水BOD
import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
import tuLi72X from '@/assets/newImgs/tuLi72X.png';

const { proxy } = getCurrentInstance();
const dialogShow = ref(false);
const ExamineYearA = ref('');
const blackWaterCodeA = ref('');
const blackWaterNameA = ref('');
const refresh1 = ref(1);
const refresh2 = ref(1);
const refresh3 = ref(1);
const refresh4 = ref(1);
const echartData1 = ref({
  // xAxis: ['3月', '4月', '9月', '11月'],
  // seriesData: [126, 162, 119, 86, 113],
});
const echartData2 = ref({
  // xAxis: ['3月', '4月', '9月', '11月'],
  // seriesData: [0.8, 0.35, 1.12, 0.9, 0.98],
});
const echartData3 = ref({
  // xAxis: ['3月', '4月', '9月', '11月'],
  // seriesData: [5.4, 13, 9.2, 10.4, 8.9],
});
const echartData4 = ref({
  // xAxis: ['3月', '4月', '9月', '11月'],
  // seriesData: [126, 162, 119, 86, 113],
});
const tabs = ref([
  { id: 1, name: '黑臭水体' },
  { id: 2, name: '生活污水' },
  { id: 3, name: '进水BOD' },
]);
const curTab = ref(1);

const quotaInfo = ref({}); //改造措施数据
const tableData = ref([]);
const type = ref('hcst');

const tabClick = item => {
  curTab.value = item.id;
  bus.emit('removeKHLayer'); //清除图层
  if (curTab.value == 1) {
    type.value = 'hcst';
    addOdorousWaterBodies(); //黑臭水体图层
    setTimeout(() => {
      newfiberMapbox.map.easeTo({
        center: [114.365, 34.803],
        zoom: 11.9,
      });
    }, 500);
  } else if (curTab.value == 2) {
    type.value = 'shwssjl';
    // 生活污水收集率
    newfiberMapBoxVectorLayer.addGeojsonSymbol('kaifengShengHuoWS', kaifengShengHuoWS, tuLi72X, 20, 1.3, 5); //图层名、图层geojson，图标，标注每行多少个字，行间距
    setTimeout(() => {
      newfiberMapbox.map.easeTo({
        center: [114.365, 34.763],
        zoom: 11.6,
      });
    }, 500);
  } else {
    type.value = 'cqjsbod';
    // 进水BOD
    newfiberMapBoxVectorLayer.addGeojsonSymbol('kaifengBOD', kaifengBOD, tuLi72X, 20, 1.3, 5); //图层名、图层geojson，图标，标注每行多少个字，行间距
    setTimeout(() => {
      newfiberMapbox.map.easeTo({
        center: [114.365, 34.763],
        zoom: 11.6,
      });
    }, 500);
  }
  getjb();
  getkhzn();
};

// 产出绩效公共指标信息
async function getjb() {
  let res = await quotaCommomInfoList({
    quotaCode: type.value,
  });
  if (res && res.code == 200) {
    let data = res.data;
    quotaInfo.value = data && data.length ? data[0] : {};
    quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split('；') : [];
  }
}
// 产出绩效公共指标信息
async function getkhzn() {
  let res = await hmyztQuotaDataList({
    quotaType: type.value,
  });
  if (res && res.code == 200) {
    tableData.value = res.data;
  }
}

//地图渲染黑臭水体
const addOdorousWaterBodies = async () => {
  // 飞哥 这=这里
  let params = {
    examineYear: 2023,
  };
  let res = await blackWaterInfoList(params);
  console.log(res, 'ress');
  if (res && res.code == 200) {
    let black_odor = [],
      black_odor_label = [];
    res.data.forEach(data => {
      data.fillcolor = data.isExamine == 1 ? '#70b603' : '#d9001b';
      let waterLine = turf.feature(Terraformer.WKT.parse(data.geometrys), data);
      let waterLabel = turf.center(waterLine, {
        properties: data,
      });
      black_odor.push(waterLine);
      black_odor_label.push(waterLabel);
    });
    let waterLineGeojson = turf.featureCollection(black_odor);
    let waterLabelGeojson = turf.featureCollection(black_odor_label);
    if (!newfiberMapbox.map.getLayer('waterLine')) {
      newfiberMapbox.map.addSource('waterLine', { type: 'geojson', data: waterLineGeojson });
      newfiberMapbox.map.addSource('waterLabel', { type: 'geojson', data: waterLabelGeojson });
      newfiberMapbox.map.addLayer({
        id: 'waterLine',
        type: 'line',
        source: 'waterLine',
        paint: {
          'line-color': ['get', 'fillcolor'],
          'line-width': 5,
        },
      });

      newfiberMapbox.map.addLayer({
        id: 'waterLabel',
        type: 'symbol',
        source: 'waterLabel',
        layout: {
          'text-field': ['get', 'blackWaterName'],
          'text-font': ['KlokanTech Noto Sans Regular'],
          'text-size': 16,
          'text-offset': [0, 2],
        },
        paint: {
          'text-halo-color': 'rgba(238, 251, 255,1)',
          'text-color': ['get', 'fillcolor'],
          'icon-opacity': 1,
          'text-halo-width': 1,
        },
      });
    } else {
      newfiberMapbox.map.getSource('waterLine').setData(waterLineGeojson);
      newfiberMapbox.map.getSource('waterLabel').setData(waterLabelGeojson);
    }

    //newfiberMapbox.map.moveLayer('waterLine', 'odorousWaterBodies');
  }
};

// 点击黑臭水体查看监测指标详情
const queryYearStatist = async () => {
  let params = {
    blackWaterCode: blackWaterCodeA.value,
    sampleDate: ExamineYearA.value,
  };
  const res = await queryYearStatistic(params);
  refresh1.value++;
  refresh2.value++;
  refresh3.value++;
  refresh4.value++;
  echartData1.value.xAxis = res.data.datelist;
  echartData1.value.seriesData = res.data.tralist;
  echartData2.value.xAxis = res.data.datelist;
  echartData2.value.seriesData = res.data.nh3nlist;
  echartData3.value.xAxis = res.data.datelist;
  echartData3.value.seriesData = res.data.dolist;
  echartData4.value.xAxis = res.data.datelist;
  echartData4.value.seriesData = res.data.orplist;
  // console.log(echartData1.value, '123');
};

onMounted(() => {
  getjb();
  getkhzn();
  setTimeout(() => {
    // 地图黑臭水体点击查看监测数据详情
    newfiberMapbox.map.on('click', 'waterLine', e => {
      let clickfeature = newfiberMapbox.map
        .queryRenderedFeatures([
          [e.point.x - 10 / 2, e.point.y - 10 / 2],
          [e.point.x + 10 / 2, e.point.y + 10 / 2],
        ])
        // .filter(i => i.layer.id == 'odorousWaterBodies' || i.layer.id == 'waterLine');
        .filter(i => i.layer.id == 'waterLine');
      dialogShow.value = true;
      blackWaterCodeA.value = clickfeature[0].properties.blackWaterCode;
      blackWaterNameA.value = clickfeature[0].properties.blackWaterName;

      queryYearStatist();
      console.log('clickfeature', '点击事件11', clickfeature);
      // emits('clicksWaterBodies', clickfeature[0].properties);
    });
  }, 5000);
});
</script>
<style lang="scss">
.hcstDialog {
  display: flex;
  flex-wrap: wrap;
  .part {
    width: 48%;
    margin-right: 2%;
    .title {
      font-size: 18px;
      font-weight: bold;
      color: #fff;
    }
    .chart {
      height: 300px !important;
    }
  }
}
.chanChuJiXiao {
  width: 460px;

  .ListBoxBody {
    background: rgba(8, 75, 125, 1);
    padding: 10px;
    margin-top: -3px;
    .content {
      height: 100%;

      .target,
      .measures,
      .achievements {
        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
        border-radius: 3px;
        width: 100%;
        height: 40px;
        padding: 0 10px;

        .titles {
          width: 50px;
          font-size: 16px;
          color: #ffffff;
          position: relative;
          height: 20px;
          margin-top: 15px;

          .mbs {
            position: absolute;
            top: -10px;
            left: 5px;
          }
        }

        .titlesmb {
          background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
        }

        .titlecs {
          background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
        }

        .titlecg {
          background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
        }
      }

      .measures {
        margin-top: 5px;
      }

      .valsText {
        color: #58d6ff;
        margin-left: 10px;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .achievements {
        font-family: Source Han Sans CN;
        font-size: 18px;

        margin-top: 10px !important;

        .vals {
          color: #00fe00 !important;
          margin-left: 20px;
        }
        .colors1 {
          color: #00fe00;
        }
        .colors2 {
          color: #ff5e66;
        }
      }

      .bottom {
        width: 100%;
        height: 50px;
        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
        color: #58d6ff;
        font-size: 14px;
        padding: 5px;
        overflow-y: scroll;
        justify-content: flex-start;
        display: flex;
      }
    }
  }

  .tabs {
    float: right;
    margin: 8px 40px 0px 0px;
    .tabItem {
      width: 78px;
      height: 24px;
      line-height: 24px;
      background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
      background-size: 100% 100%;
      margin-left: 10px;
      font-size: 14px;
      color: #ffffff;
      text-align: center;
      cursor: pointer;

      &:first-of-type {
        margin-left: 0;
      }

      &.active {
        background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
.jcxx {
  width: 450px;
  height: 360px;
  color: #ffffff;
  .hcmsg {
    font-size: 14px;
    line-height: 20px;
  }
  .img_box {
    margin-top: 10px;
    width: 100%;
    height: 160px;
    overflow-y: scroll;
    flex-wrap: wrap;
    .img {
      width: 100px;
      height: 100px;
    }
  }
}
</style>