<template>
    <div class="form-container">
        <el-form :model="form" label-width="130px" label-position="left">
            <div class="tianbao">基本信息:</div>
            <!-- 公司名称 -->
            <el-form-item label="公司名称" style="margin-left: 0.7rem;">
                <el-input v-model="name" placeholder="" disabled />
            </el-form-item>
        </el-form>
        <el-form :model="form" label-width="140px" label-position="left">
            <!-- 项目名称 -->
            <el-form-item label="项目名称" required>
                <el-input v-model="form.projectName" placeholder=""/>
            </el-form-item>
        </el-form>
        <el-form :model="form" label-width="140px" label-position="left">
            <div class="tianbao">填报模型:</div>
            <!-- 动态生成表单项 -->
            <el-form-item v-for="(item, index) in form.tableData" :key="index" :label="item.label" required>
                <el-input v-model="item.value" :placeholder="`请输入${item.label}`" />
            </el-form-item>
            <!-- 操作按钮 -->
            <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    data() {
        return {
            form: {
                projectName: "", 
                tableData: [
                    { label: "危险品等级", value: "" },
                    { label: "生产火灾危险等级", value: "" },
                    { label: "设备载重", value: "" },
                    { label: "货梯要求", value: "" },
                    { label: "员工密度", value: "" },
                    { label: "加工精度", value: "" },
                    { label: "减振措施", value: "" },
                    { label: "环境保护", value: "" },
                    { label: "生产类型", value: "" },
                    { label: "层高要求", value: "" },
                ],
            },
        };
    },
    mounted() {
        this.username = this.$store.state.user.nickName
    },
    computed: {
        ...mapGetters(["avatar", "name", "sidebarRouters", "nickName"]),
    },
    methods: {
        // 提交表单
        submitForm() {
            console.log("提交表单数据：", this.form);
            // this.$message.success("表单提交成功！");
            this.$message.warning("暂未开放");
        },
        // 重置表单
        resetForm() {
            this.form.projectName = "";
            this.form.tableData.forEach((item) => {
                item.value = "";
            });
            this.$message.info("表单已重置");
        },
    },
};
</script>

<style scoped>
.form-container {
    width: 100%;
    padding: 30px 50px;
    background-color: #fff;
    border-radius: 8px;
}

h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #303133;
}

.el-form-item {
    margin-bottom: 20px;
}

.tianbao {
    width: 70%;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: left;
    font-weight: bold;
    margin-bottom: 1rem;
    margin-left: -20px;
}
</style>