<template>
  <el-form ref="form" :model="formData" :rules="rules" label-width="60px" :disabled="readonly">
    <el-collapse v-model="activeNames" :accordion="false">
      <!-- 订单信息组 -->
      <el-collapse-item title="订单信息" name="1">
        <!-- <el-form-item label="订单ID" prop="orderId">
          <el-input v-model="formData.orderId" placeholder="请输入订单ID" />
        </el-form-item> -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单号" prop="orderCode">
              <el-input v-model="formData.orderCode" placeholder="请输入订单号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同号" prop="contractCode">
              <el-input v-model="formData.contractCode" placeholder="请输入合同号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户" prop="customerName">
              <el-input v-model="formData.customerName" placeholder="请输入客户名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务员" prop="salesman">
              <el-input v-model="formData.salesman" placeholder="请输入业务员姓名" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-collapse-item>

      <!-- 原料信息组 -->
      <el-collapse-item title="原料信息" name="2">
        <el-row>
          <el-col :span="12">
            <el-form-item label="厂家" prop="rawManufacturer">
              <el-input v-model="formData.rawManufacturer" placeholder="请输入原料厂家" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="材质" prop="rawMaterial">
              <el-input v-model="formData.rawMaterial" placeholder="请输入原料材质" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="厚度" prop="rawThick">
              <el-input v-model="formData.rawThick" placeholder="请输入原料厚度(mm)" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="宽度" prop="rawWidth">
              <el-input v-model="formData.rawWidth" placeholder="请输入原料宽度(mm)" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-collapse-item>

      <!-- 成品信息组 -->
      <el-collapse-item title="成品信息" name="3">
        <el-row>
          <el-col :span="12">
            <el-form-item label="成品名称" prop="productName">
              <el-input v-model="formData.productName" placeholder="请输入成品名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="材质" prop="productMaterial">
              <el-input v-model="formData.productMaterial" placeholder="请输入成品材质" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="镀层(g)" prop="coatingG">
              <el-input v-model="formData.coatingG" placeholder="请输入镀层重量" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="成品宽度" prop="productWidth">
              <el-input v-model="formData.productWidth" placeholder="请输入成品宽度" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="轧制厚度" prop="rollingThick">
              <el-input v-model="formData.rollingThick" placeholder="请输入轧制厚度" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="标签厚度" prop="markCoatThick">
              <el-input v-model="formData.markCoatThick" placeholder="请输入标签厚度" />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="吨钢长度区间" prop="tonSteelLengthRange">
              <el-input v-model="formData.tonSteelLengthRange" placeholder="请输入吨钢长度区间(m)" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="数量" prop="planQty">
              <el-input v-model="formData.planQty" placeholder="请输入成品数量" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="重量" prop="planWeight">
              <el-input v-model="formData.planWeight" placeholder="请输入成品重量" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="表面处理" prop="surfaceTreatment">
              <el-input v-model="formData.surfaceTreatment" placeholder="请输入表面处理要求" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="切边要求" prop="widthReq">
              <el-input v-model="formData.widthReq" placeholder="请输入切边要求" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="包装要求" prop="productPackaging">
              <el-input v-model="formData.productPackaging" placeholder="请输入包装要求" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="宽度要求" prop="productEdgeReq">
              <el-input v-model="formData.productEdgeReq" placeholder="请输入宽度要求" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="用途" prop="usageReq">
              <el-input v-model="formData.usageReq" placeholder="请输入成品用途" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-collapse-item>

      <!-- 其他信息组 -->
      <el-collapse-item title="生产信息" name="4">
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker clearable v-model="formData.startTime" style="width: 100%" type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择生产开始时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker clearable v-model="formData.endTime" style="width: 100%" type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择生产结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="后处理" prop="postProcess">
              <el-input v-model="formData.postProcess" placeholder="请输入后处理要求" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下工序" prop="nextProcess">
              <el-input v-model="formData.nextProcess" placeholder="请输入下工序" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="取样" prop="sampleReq">
              <el-input v-model="formData.sampleReq" placeholder="请输入取样要求" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="序号" prop="bizSeqNo">
              <el-input v-model="formData.bizSeqNo" placeholder="请输入序号" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注信息" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>

<script>
export default {
  name: "PlanDetailForm",
  props: {
    value: {
      type: Object,
      default: () => ({})
    },
    planSheetId: {
      type: String,
      required: true
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    formData: {
      get() {
        return this.value || {};
      },
      set(newVal) {
        const data = { ...newVal, planSheetId: this.planSheetId };
        this.$emit('input', data);
        this.$emit('change', data);
      }
    }
  },
  data() {
    return {
      // 折叠面板默认展开项（全部打开）
      activeNames: ['1', '2', '3', '4'],
      // 表单校验
      rules: {
        planSheetId: [
          { required: true, message: "关联排产单ID不能为空", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    /** 表单验证 */
    validate(callback) {
      return this.$refs.form.validate(callback);
    },
    reset() {
      this.$refs["form"].resetFields();
    }
  }
};
</script>