<template>
  <div class="water-analysis-page">
    <div class="top">
      <div class="top" v-if="!isComponent">
        <div class="icon">
          <!-- <div class="tittle">地表水水体年度考核统计表</div> -->
          <todoDon ref="todoDonRef" :params="tableData" @searchClick="searchClick" @clicksurfaceWater="clicksurfaceWater"></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`" class="surfaceWatermaps"></MapBox>
      </div>
      <detial v-else-if="isComponent == 1" @searchClick="searchClick" :paramsData="params"></detial>
    </div>
    <div class="PopupWaterlogging" id="PopupWaterlogging" v-if="pipePopupShow">
      <div class="titleTop">
        <el-tabs class="PopupWaterloggingtabs">
          <el-tab-pane label="当前地表水本年度水质监测情况">
            <el-table
              ref="tableModal"
              :data="tableData2"
              max-height="230"
              v-loading="tableLoading"
              @row-click="clickModal"
              highlight-current-row
              ><el-table-column label="考核水体" prop="riverName" />
              <el-table-column label="采样时间" prop="sampleTime" width="150" />
              <el-table-column label="溶解氧mg/L" prop="DOX" />
              <el-table-column label="高猛酸盐指数mg/L" prop="BOD" />
              <el-table-column label="氨氮mg/L" prop="NH3N" />
              <el-table-column label="总磷mg/L" prop="TP1" />
              <el-table-column label="水质类别" prop="waterQualityName" />
              <el-table-column label="目标水质类别" prop="targetWaterQualityName" />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="closePopup">
        <el-icon :size="18" @click="closePopup"><Close /></el-icon>
      </div>
    </div>
  </div>
</template>
<script setup>
import detial from './detial/index';
import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
import todoDon from './todoDon.vue';
import { waterQualitySampleInfopaging } from '@/api/spongePerformance/surfaceWater';
const { proxy } = getCurrentInstance();
const pipePopupShow = ref(false);
const todoDonRef = ref(null);
const tableData2 = 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 closePopup = () => {
  pipePopupShow.value = false;
};
//动态组件
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.riverId,
    sampleYear: val.examineYear,
  };
  const res = await waterQualitySampleInfopaging(params);
  pipePopupShow.value = true;
  tableData2.value = [];
  tableData2.value = res.data.records;
  console.log(tableData2.value, 999999999);
};

const clicksurfaceWater = row => {
  pipePopupShow.value = true;
  getDataList(row);
};
onMounted(() => {});
</script>
<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';
#map {
  width: 100%;
  height: 100%;
}
.form {
  left: 10px;
  top: 10px;
  z-index: 111;
  position: absolute;
  width: 20%;
}
.top {
  position: relative;
  height: 86vh;
}
.icon {
  right: 0;
  top: 0;
  z-index: 111;
  position: absolute;
  width: 70%;
}
.tuli {
  left: 20px;
  bottom: 30px;
  z-index: 111;
  position: absolute;
  padding: 10px;
  background: $mainColor1;
  // display: flex;
  align-items: center;
  text-align: center;
  color: #fff;

  .tuli_img {
    display: flex;
    align-items: center;
    margin-top: 8px;
    img {
      margin-right: 10px;
      width: 25px;
    }
  }
}
.tittle {
  font-size: 16px;
  font-weight: bold;
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin: 5px 0;
  color: #fff;
}

.water-analysis-page {
  padding: 20px;
  overflow-y: hidden;
}
#PopupWaterlogging {
  position: fixed;
  left: 52%;
  top: 45%;
  transform: translate(-50%, -50%);
  width: 650px;
  height: 310px;
  background: #021534;
  border: 1px solid #114f89;
  z-index: 2000;
  display: flex;

  .titleTop {
    width: 90%;
    display: flex;
    padding-top: 8px;
    margin-left: 20px;
  }
  .closePopup {
    width: 5%;
    margin: 15px;
    cursor: pointer;
  }
  .PopupWaterloggingtabs {
    width: 100%;
  }
}
.l7-popup-tip {
  display: none !important;
}
.l7-popup .l7-popup-content {
  padding: 0px;
  background: rgba(3, 59, 79, 0) !important;
}
.l7-popup-content {
  padding: 0px;
  background: rgba(3, 59, 79, 0) !important;
}
.l7-popup .l7-popup-content .l7-popup-close-button {
  display: none !important;
}
</style>