<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">
        <!-- {{ i.key }} -->
        <template #default="{ row }" v-if="i.key == 'fileList'">
          <span v-if="row?.id" style="color: #108ee9; cursor: pointer" @click="FileClick(row)">文件上传</span>
          <p @click="handlePreview(k)" style="color: #108ee9; cursor: pointer" v-for="k in row.fileList">{{ k.name }}</p>
        </template>
        <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>
      </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="FormList.examineYear + '年材料上传'"
    :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';
const { proxy } = getCurrentInstance();
const { fund_source, unit_list } = proxy.useDict('fund_source', 'unit_list');
import { reactive } from 'vue';
import { getToken } from '@/utils/auth';
let isFlag = ref(1);
const visible = ref(false);
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 uploadHeader = ref({
  Authorization: 'Bearer ' + getToken(),
});
const { params } = defineProps(['params']);
const FormList = ref({
  pageNum: 1,
  pageSize: 10,
  title: '',
  fileList: [],
});
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: 1 });
};
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 handlePreview(file) {
  return ElMessageBox.confirm(`下载此文件: ${file.name}？`).then(
    () => window.open(file.url),
    () => false
  );
}
function FileClick(v) {
  visible.value = true;
  FormList.value = v;
}
function open2() {
  let arr = [];
  FormList.value.fileList.forEach(element => {
    if (element.hasOwnProperty('response')) {
      element.response.data.refType = 'water_logging';
      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=[]
  dynamic_page_data_typeM(params);
  visible.value = false;
}
onMounted(() => {
  dynamic_page_data_typeM(params);
});
</script>
<style lang="scss" scoped>
:deep(.el-dialog__body) {
  height: 520px;
  overflow: auto;
}
</style>