<template>
  <table class="detail-table" border="1" cellspacing="1">
    <colgroup>
      <col width="15%" />
      <col width="35%" />
      <col width="15%" />
      <col width="35%" />
    </colgroup>
    <!-- 风险管控 -->
    <tbody v-if="labelFirst === '风险管控'">
      <tr class="ant-table-cell ant-table-cell-ellipsis">
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">管控措施</td>
        <td class="ant-table-cell ant-table-cell-ellipsis" colspan="3">
          <template v-if="data?.gkcs === 1">制度管控</template>
          <template v-if="data?.gkcs === 2">工程管控：{{ data?.gkcsQt }}</template>
          <template v-if="data?.gkcs === 3">其它措施：{{ data?.gkcsQt }}</template>
        </td>
      </tr>
      <tr class="ant-table-cell ant-table-cell-ellipsis">
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">开展风险管控土壤面积(m<sup>2</sup>)</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ data?.kzfxgktrmj }}</td>
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">是否需要后期管理</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ data?.sfxyhqgl === 1 ? '是' : '否' }}</td>
      </tr>
    </tbody>
    <tbody v-else-if="labelFirst === '风险管控与修复效果评估' || labelFirst === '修复效果评估'">
      <tr class="ant-table-cell ant-table-cell-ellipsis">
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">实际修复范围(m<sup>2</sup>):</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ data?.sjxffw }}</td>
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">实际修复土壤方量(m<sup>3</sup>):</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ data?.sjxftfl }}</td>
      </tr>
    </tbody>
    <tbody v-else-if="labelFirst === '修复'">
      <tr class="ant-table-cell ant-table-cell-ellipsis">
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">开展修复土壤面积(m<sup>2</sup>):</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ data?.kzfxgktrmj }}</td>
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">修复土壤方量(m<sup>3</sup>):</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ data?.xftrfl }}</td>
      </tr>
    </tbody>
    <tbody v-else-if="labelFirst === '风险管控效果评估'">
      <tr class="ant-table-cell ant-table-cell-ellipsis">
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">风险管控范围(m<sup>2</sup>)</td>
        <td class="ant-table-cell ant-table-cell-ellipsis" colspan="3">{{ data?.sjxftfl }}</td>
      </tr>
    </tbody>
    <tbody v-else-if="labelFirst === '风险管控及修复效果评估'">
      <tr class="ant-table-cell ant-table-cell-ellipsis">
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">实际修复范围(m<sup>2</sup>)</td>
        <td class="ant-table-cell ant-table-cell-ellipsis" colspan="3">{{ data?.sjxffw }}</td>
      </tr>
    </tbody>
    <!-- 风险管控与修复 -->
    <tbody v-else>
      <tr class="ant-table-cell ant-table-cell-ellipsis">
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">管控措施</td>
        <td class="ant-table-cell ant-table-cell-ellipsis" colspan="3">
          <template v-if="data?.gkcs === 1">制度管控</template>
          <template v-if="data?.gkcs === 2">工程管控：{{ data?.gkcsQt }}</template>
          <template v-if="data?.gkcs === 3">其它措施：{{ data?.gkcsQt }}</template>
        </td>
      </tr>
      <tr class="ant-table-cell ant-table-cell-ellipsis">
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">开展修复土壤面积:</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ data?.kzfxgktrmj }}</td>
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">实际修复土壤方量(m<sup>3</sup>):</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ data?.xftrfl }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';
const props = defineProps({
  data: {
    type: Object,
    default: () => { },
  },
  labelFirst: {
    type: String,
    default: ''
  }
});
</script>
