<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-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>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
import FormItem from './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: {
    collapseChange(val) {
      console.log(val);
    },
    outOperation(val, index, prop, num) {
      this.$emit('outOperation', val, index, prop, num);
    },
    async submitForm() {
      let formValidate = true;
      this.formArr.forEach((_, index) => {
        this.$refs[`ruleForm${index}`][0].validate((valid) => {
          if (!valid) {
            // 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%;
}
</style>
