<template>
  <div>
    <div
      v-for="(item, num) in formArr"
      :key="num"
    >
      <div class="card">
        <div class="htitle">
          <span class="label" />
          <span class="value">{{ item.title }}</span>
        </div>
      </div>
      <el-form
        :ref="`ruleForm${num}`"
        :model="formData"
        class="bookkeeping-form"
        inline
      >
        <el-row>
          <el-col
            v-for="(formItems, num1) in item.formArr"
            v-show="!formItems.notShow"
            :key="num1"
            :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, num2) => outOperation(val, num, num1, num2, formItems,formItems.prop)
                "
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import FormItem from './formItem.vue';
export default {
  components: {
    FormItem,
  },
  props: {
    formArr: {
      type: Array,
      required: true,
    },
    formData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {};
  },
  methods: {
    outOperation(val, num1, num2, num3, formItems, prop) {
      if (formItems.onchange) {
        const changeFn = new Function('value', 'oldValue', formItems.onchange);
        changeFn.call(this, val, num1, num2, num3, formItems);
      }
      this.$emit('outOperation', val, num1, num2, num3, formItems, prop);
    },
    submitForm() {
      let formValidate = true;
      this.formArr.forEach((_, index) => {
        this.$refs[`ruleForm${index}`][0].validate((valid) => {
          if (!valid) {
            formValidate = false;
          }
        });
      });
      return formValidate;
    },
    resetForm() {
      this.formArr.forEach((_, index) => {
        this.$refs[`ruleForm${index}`][0].resetFields();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
form {
  overflow: hidden;
}
.bookkeeping-form {
  border-bottom: 1px solid var(--card-border);
}
.card {
  .htitle {
    margin-top: 12px;
    display: flex;
    align-items: center;
    border-radius: 4px 4px 0 0;
    height: 32px;
    line-height: 32px;
    border-top: 1px solid var(--card-border);
    border-left: 1px solid var(--card-border);
    border-right: 1px solid var(--card-border);
    .label {
      margin-left: 9px;
      width: 3px;
      height: 14px;
      background-color: rgb(51, 137, 255);
      border-radius: 3px;
    }
    .value {
      margin-left: 8px;
      font-size: 12px;
    }
  }
}
::v-deep.el-form-item {
  width: 100%;
  margin-bottom: 0;
}
::v-deep.el-form-item .el-form-item__content {
  width: 100%;
}
</style>
