<template>
  <div class="water-analysis-page">
    <el-table :key="isFlag" :data="tableData" max-height="800" v-loading="tableLoading">
      <el-table-column type="index" width="55" label="序号" />
      <el-table-column :label="i.value" :prop="i.key" show-overflow-tooltip v-for="i in cloums">
        <template #default="{ row }" v-if="i.key == 'projectStatus'">
          <el-tag round :type="row.projectStatus == 1 ? 'success' : 'error'">{{ row.projectStatus == 1 ? '已完工' : '未完工' }}</el-tag>
        </template>
        <template #default="{ row }" v-if="i.key == 'isFlood'">
          <el-tag round :type="row.isFlood == '0' ? 'success' : 'error'">{{ row.isFlood == '0' ? '已消除' : '未消除' }}</el-tag>
        </template>
        <template #default="{ row }" v-if="i.key == 'targetPercent'">
          <span @click="handlePreview(k)" style="color: #30dc7f" v-for="k in row.fileSaveRequestList">{{ k.name }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column fixed="right" label="操作" width="250">
        <template #default="{ row }">
          <el-button link type="primary" icon="View" @click="onCheck(row, 1, '详情')">详情</el-button>
          <el-button link icon="Edit" type="warning" @click="onCheck(row, 2, '修改')">修改</el-button>
          <el-button link icon="Delete" type="danger" @click="onCheck(row, 3)">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>
  </div>
  <pagination
    v-show="totals > 0"
    :total="totals"
    v-model:page="FormList.pageNum"
    v-model:limit="FormList.pageSize"
    @pagination="dynamic_page_data_typeM(FormList)"
  />
  <el-dialog
    v-model="visible"
    :title="'积水点完工记录' + FormList.title"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    width="51%"
  >
    <tableDalgo ref="tableDalgoRef" v-if="visible" @onModalClose="onModalClose" :isComponent="params" :typeList="typeList" :key="isFlag">
    </tableDalgo>
    <template #footer>
      <div class="dialog-footer">
        <el-button v-show="typeList.type == '2'" @click="open2" type="primary">保存</el-button>
        <el-button @click="visible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { waterloggingRelationoDelete, waterloggingRelationPage } from '@/api/spongePerformance/waterloggedArea';
import { FileSystemList } from '@/api/project/tenderReview';
import tableDalgo from './tableDalgo.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
const { proxy } = getCurrentInstance();
import { reactive } from 'vue';

let visible = ref(false);
let isFlag = ref(1);
const cloums = ref([
  { value: '关联项目', key: 'projectName' },
  // { value: '项目状态', key: 'projectStatus' },
  { value: '完工时间', key: 'projectEndTime' },
  { value: '内涝点名称', key: 'name' },
  { value: '内涝点状态', key: 'isFlood' },
]);
const tableDalgoRef = ref();
const { params, waterloggingRelationWaterloggingListM } = defineProps(['params', 'waterloggingRelationWaterloggingListM']);
console.log('params', params);

const FormList = ref({
  pageNum: 1,
  pageSize: 10,
  title: '',
});
const totals = ref(0);
//动态组件
let dataForm = reactive({
  tableData: '',
  tableDateTwo: '',
  tableLoading: true,
});
let { date, tableData, tableDateTwo, tableLoading } = toRefs(dataForm);
//搜索
const search = p => {
  FormList.value.pageNum = 1;
  dynamic_page_data_typeM(p);
  isFlag.value++;
};
defineExpose({ search });
// 查看上报数据
let typeList = ref({});
const onCheck = (row, ty, t) => {
  FormList.value.title = t;
  if (ty == 1 || ty == 2) {
    typeList.value = { ...row, type: ty };
    // 获取文件列表
    FileSystemList({
      refId: row.id,
      refType: 'waterlogging_engineering',
    }).then(({ data }) => {
      typeList.value.fileList1 = data;
      visible.value = true;
    });
  } else if (ty == 3) {
    proxy.$modal
      .confirm(`是否确认删除?`)
      .then(async () => {
        projectInfoDeleteM(row.id);
      })
      .catch(() => {});
  }
};
//删除
const projectInfoDeleteM = async id => {
  let { code } = await waterloggingRelationoDelete(id);
  dynamic_page_data_typeM(params);
  waterloggingRelationWaterloggingListM();
};
const dynamic_page_data_typeM = async id => {
  let { data, total } = await waterloggingRelationPage(id);
  tableData.value = data;
  console.log('tableData.value', tableData.value);
  totals.value = total;
  tableLoading.value = false;
};
function onModalClose() {
  visible.value = false;
  dynamic_page_data_typeM(params);
}
function open2() {
  tableDalgoRef.value.submit();
}
function handlePreview(file) {
  return ElMessageBox.confirm(`下载此文件: ${file.name}？`).then(
    () => window.open(file.url),
    () => false
  );
}
onMounted(() => {
  tableData.value = params.allWaterLoggingPointList;
  console.log('tableData.value ', tableData.value);
  tableLoading.value = false;
  // dynamic_page_data_typeM(params);
});
</script>
<style lang="scss" scoped></style>