<template>
  <div class="water-analysis-page">
    <div class="top">
      <div class="top" v-if="!isComponent">
        <div class="form">
          <div class="tittle tittle1">2023年黑臭水体消除情况</div>
          <el-form label-width="auto" :rules="projectEstimateRules" inline ref="ruleForm" :model="FormList">
            <el-form-item label="项目名称" prop="props">
              <el-input v-model="FormList.props" placeholder="请输入项目名称" @change="ChangeClick(k.key, FormList[k.key])">
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="icon">
          <div class="tittle">黑臭水体年度考核统计表</div>
          <todoDon ref="todoDonRef" :params="tableData" @searchClick="searchClick"></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>
        <mapBox id="map" ref="mapRef" :isShowTool="false" @clickMap="clickMap" />
      </div>
      <detial v-else-if="isComponent == 1" @searchClick="searchClick" :paramsData="params"> </detial>
    </div>
  </div>
</template>
<script setup>
import detial from './detial/index';
import mapBox from '@/components/Map';
import todoDon from './todoDon.vue';
import emgBox from '@/utils/ElMessageBox';
import home from '@/views/index.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 FormList = ref({});
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' },
]);
const IsTrue = reactive([
  { label: '已达标', value: '1' },
  { label: '未达标', value: '0' },
]);
//动态组件
let dataForm = reactive({
  tableData: { itemDataType: 'NLFZBZ' },
  tableDateTwo: '',
  tableLoading: true,
});
let { tableData } = toRefs(dataForm);
// 获取列表数据
// 搜索
const searchForm = () => {
  todoDonRef.value.search(tableData.value);
};
// 重置
const resectClcik = () => {
  ruleForm.value.resetFields();
  todoDonRef.value.search(tableData.value);
};
// 新增
const clickMap = ty => {
  // alert(111);
};
//保存
function open2() {
  tableDalgoRef.value.submit();
}
function onModalClose() {
  visible.value = false;
  todoDonRef.value.search(tableData.value);
}
function handleClick({ props: { name } }) {
  activeName.value = name;
  console.log('name', name);
}
const params = ref({});
function searchClick(row) {
  params.value = row;
  isComponent.value = row.type;
}
onMounted(() => {});
</script>
<style lang="scss" scoped>
#map {
  width: 100%;
  height: 800px;
}
.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: 40px;
  z-index: 111;
  position: absolute;
  width: 180px;
  height: 50px;
  background: #ffffff;
  display: flex;
  align-items: center;
  color: #000;
  div {
    flex: 1;
  }
  .tuli_img {
    display: flex;
    width: 100px;
    align-items: center;
  }
}
.tittle {
  font-size: 16px;
  font-weight: bold;
  width: 200px;
  height: 40px;
  background: #fafafc;
  line-height: 40px;
  text-align: center;
  margin: 5px 0;
  color: #848484;
}
.tittle1 {
  background: transparent;
}
.water-analysis-page {
  padding: 20px;
  overflow-y: hidden;
}
:deep(.el-dialog__body) {
  height: 520px;
  overflow: auto;
}
</style>