<template>
  <div class="water-analysis-page">
    <el-table :data="tableData" stripe max-height="500" v-loading="tableLoading" border>
      <el-table-column label="年度" prop="examineYear" />
      <el-table-column label="未达标水体数/个" prop="unRemoveNum" />
      <el-table-column label="考核水体数/个" prop="totalNum" />
      <el-table-column label="达标率%" prop="actualPercent">
        <template #default="{ row }">
          <span style="color: lime">
            {{ row.actualPercent }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="目标达标率%" prop="targetPercent" />
      <el-table-column label="达标情况" prop="reachStandard">
        <template #default="scope">
          <span
            :style="{
              color: scope.row.reachStandard == 0 ? 'red' : 'lime',
            }"
          >
            <el-tag v-if="scope.row.reachStandard === ''" type="warning">未评价</el-tag>
            <el-tag v-else :type="scope.row.reachStandard == 0 ? 'error' : scope.row.reachStandard == 1 ? 'success' : ''">
              {{ scope.row.reachStandard == 0 ? '不达标' : '达标' }}
            </el-tag>
          </span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="水体检测记录">
        <template #default="{ row }">
          <el-button link type="primary" icon="View" @click="onCheck(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { defineEmits } from 'vue';
import { preventionInfo } from '@/api/prevention';
const { proxy } = getCurrentInstance();
const tableData = ref([]);
const tableLoading = ref(true);
const emits = defineEmits();
//获取列表数据
const getDataList = async () => {
  let params = {
    examineType: 'water_quality',
  };
  const res = await preventionInfo(params);
  if (res && res.code == 200) {
    tableLoading.value = false;
    tableData.value = res.data;
  }
};
//查看点击事件
const onCheck = row => {
  // debugger
  console.log('row121212', row);
  emits('searchClick', { ...row, type: 1 });
};
onMounted(() => {
  getDataList();
});
</script>
<style lang="scss" scoped>
:deep(.el-dialog__body) {
  height: 520px;
  overflow: auto;
}
</style>