<template>
  <layout-form>
    <el-form
      :model="form"
      :loading="loading"
      :rules="rules"
      size="small"
      style="width: 100%"
      label-width="120px"
      ref="form"
    >
      <el-row>

        <Field
          label="字段1"
          prop="fieldOne"
          v-model="form.fieldOne"
          placeholder="请输入字段1"
        />
        <Field
          label="字段2"
          prop="fieldTwo"
          v-model="form.fieldTwo"
          placeholder="请输入字段2"
        />
        <Field
          label="字段3"
          prop="fieldThree"
          v-model="form.fieldThree"
          placeholder="请选择字段3"
          span="12"
        />
      </el-row>
      <el-divider content-position="center">测试详细信息</el-divider>
      <br />

      <el-row>

        <el-col :span="12">
          <el-form-item label="详细">
            <el-input v-model="form.demoDetailEntity.detail"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="详细">
            <el-input v-model="form.demoDetailEntity.detail"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="详细">
            <el-input v-model="form.demoDetailEntity.detail"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <form-buttons @submit="submitForm" />
    </el-form>
  </layout-form>
</template>

<script>
import form from "@/assets/mixins/form";
export default {
  mixins: [form],
  toString: ["fieldThree"],
  methods: {
    /** 测试详细序号 */
    rowDemoDetailIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 测试详细添加按钮操作 */
    handleAddDemoDetail() {
      let obj = {};
      obj.number = "";
      obj.detail = "";
      this.demoDetailList.push(obj);
    },
    /** 测试详细删除按钮操作 */
    handleDeleteDemoDetail() {
      if (this.checkedDemoDetail.length == 0) {
        this.$alert("请先选择要删除的测试详细数据", "提示", {
          confirmButtonText: "确定",
        });
      } else {
        this.demoDetailList.splice(this.checkedDemoDetail[0].index - 1, 1);
      }
    },
    /** 单选框选中数据 */
    handleDemoDetailSelectionChange(selection) {
      if (selection.length > 1) {
        this.$refs.demoDetail.clearSelection();
        this.$refs.demoDetail.toggleRowSelection(selection.pop());
      } else {
        this.checkedDemoDetail = selection;
      }
    },


    // 提交表单的前置处理
    beforeSubmit(data) {
      return data;
    },
    // 渲染后置处理
    afterRender(data) {
       console.log("form",this.form)
    },
  },
  data() {
    return {
      // 子表选中数据
      checkedDemoDetail: [],
      // 测试详细表格数据
      demoDetailList: [],
      rules: {
        fieldOne: [{ trigger: "blur" }],
    
      },
    };
  },
};
</script>