<template>
  <!-- <el-collapse
    v-model="activeNames"
    @change="collapseChange"
  >
    <el-collapse-item
      v-for="(item,index) in formArr"
      :key="index"
      :title="item.title"
      :name="index.toString()"
    >

    </el-collapse-item>
  </el-collapse> -->
  <div>
    <div
      v-for="(item,index) in formArr"
      :key="index"
    >
      <div
        v-if="item.title"
        class="form-title"
      >{{ item.title }}</div>
      <el-form
        :ref="`ruleForm${index}`"
        :model="formData"
        class="demo-ruleForm"
        inline
      >
        <el-row>
          <el-col
            v-for="(formItems, index1) in item.formArr"
            v-show="!formItems.notShow"
            :key="index1"
            :span="formItems.span"
          >
            <el-form-item
              :label="null"
              :prop="formItems.prop"
              :rules="formItems.rules"
            >
              <FormItem
                v-if="formItems.prop"
                v-model="formData[formItems.prop]"
                :form-items="formItems"
                :form-data="formData"
                @outOperation="(val,num) => outOperation(val, index, formItems.prop,num)"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import FormItem from '@/components/form/formItem.vue';
export default {
  components: {
    FormItem,
  },
  props: {
    formArr: {
      type: Array,
      required: true,
    },
    formData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {};
  },
  computed: {
    activeNames() {
      return this.getActiveNames();
    },
  },
  watch: {},
  created() {},
  methods: {
    // select 请求接口
    // 点击collapse折叠组件的返回
    collapseChange(val) {
      console.log(val);
    },
    // val返回值，index表单上第几个组件，prop组件名，num一行的组件里的第几个值
    outOperation(val, index, prop, num) {
      this.$emit('outOperation', val, index, prop, num);
    },
    // 提交时验证表单，直接在父级调用
    async submitForm() {
      let formValidate = Boolean;
      const promises = this.formArr.map((_, index) => {
        return this.$refs[`ruleForm${index}`][0].validate()
          .then(() => true)
          .catch(() => false);
      });

      const results = await Promise.all(promises);
      const allValid = results.every(valid => valid);

      if (allValid) {
        formValidate = true;
      } else {
        this.$message.warning('请把信息填写完整！');
        formValidate = false;
      }
      return formValidate;
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
    getActiveNames() {
      const arr = [];
      for (const i in this.formArr) {
        if (this.formArr[i].isActive) {
          arr.push(i.toString());
        }
      }
      return arr;
    },
  },
};
</script>

<style lang="scss" scoped>
form {
  overflow: hidden;
}
::v-deep.el-form-item {
  width: 100%;
  // margin-bottom: 12px;
  margin-bottom: 12px;
}
::v-deep.el-form-item .el-form-item__content {
  width: 100%;
}
.form-title{
  line-height: 28px;
  padding-left: 10px;
  width: 100%;
  height: 28px;
  background: #F1F4F7;
}
</style>
