<template>
  <div class="template-form-box template-form-common" :class="[colLen === 24 && 'is-single-col']">
    <Anchor v-if="useAnchor" :templateForm="templateForm" />
    <div class="anchor-scroll-box">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        :label-width="labelWidth"
        :label-position="labelPosition"
      >
        <el-row>
          <!-- 表单头、文件上传组件 独占一行 -->
          <el-col
            v-for="item in formItems"
            :key="item.prop"
            :span="['7', '16', '17', '18'].includes(item.inputType) ? 24 : colLen"
          >
            <el-form-item
              :label="item.label && item.inputType !== 18 ? `${item.label}:` : ''"
              :prop="item.prop"
            >
              <component
                :is="item.type"
                :ref="item.prop"
                v-model="form[item.prop]"
                :form-item="item"
                :form-data="form"
                :mode="formMode"
                :disabled="item.isAddReadonly || formMode === 'look'"
                v-bind="getAdditionalProps(item)"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <slot></slot>
    </div>
  </div>
</template>
<script>
import FormMixins from './FormMixins.vue'
import { ElForm, ElFormItem, ElRow, ElCol } from 'element-plus'

export default {
  name: 'FormCommon',
  mixins: [FormMixins]
}
</script>
<style lang="less">
@import '../style/index.less';
</style>
