<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" @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>
      <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="320"
              v-loading="tableLoading"
              @row-click="clickModal"
              highlight-current-row
            >
              <el-table-column type="index" width="55" label="序号" />
              <el-table-column label="采样时间" prop="sampleTime" />
              <el-table-column label="采样点" prop="sampleLocation" />
              <el-table-column label="透明度（cm）" prop="CLA" />
              <el-table-column label="溶解氧mg/L" prop="DOX" />
              <el-table-column label="黑臭程度" prop="blackOdorName">
                <template #default="scope">
                  <span
                    :style="{
                      color:
                        scope.row.blackOdorName == '无黑臭'
                          ? 'greenyellow'
                          : scope.row.blackOdorName == '轻度黑臭'
                          ? ' #419fff'
                          : scope.row.blackOdorName == '中度黑臭'
                          ? 'orange'
                          : scope.row.blackOdorName == '重度黑臭'
                          ? 'red'
                          : '',
                    }"
                  >
                    {{
                      scope.row.blackOdorName == '无黑臭'
                        ? '无黑臭'
                        : scope.row.blackOdorName == '轻度黑臭'
                        ? '轻度黑臭'
                        : scope.row.blackOdorName == '中度黑臭'
                        ? '中度黑臭'
                        : scope.row.blackOdorName == '重度黑臭'
                        ? '重度黑臭'
                        : ''
                    }}
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="工程治理" class="proimageList">
            <div style="margin-top: 10px">黑臭水体治理工法： {{ popsdata.treatmentMethod }}</div>
            <div style="margin-top: 10px">治理前/后照片：</div>
            <el-image
              style="width: 150px; margin-top: 10px"
              v-for="i in popsdata.imageList"
              :src="i.url"
              :zoom-rate="1"
              :initial-index="4"
              :preview-src-list="[i.url]"
            />
          </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 { blackOdorpaging, blackOdorpagingriverInfo } from '@/api/spongePerformance/surfaceWater';
import detial from './detial/index';
import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
import todoDon from './todoDon.vue';
const { proxy } = getCurrentInstance();
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 closePopup = () => {
  pipePopupShow.value = false;
};
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" 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;
  padding: 10px;
  z-index: 111;
  position: absolute;
  background: $mainColor1;
  // display: flex;
  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;
    }
  }
}
.tittle {
  font-size: 16px;
  font-weight: bold;
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin: 5px 0;
  color: #fff;
}
.tittle1 {
  background: transparent;
}
.water-analysis-page {
  padding: 20px;
  overflow-y: hidden;
}

#PopupWaterlogging {
  position: fixed;
  left: 52%;
  top: 54%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 410px;
  background: #021534;
  border: 1px solid #114f89;
  z-index: 2000;
  display: flex;

  .titleTop {
    width: 95%;
    display: flex;
    padding-top: 8px;
    margin-left: 20px;
  }
  .closePopup {
    width: 5%;
    margin: 15px;
    cursor: pointer;
  }
  .PopupWaterloggingtabs {
    width: 100%;
    height: 100%;
  }
}
.proimageList {
  height: 300px;
  overflow-y: auto;
}
</style>