<template>
  <table class="" style="width: 100%" border="1" cellspacing="1">
    <tbody> </tbody
    ><colgroup>
      <col class="bg0" width="15%" />
      <col width="35%" />
      <col class="bg0" width="15%" />
      <col width="35%" />
    </colgroup>
    <tbody>
      <tr class="ant-table-cell ant-table-cell-ellipsis" v-if="data.cbGzz || data.cbSxz">
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">土壤受污染程度</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ data?.cbGzz ? '管制值' : '' }}{{ data?.cbSxz ? '筛选值' : '' }}</td>
        <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?.cbqymj }}</td>
      </tr>
      <tr class="ant-table-cell ant-table-cell-ellipsis" v-else>
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor" width="15%">土壤受污染程度</td>
        <td class="ant-table-cell ant-table-cell-ellipsis" colspan="3">未超出</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">
          <div v-if="data?.wrwYjwSxz">有机物: {{ data?.wrwYjwSxz }} </div>
          <div v-if="data?.wrwZjsSxz">重金属: {{ data?.wrwZjsSxz }} </div>
        </td>
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">土壤超过管制值的污染物</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">
          <div v-if="data?.wrwYjwGzz">有机物: {{ data?.wrwYjwGzz }} </div>
          <div v-if="data?.wrwZjsGzz">重金属: {{ data?.wrwZjsGzz }} </div>
        </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?.sfWr ? '是' : '否' }}</td>
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">地下水是否作为饮用水源</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ data?.sfYysy ? '是' : '否' }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script lang="ts" setup>
  import { defineProps } from 'vue';

  const props = defineProps({
    labelFirst: {
      type: String,
      default: '初步',
    },
    data: {
      type: Object,
      default: () => {},
    },
  });
  // function labelFn() {
  //     console.log('处理props数据',props);

  // }
</script>

<style scoped>
  table {
    border-collapse: collapse;
    border: 1px #dfe6ec solid;
  }

  tbody tr td {
    padding: 6px;
    height: 40px;
  }

  .bgColor {
    background-color: rgba(244, 247, 249, 0.8);
    text-align: center;
  }
</style>
