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