<template>
  <table class="" style="width: 100%" border="1" cellspacing="1">
    <colgroup>
      <col width="150" />
      <col width="150" />
      <col />
      <col />
    </colgroup>
    <tbody>
      <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 bgColor">类别</td>
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">原位修复技术</td>
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor">异位修复技术</td>
      </tr>
    </tbody>
    <tbody>
      <tr class="ant-table-cell ant-table-cell-ellipsis">
        <td class="ant-table-cell ant-table-cell-ellipsis" rowspan="3">土壤修复技术</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">物理化学修复技术</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ wlhxxfArr?.yw }}</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ wlhxxfArr?.iw }}</td>
      </tr>
      <tr class="ant-table-cell ant-table-cell-ellipsis">
        <td class="ant-table-cell ant-table-cell-ellipsis">生物修复技术</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ swxfArr?.yw }}</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ swxfArr?.iw }}</td>
      </tr>
      <tr class="ant-table-cell ant-table-cell-ellipsis">
        <td class="ant-table-cell ant-table-cell-ellipsis">热处理技术</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ rclArr?.yw }}</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ rclArr?.iw }}</td>
      </tr>
      <tr class="ant-table-cell ant-table-cell-ellipsis">
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor" colspan="2">地下水修复技术</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ dxsArr?.yw }}</td>
        <td class="ant-table-cell ant-table-cell-ellipsis">{{ dxsArr?.iw }}</td>
      </tr>
      <tr class="ant-table-cell ant-table-cell-ellipsis">
        <td class="ant-table-cell ant-table-cell-ellipsis bgColor" colspan="2">其他</td>
        <td class="ant-table-cell ant-table-cell-ellipsis" colspan="2">{{ qtArr?.yw }}</td>
      </tr>
    </tbody>
  </table>
</template>

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

  const props = defineProps({
    labelFirst: {
      type: String,
      default: '初步',
    },
    data: {
      type: Array,
      default: [],
    },
  });
  let qtArr = ref(); //其它
  let dxsArr = ref(); //地下水
  let wlhxxfArr = ref(); //物理化学修复技术原位
  let swxfArr = ref(); //生物修复技术原位
  let rclArr = ref(); //热处理技术原位

  wlhxxfArr.value = props.data.find((obj: any) => obj.jslx == '物理化学修复技术');
  swxfArr.value = props.data.find((obj: any) => obj.jslx == '生物修复技术');
  rclArr.value = props.data.find((obj: any) => obj.jslx == '热处理技术');
  dxsArr.value = props.data.find((obj: any) => obj.jslx == '地下水修复技术');
  qtArr.value = props.data.find((obj: any) => obj.jslx == '其他');
  console.log(wlhxxfArr.value, ' wlhxxfArr.value');
</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>
