<template>
  <div class="water-analysis-page">
    <el-table :data="tableData" ref="tableRef" v-loading="tableLoading" @row-click="clickTableRow" highlight-current-row>
      <el-table-column label="年度" prop="examineYear" />
      <el-table-column label="黑臭水体/个" prop="unRemoveNum" />
      <el-table-column label="考核水体数/个" prop="totalNum" />
      <el-table-column label="目标消除比%" prop="targetPercent" />
      <el-table-column label="实际消除比%" prop="actualPercent">
        <template #default="{ row }">
          <span style="color: lime">
            {{ row.actualPercent }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="达标情况" prop="reachStandard">
        <template #default="scope">
          <span
            :style="{
              color: scope.row.reachStandard == 0 ? 'red' : 'lime',
            }"
          >
            <el-tag v-if="scope.row.reachStandard === ''" type="warning">未评价</el-tag>
            <el-tag v-else :type="scope.row.reachStandard == 0 ? 'error' : scope.row.reachStandard == 1 ? 'success' : ''">
              {{ scope.row.reachStandard == 0 ? '不达标' : '达标' }}
            </el-tag>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 地图水体点击弹窗 -->
    <el-dialog v-model="dialogShow" :title="ExamineYearA + '黄汴河水质监测详情'" :modal-append-to-body="false" 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 { preventionInfo, blackWaterInfoList, queryYearStatistic } from '@/api/spongePerformance/prevention';
import bus from '@/bus';
import { riverInfoWater } from '@/api/spongePerformance/surfaceWater';
import ChartBar3D from '@/views/sponeScreen/Echarts/echartBar3D.vue';
const { proxy } = getCurrentInstance();
const tableData = ref([]);
const tableLoading = ref(true);
const tableRef = ref(null);
const dialogShow = ref(false);
const ExamineYearA = ref('');
const blackWaterCodeA = 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 emits = defineEmits(['clicksWaterBodies']);
//获取列表数据
const getDataList = async () => {
  let params = {
    examineType: 'black_odor',
  };
  const res = await preventionInfo(params);
  if (res && res.code == 200) {
    tableLoading.value = false;
    tableData.value = res.data;
    tableRef.value.setCurrentRow(tableData.value[0], true); //表格默认第一个高亮选中
    clickTableRow(tableData.value[0]); //默认渲染第一行gis地图
    console.log(tableData.value[0], 'tableData.value[0]');
  }
};

// 表格点击，查看对应的项目情况
function clickTableRow(row) {
  ExamineYearA.value = row.examineYear;
  row.blackOdorSampleInfos &&
    row.blackOdorSampleInfos.map(item => {
      if (row.reachStandard == 0) {
        item.type = 'error_zishui'; //未消除
      } else {
        item.type = 'success_zishui'; //已消除
      }
    });
  gisMapInit(row.blackOdorSampleInfos);
  addOdorousWaterBodies(row.examineYear);
}

// gis地图渲染
function gisMapInit(data) {
  // console.log('gis地图渲染数据--', data);
  if (!!!data) return;
  let keys = ['error_zishui', 'success_zishui'];
  newfiberMapbox.popupService.popups.forEach(popup => {
    nextTick(() => {
      newfiberMapbox.removePopup(popup);
    });
  });
  !!newfiberMapbox.map.getLayer('odorousWaterBodies') && newfiberMapbox.map.removeLayer('odorousWaterBodies');
  !!newfiberMapbox.map.getSource('odorousWaterBodies') && newfiberMapbox.map.removeSource('odorousWaterBodies');
  keys.forEach(key => {
    let coverflowFeature = [];
    let selectData = data.filter(i => i.type == key);
    selectData.forEach(item => {
      if (!!!item.riverInfo.lonLat) {
        return;
      } else {
        let coverflowPoint = turf.point(item.riverInfo.lonLat.split(',').map(Number), {
          ...item,
          riverName: `${item.riverName}`,
          reachStandard: `${item.reachStandard == 1 ? '达标' : '不达标'}`,
          blackOdorName: `${item.blackOdorName}`,
          color: item.reachStandard == 1 ? '#70b603' : '#d9001b',
        });
        coverflowFeature.push(coverflowPoint);
      }
    });
    let geojson1 = turf.featureCollection(coverflowFeature);
    addWaterloggingLayer(geojson1, 'odorousWaterBodies');
  });
}
//地图渲染内涝点
const addWaterloggingLayer = (geojson, layerName) => {
  !!!newfiberMapbox.map.getSource(layerName) && newfiberMapbox.map.addSource(layerName, { type: 'geojson', data: geojson });
  !!!newfiberMapbox.map.getLayer(layerName) &&
    newfiberMapbox.map.addLayer({
      id: layerName,
      type: 'circle',
      source: layerName,
      paint: {
        'circle-color': ['get', 'color'],
        'circle-radius': 7,
      },
    });
};
//地图渲染黑臭水体
const addOdorousWaterBodies = async Year => {
  // 飞哥 这=这里
  let params = {
    examineYear: Year,
  };
  const 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 = '#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);
    console.log('blackWaterGeojson---', waterLineGeojson);
    console.log('waterLabelGeojson---', waterLabelGeojson);

    !newfiberMapbox.map.getSource('waterLine') && newfiberMapbox.map.addSource('waterLine', { type: 'geojson', data: waterLineGeojson });
    !newfiberMapbox.map.getSource('waterLabel') && newfiberMapbox.map.addSource('waterLabel', { type: 'geojson', data: waterLabelGeojson });
    !newfiberMapbox.map.getLayer('waterLine') &&
      newfiberMapbox.map.addLayer({
        id: 'waterLine',
        type: 'line',
        source: 'waterLine',
        paint: {
          'line-color': ['get', 'fillcolor'],
          'line-width': 5,
        },
      });
    !newfiberMapbox.map.getLayer('waterLabel') &&
      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,
        },
      });

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

const queryYearStatist = async () => {
  let params = {
    blackWaterCode: 'bck008',
    sampleDate: '2022',
  };
  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(() => {
  getDataList();
  setTimeout(() => {
    addOdorousWaterBodies();
  }, 2000);

  setTimeout(() => {
    //newfiberMapbox.map.moveLayer('xiaoganWater', 'waterLine');
    newfiberMapbox.map.on('click', 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;

      queryYearStatist();
      console.log('clickfeature', '点击事件11', clickfeature);

      // emits('clicksWaterBodies', clickfeature[0].properties);
    });
  }, 5000);
});
onBeforeUnmount(() => {
  if (!!!newfiberMapbox) return;
  !!newfiberMapbox.map.getLayer('waterLine') && newfiberMapbox.map.removeLayer('waterLine');
  !!newfiberMapbox.map.getSource('waterLine') && newfiberMapbox.map.removeSource('waterLine');
  !!newfiberMapbox.map.getLayer('odorousWaterBodies') && newfiberMapbox.map.removeLayer('odorousWaterBodies');
  !!newfiberMapbox.map.getSource('odorousWaterBodies') && newfiberMapbox.map.removeSource('odorousWaterBodies');
  !!newfiberMapbox.map.getLayer('waterLabel') && newfiberMapbox.map.removeLayer('waterLabel');
  !!newfiberMapbox.map.getSource('waterLabel') && newfiberMapbox.map.removeSource('waterLabel');
  newfiberMapbox.popupService.popups.forEach(popup => {
    nextTick(() => {
      if (!!!newfiberMapbox) return;
      newfiberMapbox.removePopup(popup);
    });
  });
});
</script>
<style lang="scss">
.l7-popup-tip {
  display: none;
}
.l7-popup .l7-popup-content {
  padding: 0px;
  background: rgba(3, 59, 79, 0);
}
.l7-popup .l7-popup-content .l7-popup-close-button {
  display: none;
}
</style>