<template >
  <div @dragover="dragOver" style="width: 100%">
    <a-row class="formTitle" type='flex' align='middle'>
      {{data.form_name}}
    </a-row>
    <a-row class="formRow" style="height:calc(100% - 4rem);display: flex">
      <a-col :span='3'  class="colStyle" align="start">
          <vue-scroll :ops="ops">
              <template v-for="(item,index) in fieldArray">
                  <div class="item-title-style" :key="'title' + index">{{item.title}}</div>
                  <draggable :group="{ name: 'itemGroup', pull: 'clone', put: false, sort: false }" :value="item.list"
                             :sort="false" :clone="cloneComponent" @start="onDraggableHandle($event,item.list)"
                             animation="300" :key="'draggable'+index" @end="onDraggableHandle($event,item.list)"
                             forceFallback="true" chosenClass="chosen">
                      <div v-for="field in item.list" :key="field.field_type" class="item-style" @click="fieldClick(field)">
                          <my-icon :type="field.icon" style="margin-right: 0.2rem"></my-icon>
                          {{ field.field_name }}
                      </div>
                  </draggable>
              </template>
          </vue-scroll>
      </a-col>
      <a-col :span='17' class="colStyle" style="background-color: #f2f2f2;">
        <a-row class="operateRow" type="flex" align="middle" justify="end" style="background-color: white">
<!--          <div class="operate-container-style">-->
<!--            <a-icon type="arrow-left" />-->
<!--            撤销-->
<!--          </div>-->
            <div class="operate-container-style" @click="returnList">
                <a-icon type="export" />
                返回
            </div>
          <div class="operate-container-style" @click="clearAll">
            <a-icon type="delete"/>
            清空
          </div>
          <div class="operate-container-style" @click="onPreview">
            <a-icon type="search" />
            预览
          </div>
          <div class="operate-container-style" @click="submitData">
            <a-icon type="cloud-upload"/>
            提交
          </div>
<!--          <div class="operate-container-style">-->
<!--            <a-icon type="file" />-->
<!--            生成JSON-->
<!--          </div>-->
        </a-row>
<!--        <a-spin tip="正在加载中，请稍候..." size="large" :spinning="is_spinning" wrapperClassName="spin-self-style">-->
          <div class="itemOuterContainer" style="height: calc(100% - 3rem);padding: 0.5rem 0;background-color: #f2f2f2">
              <vue-scroll :ops="ops" style="height:100%">
                  <draggable group="itemGroup" v-model="fieldsList" class="itemInnerContainer"
                             :style="{width:form_width !== 100 ? form_width + '%':'calc(100% - 1rem)',margin: '0 auto',minHeight:draggableMinHeight}" handle=".move"
                             filter=".no-field" forceFallback="true" chosenClass="chosen" ghostClass="ghost" @add="onAdd">
                      <FieldItem v-for="field in fieldsList" :key="field.id" :item="field" @delete="deleteRowData" @copy="copyRowData" :design="true" @addCol="onAddCol"/>
                      <div v-if="fieldsList.length <= 0" class="no-field">请拖拽或者点击左侧字段添加表单内容</div>
                  </draggable>
              </vue-scroll>

          </div>
<!--        </a-spin>-->
      </a-col>
      <a-col :span='4' class="colStyle">
        <a-tabs style="height: 100%">
          <a-tab-pane key="tab1" tab="字段属性">
            <FieldAttributeConfig v-if="Object.keys(selectedItem).length > 0" :fieldData="selectedItem" :form_id="data.form_id"/>
            <div v-else :style="{height: innerItemContainerHeight,display:'flex',justifyContent:'center',alignItems:'center',fontSize:'1rem'}">
              请选择显示属性字段</div>
          </a-tab-pane>
          <a-tab-pane key="tab2" tab="表单属性">
            <FormAttributeConfig :dataConfig="getFormConfigData" ref="formAttributeCom"/>
          </a-tab-pane>
        </a-tabs>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import { Row, Col, Tabs, Icon} from 'ant-design-vue'
import { baseFields, advancedFields, businessFields, layoutFields,formConfig,commonConfig,curItem} from "./fieldAndFormConfig"
import _ from 'lodash'
import Common from '../../../utils/common'
import FieldItem from './FieldItem'
import FormAttributeConfig from './FormAttributeConfig'
import {EventConfig} from '../../../utils/eventConfig'
import FieldAttributeConfig from './FieldAttributeConfig'
import InterfaceConfig from './interfaceConfig';
import { Modal } from 'ant-design-vue'
import StaticParams from '../../../global-llibs/staticParams'
import TypesCheck from '../../../global-llibs/under-score/types-check'
import CommonOperate from '../utils/commonOperate';
// import Upload from '../../components/common/uploader/Upload'
// import RichEditor from '../../components/common/richEditor/RichEditor'
const MyIcon = Icon.createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/font_2575830_yvczzbhmrtn.js', // 在 iconfont.cn 上生成
});
export default {
  name: 'FormDesign',
  props:['formData'],
  data: function () {
    return {
        draggableMinHeight:document.body.clientHeight - 8 * 16 + "px",
        ops:StaticParams.scrollOption,
        selectedItem:{},
        commonConfig,
        formConfig,
        curItem,
        data:this.formData,
        // data:Object.assign(this.formData, {formConfig:_.cloneDeep(formConfig)}),
        baseFields,
        advancedFields,
        businessFields,
        layoutFields,
        fieldsList: [],
        fieldArray:[
        {title : '基础字段',list: baseFields},
        {title : '高级字段',list: advancedFields},
        {title : '业务字段',list: businessFields},
        {title : '布局字段',list: layoutFields}
        ],
        is_spinning:true,//是否为加载总的状态,
        form_width:100,
        submitList:[]
    }
  },
  computed: {
    innerItemContainerHeight: function () {
      return document.body.clientHeight - 8 * 16 + "px";
    },
    getFormConfigData: function () {
      return this.data.formConfig ?_.cloneDeep(this.data.formConfig):_.cloneDeep(this.formConfig)
    }
  },
  mounted: function (){
    this.$bus.on(EventConfig.FORM_WIDTH_CHANGE,this.changeFormWidth)
    this.$bus.on("clickItem",this.selectItem)
    this.InterfaceConfig.callInterface([{
      url:InterfaceConfig.getCustomizeFormFieldByFormId.url,
      method:InterfaceConfig.getCustomizeFormFieldByFormId.method,
      params:{
        org_id:this.BaseConfig.person_info_my.bureau_id,
        form_id:this.data.form_id
      },
      isTestLogin:InterfaceConfig.getCustomizeFormFieldByFormId.isTestLogin
    }],(result)=>{
      if (result && result[0]){
        let data = result[0].data
        if (data.code === 2000){
          this.is_spinning = false;
          // this.data = data.data;
          this.data.form_json = data.data.form_json
          this.data.form_config_json = data.data.form_config_json
          this.fieldsList = this.data.form_json && this.data.form_json !== ""?JSON.parse(this.data.form_json): []

          if(this.fieldsList.length === 0){
            let person_num_data = _.cloneDeep(baseFields.filter((item)=>{return item.tag === "input"})[0])
            Object.keys(this.commonConfig).forEach((prop)=>{
              this.$set(person_num_data.props,prop,this.commonConfig[prop])
            });

            let person_name_data = _.cloneDeep(person_num_data);
            let person_org_dept = _.cloneDeep(person_num_data);

            person_num_data.id = "input_" + Common.getRandom(12);
            person_num_data.field_name = "教师编号";
            person_num_data.props.field_input_type = 2;
            person_num_data.props.filed_auto_input_info = "person_num";
            person_num_data.props.can_search = false;
            person_num_data.props.is_search = false;

            person_name_data.id = "input_" + Common.getRandom(12);
            person_name_data.field_name = "教师姓名";
            person_name_data.props.field_input_type = 2;
            person_name_data.props.filed_auto_input_info = "person_name";
            person_name_data.props.can_search = false;
            person_name_data.props.is_search = false;

            person_org_dept.id = "input_" + Common.getRandom(12);
            person_org_dept.field_name = "单位(部门)";
            person_org_dept.props.field_input_type = 2;
            person_org_dept.props.filed_auto_input_info = "org_dept_name";
            person_org_dept.props.can_search = false;
            person_org_dept.props.is_search = false;

            this.fieldsList.push(person_num_data);
            this.fieldsList.push(person_name_data);
            this.fieldsList.push(person_org_dept);
          }else{//去掉实际在布局字段中的数据
             this.fieldsList = this.fieldsList.filter((item)=>{return item.is_main !== false})
          }

          if (this.data.form_config_json && this.data.form_config_json !== ""){
            this.data.formConfig = this.$set(this.data,"formConfig",JSON.parse(this.data.form_config_json))
            this.form_width = this.data.formConfig.form_width
          }
          // this.data.formConfig = this.data.form_config_json && this.data.form_config_json !== ""?JSON.parse(this.data.form_config_json):{}
        }
      }
    });
  },
  beforeDestroy: function() {
    this.$bus.off(EventConfig.FORM_WIDTH_CHANGE,this.changeFormWidth)
    this.$bus.off("clickItem",this.selectItem)
  },
  methods: {
      fieldClick:function(field){
          this.curItem.item = _.cloneDeep(field);
          this.curItem.item.id = this.curItem.item.tag + "_" + Common.getRandom(12);
          // if(this.curItem.item.tag !== "label"){
          Object.keys(this.commonConfig).forEach((prop)=>{
              this.$set(this.curItem.item.props,prop,this.commonConfig[prop])
          });
          if (this.$refs.formAttributeCom){
              this.curItem.item.props.label_alignment = this.$refs.formAttributeCom.config.label_alignment
              this.curItem.item.props.label_width = this.$refs.formAttributeCom.config.label_width
              this.curItem.item.props.label_prefix = this.$refs.formAttributeCom.config.label_prefix
              this.curItem.item.props.label_suffix = this.$refs.formAttributeCom.config.label_suffix
          }
          if (this.curItem.item.field_type <=24 && this.curItem.item.field_type >= 21){
              this.curItem.item.props.show_title = false;

              if (this.curItem.item.field_type === 23){//子表单对于标题特殊处理
                  this.curItem.item.props.label_alignment = "center"
              }
          }
          this.fieldsList.push(this.curItem.item);
          this.selectedItem = this.curItem.item
          this.$bus.emit("clickItem",this.curItem.item);
      },
    clearAll:function(){
      if (this.fieldsList.length > 3){
        this.fieldsList.splice(3);
      }else{
        this.$toast("未添加任何字段，无需清空")
      }
    },
    onPreview:function(){
      if (!this.fieldsList || this.fieldsList.length === 0){
        Modal.warning({
          title:"预览失败",
          centered:true,
          content:"当前表单没有字段，无法预览",
          okText:'我知道了'
        })
      }else{
        StaticParams.showPopModal(this,'预览','views/teacherInfo/formCommon/ViewForm.vue',
                {"fieldsList":_.cloneDeep(this.fieldsList),"form_width":this.form_width},false,true,null,"calc(55%  + 48px)","preview-style")
      }
    },
    returnList:function(){
      this.curItem.item = {}
      this.$emit("back",null)
    },
    onDraggableHandle: function(e,list){
      // console.log(e);
      // console.log(list);
      let tag = list[e.oldIndex].tag;
      if (tag === "son_form"  || tag === "table" || tag === "grid" || tag === "divider"){
        this.fieldsList.forEach((item)=>{
          if (item.tag === "son_form"){
            // eslint-disable-next-line no-debugger
            // debugger;
            this.$bus.emit(EventConfig.SON_FORM_DISABLED,e.type === "start")
          }
        })
      }
    },
    selectItem: function(data) {
      if (this.selectedItem.id !== data.id){
          if (data.tag === "td"){
              this.selectedItem = {};
          }else{
              this.selectedItem = data;
          }
      }
    },
    changeFormWidth: function (value) {
      this.form_width = value
    },
    dragOver: function (event) {
      event.preventDefault()
      event.dataTransfer.dropEffect = 'move'
    },
    cloneComponent: function(origin) {
      this.curItem.item = _.cloneDeep(origin);
      return this.curItem.item
    },
    onAdd: function (e) {
      if (e.from.className === "sonFormDraggble"){
        this.$set(this.fieldsList[e.newIndex].props,"is_sonForm_field",false)
      }else if(e.from.className === "td-draggable-style"){
          this.$set(this.fieldsList[e.newIndex].props,"is_table_field",false)
      }else{
        this.curItem.item.id = this.curItem.item.tag + "_" + Common.getRandom(12);
        // if(this.curItem.item.tag !== "label"){
          Object.keys(this.commonConfig).forEach((prop)=>{
            this.$set(this.curItem.item.props,prop,this.commonConfig[prop])
          });
          if (this.$refs.formAttributeCom){
            this.curItem.item.props.label_alignment = this.$refs.formAttributeCom.config.label_alignment
            this.curItem.item.props.label_width = this.$refs.formAttributeCom.config.label_width
            this.curItem.item.props.label_prefix = this.$refs.formAttributeCom.config.label_prefix
            this.curItem.item.props.label_suffix = this.$refs.formAttributeCom.config.label_suffix
          }
        // }
      }

      if (this.curItem.item.field_type <=24 && this.curItem.item.field_type >= 21){
          this.curItem.item.props.show_title = false;

          if (this.curItem.item.field_type === 23){//子表单对于标题特殊处理
              this.curItem.item.props.label_alignment = "center"
          }
      }
      this.selectedItem = this.curItem.item
      this.$bus.emit("clickItem",this.curItem.item)
    },
    copyRowData: function (data) {
      let copyRowData = _.cloneDeep(data[0]);
      let index = this.fieldsList.findIndex((field)=>{return field.id === copyRowData.id});
      CommonOperate.redefineTableOrGridId(copyRowData);
      this.fieldsList.splice(index+1,0,copyRowData)
      this.curItem.item = copyRowData;
      this.selectedItem = this.curItem.item
      this.$bus.emit("clickItem",copyRowData)
    },
      onAddCol:function(data){
        if (data.props.cols.length < 24){
            let col = _.cloneDeep({tag:"col",id:"col_" + Common.getRandom(12),span:24,offset:0,pull:0,push:0,attributeUrl:"ColItemAttribute",data:[]})
            data.props.cols.push(col);
        }
      },
    deleteRowData: function (data) {
      let item = data[0];
      if (CommonOperate.checkHasChangelessField(item)){
          Modal.warning({
              title:"删除失败",
              centered:true,
              content:"当前字段包含类目固定字段（教师编号，教师姓名，单位(部门)），故无法删除，请将固定字段从此字段中移除，再进行删除操作"
          })
          return;
      }
      let index = this.fieldsList.findIndex((field)=>{return field.id === item.id})
      if (this.fieldsList.length > 1){
        if (index === this.fieldsList.length - 1){
          this.curItem.item = this.fieldsList[index - 1];
        }else{
          this.curItem.item = this.fieldsList[index + 1];
        }
        this.selectedItem = this.curItem.item
        this.$bus.emit("clickItem",this.curItem.item)
      }else{
        this.selectedItem = {}
        this.curItem.item = {}
      }
      this.fieldsList.splice(index,1)
    },
    extractData:function(item){
        if (item.tag === "grid"){//栅格
            if(item.props.cols.length === 0 || item.props.cols.every((col)=>{return !col.data || col.data.length === 0})){
                Modal.warning({
                    title: '表单提交失败',
                    content:"栅格布局字段中最少要包含一个字段",
                    okText:'我知道了',
                    centered:true
                })
                return false;
            }else{
                for (let i = 0; i < item.props.cols.length; i++){
                    let col = item.props.cols[i];
                    for (let j = 0; j < col.data.length; j++){
                        let son = col.data[j];
                        if (son.tag === "grid" || son.tag === "table"){
                            if (this.extractData(son) === false){
                                return false
                            }
                        }else{
                            son.is_main = false;//不在主表单内，在布局字段内
                            this.submitList.push(son)
                        }
                    }
                }
            }
        }else{
            if (item.props.tr.every((tr)=>{ return tr.td.every((td)=>{ return !td.data || td.data.length === 0})})){
                Modal.warning({
                    title: '表单提交失败',
                    content:"表格布局字段中最少要包含一个字段",
                    okText:'我知道了',
                    centered:true
                })
                return false;
            }else{
                for (let i = 0; i < item.props.tr.length; i++){
                    let tr = item.props.tr[i];
                    for (let j = 0; j < tr.td.length; j++){
                        let td = tr.td[j];
                        for (let k = 0; k < td.data.length; k++){
                            let data = td.data[k];
                            if (data.tag === "grid" || data.tag === "table"){
                                if (this.extractData(data) === false){
                                    return false
                                }
                            }else{
                                data.is_main = false;//不在主表单内，在布局字段内
                                this.submitList.push(data)
                            }
                        }
                    }
                }
            }
        }

        return true;
    },
    submitData:function () {//提交表单信息
        this.submitList = _.cloneDeep(this.fieldsList);
        if (this.submitList.length === 3){
            Modal.warning({
              title: '表单提交失败',
              content:"表单中最少要包含一个除默认字段（教师编号、教师姓名、单位(部门)）的字段",
              okText:'我知道了',
              centered:true
            })
            return;
        }
        let extract = true;
        for (let i = 0; i < this.submitList.length; i++){
            let item = this.submitList[i];
            if (item.tag === "grid" || item.tag === "table"){//判断是栅格和表格布局字段，提取字段内容
                item.field_type = item.tag === "grid"?240:210;
                extract = this.extractData(item);
                if (extract === false){
                    break;
                }
            }
        }

        if (extract === false){
            return;
        }
        if (this.testData(this.submitList)){
            this.organizeData(this.submitList);
            let has_certificate = 0;
            if (this.submitList.some((item)=>{return item.is_certificate === 1})){
                has_certificate = 1
            }

            let fom_config = this.$refs.formAttributeCom?this.$refs.formAttributeCom.config:this.formConfig
            fom_config.include_certificate = has_certificate

            let params = {
              org_id:this.BaseConfig.person_info_my.bureau_id,
              form_id:this.data.form_id,
              form_json:JSON.stringify(this.submitList),
              form_config_json:JSON.stringify(fom_config),
              person_id:this.BaseConfig.userInfo.person_id_cookie,
              system_id:10
            }

            this.InterfaceConfig.callInterface([{
                url:InterfaceConfig.saveAllCustomizeFormField.url,
                method:InterfaceConfig.saveAllCustomizeFormField.method,
                params:params,
                isTestLogin:InterfaceConfig.saveAllCustomizeFormField.isTestLogin
            }],(result)=>{
              if (result && result[0]){
                this.curItem.item = {}
                if (result[0].data.code === 2000){
                    this.$toast("表单提交成功")
                    this.$emit("back")
                }
              }
            })
        }
    },
    organizeData:function(ary,isChild = false){
      let i = 1;
      let j = 81;
      let k = 101;
      ary.forEach((field)=>{
        let curType = parseInt(field.field_type);
        if (curType !== 20 && curType !== 21 && curType !== 22 && curType !== 23 && curType !== 24 && curType !== 210
                && curType !== 211 && curType !== 230 && curType !== 231 && curType !== 240 && curType !== 241){
          field.is_input_field = 1//输入场
          if (field.props.is_must){//是否必填
            field.field_must_input = 1
          }else{
            field.field_must_input = 0
          }

          if (isChild === false && field.props.can_search === true && field.props.is_search === true){//是否可以作为必填字段
            field.is_query = 1
          }else{
            field.is_query = 0
          }

          if (curType === 1){//单行文本组件的特殊处理
            field.field_input_type = parseInt(field.props.field_input_type)
            if (field.field_input_type === 2){
              field.is_input_field = 0//不是输入场
              field.filed_auto_input_info = field.props.filed_auto_input_info
            }else {
              if (field.props.data_source_form_id){
                field.data_source_form_id = field.props.data_source_form_id
                field.data_source_field_id = field.props.data_source_field_id
                field.compare_standard = field.props.compare_standard
              }
            }
          }else if (curType === 3){//单选按钮的特殊处理
            field.is_multiple_choice = 0
            // field.data_resource = parseInt(field.props.data_resource);
            if (parseInt(field.data_resource) === 2){
              field.data_resource_info = JSON.stringify(field.props.datas);
            }

          }else if (curType === 4){//多选框组特殊处理
            field.is_multiple_choice = 1
            if (parseInt(field.data_resource) === 2){
              field.data_resource_info = JSON.stringify(field.props.datas);
            }
          }else if (curType === 5){//时间日期组件特殊处理
            field.date_format = field.props.format
          }else if(curType === 6){//下拉选择
            // field.data_resource = parseInt(field.props.data_resource);
            if (parseInt(field.data_resource) === 2){
              field.data_resource_info = JSON.stringify(field.props.datas);
            }
            if(field.props.mode === "default"){
              field.is_multiple_choice = 0
            }else{
              field.is_multiple_choice = 1;
            }
          }else if (curType === 9){//图片字段特殊处理
            field.is_certificate = field.props.is_certificate === true ? 1 : 0
          }else if(curType === 17 || curType === 18){
              field.is_multiple_choice = field.props.is_multiple_choice === true?1:0;
          }else if(curType === 27){
              field.data_source_form_id = field.props.data_source_form_id;
              field.data_source_field_id = field.props.data_source_field_id;
              field.compare_standard = field.props.compare_standard;
          }

          if(field.is_input_field === 1){
            if (field.column_name && field.column_name !== ""){//已存在column_name  已有字段
              if (field.props.max_length === "text" || parseInt(field.props.max_length) > 200){
                k = parseInt(field.column_name.substring(9,field.column_name.length)) + 1
              }else if (parseInt(field.props.max_length) <= 200 && parseInt(field.props.max_length) > 50){
                j = parseInt(field.column_name.substring(9,field.column_name.length)) + 1
              }else{
                i = parseInt(field.column_name.substring(9,field.column_name.length)) + 1
              }
            }else{//不存在column_name  新添加字段
                let columnName = ""
              if (field.props.max_length === "text" || parseInt(field.props.max_length) > 200){
                  columnName = "itemvalue" + k;
                  while (ary.some((item)=>{return item.column_name === columnName})){
                      k += 1;
                      columnName = "itemvalue" + k;
                  }
                  field.column_name = columnName;
                  k += 1;
              }else if (parseInt(field.props.max_length) <= 200 && parseInt(field.props.max_length) > 50){
                  columnName = "itemvalue" +j;
                  while (ary.some((item)=>{return item.column_name === columnName})){
                      j += 1;
                      columnName = "itemvalue" + j;
                  }
                  field.column_name = columnName;
                  j += 1;
              }else{
                  columnName = "itemvalue" +i;
                  while (ary.some((item)=>{return item.column_name === columnName})){
                      i += 1;
                      columnName = "itemvalue" + i;
                  }
                  field.column_name = columnName;
                  i += 1;
              }
            }
          }
        }else {//处理非输入场字段数据
          field.is_input_field = 0;
          if (curType !== 20 && curType !== 22){//字段为子表单 栅格 表格
            if(field.props.data && field.props.data.length > 0){//有子字段
              field.field_type = parseInt(field.field_type.toString().substr(0,2) + "1")
              this.organizeData(field.props.data,true);
              field.child_form_json = JSON.stringify(field.props.data);
              let child_has_certificate = 0;
              if (field.props.data.some((item)=>{return item.is_certificate === 1})){
                child_has_certificate = 1
              }

              field.child_form_config_json = JSON.stringify({
                data_num_type:field.props.is_can_add === true?1:2,
                include_certificate:child_has_certificate,
              })
            }else{
              field.field_type = parseInt(field.field_type.toString().substr(0,2) + "0")
            }
          }
        }
      })
    },
    testData:function (ary,isChild = false,index=0) {
      let i = 0;//50的字段个数
      let j = 0;//51到200的字段个数
      let k = 0;//200个字符以上的字段个数
      let stopTest = false;
      for(let m = 0; m < ary.length; m++){
          let item = ary[m];
        if (item.tag === "son_form"){
            //子表单
            index += 1
            let result = true;
            if (!item.props.data || item.props.data.length === 0){
                Modal.warning({
                    title: '表单提交失败',
                    content:"子表单中至少包含一个字段",
                    okText:'我知道了',
                    centered:true
                })
                result = false
            }else {
                result = this.testData(item.props.data,true,index)
            }
            if (result === false){
                stopTest = true;
                break;
            }
        }else{
          if ([3,4,6].some((type)=>{return type === item.field_type}) && (item.props.datas === null || item.props.datas === undefined ||
                  (TypesCheck.isString(item.props.datas) && item.props.datas === "") || (TypesCheck.isArray(item.props.datas) && item.props.datas.length === 0))){
            Modal.warning({
              title: '表单提交失败',
              content:"请设置“" + item.field_name + "”字段的数据源",
              okText:'我知道了',
              centered:true
            })
            stopTest = true;
            break;
          }else if(item.field_type === 27){
              let tips = "";
              if (!item.props.data_source_form_id || item.props.data_source_form_id === ""){
                  // eslint-disable-next-line no-debugger
                  tips = "请选择“" + item.field_name + "”字段的数据更新来源表单";
              }else if (!item.props.data_source_field_id || item.props.data_source_field_id === ""){
                  tips = "请选择“" + item.field_name + "”字段的数据更新来源字段";
              }else if (!item.props.compare_standard){
                  tips = "请选择“" + item.field_name + "”字段的更新关联数据规则";
              }

              if (tips !== ""){
                  Modal.warning({
                      title: '表单提交失败',
                      content:tips,
                      okText:'我知道了',
                      centered:true
                  })
                  stopTest = true;
                  break;
              }
          }

          if (item.props.max_length){
            if (item.props.max_length === "text" || parseInt(item.props.max_length) > 200){
              k += 1
            }else if (parseInt(item.props.max_length) <= 50){
              i += 1
            }else{
              j += 1;
            }
          }
        }
      }

      if (stopTest){
        return false;
      }
      if (i > 80){
        Modal.warning({
          title: '表单提交失败',
          content:(isChild?'子表单' + index:"") +  '字段值最大限制为1-50（包含50）的字段不能超过80个，请更改后再试',
          okText:'我知道了',
          centered:true
        })
        return false;
      }else if(j > 20){
        Modal.warning({
          title: '表单提交失败',
          content:(isChild?'子表单' + index:"") +  '字段值最大限制为51-200（包含200）的字段不能超过20个，请更改后再试',
          okText:'我知道了',
          centered:true
        })
        return false;
      }else if (k > 20){
        Modal.warning({
          title: '表单提交失败',
          content: (isChild?'子表单' + index:"") +  '字段值最大限制为200（包含不限制）以外的字段不能超过20个，请更改后再试',
          okText:'我知道了',
          centered:true
        })
        return false;
      }
      return true
    }
  },
  components: {
    ARow: Row,
    ACol: Col,
    ATabs: Tabs,
    ATabPane: Tabs.TabPane,
    AIcon: Icon,
    draggable,
    FieldItem,
    FormAttributeConfig,
    FieldAttributeConfig,
      MyIcon
  },
}
</script>

<style lang="scss">
  @import "style/formDesign";
  .preview-style{
    .ant-modal-body{
      height: 50rem;
      max-height: 800px;
      overflow: auto;
    }
  }
</style>
