<template>
  <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>
</template>

<script>
export default {
  data() {
    return {
      form: {
        companyName: "XXXXXX公司", // 公司名称
        projectName: "", // 项目名称
        tableData: [
          { label: "危险品等级", value: "" },
          { label: "生产火灾危险等级", value: "" },
          { label: "设备载重", value: "" },
          { label: "货梯要求", value: "" },
          { label: "员工密度", value: "" },
          { label: "加工精度", value: "" },
          { label: "减振措施", value: "" },
          { label: "环境保护", value: "" },
          { label: "生产类型", value: "" },
          { label: "层高要求", value: "" },
        ],
      },
    };
  },
  methods: {
    // 提交表单
    submitForm() {
      console.log("提交表单数据：", this.form);
      this.$message.success("表单提交成功！");
    },
    // 重置表单
    resetForm() {
      this.form.projectName = "";
      this.form.tableData.forEach((item) => {
        item.value = "";
      });
      this.$message.info("表单已重置");
    },
    // 取消表单
    cancelForm() {
      this.$confirm("确定要取消当前操作吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.resetForm();
          this.$message.info("表单已取消");
        })
        .catch(() => {});
    },
  },
};
</script>

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

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

.el-form-item {
  margin-bottom: 20px;
}
</style>