<template>
  <div class="water-analysis-page">
    <el-table :key="isFlag" :data="tableData" stripe max-height="500" v-loading="tableLoading">
      <el-table-column type="index" width="55" label="序号" align="center" />
      <el-table-column :label="i.value" align="center" :prop="i.key" show-overflow-tooltip v-for="i in cloums">
        <template #default="{ row }" v-if="i.key == 'reachStandard'">
          <el-tag v-if="row.reachStandard==''" type="warning">未填报</el-tag>
            <el-tag v-else :type="row.reachStandard === 1 ? 'success' : 'error'">{{row.reachStandard === 1 ? '达标' : '未达标' }}</el-tag>
        </template>
        <template #default="{ row }" v-if="i.key == 'fileList'">
          <span v-if=" i.id" style="color: #108ee9;cursor: pointer;" @click="FileClick(row)">文件上传</span>
          <span     @click="handlePreview(k)" style="color: #108ee9;cursor: pointer;" v-for="k in row.fileList">{{ k.name }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="水体检测记录" width="250" align="center">
        <template #default="{ row }">
          <el-button link type="primary" icon="View" @click="onCheck(row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog
    v-model="visible"
    title="年材料上传"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    width="30%"
  >
    <el-form label-width="auto" :rules="projectEstimateRules" inline ref="ruleForm" :model="FormList">
      <el-form-item label="文件上传:" prop="fileList">
        <el-upload
          v-model:file-list="FormList.fileList"
          class="upload-demo"
          action="/prod-api/system/upload"
          :headers="uploadHeader"
          multiple
          :on-preview="handlePreview"
        >
          <el-button size="mini" type="primary">上传文件</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="open2" type="primary">保存</el-button>
      <el-button @click="closed">关闭</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { defineExpose, defineEmits } from 'vue';
import { getInfo, projectInfoDelete, projectInfoGet, dynamic_page_data_type ,dynamic_page_data_typeedit} from '@/api/waterloggedArea';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getToken } from '@/utils/auth';
const { proxy } = getCurrentInstance();
const { fund_source, unit_list } = proxy.useDict('fund_source', 'unit_list');
import { reactive } from 'vue';
let visible = ref(false);
const uploadHeader = ref({
  Authorization: 'Bearer ' + getToken(),
});
let isFlag = ref(1);
const cloums = ref([
{value:'考核年份',key:'examineYear'},
  {value:'消除个数',key:'removeNum'},
  // {value:'雨量mm',key:'examineYear'},
  {value:'总数',key:'totalNum'},
  {value:'消除比例%',key:'actualPercent'},
  {value:'目标%',key:'targetPercent'},
  {value:'达标情况',key:'reachStandard'},
  {value:'佐证材料',key:'fileList'},
]);
const { params } = defineProps(['params']);
const FormList = ref({
  pageNum: 1,
  pageSize: 10,
  title: '',
});
const emits = defineEmits();
//动态组件
let dataForm = reactive({
  tableData: '',
  tableDateTwo: '',
  tableLoading: true,
});
let { date, tableData, tableDateTwo, tableLoading } = toRefs(dataForm);
//获取列表数据
//搜索
const search = p => {
  dynamic_page_data_typeM(p);
  isFlag.value++;
};
defineExpose({ search });
// 查看上报数据
const onCheck = (row, ty, t) => {
    emits('searchClick', {data:row,type:2});
};
//删除
const dynamic_page_data_typeM = async id => {
  let { code, data, monitorDynamicTableTitleList, total } = await dynamic_page_data_type(id);
  tableData.value = data;
  FormList.value.totals = total;
  tableLoading.value = false;
};
function onModalClose() {
  visible.value = false;
  // dynamic_page_data_typeM();
  dynamic_page_data_typeM(params);
}
function handlePreview(file) {
  return ElMessageBox.confirm(`下载此文件: ${file.name}？`).then(
    () => window.open(file.url),
    () => false
  );
}
function FileClick(v) {
  console.log('v', v);
  visible.value = true;
  FormList.value = v;
}
function open2() {
  let arr = [];
  FormList.value.fileList.forEach(element => {
    if (element.hasOwnProperty('response')) {
      element.response.data.refType = 'black_odor';
      arr.push(element.response.data);
    } else {
      arr.push(element);
    }
  });
  FormList.value.fileList = arr;
  dynamic_page_data_typeedit({...FormList.value,...params}).then(() => {
    proxy.$modal.msgSuccess('修改成功');
    visible.value = false;
    getDataList();
  });
}
function closed() {
  FormList.value.fileList=[]
  visible.value=false
}
onMounted(() => {
  dynamic_page_data_typeM(params);
});
</script>
<style lang="scss" scoped>
:deep(.el-dialog__body) {
  height: 520px;
  overflow: auto;
}
</style>