<template>
  <div class="water-analysis-page">
    <div class="top">
      <el-tabs
        v-model="activeName"
        class="demo-tabs"
        @tab-click="handleClick"
        style="margin-top: -10px"
        type="border-card"
        v-if="!isComponent"
      >
        <el-tab-pane label="工程完成" name="todo"> </el-tab-pane>
        <el-tab-pane label="监测法" name="done"> </el-tab-pane>
        <div v-if="activeName == 'todo'" class="top">
          <div class="icon">
            <module ref="todoDonRef" :params="tableData" @searchClick="searchClick"></module>
          </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>
          <mapBox id="map" ref="mapRef" :isShowTool="false" @clickMap="clickMap" />
        </div>
        <div v-else>
          <div class="icon">
            <jctable ref="todoDonRef" :params="tableData" @searchClick="searchClick"></jctable>
          </div>
          
          <div class="tuli" v-if="activeName == 'todo'">
            <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>
          <div class="tuli" v-else>
            <div style="margin: 10px; font-size: 18px">图例</div>
            <div v-for="i in tuliList1" class="tuli_img">
              <img :src="i.icon" alt="" />
              <div>{{ i.label }}</div>
            </div>
          </div>
          <mapBox id="map" ref="mapRef" :isShowTool="false" @clickMap="clickMap" />
        </div>
      </el-tabs>
      <detial v-else-if="isComponent.type==1" @searchClick="searchClick" :isComponent="isComponent"></detial>
      <jcdetial v-else @searchClick="searchClick" :isComponent="isComponent"></jcdetial>
    </div>
  </div>
</template>
<script setup>
import detial from './detial/index';
import jcdetial from './jcdetial/index';
import mapBox from '@/components/Map';
import module from './module.vue';
import jctable from './jctable.vue';
const { proxy } = getCurrentInstance();
const { fund_source } = proxy.useDict('fund_source');
const todoDonRef = ref(null);
const ruleForm = ref(null);
let isComponent = ref(0);
const tableDalgoRef = ref();
const showSearch = ref(true);
let visible = ref(false);
const activeName = ref('todo');
let tuliList = ref([
  { label: '未消除内涝点', id: 0, icon: '/1.1.jpg' },
  { label: '已消除内涝点', id: 1, icon: '/1.2.jpg' },
  { label: '河湖', id: 2, icon: '/1.3.jpg' },
  { label: '建成区', id: 3, icon: '/1.4.jpg' },
]);
let tuliList1 = ref([
  { label: '内涝区域', id: 0, icon: '/2.jpg' },
  { label: '河湖', id: 2, icon: '/1.3.jpg' },
  { label: '建成区', id: 3, icon: '/1.4.jpg' },
]);
const IsTrue = reactive([
  { label: '已达标', value: '1' },
  { label: '未达标', value: '0' },
]);
//动态组件
let dataForm = reactive({
  tableData: {},
  tableData: { examineType: 'water_logging' ,examineMethod:'engineering '},
  tableDateTwo: '',
  tableLoading: true,
});
let { tableData } = toRefs(dataForm);
// 获取列表数据
const clickMap = ty => {
};
function handleClick({ props: { name } }) {
  activeName.value = name;
  console.log('name', name);
  if(name=='todo')tableData.value={ examineType: 'water_logging' ,examineMethod :'engineering'}
  else tableData.value={ examineType: 'water_logging' ,examineMethod :'monitoring'}
}
function searchClick(v) {
    isComponent.value = v;
}
onMounted(() => {});
</script>
<style lang="scss" scoped>
#map {
  width: 100%;
  height: 800px;
}
.top {
  position: relative;
  height: 86vh;
}
.icon {
  right: 0;
  top: 0;
  z-index: 111;
  position: absolute;
  width: 70%;
}
.tuli {
  left: 20px;
  bottom: 40px;
  z-index: 111;
  position: absolute;
  width: 280px;
  height: 200px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: #000;
  div {
    flex: 1;
  }
  .tuli_img {
    display: flex;
    width: 120px;
    align-items: center;
  }
}
.water-analysis-page {
  padding: 20px;
  overflow-y: hidden;
}
:deep(.el-dialog__body) {
  height: 520px;
  overflow: auto;
}
</style>