<template>
  <el-form ref="form" class="process-form" label-position="top" :rules="rules" :model="_value">
    <div v-for="(item, index) in formItems" :key="item.name + index">
      <el-form-item v-if="item.name !== 'SpanLayout' && item.name !== 'Description'"
                    :prop="item.id" :label="item.title">
        <form-design-render :ref="`sub-item_${item.id}`" :perm="item.perm" v-model="_value[item.id]" mode="PC"
                            :config="item"/>
      </el-form-item>
      <form-design-render ref="span-layout" v-else :perm="item.perm" v-model="_value" mode="PC" :config="item"/>
    </div>
  </el-form>
</template>

<script>
import FormDesignRender from '@/views/admin/layout/form/FormDesignRender'

export default {
  name: "FormRenderView",
  components: {FormDesignRender},
  props: {
    formItems: {
      type: Array,
      default: () => {
        return []
      }
    },
    value: {
      type: Object,
      default: () => {
        return {}
      }
    },
    model:{
      type: String,
      default:() => {
        return "R"
      }
    },
    isPreview:{
      type: Boolean,
      default:() => {
        return false
      }
    }
  },
  data() {
    return {
      rules: {},
    }
  },
  computed: {
    _value: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  mounted() {
    console.log(JSON.stringify(this.formItems))
    this.loadFormConfig(this.formItems)
  },
  methods: {
    loadFormConfig(formItems) {
      formItems.forEach(item => {
        if (item.name === 'SpanLayout') {
          this.loadFormConfig(item.props.items)
        } else {
          this.$set(this._value, item.id, this.value[item.id])
          if (this.isPreview){
            this.$set(item, 'perm', this.model)
          }
          if (item.props.required && this.model === "E") {
            this.$set(this.rules, item.id, [{
              type: item.valueType === 'Array' ? 'array' : undefined,
              required: true,
              message: `请填写${item.title}`, trigger: 'blur'
            }])
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.process-form {
  margin: 15px 0;
  padding: 10px 10px 1px 10px;
  background: #fff;
  /deep/ .el-form-item__label {
    padding: 0 0;
  }

  /deep/ .el-form-item__content {
    padding-left: 5px;
    line-height: 30px;
  }
  /deep/ .el-form-item {
    margin-bottom: 10px;
  }
}
</style>
