<template>
    <!-- 修复方案基本信息 -->
    <a-form :model="form" v-bind="formItemLayout" @finish="onFinish">
        <a-form-item label="修复方案标题" v-bind="config">
            <a-input v-model:value="form.name" />
        </a-form-item>
        <a-form-item label="修复方案编制完成日期" v-bind="config">
            <a-date-picker v-model:value="form.name" value-format="YYYY-MM-DD" />
        </a-form-item>
        <a-form-item label="公示" v-bind="config">
            <a-radio-group v-model:value="form.name" name="radioGroup">
                <a-radio value="1">网址</a-radio>
                <a-input v-model:value="form.name" />
                <a-radio value="2">其他</a-radio>
                <a-input v-model:value="form.name" />
            </a-radio-group>
        </a-form-item>
        <a-form-item label="修复工程措施开始日期" v-bind="config">
            <a-date-picker v-model:value="form.name" value-format="YYYY-MM-DD" />
        </a-form-item>
        <a-form-item label="修复工程措施结束日期" v-bind="config">
            <a-date-picker v-model:value="form.name" value-format="YYYY-MM-DD" />
        </a-form-item>
        <a-form-item label="技术路径" v-bind="config">
            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col width="150">
                    <col>
                    <col>
                </colgroup>
                <tbody>
                    <tr align="center">
                        <td>介质</td>
                        <td>类别</td>
                        <td>原位修复技术</td>
                        <td>异位修复技术</td>
                    </tr>
                </tbody>
                <tbody>
                    <tr>
                        <td rowspan="3" align="center">土壤修复技术</td>
                        <td align="center">物理化学修复技术</td>
                        <td>
                            <a-checkbox-group v-model:value="form.name" style="width: 100%">
                                <a-checkbox value="土壤气相抽提">土壤气相抽提</a-checkbox>
                                <a-checkbox value="固化稳定化">固化稳定化</a-checkbox>
                                <a-checkbox value="土壤淋洗">土壤淋洗</a-checkbox>
                                <a-checkbox value="土壤淋洗">化学氧化还原</a-checkbox>
                            </a-checkbox-group>

                        </td>
                        <td>
                            <a-checkbox-group v-model:value="form.name" style="width: 100%">
                                <a-checkbox value="土壤气相抽提">土壤气相抽提</a-checkbox>
                                <a-checkbox value="固化稳定化">固化稳定化</a-checkbox>
                                <a-checkbox value="土壤淋洗">土壤淋洗</a-checkbox>
                                <a-checkbox value="机械通风">机械通风</a-checkbox>
                                <a-checkbox value="化学氧化还原">化学氧化还原</a-checkbox>
                                <a-checkbox value="挖掘-填埋">挖掘-填埋</a-checkbox>
                            </a-checkbox-group>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">生物修复技术</td>
                        <td>
                            <a-checkbox-group v-model:value="form.name" style="width: 100%">
                                <a-checkbox value="生物降解">生物降解</a-checkbox>
                                <a-checkbox value="生物通风">生物通风</a-checkbox>
                                <a-checkbox value="植物修复">植物修复</a-checkbox>
                            </a-checkbox-group>
                        </td>
                        <td>
                            <a-checkbox-group v-model:value="form.name" style="width: 100%">
                                <a-checkbox value="强化生物修复">强化生物修复</a-checkbox>
                                <a-checkbox value="生物通风">生物通风</a-checkbox>
                                <a-checkbox value="生物堆">生物堆</a-checkbox>
                                <a-checkbox value="泥浆相生物处理">泥浆相生物处理</a-checkbox>
                            </a-checkbox-group>
                        </td>
                    </tr>
                    <tr>
                        <td align="center">热处理技术</td>
                        <td>
                            <a-checkbox-group v-model:value="form.name" style="width: 100%">
                                <a-checkbox value="热吸收(热脱附)">热吸收(热脱附)</a-checkbox>
                                <a-checkbox value="玻璃化">玻璃化</a-checkbox>
                            </a-checkbox-group>
                        </td>
                        <td>
                            <a-checkbox-group v-model:value="form.name" style="width: 100%">
                                <a-checkbox value="热吸收(热脱附)">热吸收(热脱附)</a-checkbox>
                                <a-checkbox value="焚烧">焚烧</a-checkbox>
                                <a-checkbox value="水泥窑共处置">水泥窑共处置</a-checkbox>
                            </a-checkbox-group>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">地下水修复技术</td>
                        <td>
                            <a-checkbox-group v-model:value="form.name" style="width: 100%">
                                <a-checkbox value="强化生物修复">强化生物修复</a-checkbox>
                                <a-checkbox value="渗透性反应墙">渗透性反应墙</a-checkbox>
                                <a-checkbox value="化学氧化还原">化学氧化还原</a-checkbox>
                                <a-checkbox value="空气注入-土壤气相抽提">空气注入-土壤气相抽提</a-checkbox>
                                <a-checkbox value="生物曝气">生物曝气</a-checkbox>
                                <a-checkbox value="监控式自然衰减">监控式自然衰减</a-checkbox>
                            </a-checkbox-group>
                        </td>
                        <td>
                            <a-checkbox-group v-model:value="form.name" style="width: 100%">
                                <a-checkbox value="抽出-处理">抽出-处理</a-checkbox>
                            </a-checkbox-group>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <a-checkbox-group v-model:value="form.name" style="width: 100%">
                                <a-checkbox value="其他">其他</a-checkbox>
                            </a-checkbox-group>

                        </td>
                        <td colspan="2">
                            <a-input v-model:value="form.name" disabled="disabled" placeholder="请输入其他技术路线" max="500" />
                            <!-- <input id="jslxqt" type="text" name="jslxqt" disabled="disabled" placeholder="请输入其他技术路线"
                                autocomplete="off" class="layui-input" maxlength="500"> -->
                        </td>
                    </tr>
                </tbody>
            </table>
        </a-form-item>
    </a-form>
</template>

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

const form = ref({
    name: ''
})
const formItemLayout = ref({
    labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
    },
});
const config = {
    rules: [{ type: 'string' as const, required: true, message: 'Please select time!' }],
};
const onFinish = (values: any) => {
    console.log('Success:', values, form);
};
</script>