<template>
    <div>
        <div>
            <div class="form-container">
                <h2>模型信息填报</h2>
                <el-form :model="form" label-width="120px" label-position="left">
                    <!-- 公司名称 -->
                    <el-form-item label="公司名称">
                        <el-input v-model="form.companyName" placeholder="XXXXXX公司" disabled />
                    </el-form-item>

                    <!-- 项目名称 -->
                    <el-form-item label="项目名称" required>
                        <el-input v-model="form.projectName" placeholder="请输入项目名称" />
                    </el-form-item>

                    <!-- 填报类型 -->
                    <el-form-item label="填报类型">
                        <el-table :data="form.tableData" border style="width: 100%">
                            <el-table-column prop="label" label="项目" width="200" />
                            <el-table-column prop="value" label="填写内容">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.value" :placeholder="`请输入${scope.row.label}`" />
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>

                    <!-- 操作按钮 -->
                    <el-form-item>
                        <el-button type="primary" @click="submitForm">提交</el-button>
                        <el-button @click="resetForm">重置</el-button>
                        <el-button @click="cancelForm">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    dicts: ['yslx'],
    data() {
        return {
            form: {
                companyName: "XXXXXX公司",
                projectName: "",
                tableData: [
                    { label: '项目1', value: '' },
                    { label: '项目2', value: '' },
                    // 可以根据实际需求添加更多项目
                ],
            },
        };
    },
    methods: {
        // 提交表单
        submitForm() {
            // 这里添加提交表单的逻辑
            console.log('提交表单', this.form);
            this.$message.success('提交成功');
        },
        
        // 重置表单
        resetForm() {
            this.form.projectName = "";
            this.form.tableData.forEach(item => item.value = "");
        },
        
        // 取消表单
        cancelForm() {
            this.$router.back(); // 返回上一页，或者根据实际需求进行其他操作
        }
    }
};
</script>

<style scoped>
.form-container {
    max-width: 1500px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>