<template>
  <el-form
    data-vv-scope="field"
    class="form"
    size="small"
    inline
    label-position="left"
  >
    <el-tabs class="field__tabs" v-model="activeTabName" :stretch="true">
      <el-tab-pane label="字段属性" name="field">
        <el-scrollbar class="scrollbar-fullheight">
          <div class="control-list">
            <el-form
              :model="formData"
              data-vv-scope="field"
              v-form
              class="form__property-content edit-basic-form"
              v-if="field && field.ctrlType"
            >
              <el-collapse
                v-if="field && !field.isLayout"
                v-model="avtiveCollapseName"
              >
                <el-collapse-item name="basic">
                  <template slot="title">
                    <i
                      class="iconcolor"
                      :class="
                        avtiveCollapseName.includes('basic')
                          ? 'el-icon-caret-bottom'
                          : 'el-icon-caret-top'
                      "
                    ></i>
                    基础属性
                  </template>
                  <!-- iframe 配置项显示在基础属性中 -->
                  <template
                    v-if="
                      !field.isLayout &&
                        (field.ctrlType == 'iframe' ||
                          field.ctrlType == 'contractPreview')
                    "
                  >
                    <BasicsProperty
                      :data="field"
                      :main-bo-fields="tableFields"
                      :all-bo-data="allBoData"
                      :bo-def-data="boDefData"
                      :formVarData="formVarData"
                      :returnData="returnData"
                      :formType="formData.formType"
                      :linkageNoAttrFieldList="noAttrFieldList"
                      :allModelingData="allModelingData"
                      ref="BasicsProperty"
                    />
                  </template>
                  <template v-if="!field.isLayout && !field.noBasics">
                    <ht-form-item
                      v-if="!['divider', 'iframe'].includes(field.ctrlType)"
                      label="控件类型"
                      label-width="100px"
                    >
                      <!-- 隐藏diy组件的隐藏控件功能 -->
                      <div
                        class="hide-ctrl"
                        v-if="
                          !['processForecast', 'htCustomComponent'].includes(
                            field.ctrlType
                          )
                        "
                      >
                        <el-checkbox
                          :key="field.key"
                          v-model="field.options.hideCtrl"
                          >隐藏控件</el-checkbox
                        >
                      </div>
                      <el-select
                        v-model="field.ctrlType"
                        :filterable="true"
                        style="width: 100%"
                        @change="isChangeWatch"
                      >
                        <el-option-group label="基础字段">
                          <el-option
                            v-for="item in filterBasicComponents"
                            :key="item.ctrlType"
                            :label="item.desc"
                            :value="item.ctrlType"
                          />
                        </el-option-group>
                        <el-option-group label="流程字段">
                          <el-option
                            v-for="item in flowComponents.filter(item => {
                              return flowComponentsFilter(item)
                            })"
                            :key="item.ctrlType"
                            :label="item.desc"
                            :value="item.ctrlType"
                          />
                        </el-option-group>
                        <el-option-group label="高级字段">
                          <el-option
                            v-for="item in advanceComponents.filter(obj => {
                              return filterAdvanceFields(obj)
                            })"
                            :key="item.ctrlType"
                            :label="item.desc"
                            :value="item.ctrlType"
                          />
                        </el-option-group>
                      </el-select>
                    </ht-form-item>
                    <ht-form-item
                      label-width="100px"
                      v-if="allowNoAttributes.includes(field.ctrlType)"
                      label="不绑定属性"
                      class="form-inline-item"
                    >
                      <el-switch
                        v-model="field.options.noBindModel"
                        @change="changeNoBindModel"
                        :active-value="true"
                        :inactive-value="false"
                      >
                      </el-switch>
                    </ht-form-item>
                    <ht-form-item
                      label-width="100px"
                      key="tableName"
                      v-if="!field.options || !field.options.noBindModel"
                    >
                      <template slot="label">
                        绑定对象
                        <el-tooltip content="请选择控件所绑定的业务对象属性">
                          <i class="property-tip icon-my-todo-comment" />
                        </el-tooltip>
                      </template>
                      <ht-select
                        validate="required"
                        v-model="field.tableName"
                        :options="tableFields"
                        :props="{key: 'keyName', value: 'desc'}"
                        filterable
                        clearable
                        @change="changeNoAttrFile"
                      >
                        <template slot-scope="{options}">
                          <el-option
                            v-for="group in options"
                            :key="group.name"
                            :label="group.desc"
                            :value="group.name"
                          ></el-option>
                        </template>
                      </ht-select>
                    </ht-form-item>
                    <ht-form-item
                      v-show="false"
                      label-width="100px"
                      v-if="isNoAttrField() || isAllowNoAttributes()"
                    >
                      <template slot="label">
                        <span>控件别名</span>
                      </template>
                      <ht-input v-model="field.name" readonly></ht-input>
                    </ht-form-item>
                  </template>
                  <template v-if="!field.isLayout && !field.noBasics">
                    <ht-form-item
                      label-width="100px"
                      key="target"
                      v-if="!field.options || !field.options.noBindModel"
                    >
                      <template slot="label">
                        绑定属性
                        <el-tooltip content="请选择字段所绑定的业务对象属性">
                          <i class="property-tip icon-my-todo-comment" />
                        </el-tooltip>
                      </template>
                      <ht-select
                        validate="required"
                        v-model="field.target"
                        :options="tableFields"
                        :props="{key: 'keyName', value: 'desc'}"
                        filterable
                        clearable
                        @change="change"
                      >
                        <template slot-scope="{options, propKey, propValue}">
                          <el-option-group
                            v-for="group in options"
                            :key="group.name"
                            :label="group.desc"
                          >
                            <el-option
                              v-for="item in group.children.filter(obj => {
                                return filterFields(obj)
                              })"
                              :key="item[propKey]"
                              :label="
                                item[propValue] + '(' + item[propKey] + ')'
                              "
                              :value="item[propKey]"
                            ></el-option>
                          </el-option-group>
                        </template>
                      </ht-select>
                    </ht-form-item>
                    <ht-form-item
                      label="字段标题"
                      label-width="100px"
                      v-if="!field.noTitle"
                    >
                      <div
                        class="hide-title"
                        v-if="field.ctrlType != 'processForecast'"
                      >
                        <el-checkbox
                          v-if="
                            (field.parentNodeType != 'sub' ||
                              (field.parentNodeType == 'sub' &&
                                field.parentType == 'subDiv')) &&
                              (field.parentNodeType != 'sun' ||
                                (field.parentNodeType == 'sun' &&
                                  field.parentType == 'sunDiv'))
                          "
                          v-model="field.options.hideLabel"
                          active-text="隐藏标题"
                          @change="hideTitleChange(field.options.hideLabel)"
                          >隐藏标题</el-checkbox
                        >
                      </div>

                      <ht-input
                        v-model="field.desc"
                        style="width: 215px"
                        :maxlength="20"
                        :showWordLimit="true"
                      >
                        <el-button
                          icon="icon-guojihua"
                          slot="append"
                          @click="editI18nMessage('')"
                          >国际化</el-button
                        >
                      </ht-input>
                    </ht-form-item>

                    <ht-form-item
                      label-width="100px"
                      v-if="!field.noTitle && field.options"
                    >
                      <template slot="label">
                        标题宽度
                        <el-tooltip content="子孙表Table布局列宽请设置为：px">
                          <i class="property-tip icon-my-todo-comment" />
                        </el-tooltip>
                      </template>
                      <ht-input
                        v-model="field.options.labelstyleWidth"
                        placeholder="宽度：100px"
                      >
                        <el-button slot="append">px</el-button>
                      </ht-input>
                    </ht-form-item>
                    <!-- 高德地图 -->
                    <template v-if="field.ctrlType == 'amap'">
                      <ht-form-item label-width="100px">
                        <template slot="label">
                          展示效果
                          <el-tooltip content="高德地图展示效果">
                            <i class="property-tip icon-my-todo-comment" />
                          </el-tooltip>
                        </template>
                        <div class="radio4">
                          <el-radio-group
                            v-model="field.options.showEffect"
                            size="small"
                          >
                            <el-radio-button label="dialog"
                              >弹出</el-radio-button
                            >
                            <el-radio-button label="tile">铺开</el-radio-button>
                          </el-radio-group>
                        </div>
                      </ht-form-item>
                      <ht-form-item label-width="100px">
                        <template slot="label">
                          地图大小
                          <el-tooltip
                            content="高德地图控件的高度，默认高度350px,宽度100%。"
                          >
                            <i class="property-tip icon-my-todo-comment" />
                          </el-tooltip>
                        </template>
                        <div class="flex-line">
                          <el-input
                            style="width: 47%; margin-right: 10px"
                            v-model="field.options.widthMap"
                            placeholder="宽度：100%"
                          >
                            <template slot="prepend">宽</template>
                          </el-input>
                          <el-input
                            style="width: 47%"
                            v-model="field.options.heightMap"
                            placeholder="高度：350px"
                          >
                            <template slot="prepend">高</template>
                          </el-input>
                        </div>
                      </ht-form-item>
                      <ht-form-item
                        label-width="100px"
                        class="form-inline-item"
                      >
                        <template slot="label">
                          地址追加坐标
                          <el-tooltip
                            content="是否在地址后面显示坐标，默认显示"
                          >
                            <i class="property-tip icon-my-todo-comment" />
                          </el-tooltip>
                        </template>
                        <el-switch
                          v-model="field.options.isAddPosition"
                          :active-value="true"
                          :inactive-value="false"
                        >
                        </el-switch>
                      </ht-form-item>
                      <ht-form-item
                        label-width="100px"
                        v-if="!field.options.isAddPosition"
                      >
                        <template slot="label">
                          坐标
                          <el-tooltip content="请选择坐标要绑定的字段">
                            <i class="property-tip icon-my-todo-comment" />
                          </el-tooltip>
                        </template>
                        <ht-select
                          v-model="field.options.locationName"
                          :options="tableFields"
                          :props="{key: 'name', value: 'desc'}"
                          @change="changeMap"
                        >
                          <template slot-scope="{options, propKey, propValue}">
                            <el-option-group
                              v-for="group in options"
                              :key="group.name"
                              :label="group.desc"
                            >
                              <el-option
                                v-for="item in group.children.filter(obj => {
                                  return filterFields(obj)
                                })"
                                :key="item[propKey]"
                                :label="item[propValue]"
                                :value="item[propKey]"
                              ></el-option>
                            </el-option-group>
                          </template>
                        </ht-select>
                      </ht-form-item>



                      <ht-form-item label-width="100px">
                        <template slot="label">
                          经度
                          <el-tooltip content="请选择经度要绑定的字段">
                            <i class="property-tip icon-my-todo-comment" />
                          </el-tooltip>
                        </template>
                        <ht-select
                          v-model="field.options.longitudeName"
                          :options="tableFields"
                          :props="{key: 'name', value: 'desc'}"
                          @change="longitudeChangeMap"
                        >
                          <template slot-scope="{options, propKey, propValue}">
                            <el-option-group
                              v-for="group in options"
                              :key="group.name"
                              :label="group.desc"
                            >
                              <el-option
                                v-for="item in group.children.filter((obj) => {
                                  return filterFields(obj)
                                })"
                                :key="item[propKey]"
                                :label="item[propValue]"
                                :value="item[propKey]"
                              ></el-option>
                            </el-option-group>
                          </template>
                        </ht-select>
                      </ht-form-item>

                      <ht-form-item label-width="100px">
                        <template slot="label">
                          纬度
                          <el-tooltip content="请选择纬度要绑定的字段">
                            <i class="property-tip icon-my-todo-comment" />
                          </el-tooltip>
                        </template>
                        <ht-select
                          v-model="field.options.latitudeName"
                          :options="tableFields"
                          :props="{key: 'name', value: 'desc'}"
                          @change="latitudeChangeMap"
                        >
                          <template slot-scope="{options, propKey, propValue}">
                            <el-option-group
                              v-for="group in options"
                              :key="group.name"
                              :label="group.desc"
                            >
                              <el-option
                                v-for="item in group.children.filter((obj) => {
                                  return filterFields(obj)
                                })"
                                :key="item[propKey]"
                                :label="item[propValue]"
                                :value="item[propKey]"
                              ></el-option>
                            </el-option-group>
                          </template>
                        </ht-select>
                      </ht-form-item>
                      <ht-form-item label-width="100px">
                        <template slot="label">
                          省
                          <el-tooltip content="请选择省要绑定的字段">
                            <i class="property-tip icon-my-todo-comment" />
                          </el-tooltip>
                        </template>
                        <ht-select
                          v-model="field.options.provinceName"
                          :options="tableFields"
                          :props="{key: 'name', value: 'desc'}"
                          @change="provinceChangeMap"
                        >
                          <template slot-scope="{options, propKey, propValue}">
                            <el-option-group
                              v-for="group in options"
                              :key="group.name"
                              :label="group.desc"
                            >
                              <el-option
                                v-for="item in group.children.filter((obj) => {
                                  return filterFields(obj)
                                })"
                                :key="item[propKey]"
                                :label="item[propValue]"
                                :value="item[propKey]"
                              ></el-option>
                            </el-option-group>
                          </template>
                        </ht-select>
                      </ht-form-item>

                      <ht-form-item label-width="100px">
                        <template slot="label">
                          市
                          <el-tooltip content="请选择市要绑定的字段">
                            <i class="property-tip icon-my-todo-comment" />
                          </el-tooltip>
                        </template>
                        <ht-select
                          v-model="field.options.cityName"
                          :options="tableFields"
                          :props="{key: 'name', value: 'desc'}"
                          @change="cityChangeMap"
                        >
                          <template slot-scope="{options, propKey, propValue}">
                            <el-option-group
                              v-for="group in options"
                              :key="group.name"
                              :label="group.desc"
                            >
                              <el-option
                                v-for="item in group.children.filter((obj) => {
                                  return filterFields(obj)
                                })"
                                :key="item[propKey]"
                                :label="item[propValue]"
                                :value="item[propKey]"
                              ></el-option>
                            </el-option-group>
                          </template>
                        </ht-select>
                      </ht-form-item>

                      <ht-form-item label-width="100px">
                        <template slot="label">
                          区
                          <el-tooltip content="请选择区要绑定的字段">
                            <i class="property-tip icon-my-todo-comment" />
                          </el-tooltip>
                        </template>
                        <ht-select
                          v-model="field.options.districtName"
                          :options="tableFields"
                          :props="{key: 'name', value: 'desc'}"
                          @change="districtChangeMap"
                        >
                          <template slot-scope="{options, propKey, propValue}">
                            <el-option-group
                              v-for="group in options"
                              :key="group.name"
                              :label="group.desc"
                            >
                              <el-option
                                v-for="item in group.children.filter((obj) => {
                                  return filterFields(obj)
                                })"
                                :key="item[propKey]"
                                :label="item[propValue]"
                                :value="item[propKey]"
                              ></el-option>
                            </el-option-group>
                          </template>
                        </ht-select>
                      </ht-form-item>

                      <ht-form-item label-width="100px">
                        <template slot="label">
                          街道
                          <el-tooltip content="请选择街道要绑定的字段">
                            <i class="property-tip icon-my-todo-comment" />
                          </el-tooltip>
                        </template>
                        <ht-select
                          v-model="field.options.streetName"
                          :options="tableFields"
                          :props="{key: 'name', value: 'desc'}"
                          @change="streetChangeMap"
                        >
                          <template slot-scope="{options, propKey, propValue}">
                            <el-option-group
                              v-for="group in options"
                              :key="group.name"
                              :label="group.desc"
                            >
                              <el-option
                                v-for="item in group.children.filter((obj) => {
                                  return filterFields(obj)
                                })"
                                :key="item[propKey]"
                                :label="item[propValue]"
                                :value="item[propKey]"
                              ></el-option>
                            </el-option-group>
                          </template>
                        </ht-select>
                      </ht-form-item>


                    </template>
                    <!-- 对应某些控件是基础属性 但又不是所有控件的基础属性放入BasicsProperty组件中 -->
                    <BasicsProperty
                      v-if="field.ctrlType !== 'iframe'"
                      :data="field"
                      :main-bo-fields="tableFields"
                      :all-bo-data="allBoData"
                      :allModelingData="allModelingData"
                      :bo-def-data="boDefData"
                      :formVarData="formVarData"
                      :returnData="returnData"
                      :formType="formData.formType"
                      :linkageNoAttrFieldList="noAttrFieldList"
                      :tablefields="tableFields"
                      ref="BasicsProperty"
                      :subTableLayoutType="subTableLayoutType"
                      v-on:basicsPropertyShowSelectQueryDialog="
                        basicsPropertyShowSelectQueryDialog
                      "
                    />
                  </template>
                </el-collapse-item>

                <el-collapse-item
                  name="advanced"
                  v-if="!field.noAdvanced"
                  v-show="field.ctrlType != 'processForecast'"
                >
                  <template slot="title">
                    <i
                      class="iconcolor"
                      :class="
                        avtiveCollapseName.includes('advanced')
                          ? 'el-icon-caret-bottom'
                          : 'el-icon-caret-top'
                      "
                    ></i>
                    高级属性
                  </template>
                  <advanced-property
                    ref="advancedProperty"
                    :data.sync="field"
                    :main-bo-fields="tableFields"
                    :all-bo-data="allBoData"
                    :boDefData="boDefData"
                    :formType="formData.formType"
                    :fieldIndexData="fieldIndexData"
                  />
                </el-collapse-item>
              </el-collapse>
              <template v-else-if="field && field.isLayout">
                <layout-property
                  :data.sync="field"
                  :sub-tables="subTables"
                  :sun-tables="sunTables"
                  :tablefields="tableFields"
                  :bo-def-data="boDefData"
                  :formType="formData.formType"
                  :allModelingData="allModelingData"
                  @get-subtable-type="getSubtableType"
                />
              </template>
              <div v-else class="field-empty">选择一个字段进行属性设置</div>
            </el-form>
          </div>
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane
        label="全局属性"
        name="global"
        style="padding: 0 10px 10px 20px"
      >
        <el-scrollbar class="scrollbar-fullheight">
          <div class="edit-style-form">
            <ht-form-item label="样式配置" custom-colon>
              <el-button
                type="primary"
                @click="formSettingClick"
                plain
                class="style__config-btn"
                icon="icon-shejiyangshi"
                >设计样式</el-button
              >
            </ht-form-item>
            <ht-form-item label="数据自动带出" custom-colon>
              <el-button
                type="primary"
                plain
                class="style__config-btn"
                icon="icon-guanlianchaxun"
                @click="showSelectQueryDialog"
                >关联查询</el-button
              >
            </ht-form-item>
          </div>
          <el-form
            :model="formData"
            data-vv-scope="editStyleForm"
            class="form__property-content edit-style-form"
          >
            <ht-form-item label="提交校验" custom-colon>
              <el-button
                @click="formSubmitVerificationClick(-1)"
                type="primary"
                plain
                class="style__config-btn"
                icon="icon-xiaoyan"
                >添加校验条件</el-button
              >
            </ht-form-item>
            <div
              v-if="submitVerification && submitVerification.length > 0"
              style="margin-bottom: 10px"
            >
              <table
                class="form-table choiceType-table verification-table"
                cellspacing="0"
                cellpadding="0"
                border="0"
              >
                <tbody>
                  <tr v-for="(item, index) in submitVerification" :key="index">
                    <td width="160px">
                      <span>{{ item.name }}</span>
                    </td>
                    <td style="width: 120px; text-align: center">
                      <el-button
                        class="btn-padding"
                        style="margin-left: 0px"
                        icon="el-icon-edit"
                        @click="formSubmitVerificationClick(index)"
                      ></el-button>
                      <el-button
                        class="btn-padding"
                        style="margin-left: 0px"
                        icon="el-icon-delete"
                        @click="submitVerification.remove(item)"
                      ></el-button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </el-form>
          <!-- <ht-form-item
            label="动态控件"
            label-width="100px"
            class="dynamic-control-form-item"
          >
            <el-button
              type="primary"
              plain
              class="style__config-btn"
              @click="showDynamicDialog"
              >配置规则</el-button
            >
          </ht-form-item> -->
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane
        label="表单属性"
        name="form"
        style="padding: 0 10px 10px 20px"
        data-vv-scope="editBpmForm"
      >
        <el-scrollbar class="scrollbar-fullheight">
          <el-form
            :model="formData"
            data-vv-scope="editBpmForm"
            class="form__property-content edit-bpm-form"
          >
            <ht-form-item label="表单分类" custom-colon>
              <EipSysTypeSelector
                placeholder="请选择表单分类"
                cat-id="7"
                v-model="formData.typeName"
                :sys-type-id.sync="formData.typeId"
                :validate="{required: true}"
                @selectTypeChange="selectTypeChange"
              />
            </ht-form-item>
            <ht-form-item label="表单名称" custom-colon>
              <ht-input
                v-model="formData.name"
                autocomplete="off"
                :validate="{required: true}"
                @input="$forceUpdate()"
                placeholder="请输入名称"
                :maxlength="50"
                :showWordLimit="true"
              ></ht-input>
            </ht-form-item>
            <ht-form-item custom-colon>
              <template slot="label">
                表单别名
                <el-tooltip
                  class="item"
                  effect="dark"
                  slot="label"
                  content="别名只能填写英文、数字、下划线"
                  placement="right-start"
                >
                  <i class="icon-my-todo-comment"></i
                ></el-tooltip>
              </template>
              <ht-input
                v-model="formData.formKey"
                v-pinyin="formData.name"
                :disabled="!!formData.id || handleType == 'simple'"
                autocomplete="off"
                :validate="{
                  required: true,
                  isExist: '${form}/form/form/v1/checkKey?key=',
                  regex: {
                    exp: '^[a-zA-Z][a-zA-Z0-9_]*$',
                    message: '只能输入字母、数字、下划线，且以字母开头'
                  }
                }"
                :maxlength="50"
                :showWordLimit="true"
                placeholder="请输入别名"
              ></ht-input>
            </ht-form-item>
            <ht-form-item label="表单描述" custom-colon>
              <ht-input
                :rows="4"
                type="textarea"
                v-model="formData.desc"
                :maxlength="200"
                :showWordLimit="true"
                placeholder="请输入描述"
              />
            </ht-form-item>
          </el-form>
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="表单配置"
      :visible.sync="formSettingVisible"
      append-to-body
      class="urgent-text"
      :close-on-click-modal="false"
      width="60%"
    >
      <el-form :model="formSetting">
        <ht-form-item label="字体颜色" label-width="120px">
          <el-color-picker
            v-model="formSetting.fontColor"
            size="mini"
          ></el-color-picker>
        </ht-form-item>
        <ht-form-item label="是否隐藏冒号" label-width="120px">
          <el-checkbox v-model="formSetting.customColon">是</el-checkbox>
        </ht-form-item>
        <ht-form-item label="标题位置" label-width="120px">
          <ht-select
            v-model="formSetting.align"
            :options="[
              {key: 'right', value: '居右'},
              {key: 'center', value: '居中'},
              {key: 'left', value: '居左'},
              {key: 'justify', value: '两端对齐'}
            ]"
          />
        </ht-form-item>
        <ht-form-item label="控件显示模式" label-width="120px">
          <el-radio-group v-model="formSetting.display" size="small">
            <el-radio label="block">块模式</el-radio>
            <el-radio label="inline">行内模式</el-radio>
          </el-radio-group>
        </ht-form-item>
        <ht-form-item label="只读文本显示模式" label-width="120px">
          <el-radio-group v-model="formSetting.roInputDisplayMode" size="small">
            <el-radio label="input">输入框显示</el-radio>
            <el-radio label="text">文本显示</el-radio>
          </el-radio-group>
        </ht-form-item>
        <ht-form-item label="表单布局" label-width="120px">
          <el-checkbox v-model="formSetting.labelPosition"
            >是否上下布局</el-checkbox
          >
        </ht-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formSettingVisible = false">取 消</el-button>
        <el-button type="danger" @click="formSettingReset">重 置</el-button>
        <el-button type="primary" @click="formSettingOk">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="引入脚本"
      :visible.sync="dialogincluddingFileVisible"
      append-to-body
      class="urgent-text"
      :close-on-click-modal="false"
      width="1024"
    >
      <el-row style="height: 100%">
        <el-col :span="12" style="padding: 5px; height: 100%">
          <codemirror
            ref="mycode"
            v-model="formHtml"
            :options="cmOptions"
            class="mycode"
            style="width: 99%; height: 100%"
          ></codemirror>
        </el-col>
        <el-col :span="12" style="padding: 5px">
          <ht-form-item label="自定义JS脚本" label-width>
            <el-dropdown @command="variablesClick" size="mini">
              <el-button type="primary">
                常用变量
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{value: 'currentUser.account'}"
                  >当前用户账号</el-dropdown-item
                >
                <el-dropdown-item :command="{value: 'currentUser.username'}"
                  >当前用户名称</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </ht-form-item>
          <span style="color: red"
            >编辑的脚本内容会直接填充到【script】里面；如需使用到表单BO数据例：data.实体表名.实体表字段</span
          >
          <codemirror
            ref="mycode2"
            v-model="includeFiles.diyJs"
            :options="cmOptions2"
            class="code"
            style="width: 99%; height: 100%"
          ></codemirror>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="
            dialogincluddingFileVisible = false
            includeFiles.diyJs = ''
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="includeFilesOk">确 定</el-button>
      </div>
    </el-dialog>
    <ht-load-data
      :url.sync="formHtmlUrl"
      context="form"
      @after-load-data="afterformHtml"
    ></ht-load-data>
    <i18n-message-edit
      ref="i18nMessageEdit"
      :messageKey="i18nMessageKey"
      @after-save="afterSaveI18n"
    />
    <select-query-dialog
      ref="selectQueryDialog"
      @saveCustQueryJson="saveCustQueryJson"
      :customQuerys="[]"
      :returnData="mainBoFields"
      :queryEntMap="queryEntMap"
      :allowAdd="true"
    />
    <!--表单对话框 -->
    <submit-verification-dialog
      ref="submitVerificationDialog"
      @onConfirm="formSubmitVerificationOk"
      :boDefData="boDefData"
      :linkageNoAttrFieldList="noAttrFieldList"
    />
    <!-- 动态配置控件 -->
    <dynamic-control-dialog
      ref="dynamicControlRef"
      :mainBoFields="mainBoFields"
      :formData="formData"
      @confirm-dynamic="confirmDynamic"
    ></dynamic-control-dialog>
  </el-form>
</template>

<script>
import form from '@/api/form.js'
import {Base64} from 'js-base64'
import deepmerge from 'deepmerge'
import {
  advanceComponents,
  basicComponents,
  flowComponents,
  layoutComponents
} from '@/api/controlsConfig.js'
import LayoutProperty from '@/components/form/LayoutProperty.vue'
import AdvancedProperty from '@/components/form/AdvancedProperty.vue'
import BasicsProperty from '@/components/form/BasicsProperty.vue'
import i18nMessageEdit from '@/components/system/I18nMessageEdit.vue'
import WidgetFormBus from '@/components/form/bus/WidgetFormBus.js'
import utils from '@/hotent-ui-util.js'
import SelectQueryDialog from '@/components/form/customView/SelectQueryDialog.vue'
import SubmitVerificationDialog from '@/components/form/customView/SubmitVerificationDialog.vue'
import {mapState, mapMutations} from 'vuex'
import {uniqueArrayObject} from '@/utils'

const EipSysTypeSelector = () =>
  import('@/components/selector/EipSysTypeSelector.vue')
const DynamicControlDialog = () =>
  import('@/components/form/customView/DynamicControlDialog.vue')
export default {
  name: 'property-panel',

  components: {
    LayoutProperty,
    AdvancedProperty,
    BasicsProperty,
    i18nMessageEdit,
    EipSysTypeSelector,
    SelectQueryDialog,
    SubmitVerificationDialog,
    DynamicControlDialog
  },

  props: [
    // 'data',
    'boDefData',
    'formData',
    'mainBoFields',
    'subTables',
    'sunTablesMap',
    'widgetForm',
    'handleType'
  ],

  data() {
    return {
      formCollapseActiveNames: 'formBasic',
      formGlobalActiveNames: 'formConfig',
      filterBasicComponents: [],
      basicComponents,
      layoutComponents,
      advanceComponents,
      flowComponents,
      copyAdvanceComponents: '',
      activeTabName: 'field',
      avtiveCollapseName: 'basic',
      field: null,
      formObj: this.formData,
      dialogincluddingFileVisible: false, //引入脚本dialog
      formSettingVisible: false, //表单配置dialog
      formSetting: {
        align: this.formData.formType == 'mobile' ? 'left' : 'right',
        customColon: false,
        fontColor: this.formData.formType == 'mobile' ? '#737373' : '#333333',
        display: 'block',
        roInputDisplayMode: 'text',
        labelPosition: false
      },
      currentSubmitVerificationIndex: -1,
      submitVerification: [], //提交校验
      formHtmlUrl: '', //获取表单HTML url
      formHtml: '', //表单html数据
      formExpand: '', //表单json数据
      isWatch: false,
      includeFiles: {diyFile: '', diyCss: '', diyJs: ''}, //引入脚本和样式对象
      tableFields: [],
      filterListType: [
        'number',
        'currency',
        'date',
        'amap',
        'slider',
        'rate',
        'switch'
      ],
      clobFieldList: [
        'textarea',
        'dialog',
        'imageViewer',
        'related-process',
        'signature',
        'button',
        'immediate-single',
        'immediate-textarea',
        'milepost',
        'eip-cascader',
        'dataView',
        'formTable',
        'text',
        'QRcode',
        'iframe',
        'image',
        'opinion',
        'attachment',
        'handSignature',
        'richText'
      ], //大文本类型字段允许绑定的控件
      allBoData: [],
      formVarData: [],
      returnData: [],
      cmOptions: {
        value: '',
        mode: 'vue',
        readOnly: false,
        smartIndent: true,
        tabSize: 2,
        theme: 'base16-light',
        lineNumbers: true,
        line: true
      },
      cmOptions2: {
        value: '',
        mode: 'javascript',
        readOnly: false,
        smartIndent: true,
        tabSize: 2,
        theme: 'base16-light',
        lineNumbers: true,
        line: true
      },
      i18nMessageKey: '',
      createKeyMap: {
        text: true,
        image: true,
        'immediate-single': true,
        'immediate-textarea': true
      },
      sunTables: [],
      currentBoSubEntity: '',
      fieldIndexData: {},
      noAttrFieldList: [],
      widgetFormData: {},
      queryEntMap: {},
      allowNoAttributes: ['input', 'textarea', 'number', 'property-text'],
      subTableLayoutType: '',
      allModelingData: []
    }
  },

  computed: {
    ...mapState({
      data: state => state.form.selectWidget
    })
  },

  watch: {
    data(val) {
      this.field = val
    },
    field: {
      handler(val) {
        // 下拉框 多选isMultiple 属性废弃 使用options.multiple属性 为了兼容以前的代码 将isMultiple true 值赋值给 options.multiple属性
        if (val && val.ctrlType == 'select' && val.isMultiple) {
          val.options.multiple = true
          val.isMultiple = false
        }

        if (val && ['sub', 'sun'].includes(val.parentNodeType)) {
          if (val.boSubEntity || val.tableName) {
            this.currentBoSubEntity = val.boSubEntity
            this.tableFields = this.subTables.filter(
              item => item.name === val.boSubEntity || item.name === val.tableName
            )
            if (this.tableFields.length > 0) {
              for (let e = 0; e < this.tableFields.length; e++) {
                if (this.tableFields[e].children.length > 0) {
                  for (
                    let w = 0;
                    w < this.tableFields[e].children.length;
                    w++
                  ) {
                    this.tableFields[e].children[w].keyName = this.tableFields[
                      e
                    ].children[w].name
                  }
                }
              }
            }
          }

          //如果是孙表，则选取子表里的孙表供选择绑定
          if (
            ((val && val.ctrlType == 'suntable') || val.ctrlType == 'sunDiv') &&
            this.currentBoSubEntity
          ) {
            this.sunTables = this.sunTablesMap[this.currentBoSubEntity] || []
          }
          //如果是孙表里的控件，则找到这个一个孙表供其选择属性
          if (val && val.parentNodeType == 'sun') {
            for (const subName in this.sunTablesMap) {
              let sunTabs = this.sunTablesMap[subName]
              if (sunTabs) {
                sunTabs.forEach(sunTab => {
                  if (sunTab.name == this.currentBoSubEntity) {
                    this.tableFields = [sunTab]
                  }
                })
                if (this.tableFields.length > 0) {
                  for (let o = 0; o < this.tableFields.length; o++) {
                    if (this.tableFields[o].children.length > 0) {
                      for (
                        let h = 0;
                        h < this.tableFields[o].children.length;
                        h++
                      ) {
                        this.tableFields[o].children[
                          h
                        ].keyName = this.tableFields[o].children[h].name
                      }
                    }
                  }
                }
              }
            }
          }
        } else {
          if (this.mainBoFields.length > 0) {
            for (let y = 0; y < this.mainBoFields.length; y++) {
              if (this.mainBoFields[y].children.length > 0) {
                for (let t = 0; t < this.mainBoFields[y].children.length; t++) {
                  this.mainBoFields[y].children[t].keyName =
                    this.mainBoFields[y].children[t].path +
                    '.' +
                    this.mainBoFields[y].children[t].name
                }
              }
            }
          }
          if (
            val &&
            ['time', 'time-picker', 'date-picker'].includes(val.ctrlType)
          ) {
            this.tableFields = JSON.parse(JSON.stringify(this.mainBoFields))
            this.tableFields.forEach(table => {
              if (table.children) {
                let newFileds = []
                table.children = table.children.filter(
                  f => f.dataType != 'date' && f.dataType != 'number'
                )
              }
            })
          } else {
            this.mainBoFields.forEach(item => {
              for (let q = 0; q < item.children.length; q++) {
                for (let i = 0; i < item.children.length - 1 - q; i++) {
                  if (item.children[i].index > item.children[i + 1].index) {
                    let temp = item.children[i]
                    item.children[i] = item.children[i + 1]
                    item.children[i + 1] = temp
                  }
                }
              }
            })
            this.tableFields = this.mainBoFields
          }
        }
        this.setTableFieldsChildren(this.tableFields, val && val.ctrlType)
        //合并数组对象
        let allModelingData = []
        let allBoData = []
        let formVarData = []
        let returnData = [] //对话框返回值选择的字段信息 主表对应主表，子表对应子表，孙表对应孙表。
        let returnTypes = ['select', 'dropdown', 'dialog']
        if (
          (val &&
            ['suntable', 'sunDiv'].includes(val.ctrlType) &&
            this.currentBoSubEntity) ||
          (val && val.parentNodeType == 'sun')
        ) {
          this.mainBoFields.forEach(mainBoField => {
            formVarData.push({...mainBoField})
            allBoData.push({...mainBoField})
            allModelingData.push({...mainBoField})
          })
          this.subTables.forEach(subTable => {
            allModelingData.push({...subTable})
            let sunTabs = this.sunTablesMap[subTable.name]
            if (sunTabs) {
              sunTabs.forEach(sunTab => {
                allModelingData.push({...sunTab})
              })
            }
          })
          if (this.sunTables && this.sunTables.length > 0) {
            this.sunTables.forEach(sunTable => {
              if (val && val.parentNodeType == 'sun') {
                if (sunTable.name == val.boSubEntity) {
                  allBoData.push({...sunTable})
                  formVarData.push({...sunTable})
                  returnData.push({...sunTable})
                }
              } else {
                allBoData.push({...sunTable})
                formVarData.push({...sunTable})
                returnData.push({...sunTable})
              }
            })
          }
        } else {
          if (
            val &&
            val.parentNodeType != 'sub' &&
            returnTypes.includes(val.ctrlType)
          ) {
            //添加主表字段
            this.mainBoFields.forEach(mainBoField => {
              returnData.push({...mainBoField})
            })
          } else if (
            val &&
            val.parentNodeType == 'sub' &&
            returnTypes.includes(val.ctrlType)
          ) {
            //添加子表字段
            this.subTables.forEach(subTable => {
              returnData.push({...subTable})
            })
          }
          //添加主表字段
          this.mainBoFields.forEach(mainBoField => {
            allBoData.push({...mainBoField})
          })
          this.subTables.forEach(subTable => {
            allBoData.push({...subTable})
            let sunTabs = this.sunTablesMap[subTable.name]
            if (sunTabs) {
              sunTabs.forEach(sunTab => {
                allBoData.push({...sunTab})
              })
            }
          })
          formVarData = allBoData
        }
        //判断无属性控件 按钮
        if (
          (this.isNoAttrField(val) || this.isAllowNoAttributes(val)) &&
          this.tableFields &&
          this.tableFields.length > 0
        ) {
          if (val && !val.name) {
            this.$set(val, 'name', 'c_' + val.key)
          }
          if (val && !val.boDefAlias) {
            if (val.parentNodeType == 'sub' || val.parentNodeType == 'sun') {
              const paths = this.tableFields[0].path.split('.')
              this.$set(val, 'boDefAlias', paths[0])
            } else {
              this.$set(val, 'boDefAlias', this.tableFields[0].boDefAlias)
            }
          }
          if (val && !val.tableName) {
            this.$set(val, 'tableName', this.tableFields[0].name)
            this.changeNoAttrFile(this.tableFields[0].name)
          }
          this.noAttrFieldListChange(val, true)
        } else if (
          val &&
          val.ctrlType == 'button' &&
          val.options.bindEventjson &&
          val.options.bindEventjson.isShowInput
        ) {
          this.noAttrFieldListChange(val, false)
        }
        this.allModelingData = allModelingData
        this.allBoData = allBoData
        this.formVarData = formVarData
        this.returnData = returnData
        // this.$emit('update:data', val)
        //通过模板生成的表单字段需更改为 建模别名.字段名 （解决2个不同的建模，但主表建模字段一样）
        if (
          val &&
          val.target &&
          val.parentNodeType != 'sub' &&
          val.parentNodeType != 'sun'
        ) {
          if (!utils.isEmpty(val.boDefAlias) && !utils.isEmpty(val.name)) {
            val.target = val.boDefAlias + '.' + val.name
          }
        }
      },
      deep: true
    },
    'field.ctrlType': {
      handler(newVal, oldVal) {
        if (oldVal == undefined || newVal == undefined || newVal == oldVal) {
          return
        }
        if (!this.isWatch) {
          return
        }
        if (newVal === 'rate') {
          this.changeCtrlType(false,'rate')
        } else if (['number', 'currency'].includes(oldVal)) {
          if (newVal == 'date' || newVal == 'time') {
            this.changeCtrlType(true)
          } else {
            this.changeCtrlType(false)
          }
        } else if (oldVal == 'date' || oldVal == 'time') {
          if (newVal == 'number' || newVal == 'currency') {
            this.changeCtrlType(true)
          } else {
            this.changeCtrlType(false)
          }
        } else if (newVal == 'select') {
          this.changeCtrlType(false)
        } else {
          if (['number', 'currency'].includes(newVal)) {
            if (this.field.columnType == 'number') {
              this.changeCtrlType(false)
            } else {
              this.changeCtrlType(true)
            }
          } else if (newVal == 'date' || newVal == 'time') {
            this.changeCtrlType(false)
          } else if (newVal == 'switch') {
            this.changeCtrlType(false)
          } else {
            this.changeCtrlType(false)
          }
        }
        this.isWatch = false
        const validateList = this.field.options.validateList
          ? [
              ...this.field.options.validateList,
              {
                key: 'required',
                name: '*必填'
              }
            ]
          : [
              {
                key: 'required',
                name: '*必填'
              }
            ]
        const hasValidateRules =
          this.field.options.validateType &&
          this.field.options.validateType.includes('required')
        this.tableFields.forEach(boData => {
          boData.children.forEach((v, i) => {
            if (
              hasValidateRules &&
              this.field.fieldPath === v.keyName &&
              v.isRequired
            ) {
              this.$set(
                this.field.options,
                'validateList',
                uniqueArrayObject(validateList, 'key')
              )
              if (this.field.options && !this.field.options.validate) {
                this.$set(this.field.options, 'validate', "'required'")
              }
            }
          })
        })
      }
    },
    widgetForm(val) {
      this.widgetFormData = val
      if (val.submitVerification && val.submitVerification.length > 0) {
        this.submitVerification = JSON.parse(
          Base64.decode(val.submitVerification)
        )
      } else {
        this.submitVerification = []
      }
    },
    submitVerification: {
      handler(val) {
        this.$set(
          this.widgetFormData,
          'submitVerification',
          Base64.encode(JSON.stringify(this.submitVerification), 'utf-8')
        )
      },
      deep: true
    },
    // 根据绑定属性过滤空间类型
    'field.target': {
      handler(val) {
        this.filterBasicComponents = basicComponents.filter(obj => {
          return this.filterFieldsByCurrentField(obj, val)
        })
      },
      deep: true
    }
  },

  created() {
    this.field = this.data
    const me_ = this
    //表单初始化时收集无属性控件字段
    WidgetFormBus.$off('initNoAttrField')
    WidgetFormBus.$on('initNoAttrField', obj => {
      if (
        (this.isNoAttrField(obj) || this.isAllowNoAttributes(obj)) &&
        obj.tableName
      ) {
        me_.noAttrFieldListChange(obj, false)
      }
    })
    if (!this.formData.formSetting.display) {
      this.formData.formSetting = JSON.stringify(this.formSetting)
    }
  },

  mounted() {
    // 声明
    this.$validator = this.$root.$validator
    // 复制高级字段列表
    this.copyAdvanceComponents = this.advanceComponents.slice()
  },

  destroyed() {},

  methods: {
    confirmDynamic(data) {
      this.$set(this.widgetFormData, 'globalDynamicControl', data)
    },
    // 显示动态控件配置页面
    showDynamicDialog() {
      this.$refs.dynamicControlRef.showDialog(this.widgetFormData)
    },
    ...mapMutations({
      setSelectWidget: 'form/setSelectWidget' // 设置当前选中控件
    }),
    getTableLayoutOfControlKeys() {
      let keys = []
      if (this.widgetForm.list && this.widgetForm.list.length) {
        this.widgetForm.list.map(item => {
          if (item.isLayout && item.ctrlType == 'table') {
            item.rows.map(it => {
              if (it.cols && it.cols.length) {
                it.cols.map(col => {
                  if (col.list && col.list.length) {
                    col.list.map(list => {
                      keys.push(list.key)
                    })
                  }
                })
              }
            })
          }
        })
      }
      return keys
    },
    getSubtableType(type) {
      this.subTableLayoutType = type
    },
    setTableFieldsChildren(data, ctrlType) {
      if (['checkbox', 'radio', 'select'].includes(ctrlType)) {
        const copyDate = JSON.parse(JSON.stringify(data))
        copyDate.map(item => {
          const options = item.children.filter(
            it => it.dataType !== 'number' && it.dataType !== 'date'
          )
          this.$set(item, 'children', options)
        })
        this.tableFields = copyDate
      }
    },
    //重置表单配置信息
    formSettingReset() {
      this.formSetting.align = 'right'
      this.formSetting.customColon = false
      this.formSetting.fontColor = 'rgb(150, 151, 153)'
      this.formSetting.display = 'block'
      this.formSetting.roInputDisplayMode = 'text'
      this.formSetting.labelPosition = false
    },
    //打开表单配置弹框
    formSettingClick() {
      if (this.formData.formSetting) {
        this.formSetting = {
          ...this.formSetting,
          ...JSON.parse(this.formData.formSetting)
        }
      }
      this.formSettingVisible = true
    },
    //保存表单配置信息
    formSettingOk() {
      this.formData.formSetting = JSON.stringify(this.formSetting)
      this.formSettingVisible = false
    },
    //打开添加表单提交校验配置弹框
    formSubmitVerificationClick(index) {
      let item = null
      if (typeof index !== 'undefined' && index >= 0) {
        item = this.submitVerification[index]
        this.currentSubmitVerificationIndex = index
      } else {
        this.currentSubmitVerificationIndex = -1
      }
      this.$refs.submitVerificationDialog.handleOpen(item)
    },
    //保存表单提交校验配置信息
    formSubmitVerificationOk(verification) {
      if (!this.submitVerification) {
        this.submitVerification = []
      }
      if (this.currentSubmitVerificationIndex > -1) {
        this.submitVerification[
          this.currentSubmitVerificationIndex
        ] = verification
      } else {
        this.submitVerification.push(verification)
      }
    },
    saveValidate() {
      const this_ = this
      //这里先校验字段属性,再校验表单属性
      if(this.data.ctrlType =='tag'&& !this.data.options.tag){
        return this.$message.warning('请选择标签')
      }
      this_.$root.$validator.validateAll('field').then(result => {
        console.log(result)
        if (result) {
          utils
            .validateForm(this, 'editBpmForm')
            .then(() => {
              //手机表单保存时 表单类型指定为手机表单类型
              if (
                this_.formData.formType &&
                this_.formData.formType != 'mobile'
              ) {
                this_.formData.formType = 'pc'
              }
              // this.formData.name = this.formData.formName;
              const hasValidateForm =
                this.$refs.advancedProperty &&
                this.$refs.advancedProperty.$refs.validateProperty
              if (
                this.$refs.BasicsProperty &&
                this.$refs.BasicsProperty.validateKey()
              ) {
                return this.$message.warning(
                  '下拉树或下拉框固定选项有重复的选项值，请重新输入'
                )
              }
              if (
                this.$refs.BasicsProperty &&
                this.$refs.BasicsProperty.validateFilterRange()
              ) {
                return this.$message.warning('请选择过滤范围')
              }
              if (hasValidateForm) {
                this.$refs.advancedProperty.$refs.validateProperty
                  .getValidateFormResult()
                  .then(result => {
                    this_.$emit('saveEnd')
                  })
                  .catch(err => {
                    if (err.length > 0) {
                      return this.$message.warning(
                        `有${err.length}个字段未通过校验，请正确填写校验规则。`
                      )
                    }
                  })
              } else {
                this_.$emit('saveEnd')
              }
            })
            .catch(reason => {
              let rules = reason.map(obj => {
                return obj.rule
              })
              if (
                this_.formData &&
                this_.formData.typeName &&
                this_.formData.name &&
                this_.formData.formKey
              ) {
                if (rules.includes('isExist')) {
                  this.$message.error('表单别名重复')
                } else if (rules.includes('regex')) {
                  this.$message.error(
                    '只能输入字母、数字、下划线，且以字母开头'
                  )
                } else {
                  this.$message.error('表单校验不通过')
                }
              } else {
                //获取到报错后的规则数组
                if (rules.includes('required')) {
                  this.$message.error('请完整填写表单内容')
                } else if (rules.includes('isExist')) {
                  this.$message.error('表单别名重复')
                }
              }
              this.activeTabName = 'form'
            })
        } else {
          let arr = this_.$root.$validator.errors.items.filter(
            item => item.scope == 'field'
          )
          let errorLength = arr.length
          this.activeTabName = 'field'
          this_.$message({
            showClose: true,
            message: `有${errorLength}个字段未通过校验，请正确填写表单内容。`,
            type: 'warning'
          })
        }
      })
    },
    filterFields(obj) {
      if (
        (obj.columnType == 'clob' || obj.dataType == 'clob') &&
        this.clobFieldList.indexOf(this.field.ctrlType) == -1
      ) {
        return false
      }
      if (this.field.ctrlType == 'handSignature') {
        if (
          (obj.columnType == 'clob' || obj.dataType == 'clob') &&
          obj.fieldName != 'id_' &&
          obj.fieldName != 'ref_id_'
        ) {
          return true
        }
        return false
      }
      if (this.field.ctrlType == 'richText') {
        if (
          obj.columnType != 'number' &&
          obj.columnType != 'date' &&
          obj.fieldName != 'id_' &&
          obj.fieldName != 'ref_id_'
        ) {
          return true
        }
        return false
      }
      if (this.field.ctrlType == 'signature') {
        //审批签章不能绑定数字和日期属性的字段
        if (obj.columnType != 'number' && obj.columnType != 'date') {
          return true
        }
        return false
      }

      if (this.filterListType.indexOf(this.field.ctrlType) > -1) {
        if (
          this.field.ctrlType == 'date' &&
          this.field.options.dataType != 'date'
        ) {
          this.field.options.dataType = 'date'
        } else if (this.field.ctrlType == 'switch') {
          this.field.options.dataType = 'varchar'
        } else if (this.field.ctrlType == 'number') {
          this.field.options.dataType = 'number'
        }

        return obj.dataType == this.field.options.dataType
      } else if (obj.nodeType == 'sub') {
        return false
      } else {
        return true
      }
    },
    flowComponentsFilter(item) {
      if (this.field.boSubEntity) {
        return ![
          'processForecast',
          'related-process',
          'handSignature',
          'signature',
          'opinion'
        ].includes(item.ctrlType)
      }
      return true
    },
    //高级控件
    filterAdvanceFields(obj) {
      //子/孙表不能选择的控件类型 返回false 不能选择
      let types = ['dataView', 'formTable', 'QRcode', 'milepost', 'customChart']
      if (this.field.boSubEntity && types.includes(obj.ctrlType)) {
        return false
      }
      if (
        (this.field.hasOwnProperty('boSubEntity') || this.isColumnLayout()) &&
        ['formTable', 'dataView'].includes(obj.ctrlType)
      ) {
        return false
      }
      return true
    },
    isColumnLayout() {
      let isGrid = false
      const result = this.widgetForm.list.map(item => {
        if (item.ctrlType === 'grid') {
          return item.columns.map(it => {
            return it.list.some(field => field.key === this.field.key)
          })
        }
      })
      if (result && result.length) {
        isGrid = result.flat().filter(Boolean).length > 0
      }
      return isGrid
    },
    //basicsProperty调用showSelectQueryDialog
    basicsPropertyShowSelectQueryDialog() {
      this.showSelectQueryDialog()
    },
    //常用控件
    filterFieldsByCurrentField(obj, value) {
      //获取table布局中控件的key
      const controlKeys = this.getTableLayoutOfControlKeys()
      if (obj.ctrlType === 'amap' && controlKeys.includes(this.field.key)) {
        return false
      }
      //子/孙表不能选择的控件类型 返回false 不能选择
      let types = [
        'related-process',
        'amap',
        'signature',
        'handSignature',
        'milepost',
        'customChart',
        'dataView',
        'formTable',
        'divider',
        'QRcode'
      ]
      let attributeType = null
      if (
        this.field &&
        this.field.boSubEntity &&
        types.includes(obj.ctrlType)
      ) {
        return false
      }
      if (!obj.options.dataType) {
        return true
      }
      if (this.field && !this.field.options) {
        return true
      }
      if (this.field && !this.field.options.dataType) {
        return true
      }
      if (this.field && this.field.options.dataType == obj.options.dataType) {
        return true
      }
      let dataTypes = obj.options.dataType.split('|')
      if (dataTypes.indexOf('string') != -1) {
        dataTypes.push('varchar')
        dataTypes.push('nvarchar')
      }
      this.tableFields.forEach(boData => {
        boData.children.forEach((v, i) => {
          if (v.keyName == value) {
            attributeType = v.dataType
          }
        })
      })
      if (attributeType != 'number') {
        return (
          attributeType != 'number' &&
          obj.ctrlType != 'rate' &&
          obj.ctrlType != 'slider'
        )
      }
      // 数字控件不能绑定日期控件
      if (this.field.options.dataType == 'number') {
        return obj.options.dataType != 'date'
      }
      // 日期控件不能绑定数字控件
      if (this.field.options.dataType == 'date') {
        return obj.options.dataType != 'number'
      }
      // 大文本类型默认多行文本和附件
      if (this.field.options.dataType == 'clob') {
        if (obj.ctrlType == 'textarea' || obj.ctrlType == 'attachment') {
          return true
        }
      }
      // 字符串类型可以选择所有字段
      let charArr = ['string', 'varchar', 'nvarchar']

      // 需要兼容以前的代码  this.field.options.dataType == ""
      let result = this.field.options.dataType.split('|').filter(item => {
        return dataTypes.indexOf(item) != -1 || charArr.indexOf(item) != -1
      })

      if (result && result.length >= 1) {
        return true
      }
      return false
    },
    /**
     * 新旧属性的替换,并保留原有的双向绑定,
     * 具体逻辑为:
     * 1.新属性有值的,旧属性没有的,新增
     * 2.新属性没有的,旧属性有的,删除
     * 3.新属性有的,旧属性也有,,则保留旧属性(desc等一些特殊key 需要特殊逻辑处理)
     */
    attributeToReplace(oldV, newV) {
      for (let key in oldV) {
        //2.新属性没有的,旧属性有的,删除
        if (
          key != 'key' &&
          newV[key] === undefined &&
          (oldV[key] || oldV[key] === '')
        ) {
          delete oldV[key]
        }
      }
      for (let key in newV) {
        let value = newV[key]
        //1.新属性有值的,旧属性没有的,新增
        if (oldV[key] === undefined || oldV[key] === '') {
          this.$set(oldV, key, value)
          //3.新属性有的,旧属性也有,,则保留旧属性(options等一些特殊key 需要特殊逻辑处理)
        } else {
          if (key === 'options') {
            // 保留绑定的dataType
            let boDataType = oldV[key].dataType
            oldV[key] = value
            if (boDataType) {
              oldV[key].dataType = boDataType
            }
          }
        }
      }
      //旧属性有值 和新属性的值不一样 要重置
      for (let keys in oldV) {
        if (!(oldV[keys] instanceof Object)) {
          if (oldV[keys] != newV[keys] && newV[keys] != undefined) {
            oldV[keys] = newV[keys]
          }
        }
      }
    },
    //切换控件类型对应改变属性
    changeCtrlType(isClean,type) {
      const me_ = this
      const selectObj = deepmerge({}, me_.field, {clone: true})
      basicComponents.forEach(item => {
        if (me_.field.ctrlType == item.ctrlType) {
          // me_.field = deepmerge({}, item, { clone: true });
          let i = deepmerge({}, item, {clone: true})
          i.parentNodeType = me_.data.parentNodeType
          i.boSubEntity = me_.data.boSubEntity
          me_.attributeToReplace(me_.field, i)

          me_.field.key = me_.data.key
          me_.field.tableName = selectObj.tableName
          me_.field.target = selectObj.target


          if (!isClean) {
            me_.field.boDefId = selectObj.boDefId
            me_.field.target = selectObj.target
            me_.field.boAttrId = selectObj.boAttrId
            me_.field.fieldPath = selectObj.fieldPath
            me_.field.name = selectObj.name
            me_.field.desc = selectObj.desc
            me_.field.title = selectObj.desc
            me_.field.entId = selectObj.entId
            me_.field.boDefAlias = selectObj.boDefAlias
            me_.field.tableName = selectObj.tableName
            me_.field.columnType = selectObj.columnType
           if(!type){
             me_.field.options.format = selectObj.options.format
              me_.field.options.inputFormat = selectObj.options.format
              me_.field.options.decimalDigits = selectObj.options.decimalDigits
              me_.field.options.maxDecimalDigits =
                selectObj.options.maxDecimalDigits
              me_.field.options.max = selectObj.options.max
              me_.field.options.numberMax = selectObj.options.numberMax
              me_.field.options.numberMin = selectObj.options.numberMin
              me_.field.options.min = selectObj.options.min
            }
          }
          if (item.ctrlType == 'amap') {
            me_.field.options.dataType = 'varchar'
          }
          if (item.ctrlType == 'switch') {
            me_.field.options.dataType = 'varchar'
          }
          //me_.$emit("data:update",  me_.field);
          //WidgetFormBus.$emit("changeCtrlType", me_.field);
        }
      })
      flowComponents.forEach(item => {
        if (me_.field.ctrlType == item.ctrlType) {
          // me_.field = deepmerge({}, item, { clone: true });
          let i = deepmerge({}, item, {clone: true})
          i.parentNodeType = me_.data.parentNodeType
          i.boSubEntity = me_.data.boSubEntity
          me_.attributeToReplace(me_.field, i)

          me_.field.key = me_.data.key
          if (!isClean) {
            me_.field.boDefId = selectObj.boDefId
            me_.field.target = selectObj.target
            me_.field.boAttrId = selectObj.boAttrId
            me_.field.fieldPath = selectObj.fieldPath
            me_.field.name = selectObj.name
            me_.field.desc = selectObj.desc
            me_.field.title = selectObj.desc
            me_.field.entId = selectObj.entId
            me_.field.boDefAlias = selectObj.boDefAlias
            me_.field.tableName = selectObj.tableName
            me_.field.columnType = selectObj.columnType
            me_.field.options.format = selectObj.options.format
            me_.field.options.inputFormat = selectObj.options.format
            me_.field.options.decimalDigits = selectObj.options.decimalDigits
            me_.field.options.maxDecimalDigits =
              selectObj.options.maxDecimalDigits
            me_.field.options.max = selectObj.options.max
            me_.field.options.numberMax = selectObj.options.numberMax
            me_.field.options.numberMin = selectObj.options.numberMin
            me_.field.options.min = selectObj.options.min
          }
        }
      })
      advanceComponents.forEach(item => {
        if (me_.field.ctrlType == item.ctrlType) {
          // me_.field = deepmerge({}, item, { clone: true });
          let e = deepmerge({}, item, {clone: true})
          e.parentNodeType = me_.data.parentNodeType
          e.boSubEntity = me_.data.boSubEntity
          me_.attributeToReplace(me_.field, e)
          me_.field.key = me_.data.key
          // 如果是非绑定属性的 不用赋值
          if (item.options && item.options.noBindModel) {
            isClean = true
          }
          if (!isClean) {
            me_.field.boDefId = selectObj.boDefId
            me_.field.target = selectObj.target
            me_.field.boAttrId = selectObj.boAttrId
            me_.field.fieldPath = selectObj.fieldPath
            me_.field.name = selectObj.name
            me_.field.desc = selectObj.desc
            me_.field.title = selectObj.desc
            me_.field.entId = selectObj.entId
            me_.field.boDefAlias = selectObj.boDefAlias
            me_.field.tableName = selectObj.tableName
            me_.field.columnType = selectObj.columnType
            me_.field.options.format = selectObj.format
            me_.field.options.inputFormat = selectObj.format
            me_.field.options.decimalDigits = selectObj.options.decimalDigits
            me_.field.options.maxDecimalDigits =
              selectObj.options.maxDecimalDigits
            me_.field.options.max = selectObj.options.max
            me_.field.options.numberMax = selectObj.options.numberMax
            me_.field.options.numberMin = selectObj.options.numberMin
            me_.field.options.min = selectObj.options.min
          }
          if (item.ctrlType == 'amap') {
            me_.field.options.dataType = 'varchar'
          }
          // WidgetFormBus.$emit("changeCtrlType", me_.field);
        }
      })
      me_.$nextTick(() => {
        this.setSelectWidget(me_.field)
      })
      this.checkAndClearTarget()
    },
    //引入脚本和样式对象保存
    includeFilesOk() {
      if (!this.formHtml) {
        this.$message.warning('模板HTML不能为空！')
        return
      }
      this.dialogincluddingFileVisible = false
      form
        .saveFormJs({
          formId: this.formData.id,
          diyJs: this.includeFiles.diyJs,
          formHtml: Base64.encode(this.formHtml, 'utf-8'),
          formExpand: Base64.encode(this.formExpand, 'utf-8')
        })
        .then(resp => {
          if (resp.state) {
            this.$message.success(resp.message)
          }
        })
    },
    variablesClick(data) {
      this.includeFiles.diyJs += data.value
    },
    afterformHtml(data) {
      this.formExpand = data.bpmForm.formExpand
      this.formHtml = data.bpmForm.formHtml
      this.includeFiles.diyJs = data.bpmForm.diyJs
    },
    includdingFile() {
      this.dialogincluddingFileVisible = true
      this.formHtmlUrl =
        '/form/form/v1/previewDesignVue?formId=' + this.formData.id
      this.includeFiles = this.formData.includeFiles
        ? Base64.decode(this.formData.includeFiles, 'utf-8')
        : {diyFile: ' ', diyCss: ' ', diyJs: ' '}
    },
    streetChangeMap(value) {
      let selectObj = null
      this.tableFields.forEach((boData) => {
        if (!selectObj) {
          selectObj = boData.children.find((opt) => opt.name === value)
          if (selectObj) {
            selectObj.boDefAlias =
              boData.boDefAlias || boData.fieldPath.split('.')[0]
            selectObj.tableName = boData.name
          }
        }
      })
      this.field.options.streetPath = selectObj.path + '.' + selectObj.name
    },
    districtChangeMap(value) {
      let selectObj = null
      this.tableFields.forEach((boData) => {
        if (!selectObj) {
          selectObj = boData.children.find((opt) => opt.name === value)
          if (selectObj) {
            selectObj.boDefAlias =
              boData.boDefAlias || boData.fieldPath.split('.')[0]
            selectObj.tableName = boData.name
          }
        }
      })
      this.field.options.districtPath = selectObj.path + '.' + selectObj.name
    },
    cityChangeMap(value) {
      let selectObj = null
      this.tableFields.forEach((boData) => {
        if (!selectObj) {
          selectObj = boData.children.find((opt) => opt.name === value)
          if (selectObj) {
            selectObj.boDefAlias =
              boData.boDefAlias || boData.fieldPath.split('.')[0]
            selectObj.tableName = boData.name
          }
        }
      })
      this.field.options.cityPath = selectObj.path + '.' + selectObj.name
    },
    provinceChangeMap(value) {
      let selectObj = null
      this.tableFields.forEach((boData) => {
        if (!selectObj) {
          selectObj = boData.children.find((opt) => opt.name === value)
          if (selectObj) {
            selectObj.boDefAlias =
              boData.boDefAlias || boData.fieldPath.split('.')[0]
            selectObj.tableName = boData.name
          }
        }
      })
      this.field.options.provincePath = selectObj.path + '.' + selectObj.name
    },
    latitudeChangeMap(value) {
      let selectObj = null
      this.tableFields.forEach((boData) => {
        if (!selectObj) {
          selectObj = boData.children.find((opt) => opt.name === value)
          if (selectObj) {
            selectObj.boDefAlias =
              boData.boDefAlias || boData.fieldPath.split('.')[0]
            selectObj.tableName = boData.name
          }
        }
      })
      this.field.options.latitudePath = selectObj.path + '.' + selectObj.name
    },

    longitudeChangeMap(value) {
      let selectObj = null
      this.tableFields.forEach((boData) => {
        if (!selectObj) {
          selectObj = boData.children.find((opt) => opt.name === value)
          if (selectObj) {
            selectObj.boDefAlias =
              boData.boDefAlias || boData.fieldPath.split('.')[0]
            selectObj.tableName = boData.name
          }
        }
      })
      this.field.options.longitudePath = selectObj.path + '.' + selectObj.name
    },
    // 改变地图地址绑定的字段 设置fieldPath
    changeMap(value) {
      let selectObj = null
      this.tableFields.forEach(boData => {
        if (!selectObj) {
          selectObj = boData.children.find(opt => opt.name === value)
          if (selectObj) {
            selectObj.boDefAlias =
              boData.boDefAlias || boData.fieldPath.split('.')[0]
            selectObj.tableName = boData.name
          }
        }
      })
      this.field.options.locationPath = selectObj.path + '.' + selectObj.name
    },
    // 改变绑定的字段 设置fieldPath
    change(value) {
      let selectObj = null
      this.fieldIndexData = {}
      this.tableFields.forEach(boData => {
        boData.children.forEach((v, i) => {
          let keyName = v.name
          if (value.indexOf('.') != -1) {
            keyName = v.path + '.' + v.name
          }
          if (v.isRequired && keyName == value) {
            if (!this.fieldIndexData.fieldName) {
              this.fieldIndexData.fieldName = v.fieldName
              this.fieldIndexData.index = i
            }
          }
        })
        if (!selectObj) {
          selectObj = boData.children.find(opt => opt.name === value)
          if (value.indexOf('.') != -1) {
            selectObj = boData.children.find(
              opt => opt.path + '.' + opt.name === value
            )
          }

          if (selectObj) {
            selectObj.boDefAlias =
              boData.boDefAlias || boData.path.split('.')[0]
            selectObj.tableName = boData.name
          }
        }
      })

      if (!selectObj) {
        if (this.field.parentNodeType == 'sub') {
          this.field.fieldPath = 'item.' + value
          this.field.name = 'item.' + value
        } else {
          this.$message.warning('只允许子表绑定虚拟字段')
        }
        return
      }

      this.field.boDefId = selectObj.boDefId
      this.field.boAttrId = selectObj.id
      if (this.field.parentNodeType == 'sub') {
        this.field.fieldPath = 'item.' + selectObj.name
      } else {
        this.field.fieldPath = selectObj.path + '.' + selectObj.name
      }

      this.field.options.dataType = selectObj.dataType

      this.field.name = selectObj.name
      this.field.desc = selectObj.desc
      this.field.title = selectObj.desc
      this.field.entId = selectObj.entId
      this.field.boDefAlias = selectObj.boDefAlias
      this.field.tableName = selectObj.tableName
      this.field.columnType = selectObj.columnType
      if (selectObj.dataType == 'date') {
        this.field.options.format = selectObj.format
        this.field.options.inputFormat = selectObj.format
      } else if (selectObj.dataType == 'number') {
        //如果为评分组件则默认最大值为5
        if (this.field.ctrlType === 'rate') {
          this.field.options.max = Number(this.field.options.max)
        } else {
          this.field.options.maxDecimalDigits = selectObj.decimalLen
          this.field.options.decimalDigits = selectObj.decimalLen
          this.field.options.max = Number(''.padStart(selectObj.charLen, '9'))
          this.field.options.numberMax = Number(
            ''.padStart(selectObj.charLen, '9')
          )
          this.field.options.numberMin = -Number(
            ''.padStart(selectObj.charLen, '9')
          )
          this.field.options.min = -Number(''.padStart(selectObj.charLen, '9'))
        }
      }
      // bo属性中设置了必填 且 当前控件的校验规则为空
      if (
        selectObj.isRequired == '1' &&
        (!this.field.options.validateList ||
          this.field.options.validateList.length == 0)
      ) {
        this.$set(this.field.options, 'validateList', [
          {
            key: 'required',
            name: '*必填'
          }
        ])
      }
      this.$forceUpdate()
    },
    //给无属性控件设置关联ent属性
    changeNoAttrFile(value) {
      let _this = this
      this.tableFields.forEach(ent => {
        if (ent.name == value) {
          _this.$set(_this.field, 'entId', ent.id)
          _this.$set(_this.field, 'boDefId', ent.boDefId)
          if (!_this.field.boDefAlias) {
            _this.$set(_this.field, 'boDefAlias', ent.boDefAlias)
          }
          this.$forceUpdate()
          _this.noAttrFieldListChange(_this.field, true)
        }
      })
    },
    //取消无属性设置
    changeNoBindModel() {
      if (this.field.options.noBindModel) {
        this.$set(this.field, 'name', 'c_' + this.field.key)
        this.noAttrFieldListChange(this.field, true)
      } else if (
        !this.field.options.noBindModel &&
        this.noAttrFieldList &&
        this.noAttrFieldList.length > 0
      ) {
        this.$set(this.field, 'name', '')
        this.noAttrFieldListChange(this.field, false)
      }
      if (this.field.ctrlType === 'number') {
        this.setDefaultValueForDigitalControl()
      }
    },
    setDefaultValueForDigitalControl() {
      this.field.options.max = 999999999
      this.field.options.numberMax = 999999999
      this.field.options.numberMin = -999999999
      this.field.options.min = 0
    },
    isChangeWatch() {
      this.isWatch = true
      //
      //
      // 切换时 处理合计
      if (this.widgetForm.list && this.widgetForm.list.length > 0) {
        this.widgetForm.list.forEach((item, index) => {
          if (item.name === this.field.tableName) {
            item.CombinedColumnList &&
              item.CombinedColumnList.forEach((ComItem, ComIndex) => {
                if (ComItem.columnField === this.field.name) {
                  if (
                    this.field.ctrlType != 'number' ||
                    selitem.columnType != 'number'
                  ) {
                    item.CombinedColumnList.splice(ComIndex, 1)
                  }
                }
              })
            this.$set(
              this.widgetForm.list[index],
              'CombinedColumnListJson',
              Base64.encode(JSON.stringify(item.CombinedColumnList), 'utf-8')
            )
          }
        })
      }
    },
    //判断并清空绑定属性
    checkAndClearTarget() {
      if (!utils.isEmpty(this.field.target) && this.tableFields.length > 0) {
        this.tableFields.forEach((item, i) => {
          var items =
            this.tableFields[i].children &&
            this.tableFields[i].children.filter(obj => {
              return this.field.target == obj['keyName']
            })

          if (!items || items.length <= 0) {
            this.field.target = ''
          }
          if (!this.filterFields(items[0])) {
            this.field.target = ''
          }
        })
      }
    },
    editI18nMessage(after) {
      this.i18nMessageKey = this.field.fieldPath || this.field.path

      if (this.createKeyMap[this.field.ctrlType]) {
        this.i18nMessageKey =
          this.formData.formKey +
          '.' +
          this.field.ctrlType +
          Math.random() * 5000
      }
      if (this.i18nMessageKey && after) {
        this.i18nMessageKey += after
      }
      this.$refs.i18nMessageEdit.handleOpen()
    },
    afterSaveI18n(data) {
      data.key = data.key.replace('$', '#')
      if (data.prop.endsWith('placeholder')) {
        this.field.options.placeholder = data.key
        this.field.options.placeholder_zh = data.desc
      } else if (data.prop.endsWith('tip')) {
        this.tooltip = data.key
      } else {
        this.field.desc = data.key
        this.field.desc_zh = data.desc
      }
    },
    isNoAttrField(field) {
      //无属性控件
      if (!field) {
        field = this.field
      }
      const unboundPropertyList = [
        'text',
        'immediate-single',
        'immediate-textarea',
        'flowChart',
        'approvalHistory',
        'opinion',
        'big-title',
        'small-title',
        'simple-text',
        'explain',
        'dataView',
        'formTable',
        'QRcode',
        'iframe',
        'image',
        'customChart',
        'button',
        'historicalApproval',
        'processForecast'
      ]

      if (
        (field && unboundPropertyList.includes(field.ctrlType)) ||
        (field &&
          field.ctrlType == 'button' &&
          field.options.bindEventjson &&
          !field.options.bindEventjson.isShowInput)
      ) {
        return true
      }
      return false
    },
    isAllowNoAttributes(field) {
      //允许无属性控件
      if (!field) {
        field = this.field
      }
      if (
        field &&
        this.allowNoAttributes.includes(field.ctrlType) &&
        field.options.noBindModel
      ) {
        return true
      }
      return false
    },
    noAttrFieldListChange(field, isAdd) {
      //无属性控件的变化实时其更新联动列表
      let inList = false

      this.noAttrFieldList.forEach(item => {
        if (item.key === field.key) {
          if (field.ctrlType == 'button') {
            field.desc = field.options.bindEventjson.name
          }
          if (
            ['small-title', 'big-title', 'simple-text'].includes(field.ctrlType)
          ) {
            field.desc = field.options.textValue
          }
          if (isAdd) {
            inList = true
          } else {
            this.noAttrFieldList.remove(item)
            return
          }
        }
      })
      if (isAdd && !inList) {
        if (field.ctrlType == 'button') {
          field.desc = field.options.bindEventjson.name
        }
        if (
          ['small-title', 'big-title', 'simple-text'].includes(field.ctrlType)
        ) {
          field.desc = field.options.textValue
        }
        this.$set(field, 'name', '')
        this.$set(field, 'target', field.name)
        if (
          (field.parentNodeType == 'sub' || field.parentNodeType == 'sun') &&
          !field.options.noBindModel
        ) {
          this.$set(field, 'fieldPath', 'item.' + field.name)
        } else if (
          (field.parentNodeType == 'sub' || field.parentNodeType == 'sun') &&
          field.options.noBindModel &&
          field.key
        ) {
          this.$set(field, 'fieldPath', 'item.' + `c_${field.key}`)
        } else if (field.options.noBindModel && field.boDefAlias && field.key) {
          this.$set(field, 'fieldPath', `${field.boDefAlias}.c_${field.key}`)
        } else if (field.boDefAlias) {
          this.$set(field, 'fieldPath', field.boDefAlias + '.' + field.name)
        }
      } else if (field.boDefAlias && !field.fieldPath) {
        this.$set(field, 'fieldPath', field.boDefAlias + '.' + field.name)
      }
      this.noAttrFieldList.some((item, i) => {
        if (item.key === field.key) {
          this.noAttrFieldList.splice(i, 1)
          return true
        }
      })
      this.noAttrFieldList.push(field)
    },
    showSelectQueryDialog() {
      //初始化关联查询用到的实体map
      this.initQueryEntMap()
      if (this.widgetFormData.config == undefined) {
        this.widgetFormData.config = {}
      }
      this.$refs.selectQueryDialog.showDialog(
        this.widgetFormData.config.globalQueryJson
      )
    },
    //保存关联查询数据
    saveCustQueryJson(json) {
      this.$set(this.widgetFormData.config, 'globalQueryJson', json)
      this.$set(this.widgetForm.config, 'globalQueryJson', json)
    },
    initQueryEntMap() {
      if (this.mainBoFields && this.mainBoFields.length > 0) {
        this.queryEntMap['main'] = this.mainBoFields
      }
      if (this.subTables && this.subTables.length > 0) {
        this.queryEntMap['sub'] = this.subTables
      }
      if (this.sunTablesMap && Object.keys(this.sunTablesMap).length !== 0) {
        let sunTables = []
        for (var key in this.sunTablesMap) {
          if (this.sunTablesMap.hasOwnProperty(key)) {
            sunTables.push(...this.sunTablesMap[key])
          }
        }
        this.queryEntMap['sun'] = sunTables
      }
    },
    selectTypeChange(type) {
      if (type) {
        this.formData.typeId = type.id
        this.formData.typeName = type.name
      } else {
        this.formData.typeId = ''
        this.formData.typeName = ''
      }
      this.$forceUpdate()
    },
    // 隐藏标题时 标题宽度赋值为0
    hideTitleChange(flag) {
      this.field.options.labelstyleWidth = flag ? '0' : ''
    }
  }
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
@import '@/assets/css/form-editor.scss';

.form {
  height: 100%;
  .field__tabs {
    height: 100%;
    min-width: 300px;
    padding: 0;
    /deep/.el-tabs__item {
      padding: 0 !important;
    }
    /deep/ .el-tabs__content {
      height: calc(100% - 70px);
    }
    /deep/ .el-tab-pane {
      height: 100%;
    }
  }
  /deep/ .el-dialog__body {
    padding: 5px !important;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }
  /deep/ .el-dialog__footer {
    padding: 10px !important;
    text-align: right;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .mycode /deep/ .CodeMirror {
    font-family: monospace;
    height: 400px !important;
    color: black;
    direction: ltr;
  }
  .scrollbar-fullheight {
    height: 100%;
    padding-bottom: 20px;
  }
  .field-empty {
    text-align: center;
    width: 100%;
    margin-top: 150px;
    font-size: 16px;
    color: #ccc;
  }
  i.property-tip {
    color: #6c7995;
    font-size: 14px;
    margin-right: 3px;
  }
  i.property-tip:hover {
    color: $--color-primary;
  }
  .el-aside {
    padding-top: 0px;
  }
  .el-main {
    padding-top: 0px;
    overflow: hidden;
  }
  .amap-line {
    .amap-line-input {
      width: 75px;
    }
    .amap-line-margin {
      margin-left: 5px;
    }
  }
  /deep/ .el-form-item {
    // display: flex;
    margin-bottom: 15px;
    .el-form-item__label {
      width: 100%;
      color: #888;
      font-size: 14px;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
      // text-align: right;
    }
    .el-form-item__content {
      margin-left: 0px !important;
      flex: 1;
      width: 100%;
    }
    // 消除如果是必填时 label对不齐的问题
    &::before {
      margin-right: 0;
    }
  }
}
.style__config-btn {
  width: 100%;
}
/deep/.form__property-content {
  /deep/.el-form-item__content {
    width: 215px;
    .el-textarea__inner {
      margin-left: 5px;
    }
  }
  /deep/.el-form-item--small.el-form-item {
    display: flex;
    flex-wrap: nowrap;
    .el-form-item__label {
      text-align: right;
    }
  }
}
.verification-table > tbody > tr > th,
.verification-table > tbody > tr > td,
.verification-table > tfoot > tr > td,
.verification-table > thead > tr > th {
  border-right: 1px solid #e8eaee !important;
  border-bottom: 1px solid #e8eaee !important;
  padding: 5px !important;
}
/* 字段属性 */
.edit-basic-form {
}
/* 全局属性 */
.edit-style-form {
}
/* 表单属性 */
.edit-bpm-form,
.edit-style-form,
.edit-basic-form {
  /deep/.el-form-item--small.el-form-item {
    display: flex;
    flex-wrap: wrap;
    .el-form-item__label {
      text-align: left;
      width: 100% !important;
    }
  }

  .inputs >>> .ht-form-inputs__inline {
    width: 310px !important;
  }
  .inputs.ht-form-inputs__inline {
    width: 310px !important;
  }
  .ht-form-item-colon ::v-deep .el-form-item__label::after {
    content: '';
  }
  .ht-form-item-colon >>> .el-form-item__label:after {
    content: '';
  }
}
.control-list {
  padding: 0 10px 0 20px;
  >>> .el-icon-caret-bottom {
    font-size: 14px;
  }
  >>> .el-icon-caret-top {
    font-size: 14px;
  }
  >>> .el-collapse-item__header {
    border: 0px;
    font-size: 14px;
    font-weight: 600;
    color: #333 !important;
  }
  >>> .el-collapse-item__wrap {
    border: 0px;
  }
  >>> .el-collapse {
    border: 0px;
  }
  >>> .el-collapse-item__arrow {
    display: none;
  }
  >>> .el-collapse-itemitem__content {
    padding-bottom: 10px;
  }
  >>> .el-collapse-item__content {
    padding-bottom: 0px;
  }
}
/* 不换行的表单项 */
.form-inline-item {
  display: flex;
  flex-wrap: nowrap !important;
  /deep/.el-form-item__label {
    text-align: left;
  }
}
.hide-ctrl,
.hide-title {
  position: absolute;
  top: -32px;
  right: 5px;
}
.radio4 .el-radio-group {
  width: 100%;
}
.radio4 .el-radio-group {
  /deep/.el-radio-button {
    width: 50% !important;
  }
  /deep/.el-radio-button__inner {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center;
  }
}
.dynamic-control-form-item {
  width: calc(100% - 10px);
}
</style>
