<template>
  <!-- 黑臭水体消除比例 -->
  <div class="water-analysis-page">
    <div class="icon">
      <todoDon ref="todoDonRef" :params="tableData" @searchClick="searchClick" @clicksWaterBodies="clicksWaterBodies"></todoDon>
    </div>
    <div class="tuli">
      <div style="margin: 10px; font-size: 18px">图例</div>
      <div v-for="i in tuliList" class="tuli_img">
        <img :src="i.icon" alt="" />
        <div>{{ i.label }}</div>
      </div>
    </div>
    <!-- gis地图 -->
    <MapBox :initJson="`/static/libs/mapbox/style/preventionCX.json`"></MapBox>
  </div>
  <!-- 地图水体点击弹窗 -->
  <el-dialog v-model="dialogShow" title="2022黄汴河水质监测详情" :modal-append-to-body="false" width="900px">
    <div class="hcstDialog">
      <div class="part">
        <div class="title">透明度(cm)</div>
        <ChartBar3D :refresh="refresh1" :echartData="echartData1" class="chart"></ChartBar3D>
      </div>
      <div class="part">
        <div class="title">氨氮(mg/L)</div>
        <ChartBar3D :refresh="refresh2" :echartData="echartData2" class="chart"></ChartBar3D>
      </div>
      <div class="part">
        <div class="title">溶解氧(mg/L)</div>
        <ChartBar3D :refresh="refresh3" :echartData="echartData3" class="chart"></ChartBar3D>
      </div>
      <div class="part">
        <div class="title">氧化还原电位(mV)</div>
        <ChartBar3D :refresh="refresh4" :echartData="echartData4" class="chart"></ChartBar3D>
      </div>
    </div>
  </el-dialog>
</template>
<script setup>
import { blackOdorpaging, blackOdorpagingriverInfo } from '@/api/spongePerformance/surfaceWater';
import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
import todoDon from './todoDon.vue';
import ChartBar3D from '@/views/sponeScreen/Echarts/echartBar3D.vue';

const { proxy } = getCurrentInstance();
const dialogShow = ref(true);
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: [52, 35, 69, 86, 22],
});
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 todoDonRef = ref(null);
const pipePopupShow = ref(false);
const popsdata = ref('');

let isComponent = ref(0);
let tuliList = ref([
  { label: '未考核', id: 0, icon: '/images/1.1.jpg' },
  { label: '已考核', id: 1, icon: '/images/1.2.jpg' },
]);
const tableData2 = ref([]);
//动态组件
let dataForm = reactive({
  tableData: { itemDataType: 'NLFZBZ' },
  tableDateTwo: '',
  tableLoading: true,
});
let { tableData } = toRefs(dataForm);
// 获取列表数据
const params = ref({});
function searchClick(row) {
  params.value = row;
  isComponent.value = row.type;
}

/** 搜索列表 */
const getDataList = async val => {
  let params = {
    pageNum: 1,
    pageSize: 999,
    riverId: val,
  };
  const res = await blackOdorpaging(params);
  pipePopupShow.value = true;
  tableData2.value = [];
  tableData2.value = res.data.records;
};
/** 搜索黑臭照片列表 */
const getDatariverInfo = async val => {
  let params = {
    riverName: val,
  };
  const res = await blackOdorpagingriverInfo(params);
  if (res && res.code == 200) {
    popsdata.value = res.data[0];
  }
};

const clicksWaterBodies = row => {
  let ids = '';
  if (row.riverId) {
    ids = row.riverId;
  } else {
    ids = row.id;
  }
  getDataList(ids);
  getDatariverInfo(row.riverName);
};
onMounted(() => {});
</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;
    }
  }
}
@import '@/assets/styles/variables.module.scss';

.water-analysis-page {
  padding: 20px;
  height: 100%;
  position: relative;
  #map {
    width: 100%;
    height: 100%;
  }
  .form {
    left: 10px;
    top: 10px;
    z-index: 111;
    position: absolute;
    width: 20%;
  }
  .icon {
    right: 0;
    top: 0;
    z-index: 111;
    position: absolute;
    width: 800px;
  }
  .tuli {
    left: 20px;
    bottom: 30px;
    padding: 10px;
    z-index: 111;
    position: absolute;
    background: $mainColor1;
    flex-wrap: wrap;
    align-items: center;
    text-align: center;
    color: #fff;
    .tuli_img {
      display: flex;
      width: 100px;
      align-items: center;
      margin-top: 8px;
      img {
        margin-right: 10px;
        width: 25px;
      }
    }
  }
}
</style>