<template>
  <div class="water-analysis-page">
    <el-table :key="isFlag" :data="tableData" max-height="500" 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 == 'standardFlag'">
          <el-tag v-if="row.standardFlag === ''" type="warning">未填报</el-tag>
          <el-tag v-else-if="row.standardFlag === '102'" type="warning">无法评价</el-tag>
          <el-tag v-else :type="row.standardFlag === '1' ? 'success' : 'error'">{{ row.standardFlag === '1' ? '达标' : '未达标' }}</el-tag>
        </template>
        <template #default="{ row }" v-if="i.key == 'itemTarget'">
          {{ row.itemDataTypePerformanceEvaluateItemList[0]?.itemTarget || 0 }}
        </template>
        <template #default="{ row }" v-if="i.key == 'kstdmTargetArea'">
          {{ row.itemTargetval }}
          <!-- {{ (row.itemDataTypePerformanceEvaluateItemList[0]?.itemTarget * 1 * allRealValue * 1) / 100 || 0 }} -->
        </template>
        <template #default="{ row }" v-if="i.key == 'allRealValue'">
          {{ allRealValue }}
        </template>
        <template #default="{ row }" v-if="i.key == 'attachFileList'">
          <span @click="handlePreview(k)" style="color: #108ee9" v-for="k in row.attachFileList">{{ k.name }}</span>
        </template>
        <!-- <template #default="{ row }" v-if="i.key == 'standardFlag'">
          <el-tag :type="row.standardFlag === '1' ? 'success' : 'error'">{{ row.standardFlag === '1' ? '达标' : '未达标' }}</el-tag>
        </template> -->
      </el-table-column>
      <el-table-column label="操作" width="150">
        <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>
        </template>
      </el-table-column>
    </el-table>
    <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" :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="onModalClose">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { projectInfoDelete, dynamic_page_data_type, GetconfigKey } from '@/api/spongePerformance/naturalWaterArea';
import { FileSystemList } from '@/api/project/tenderReview';
import tableDalgo from './tableDalgo.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
const { proxy } = getCurrentInstance();
// const { fund_source, unit_list } = proxy.useDict("fund_source", 'unit_list');
import { reactive } from 'vue';
let visible = ref(false);
let isFlag = ref(1);
const cloums = ref([
  { value: '考核年度', key: 'year' },
  { value: '建成区(公顷)', key: 'allRealValue' },
  { value: '现状可透水地面面积(公顷)', key: 'kstdmArea' },
  { value: '目标比例%', key: 'itemTarget' },
  { value: '可透水地面面积比%', key: 'kstdmAreaRate' },
  { value: '目标可渗水地面面积(公顷)', key: 'kstdmTargetArea' },
  { value: '达标情况', key: 'standardFlag' },
]);
const allRealValue = ref(1);
const tableDalgoRef = ref();
const { params } = defineProps(['params']);
const FormList = ref({
  pageNum: 1,
  pageSize: 10,
  itemDataType: 'KSSDMMJBL',
});
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 = {
      ...params,
      data: row,
      type: ty,
      monitorDynamicTableTitleList: cloums.value,
      allRealValue: allRealValue.value,
    };
    visible.value = true;
    // FileSystemList({
    //   refId: row.id,
    //   refType: 'KSSDMMJBL',
    // }).then(({ data }) => {
    //   typeList.value.fileList1 = data;
    //   visible.value = true;
    // });
    // 获取文件列表
  } else if (ty == 3) {
    proxy.$modal
      .confirm(`是否确认删除?`)
      .then(async () => {
        projectInfoDeleteM(row.id);
        getTableData();
      })
      .catch(() => {});
  }
};
//删除
const projectInfoDeleteM = async id => {
  let { code } = await projectInfoDelete(id);
  dynamic_page_data_typeM(params);
};
const dynamic_page_data_typeM = async id => {
  let { code, data, monitorDynamicTableTitleList, total } = await dynamic_page_data_type(id);

  tableData.value = data;
  if (Boolean(tableData.value.length)) {
    tableData.value.forEach(i => {
      if (Boolean(i.itemDataTypePerformanceEvaluateItemList.length)) {
        i.itemTargetval = Number(
          ((i.itemDataTypePerformanceEvaluateItemList[0]?.itemTarget * 1 * allRealValue.value * 1) / 100)
            .toString()
            .match(/^\d+(?:\.\d{0,2})?/)
        );
      } else {
        i.itemTargetval = 0;
      }
    });
  }
  totals.value = total;
  // const {itemContent,itemUnit}=data[0]?.itemDataTypePerformanceEvaluateItemList[0]
  // cloums.value.splice(2,0, { value: '目标比例%:', key: 'itemTarget' },)
  tableLoading.value = false;
};
function onModalClose() {
  visible.value = false;
  // dynamic_page_data_typeM();
  dynamic_page_data_typeM(params);
}

function open2() {
  tableDalgoRef.value.submit();
}
function handlePreview(file) {
  return ElMessageBox.confirm(`下载此文件: ${file.name}？`).then(
    () => window.open(file.url),
    () => false
  );
}
function isDb(v, m, n, f) {
  return v * 1 - m * 1 > 0 && n * 1 - f * 1 > 0;
}

const GetconfigKeyM = async id => {
  let { code, data } = await GetconfigKey(id);
  allRealValue.value = data || 1;
};
onMounted(() => {
  dynamic_page_data_typeM(params);
  GetconfigKeyM('water_area');
});
</script>
<style lang="scss" scoped></style>