<template>
  <div class="layout-property">
    <!-- 分割线 -->
    <template v-if="data && data.ctrlType == 'divider'">
      <!-- 内容 -->
      <ht-form-item label="内容">
        <ht-input v-model="data.options.content" style="width:100%"></ht-input>
      </ht-form-item>

      <!-- 位置 -->
      <ht-form-item label="位置">
        <el-radio-group
          v-model="data.options.position"
          class="style-radio-group"
          size="small"
        >
          <el-radio-button label="left">左侧</el-radio-button>
          <el-radio-button label="center">中间</el-radio-button>
          <el-radio-button label="right">右侧</el-radio-button>
        </el-radio-group>
      </ht-form-item>
      <ht-form-item label="样式">
        <div style="display:flex;justify-content:space-between">
          <div class="icon-selected">
            <div class="icon">图标</div>
            <div class="icon-box" @click="iconSelected('dividerIcon')">
              <i :class="data.options.customDialogjson.icon"></i>
            </div>
            <i
              class="el-icon-caret-bottom"
              @click="iconSelected('dividerIcon')"
            ></i>
            <!-- 图标 -->
            <IconDialog @selected="icons" ref="dividerIcon" v-show="false" />
          </div>
          <div class="color-selected" style="width:148px;margin-right: 0;">
            <div class="color">颜色</div>
            <el-color-picker
              v-model="data.options.color"
              size="mini"
            ></el-color-picker>
            <i class="el-icon-caret-bottom"></i>
          </div>
        </div>
      </ht-form-item>
    </template>
    <template v-else-if="data && data.ctrlType == 'grid'">
      <ht-form-item class="tagOption-form-item">
        <div slot="label" style="color:#333;font-weight:550">列配置</div>
        <el-tabs
          class="tagOption-form-item-elTabs"
          v-model="activeNameTagOption"
          type="card"
        >
          <el-tab-pane
            class="tagOption-form-item-elTabs_left"
            label="选择布局"
            name="first"
          >
            <template v-for="(item, i) of columnsList">
              <div class="tagOption-form-item-elTabs_title">
                {{ item.name }}
              </div>
              <div class="tagOption-form-item-elTabs_value">
                <el-tooltip
                  v-for="(tyItem, tyIndex) of item.type"
                  :key="tyIndex"
                  class="item"
                  effect="light"
                  :content="tyItem.tip"
                  placement="top"
                >
                  <el-button
                    v-bind:class="{'is-activeB': tyItem.active}"
                    label="center"
                    @click="tyItemClick(tyItem)"
                    ><i :class="tyItem.value"></i
                  ></el-button>
                </el-tooltip>
              </div>
            </template>
          </el-tab-pane>

          <el-tab-pane label="自定义" name="second">
            <div class="gird-layout-tips">
              一行被切分为24分栏，栅格总和不能大于24分栏
            </div>
            <draggable
              tag="ul"
              class="column-ul"
              :list="data.columns"
              v-bind="{
                group: {name: 'options'},
                ghostClass: 'ghost',
                handle: '.drag-item'
              }"
              handle=".drag-item"
            >
              <li v-for="(item, index) in data.columns" :key="index">
                <i class="drag-item icon-drag1"></i>
                <ht-input
                  size="mini"
                  width="185px"
                  :min="0"
                  :max="24"
                  type="number"
                  class="accordion-number-inputs"
                  v-model.number="item.span"
                  @input="inputColumns(item)"
                />

                <el-button
                  style="margin-left:14px"
                  type="text"
                  size="mini"
                  @click="handleGridColumnStyle(index)"
                  >样式</el-button
                >
                <el-button
                  @click="handleGridColumnRemove(index)"
                  type="text"
                  size="mini"
                  >删除</el-button
                >
              </li>
            </draggable>
            <div>
              <el-button
                type="primary"
                @click="handleGridColumnAdd"
                plain
                class="style__tabs-btn"
                >添加一列</el-button
              >
            </div></el-tab-pane
          >
        </el-tabs>
      </ht-form-item>
      <ht-form-item>
        <div slot="label" style="color:#333;font-weight:550">
          栅格间隔（px）
        </div>
        <ht-input
          type="number"
          v-model="data.options.gutter"
          size="mini"
          width="312px"
          controls-position="right"
          class="options-gutter"
        >
          <template slot="append">
            <span>px</span>
          </template>
        </ht-input>
      </ht-form-item>
      <ht-form-item>
        <div slot="label" style="color:#333;font-weight:550">栅格样式</div>
        <div class="gridStyle">
          <div class="color-selected" style="width:158px">
            <div class="color2" style="width:38px">边框</div>
            <el-select v-model="data.options.aBorder" style="flex:1">
              <el-option-group
                v-for="group in aBorderOptions"
                :key="group.label"
              >
                <el-option
                  v-for="item in group.options"
                  :key="item.value"
                  :label="item.value"
                  :value="item.key"
                >
                </el-option>
              </el-option-group>
            </el-select>
          </div>
          <div class="color-selected" style="width:158px">
            <div class="color2" style="width:38px">线型</div>
            <el-select
              ref="changeSelection"
              v-model="data.options.lineType"
              @change="changeSelection"
              style="flex:1"
            >
              <el-option
                v-for="(item, index) of lineTypeOptions"
                :value="item.value"
                :key="item.value"
              >
                <template>
                  <div v-if="item.key == 'none'">none</div>
                  <div
                    v-else
                    style="position:relative;top:50%"
                    :style="{'border-top': item.key}"
                  ></div>
                </template>
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="color-selected" style="width:100%;border-radius: 4px;">
          <div class="color2" style="padding: 0 4px;">边框色</div>
          <el-input
            v-model="data.options.lableColor"
            readonly
            placeholder="请选择"
            style="width:calc(100% - 54px)"
          ></el-input>
          <el-color-picker
            class="color-picker"
            v-model="data.options.lableColor"
            size="mini"
          ></el-color-picker>
        </div>
      </ht-form-item>
      <ht-form-item>
        <div slot="label" style="color:#333;font-weight:550">排列方式</div>
        <div class="gird-layout">
          <span>横向</span>
          <el-radio-group
            v-model="data.options.justify"
            class="grid-radio-group"
          >
            <el-tooltip
              class="item"
              effect="light"
              content="左对齐"
              placement="top"
            >
              <el-radio-button label="start"
                ><i class="icon-zuoduiqi"></i
              ></el-radio-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="右对齐"
              placement="top"
            >
              <el-radio-button label="end"
                ><i class="icon-youduiqi"></i
              ></el-radio-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="水平居中"
              placement="top"
            >
              <el-radio-button label="center"
                ><i class="icon-shuipingjuzhong"></i
              ></el-radio-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="两侧间隔相等"
              placement="top"
            >
              <el-radio-button label="space-around"
                ><i class="icon-liangcejiangexiangdeng"></i
              ></el-radio-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="两端对齐"
              placement="top"
            >
              <el-radio-button label="space-between"
                ><i class="icon-liangduanduiqi"></i
              ></el-radio-button>
            </el-tooltip>
          </el-radio-group>
        </div>
        <div class="gird-layout">
          <span>纵向</span>
          <el-radio-group v-model="data.options.align" class="grid-radio-group">
            <el-tooltip
              class="item"
              effect="light"
              content="顶部对齐"
              placement="top"
            >
              <el-radio-button label="top"
                ><i class="icon-dingbuduiqi"></i
              ></el-radio-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="垂直居中"
              placement="top"
            >
              <el-radio-button label="middle"
                ><i class="icon-chuizhijuzhong"></i
              ></el-radio-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="底部对齐"
              placement="top"
            >
              <el-radio-button label="bottom"
                ><i class="icon-dibuduiqi"></i
              ></el-radio-button>
            </el-tooltip>
          </el-radio-group>
        </div>
      </ht-form-item>
      <ht-form-item>
        <div slot="label" style="color:#333;font-weight:550">栅格标题</div>
        <div class="hide-title">
          <el-checkbox v-model="data.options.hideLabel" active-text="隐藏标题"
            >隐藏标题</el-checkbox
          >
        </div>
        <ht-input
          v-model="data.options.gridDesc"
          style="width:100%"
          :maxlength="50"
          :showWordLimit="true"
        >
          <el-button
            icon="icon-guojihua"
            slot="append"
            @click="editI18nMessage(data.key)"
          ></el-button>
        </ht-input>
        <i18n-message-edit
          ref="i18nMessageEdit"
          :messageKey="i18nMessageKey"
          @after-save="afterSaveI18n"
        />
      </ht-form-item>

      <ht-form-item>
        <div slot="label" style="color:#333;font-weight:550">标题样式</div>
        <div
          style="    display: flex;
    justify-content: space-between;"
        >
          <div
            class="color-selected"
            style="width:158px;border-radius: 4px;    margin-right: 16px;
    width: 100%;"
          >
            <div class="color2">字体颜色</div>

            <el-input
              v-model="data.options.gridDescColor"
              readonly
              placeholder="请选择"
            ></el-input>
            <el-color-picker
              class="color-picker"
              v-model="data.options.gridDescColor"
              size="mini"
            ></el-color-picker>
          </div>

          <div>
            <el-button
              plain
              style="    height: 32px;
    width:32px;line-height: 12px;display: flex;
    justify-content: center;border-radius: 4px;"
              @click="hangridDescBold"
              :class="{
                'is-gridDescBold': data.options.gridDescBold == 'bolder'
              }"
              >B</el-button
            >
          </div>
        </div>
        <div class="gird-layout">
          <div
            class="color-selected"
            style="width:170px;border-radius: 4px;    margin-right: 16px;
    "
          >
            <div class="color2">背景色</div>

            <el-input
              v-model="data.options.gridDescBagColor"
              readonly
              placeholder="请选择"
            ></el-input>
            <el-color-picker
              class="color-picker"
              v-model="data.options.gridDescBagColor"
              size="mini"
            ></el-color-picker>
          </div>
          <el-radio-group
            v-model="data.options.gridDescJustify"
            class="grid-radio-group"
          >
            <el-tooltip
              class="item"
              effect="light"
              content="左对齐"
              placement="top"
            >
              <el-radio-button label="left"
                ><i class="icon-zuoduiqi"></i
              ></el-radio-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="水平居中"
              placement="top"
            >
              <el-radio-button label="center"
                ><i class="icon-shuipingjuzhong"></i
              ></el-radio-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="右对齐"
              placement="top"
            >
              <el-radio-button label="right"
                ><i class="icon-youduiqi"></i
              ></el-radio-button>
            </el-tooltip>
          </el-radio-group>
        </div>
      </ht-form-item>
    </template>

    <!--主表table布局配置-->
    <template v-else-if="data && data.ctrlType == 'table'">
      <ht-form-item label="行列配置">
        <ul class="tableUl">
          <li v-for="(row, rowIndex) in data.rows" :key="rowIndex">
            <div>第{{ rowIndex + 1 }}行</div>
            <el-tag
              :key="colIndex"
              v-for="(tag, colIndex) in row.cols"
              closable
              type="info"
              :disable-transitions="false"
              @close="handleTableCol(rowIndex, colIndex)"
              >{{ tag.colspan }}</el-tag
            >
            <el-button
              type="primary"
              size="mini"
              class="tableTdAddBt"
              icon="el-icon-plus"
              v-if="tableHasColspan(rowIndex)"
              circle
              plain
              @click="tableAddTd(rowIndex)"
              title="添加"
            ></el-button>
          </li>
        </ul>
      </ht-form-item>
      <ht-form-item label="追加行到第">
        <ht-input
          v-model="tableTempAddRowIndex"
          type="number"
          width="90px"
          size="mini"
        />
        行
        <el-button
          type="primary"
          plain
          size="mini"
          icon="el-icon-plus"
          circle
          @click="tableOperation('add', 'row')"
          title="添加"
        ></el-button>
      </ht-form-item>
      <ht-form-item label="追加列到第">
        <ht-input
          v-model="tableTempAddColIndex"
          type="number"
          width="90px"
          size="mini"
        />
        列
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-plus"
          circle
          @click="tableOperation('add', 'col')"
          title="添加"
        ></el-button>
      </ht-form-item>
      <ht-form-item label="行列删除">
        <div>
          删除第
          <ht-input
            v-model="tableTempDelRowIndex"
            type="number"
            width="210px"
            size="mini"
          />
          行
          <el-button
            size="mini"
            icon="el-icon-delete"
            circle
            type="primary"
            plain
            @click="tableOperation('del', 'row')"
            title="删除"
          ></el-button>
        </div>
        <div>
          删除第
          <ht-input
            v-model="tableTempDelColIndex"
            type="number"
            width="210px"
            size="mini"
          />
          列
          <el-button
            size="mini"
            icon="el-icon-delete"
            circle
            type="primary"
            plain
            @click="tableOperation('del', 'col')"
            title="删除"
          ></el-button>
        </div>
      </ht-form-item>
      <ht-form-item label="表格行高(px)">
        <ht-input
          size="mini"
          width="312px"
          :min="0"
          type="number"
          v-model="data.options.lineHeight"
        />
      </ht-form-item>
      <ht-form-item label="标题宽度">
        <el-radio-group
          v-model="data.options.labelWidthType"
          size="mini"
          style="margin-right:10px"
        >
          <el-radio-button label="percent">%</el-radio-button>
          <el-radio-button label="px">px</el-radio-button>
        </el-radio-group>
        <ht-input
          size="mini"
          width="212px"
          type="number"
          v-model="data.options.labelWidth"
        />
        <div class="color-selected" style="margin-top: 8px;width:170px;">
          <div class="color2" style="width:72px;">
            标题背景色
          </div>
          <el-color-picker
            v-model="data.options.titleBackground"
            size="mini"
          ></el-color-picker>
          <i class="el-icon-caret-bottom"></i>
        </div>
      </ht-form-item>
      <ht-form-item label="边框宽度(px)">
        <ht-input
          size="mini"
          width="312px"
          :min="0"
          type="number"
          v-model="data.options.borderWidth"
        />
      </ht-form-item>
      <ht-form-item label="颜色设置">
        <div style="display:flex;justify-content:start">
          <div class="color-selected" style="width:148px">
            <div class="color2">边框颜色</div>
            <el-color-picker
              v-model="data.options.borderColor"
              size="mini"
            ></el-color-picker>
            <i class="el-icon-caret-bottom"></i>
          </div>
          <div class="color-selected" style="width:148px;margin-right: 0px;">
            <div class="color2">字体颜色</div>
            <el-color-picker
              v-model="data.options.fontColor"
              size="mini"
            ></el-color-picker>
            <i class="el-icon-caret-bottom"></i>
          </div>
        </div>
      </ht-form-item>
    </template>

    <!--table选项卡配置-->
    <template v-else-if="data && data.ctrlType == 'tab'">
      <ht-form-item label="风格类型">
        <el-radio-group
          v-model="data.options.type"
          class="style-radio-group"
          size="small"
        >
          <el-radio-button label>默认</el-radio-button>
          <el-radio-button label="card">选项卡</el-radio-button>
          <el-radio-button label="border-card">卡片式</el-radio-button>
        </el-radio-group>
      </ht-form-item>
      <ht-form-item
        label="标签位置"
        class="tag-radio-group"
        size="small"
        v-if="formType != 'mobile'"
      >
        <el-radio-group v-model="data.options.align">
          <el-radio-button label="top">顶部</el-radio-button>
          <el-radio-button label="left">左侧</el-radio-button>
          <el-radio-button label="right">右侧</el-radio-button>
          <el-radio-button label="bottom">底部</el-radio-button>
        </el-radio-group>
      </ht-form-item>
      <ht-form-item label="页签切换前是否校验当前页" class="form-inline-item">
        <el-switch
          v-model="data.options.nextCheck"
          :active-value="true"
          :inactive-value="false"
        >
        </el-switch>
      </ht-form-item>
      <ht-form-item
        label="标签配置项"
        class="tagOption-form-item"
        style="display: block"
      >
        <form-tabs-dialog
          ref="FormtbsDialog"
          :data="data"
          :tablefields="tablefields"
        />
        <draggable
          tag="ul"
          class="column-ul"
          :list="data.columns"
          v-bind="{
            group: {name: 'options'},
            ghostClass: 'ghost',
            handle: '.drag-item'
          }"
          handle=".drag-item"
        >
          <li v-for="(item, index) in data.columns" :key="index">
            <i class="drag-item icon-drag1"></i>
            <ht-input size="mini" width="190px" v-model="item.span" />
            <el-button
              @click="openFormtbsDialog(index)"
              class="grid-remove-button"
              type="text"
              size="mini"
              >设置</el-button
            >
            <el-button
              @click="handleGridColumnRemove(index)"
              type="text"
              size="mini"
              >删除</el-button
            >
          </li>
        </draggable>
        <div>
          <el-button
            type="primary"
            @click="handleGridColumnAdd('tab')"
            plain
            class="style__tabs-btn"
            >添加标签</el-button
          >
        </div>
      </ht-form-item>
    </template>

    <!--分页配置-->

    <template v-else-if="data && data.ctrlType == 'page'">
      <div class="property-empty">当前布局字段没有可配置属性</div>
    </template>
    <!--分页步骤条-->
    <template v-else-if="data && data.ctrlType == 'pageSteps'">
      <ht-form-item label="是否显示分页步骤条" class="form-inline-item">
        <el-switch v-model="data.isShow"></el-switch>
      </ht-form-item>
      <ht-form-item label="分页步骤名配置">
        <div v-for="(item, index) in data.pageStepsArr" :key="index">
          <ht-input
            size="mini"
            style="width:100%"
            v-model="item.name"
            :maxlength="8"
            show-word-limit
          />
        </div>
      </ht-form-item>
    </template>

    <!--分页按钮配置-->
    <template v-else-if="data && data.ctrlType == 'pageButton'">
      <ht-form-item label="下一步按钮名">
        <ht-input
          v-model="data.nextButton.name"
          :maxlength="6"
          style="width:100%"
          show-word-limit
        />
      </ht-form-item>
      <ht-form-item label="按钮样式">
        <div style="display:flex;justify-content:start">
          <div class="color-selected" style="width:148px">
            <div class="color">颜色</div>
            <el-color-picker
              v-model="data.nextButton.color"
              size="mini"
            ></el-color-picker>
            <i class="el-icon-caret-bottom"></i>
          </div>
          <div class="icon-selected">
            <div class="icon">图标</div>
            <div class="icon-box" @click="iconSelected('pegeNextIcon')">
              <i :class="data.nextButton.icon"></i>
            </div>
            <i
              class="el-icon-caret-bottom"
              @click="iconSelected('pegeNextIcon')"
            ></i>
            <IconDialog
              @selected="pegeNextIcon"
              ref="pegeNextIcon"
              v-show="false"
            />
          </div>
        </div>
      </ht-form-item>
      <ht-form-item label="点击按钮时是否校验当前页" class="form-inline-item">
        <el-switch v-model="data.nextCheck"></el-switch>
      </ht-form-item>
      <!-- <ht-form-item label-width label="按钮前置脚本">
        <ht-input v-model="data.nextButton.preScript" />
        <el-button class="btn-padding" icon="el-icon-plus" @click="autoRunJSScript(1,true)">设置自定义脚本</el-button>
      </ht-form-item>
      <ht-form-item label-width label="按钮后置脚本">
        <ht-input v-model="data.nextButton.rearScript" />
      </ht-form-item>-->
      <ht-form-item label="上一步按钮名">
        <ht-input
          v-model="data.backButton.name"
          :maxlength="6"
          style="width:100%"
          show-word-limit
        />
      </ht-form-item>
      <ht-form-item label="按钮样式">
        <div style="display:flex;justify-content:start">
          <div class="color-selected" style="width:148px">
            <div class="color">颜色</div>
            <el-color-picker
              v-model="data.backButton.color"
              size="mini"
            ></el-color-picker>
            <i class="el-icon-caret-bottom"></i>
          </div>
          <div class="icon-selected">
            <div class="icon">图标</div>

            <div @click="iconSelected('pegeBackIcon')" class="icon-box">
              <i :class="data.backButton.icon"></i>
            </div>
            <i
              class="el-icon-caret-bottom"
              @click="iconSelected('pegeBackIcon')"
            ></i>
            <IconDialog
              @selected="pegeBackIcon"
              ref="pegeBackIcon"
              v-show="false"
            />
          </div>
        </div>
      </ht-form-item>
      <el-dialog
        title="按钮脚本"
        :visible.sync="pageBtnScriptDialog"
        append-to-body
        class="urgent-text"
        :before-close="pageBtnScriptDialogOk"
        :close-on-click-modal="false"
        width="600px"
      >
        <el-row style="height: 100%">
          <textarea
            v-model="pageBtnScriptBase"
            type="textarea"
            rows="30"
            autocomplete="off"
            ref="scriptText"
            style="width: 99%; height: 100%"
          ></textarea>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button @click="pageBtnScriptDialogClose">取 消</el-button>
          <el-button type="primary" @click="pageBtnScriptDialogOk"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </template>

    <!--折叠面板配置-->
    <template v-else-if="data && data.ctrlType == 'accordion'">
      <ht-form-item label="面板折叠前是否校验当前面板" class="form-inline-item">
        <el-switch
          v-model="data.options.nextCheck"
          :active-value="true"
          :inactive-value="false"
        >
        </el-switch>
      </ht-form-item>
      <ht-form-item label-width label="面板配置" class="tagOption-form-item">
        <form-tabs-dialog
          ref="FormCollDialog"
          :data="data"
          :tablefields="tablefields"
        />
        <draggable
          tag="ul"
          class="column-ul"
          :list="data.columns"
          v-bind="{
            group: {name: 'options'},
            ghostClass: 'ghost',
            handle: '.drag-item'
          }"
          handle=".drag-item"
        >
          <li v-for="(item, index) in data.columns" :key="index">
            <i class="drag-item icon-drag1"></i>
            <ht-input
              size="mini"
              class="accordion-inputs"
              width="130px"
              v-model="item.span"
              style="width:130px"
            />

            <el-switch
              class="switchStyle"
              v-model="item.isOpen"
              @change="switchChange(item)"
              inactive-value="false"
              active-value="true"
              active-text="展开"
              inactive-text="收起"
              style="margin-left: 10px"
              size="mini"
            ></el-switch>
            <el-button
              @click="openFormCollDialog(index)"
              class="grid-remove-button"
              type="text"
              size="mini"
              >设置</el-button
            >
            <el-button
              @click="handleGridColumnRemove(index)"
              style="margin-left: 10px"
              class="grid-remove-button"
              type="text"
              size="mini"
              >删除</el-button
            >
          </li>
        </draggable>
        <div>
          <el-button
            type="primary"
            @click="handleGridColumnAdd('collapse')"
            plain
            class="style__tabs-btn"
            >添加面板</el-button
          >
        </div>
      </ht-form-item>
    </template>

    <!--子表配置-->
    <template
      v-else-if="
        data &&
          (data.ctrlType == 'subtable' ||
            data.ctrlType == 'subDiv' ||
            data.ctrlType == 'hottable')
      "
    >
      <el-scrollbar class="scrollbar-fullheight">
        <div class="control-list">
          <el-collapse v-model="activeName">
            <el-collapse-item name="baseInfo">
              <template slot="title">
                <i
                  class="iconcolor"
                  :class="
                    activeName.includes('baseInfo')
                      ? 'el-icon-caret-bottom'
                      : 'el-icon-caret-top'
                  "
                ></i>
                基础属性
              </template>
              <template>
                <ht-form-item label-width label="绑定子表">
                  <ht-select
                    filterable
                    style="width:100%"
                    v-model="data.options.boSubEntity"
                    :options="subTables"
                    :props="{key: 'name', value: 'desc'}"
                    @change="subTableChange"
                  ></ht-select>
                </ht-form-item>
                <ht-form-item label-width label="子表标题">
                  <ht-input v-model="data.desc" style="width: 100%">
                    <el-button
                      icon="icon-guojihua"
                      slot="append"
                      @click="editI18nMessage"
                      >国际化</el-button
                    >
                  </ht-input>
                </ht-form-item>
                <ht-form-item
                  label-width
                  label=" 子表标题颜色"
                  class="form-inline-item"
                >
                  <div
                    class="color-selected"
                    style="width:70px;margin-right: 0;"
                  >
                    <el-color-picker
                      v-model="data.tableTitleColor"
                      size="mini"
                    ></el-color-picker>
                    <i class="el-icon-caret-bottom"></i>
                  </div>
                </ht-form-item>
                <ht-form-item label="子表布局">
                  <template slot="label" v-if="data.ctrlType === 'subtable'">
                    子表布局
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="横纵内容过多时，可选择固定列和表头（设置固定列时，建议手动设置列宽）"
                      placement="top-start"
                    >
                      <i class="icon-my-todo-comment"></i>
                    </el-tooltip>
                  </template>
                  <ht-select
                    v-model="data.ctrlType"
                    @change="subChange"
                    style="width:100%"
                    :clearable="false"
                    :options="subTableOption"
                  ></ht-select>
                </ht-form-item>
                <ht-form-item
                  label="最大行数"
                  v-if="
                    data.ctrlType !== 'hottable' &&
                      data.options.relation == 'onetomany'
                  "
                >
                  <template slot="label">
                    最大行数
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="0为无限制"
                      placement="top-start"
                    >
                      <i class="icon-my-todo-comment"></i>
                    </el-tooltip>
                  </template>

                  <ht-input
                    v-model="data.options.maxRow"
                    type="number"
                    style="width:340px;"
                    :min="0"
                  ></ht-input>
                </ht-form-item>
              </template>
            </el-collapse-item>
            <el-collapse-item name="designControl">
              <template slot="title">
                <i
                  class="iconcolor"
                  :class="
                    activeName.includes('designControl')
                      ? 'el-icon-caret-bottom'
                      : 'el-icon-caret-top'
                  "
                ></i>
                控件设置
              </template>
              <template>
                <div
                  v-if="data.ctrlType == 'hottable'"
                  style="margin-bottom: 10px"
                >
                  <el-checkbox v-model="data.showTitle">显示标题</el-checkbox>
                </div>
                <ht-form-item label="表头样式">
                  <el-button
                    icon="icon-technology"
                    v-if="data.ctrlType != 'hottable'"
                    size="small"
                    type="primary"
                    plain
                    :style="data.ctrlType === 'subtable' ? '' : 'width：100%'"
                    @click="includdingFile"
                    >自定义表头</el-button
                  >
                  <div
                    v-if="data.ctrlType === 'subtable'"
                    class="color-selected"
                    style="width:170px;
                    position: absolute;
                    left: 138px;
                    top: 0px;"
                  >
                    <div class="color2" style="width:72px;">
                      表头背景色
                    </div>
                    <el-color-picker
                      v-model="data.tableHeaderBgColor"
                      size="mini"
                    ></el-color-picker>
                    <i class="el-icon-caret-bottom"></i>
                  </div>
                </ht-form-item>
                <ht-form-item
                  v-if="data.ctrlType == 'subtable'"
                  label="列合计（仅支持统计数值、金额类）"
                  class="CombinedColumnList"
                >
                  <template v-if="data.CombinedColumnList">
                    <ul
                      v-for="(item, index) in data.CombinedColumnList"
                      :key="index"
                    >
                      <li>
                        <div class="CombinedColumnList_item">
                          <div class="CombinedColumnList_item_left">
                            {{ item.name }}
                          </div>
                          <div>
                            <i
                              style="  margin-right: 8px;"
                              class="el-icon-edit-outline CombinedColumnList_icon"
                              @click="addCombinedColumn(item, index)"
                            ></i>
                            <i
                              class="el-icon-delete CombinedColumnList_icon"
                              @click="delCombinedColumn(item, index)"
                            ></i>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </template>

                  <el-button
                    icon="el-icon-circle-plus-outline"
                    size="small"
                    style="margin-bottom: 10px"
                    @click="addCombinedColumn()"
                    >添加
                  </el-button>
                </ht-form-item>
                <ht-form-item
                  label="子表行标题设置"
                  v-if="data.ctrlType == 'subDiv'"
                >
                  <ht-select
                    v-model="data.fieldTitle"
                    :clearable="true"
                    placeholder="子表行标题"
                    class="select-dialog-line"
                    :validate="{required: true}"
                    :options="subList"
                  >
                    <template slot-scope="{options}">
                      <el-option
                        v-for="item in options"
                        :key="item.name"
                        :label="item.desc"
                        :value="item.name"
                        >{{ item.desc }}</el-option
                      >
                    </template>
                  </ht-select>
                </ht-form-item>
                <template v-if="data.ctrlType === 'subtable'">
                  <ht-form-item label="表头/表列冻结">
                    <template slot="label">
                      表头/表列冻结
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="选择冻结某列：表示当前选择列以及前面的列均冻结"
                        placement="top-start"
                      >
                        <i class="icon-my-todo-comment"></i>
                      </el-tooltip>
                    </template>
                    <el-checkbox v-model="data.freezeTableCol"
                      >表列冻结</el-checkbox
                    >
                    <el-checkbox v-model="data.freezeTableOperate"
                      >冻结操作列</el-checkbox
                    >
                    <el-checkbox v-model="data.freezeTableHeader"
                      >表头冻结</el-checkbox
                    >
                    <div v-if="data.freezeTableCol">
                      <el-select
                        v-model="data.freezeCol"
                        clearable
                        placeholder="请选择冻结列"
                        style="width: 100%"
                      >
                        <el-option
                          v-for="item in freezeColList"
                          :key="item.name"
                          :label="item.desc"
                          :value="item.subTableIndex"
                        ></el-option>
                      </el-select>
                    </div>
                  </ht-form-item>
                  <ht-form-item label="子表高度" v-if="data.freezeTableHeader">
                    <el-input-number
                      v-model="data.tableHeight"
                      controls-position="right"
                      :min="200"
                      style="width:100%"
                    ></el-input-number>
                  </ht-form-item>
                </template>
                <ht-form-item label="数据折叠" v-if="data.ctrlType == 'subDiv'">
                  <template slot="label">
                    数据折叠
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="实现效果：默认展开则展开所有子表数据，默认折叠则只展开首条子表数据"
                      placement="top-start"
                    >
                      <i class="icon-my-todo-comment"></i>
                    </el-tooltip>
                  </template>
                  <el-radio
                    v-model="data.options.dataExpand"
                    @change="changeDataExpand('expand')"
                    label="expand"
                    >默认展开</el-radio
                  >
                  <el-radio
                    v-model="data.options.dataExpand"
                    label="collapse"
                    @change="changeDataExpand('collapse')"
                    >默认折叠</el-radio
                  >
                </ht-form-item>
                <!-- <el-button v-if="data.ctrlType != 'hottable'" @click="addRelation">添加关联关系</el-button> -->
                <el-row
                  class="hottable_btn_row"
                  v-if="data.ctrlType == 'hottable'"
                >
                  <el-button
                    v-if="data.ctrlType == 'hottable'"
                    @click="setColHeader"
                    >设置表头</el-button
                  >
                  <el-button
                    v-if="data.ctrlType == 'hottable'"
                    @click="setCrossMapping"
                    >跨表取数</el-button
                  >
                  <el-button
                    v-if="data.ctrlType == 'hottable'"
                    @click="setNestedHeaders"
                    >嵌套表头</el-button
                  >
                </el-row>
                <el-row
                  class="hottable_btn_row"
                  v-if="data.ctrlType == 'hottable'"
                >
                  <el-button
                    v-if="data.ctrlType == 'hottable'"
                    @click="setMainTableCalc"
                    >主表汇总</el-button
                  >
                  <el-button
                    v-if="data.ctrlType == 'hottable'"
                    @click="setCellCalc"
                    >单元格计算</el-button
                  >
                </el-row>

                <ht-form-item label="子表排序" class="form-inline-item">
                  <el-switch
                    v-model="data.subSort"
                    :active-value="true"
                    :inactive-value="false"
                  >
                  </el-switch>
                </ht-form-item>
                <ht-form-item v-if="data.subSort">
                  <el-select
                    v-model="data.sortField"
                    clearable
                    placeholder="排序列"
                    style="width: 50%"
                  >
                    <el-option
                      v-for="item in subList"
                      :key="item.name"
                      :label="item.desc"
                      :value="item.name"
                    ></el-option>
                  </el-select>
                  <ht-select
                    v-model="data.sortDirection"
                    clearable
                    placeholder="方向"
                    style="width: 50%"
                    :options="[
                      {key: 'asc', value: '升序'},
                      {key: 'desc', value: '降序'}
                    ]"
                  >
                  </ht-select>
                </ht-form-item>
                <ht-form-item
                  class="form-inline-item"
                  label="前端分页"
                  v-if="
                    data.options.relation == 'onetomany' &&
                      data.ctrlType != 'subDiv'
                  "
                >
                  <el-switch
                    v-model="data.subtablePagination"
                    :active-value="true"
                    :inactive-value="false"
                  >
                  </el-switch>
                </ht-form-item>
                <ht-form-item
                  v-if="data.ctrlType != 'subDiv' && formType != 'mobile'"
                  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="data.subtableImportExport"
                    :active-value="true"
                    :inactive-value="false"
                  >
                  </el-switch>
                </ht-form-item>
                <ht-form-item
                  v-if="
                    data.ctrlType != 'subDiv' &&
                      formType != 'mobile' &&
                      data.subtableImportExport
                  "
                >
                  <el-button
                    type="primary"
                    v-if="data.subtableImportExport"
                    plain
                    size="small"
                    style="width: 100%;"
                    @click="openSubImportMergeDialog"
                    >子表数据合并</el-button
                  >

                  <sub-import-merge-dialog
                    v-if="data.subtableImportExport"
                    ref="subImportMergeDialog"
                    @updateExpression="handleUpdateExpression"
                    :expression="data.subtableImportMergeExp"
                  ></sub-import-merge-dialog>
                </ht-form-item>
                <ht-form-item class="form-inline-item">
                  <template slot="label">
                    子表回填
                    <el-tooltip
                      content="需先配置自定义对话框，实现效果：配置子表回填后会在子表上显示配置的按钮，点击后弹出对话框，选择数据将已选数据回填到子表中。"
                    >
                      <i class="icon-my-todo-comment" />
                    </el-tooltip>
                  </template>
                  <el-switch
                    v-model="data.subtableBackfill"
                    :active-value="true"
                    :inactive-value="false"
                  >
                  </el-switch>
                </ht-form-item>

                <ht-form-item
                  label="设置自动回填"
                  v-if="data.ctrlType == 'hottable'"
                >
                  <el-button
                    class="custDialog-btn"
                    icon="el-icon-setting"
                    size="small"
                    type="primary"
                    plain
                    @click="custOrgClick"
                    >设置自动回填</el-button
                  >
                </ht-form-item>
                <ht-form-item
                  v-if="data.initSumRow"
                  label-width="100px"
                  label="统计行标签字段"
                >
                  <ht-select
                    v-model="data.options.initSumRowField"
                    :options="
                      subTables.filter(
                        item => item.name === data.options.boSubEntity
                      )
                    "
                    :props="{key: 'name', value: 'desc'}"
                    clearable
                    filterable
                  >
                    <template slot-scope="{options}">
                      <el-option-group
                        v-for="(group, idenx) in options"
                        :key="idenx"
                        :label="group.desc"
                      >
                        <el-option
                          v-for="item in group.children"
                          :key="item.id"
                          :label="item.desc"
                          :value="item.name"
                        ></el-option>
                      </el-option-group>
                    </template>
                  </ht-select>
                </ht-form-item>
                <ht-form-item
                  v-if="data.initSumRow"
                  label-width="100px"
                  label="统计行标签值"
                >
                  <el-input
                    v-model="data.options.initSumRowValue"
                    placeholder="统计行标签字段值"
                  />
                </ht-form-item>
                <ht-load-data
                  url="/form/customDialog/v1/getAll"
                  requestMethod="get"
                  context="form"
                  @after-load-data="afterCustomDialogLoadData"
                ></ht-load-data>
                <ht-load-data
                  url="/form/customQuery/v1/list"
                  requestMethod="post"
                  context="form"
                  @after-load-data="afterCustomQueryLoadData"
                  ref="customQueryRef"
                ></ht-load-data>
                <ht-form-item
                  v-if="data.ctrlType == 'hottable'"
                  label-width="100px"
                >
                  <template slot="label">
                    <el-tooltip content="可见区域百分比">
                      <i class="property-tip icon-my-todo-comment" />
                    </el-tooltip>
                    <span>控件高度</span>
                  </template>
                  <ht-input
                    size="mini"
                    width="130px"
                    :min="5"
                    type="number"
                    v-model="data.options.height"
                  />vh
                </ht-form-item>
                <div v-if="data.subtableBackfill">
                  <ht-form-item label="子表回填按钮">
                    <ht-input
                      v-model="data.customDialogjson.name"
                      style="width: 166px ;margin-right:14px"
                    ></ht-input>
                    <div class="icon-selected" style="display:inline-flex">
                      <div class="icon">图标</div>
                      <div
                        class="icon-box"
                        @click="iconSelected('customDialogjsonIcon')"
                      >
                        <i :class="data.customDialogjson.icon"></i>
                      </div>
                      <i
                        class="el-icon-caret-bottom"
                        @click="iconSelected('customDialogjsonIcon')"
                      ></i>
                      <IconDialog
                        @selected="icons"
                        ref="customDialogjsonIcon"
                        v-show="false"
                      />
                    </div>
                  </ht-form-item>
                  <ht-form-item label-width="100px">
                    <template slot="label">
                      选择回填源
                      <el-tooltip
                        content="所选择的自定义查询作为选项时的绑定，对话框配置发生变更，需点击【刷新】更新配置后保存表单才能生效。"
                      >
                        <i class="icon-my-todo-comment" />
                      </el-tooltip>
                    </template>
                    <div class="select-dialog-line">
                      <ht-select
                        clearable
                        filterable
                        @change="changeCustDialog"
                        v-model="data.customDialogjson.custDialog.alias"
                        :options="customDialogs"
                        :props="{key: 'alias', value: 'name'}"
                      />
                      <el-button
                        icon="el-icon-refresh"
                        @click="refreshDialogConfig"
                      ></el-button>
                    </div>
                  </ht-form-item>
                  <!-- 参数绑定 -->
                  <ht-form-item
                    v-if="
                      data.customDialogjson.custDialog.conditions &&
                        data.customDialogjson.custDialog.conditions.length > 0
                    "
                  >
                    <template slot="label">
                      参数绑定
                      <el-tooltip content="自定义对话框需要的参数传入">
                        <i class="icon-my-todo-comment" />
                      </el-tooltip>
                    </template>
                    <table
                      class="form-table custDialog-table"
                      cellspacing="0"
                      cellpadding="0"
                      border="0"
                    >
                      <tbody>
                        <tr class="linkageTable-tr linkageTable-title">
                          <td width="100px;">参数名</td>
                          <td>取值对象</td>
                        </tr>
                        <tr
                          class="linkageTable-tr"
                          v-for="(condition, indexCondition) in data
                            .customDialogjson.custDialog.conditions"
                          :key="indexCondition"
                        >
                          <td>{{ condition.comment }}</td>
                          <td>
                            <ht-select
                              class="table-input-width"
                              :validate="{required: !data.subtableBackfill}"
                              v-model="condition.bind"
                              :options="
                                tablefields.filter(tab => tab.type == 'main')
                              "
                              :props="{key: 'name', value: 'desc'}"
                              :clearable="true"
                              filterable
                            >
                              <template slot-scope="{options}">
                                <el-option-group
                                  v-for="group in options"
                                  :key="group.name"
                                  :label="group.desc"
                                >
                                  <el-option
                                    v-for="item in group.children"
                                    :key="item.id"
                                    :label="item.desc"
                                    :value="
                                      'data.' + item.path + '.' + item.name
                                    "
                                  ></el-option>
                                </el-option-group>
                              </template>
                            </ht-select>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </ht-form-item>
                  <ht-form-item
                    label="设置映射"
                    v-if="data.customDialogjson.custDialog.alias"
                  >
                    <el-button
                      class="custDialog-btn"
                      icon="el-icon-setting"
                      size="small"
                      type="primary"
                      plain
                      @click="custDialogClick"
                      >设置返回值</el-button
                    >
                  </ht-form-item>
                </div>
                <ht-form-item label="数据初始化" class="form-inline-item">
                  <el-switch
                    v-model="data.initTemplateData"
                    :active-value="true"
                    :inactive-value="false"
                  >
                  </el-switch>
                </ht-form-item>
                <template v-if="data.initTemplateData">
                  <ht-form-item label-width="100px" label="初始化模式">
                    <template slot="label">
                      初始化模式
                      <el-tooltip
                        content="数据初始化功能要配合流程配置节点属性中的【初始化填报数据】配置项使用才能生效"
                        placement="top"
                      >
                        <i class="icon-my-todo-comment" />
                      </el-tooltip>
                    </template>
                    <el-radio-group
                      v-model="data.initTemplateDataType"
                      size="small"
                      class="style-radio-group"
                    >
                      <el-radio-button label="empty">数据为空</el-radio-button>
                      <el-radio-button label="add">数据追加</el-radio-button>
                      <el-radio-button label="cover">数据覆盖</el-radio-button>
                    </el-radio-group>
                  </ht-form-item>
                  <ht-form-item label-width="100px">
                    <template slot="label">
                      选择回填源
                      <el-tooltip content="所选择的自定义查询作为选项时的绑定">
                        <i class="icon-my-todo-comment" />
                      </el-tooltip>
                    </template>
                    <div class="select-dialog-line">
                      <ht-select
                        clearable
                        filterable
                        @change="setSelectQuery(data.customQuery.alias)"
                        v-model="data.customQuery.alias"
                        :options="customQuerys"
                        style="width: 100%;"
                        :props="{key: 'alias', value: 'name'}"
                      />
                      <el-button
                        icon="el-icon-refresh"
                        @click="
                          setSelectQuery(data.customQuery.alias, 'refresh')
                        "
                      ></el-button>
                    </div>
                  </ht-form-item>
                  <!-- 参数绑定 -->
                  <ht-form-item
                    v-if="
                      data.customQuery.conditionfield &&
                        data.customQuery.conditionfield.length
                    "
                  >
                    <template slot="label">
                      参数绑定
                      <el-tooltip content="自定义对话框需要的参数传入">
                        <i class="property-tip icon-my-todo-comment" />
                      </el-tooltip>
                    </template>
                    <table
                      class="form-table custDialog-table"
                      cellspacing="0"
                      cellpadding="0"
                      border="0"
                    >
                      <tbody>
                        <tr class="linkageTable-tr linkageTable-title">
                          <td width="100px;">参数名</td>
                          <td>取值对象</td>
                        </tr>
                        <tr
                          v-for="(bind, indexBind) in filterConditionField(
                            data.customQuery.conditionfield
                          )"
                          :key="indexBind"
                        >
                          <th>{{ bind.comment }}</th>
                          <td>
                            <ht-select
                              class="table-input-width"
                              v-model="bind.fieldPath"
                              :options="
                                tablefields.filter(tab => tab.type == 'main')
                              "
                              :props="{key: 'name', value: 'desc'}"
                              :clearable="true"
                              filterable
                            >
                              <template slot-scope="{options}">
                                <el-option-group
                                  v-for="group in options"
                                  :key="group.name"
                                  :label="group.desc"
                                >
                                  <el-option
                                    v-for="item in group.children"
                                    :key="item.id"
                                    :label="item.desc"
                                    :value="
                                      'data.' + item.path + '.' + item.name
                                    "
                                  ></el-option>
                                </el-option-group>
                              </template>
                            </ht-select>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </ht-form-item>
                  <ht-form-item label="设置映射" v-if="data.customQuery.alias">
                    <!-- @click="custDialogClick('init')" -->
                    <el-button
                      class="custDialog-btn"
                      icon="el-icon-setting"
                      size="small"
                      type="primary"
                      plain
                      @click="showSelectQueryDialog"
                      >设置返回值</el-button
                    >
                  </ht-form-item>
                  <el-dialog
                    title="子表添加关联查询"
                    width="60%"
                    append-to-body
                    top="8vh"
                    :visible.sync="selectQueryDialog"
                    :close-on-click-modal="false"
                  >
                    <table
                      class="form-table"
                      cellspacing="0"
                      cellpadding="0"
                      border="0"
                    >
                      <tbody>
                        <tr class="linkageTable-tr">
                          <td width="150px">返回结果字段</td>
                          <td width="220px">绑定显示的属性</td>
                        </tr>
                        <tr
                          class="linkageTable-tr"
                          v-for="(bind, indexBind) in data.customQuery
                            .resultfield"
                          :key="indexBind"
                        >
                          <td>{{ bind.comment }}</td>
                          <td>
                            <!-- <ht-select
                    v-model="bind.fieldPath"
                    :options="data.list"
                    :props="{key: 'name', value: 'desc'}"
                    filterable
                    clearable
                  ></ht-select> -->
                            <ht-select
                              v-model="bind.fieldPath"
                              :options="
                                subTables.filter(
                                  item => item.name === data.options.boSubEntity
                                )
                              "
                              :props="{key: 'name', value: 'desc'}"
                              clearable
                              filterable
                            >
                              <template slot-scope="{options}">
                                <el-option-group
                                  v-for="(group, idenx) in options"
                                  :key="idenx"
                                  :label="group.desc"
                                >
                                  <el-option
                                    v-for="item in group.children"
                                    :key="item.id"
                                    :label="item.desc"
                                    :value="item.path + '.' + item.name"
                                  ></el-option>
                                </el-option-group>
                              </template>
                            </ht-select>
                          </td>
                          <!-- <td>
                  <el-button
                    icon="el-icon-delete"
                    @click="unbind(field.comment)"
                  ></el-button>
                </td> -->
                        </tr>
                      </tbody>
                    </table>
                    <div slot="footer" class="dialog-footer">
                      <el-button
                        type="primary"
                        @click="selectQueryDialog = false"
                        size="small"
                        >关闭</el-button
                      >
                    </div>
                  </el-dialog>
                </template>
              </template>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-scrollbar>

      <el-dialog
        title="设置子表对话框返回值"
        :visible.sync="dialogcustDialogVisible"
        append-to-body
        class="urgent-text"
        :close-on-click-modal="false"
        width="800px"
      >
        <table class="form-table" cellspacing="0" cellpadding="0" border="0">
          <tbody>
            <tr class="linkageTable-th">
              <td width="200px">返回结果字段</td>
              <td width="250px">绑定显示的属性</td>
              <td>回填模式</td>
            </tr>

            <tr
              class="linkageTable-tr"
              v-for="(field, index) in data.customDialogjson.resultField"
              :key="index"
            >
              <td>{{ field.comment }}</td>
              <td>
                <ht-select
                  v-model="custDialogprop[field.comment]"
                  :options="
                    subTables.filter(
                      item => item.name === data.options.boSubEntity
                    )
                  "
                  :props="{key: 'name', value: 'desc'}"
                  clearable
                  filterable
                >
                  <template slot-scope="{options}">
                    <el-option-group
                      v-for="(group, idenx) in options"
                      :key="idenx"
                      :label="group.desc"
                    >
                      <el-option
                        v-for="item in group.children"
                        :key="item.id"
                        :label="item.desc"
                        :value="item.path + '.' + item.name"
                      ></el-option>
                    </el-option-group>
                  </template>
                </ht-select>
              </td>
              <td>
                <ht-radio
                  v-model="field.fillBackType"
                  @change="$forceUpdate()"
                  :options="[
                    {key: 1, value: '覆盖回填'},
                    {key: 2, value: '有值不覆盖'}
                  ]"
                  style="width:100%"
                  optionLayout="horizontal"
                />
              </td>
            </tr>
          </tbody>
        </table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogcustDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="custDialogOk">确 定</el-button>
        </div>
      </el-dialog>

      <i18n-message-edit
        ref="i18nMessageEdit"
        :messageKey="i18nMessageKey"
        @after-save="afterSaveI18n"
      />
    </template>
    <template
      v-else-if="
        data && (data.ctrlType == 'suntable' || data.ctrlType == 'sunDiv')
      "
    >
      <el-scrollbar class="scrollbar-fullheight">
        <div class="control-list">
          <el-collapse v-model="activeName">
            <el-collapse-item name="baseInfo">
              <template slot="title">
                <i
                  class="iconcolor"
                  :class="
                    activeName.includes('baseInfo')
                      ? 'el-icon-caret-bottom'
                      : 'el-icon-caret-top'
                  "
                ></i>
                基础属性
              </template>
              <template>
                <ht-form-item label-width label="绑定孙表">
                  <ht-select
                    filterable
                    style="width:100%"
                    v-model="data.options.boSubEntity"
                    :options="sunTables"
                    :props="{key: 'name', value: 'desc'}"
                    @change="subTableChange"
                  ></ht-select>
                </ht-form-item>
                <ht-form-item label-width label="孙表标题">
                  <ht-input v-model="data.desc" style="width:100%">
                    <el-button
                      icon="icon-guojihua"
                      slot="append"
                      @click="editI18nMessage"
                      >国际化</el-button
                    >
                  </ht-input>
                </ht-form-item>
                <ht-form-item
                  label-width
                  label="孙表标题颜色"
                  class="form-inline-item"
                >
                  <div
                    class="color-selected"
                    style="width:70px;margin-right: 0;"
                  >
                    <el-color-picker
                      v-model="data.tableTitleColor"
                      size="mini"
                    ></el-color-picker>
                    <i class="el-icon-caret-bottom"></i>
                  </div>
                </ht-form-item>
                <ht-form-item
                  label-width
                  label="最大行数"
                  v-if="
                    data.ctrlType !== 'hottable' &&
                      data.options.relation == 'onetomany'
                  "
                >
                  <template slot="label">
                    最大行数
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="0为无限制"
                      placement="top-start"
                    >
                      <i class="icon-my-todo-comment"></i>
                    </el-tooltip>
                  </template>
                  <ht-input
                    v-model="data.options.maxRow"
                    type="number"
                    style="width:340px;"
                    :min="0"
                  ></ht-input>
                </ht-form-item>
              </template>
            </el-collapse-item>
            <el-collapse-item name="designControl">
              <template slot="title">
                <i
                  class="iconcolor"
                  :class="
                    activeName.includes('designControl')
                      ? 'el-icon-caret-bottom'
                      : 'el-icon-caret-top'
                  "
                ></i>
                控件设置
              </template>
              <template>
                <ht-form-item label="自定义表头">
                  <el-button
                    icon="icon-technology"
                    size="small"
                    type="primary"
                    plain
                    style="width:100%"
                    @click="includdingFile"
                    >自定义表头</el-button
                  >
                </ht-form-item>
                <ht-form-item
                  label="孙表行标题设置"
                  v-if="data.ctrlType == 'sunDiv'"
                >
                  <ht-select
                    v-model="data.fieldTitle"
                    :clearable="true"
                    placeholder="孙表行标题"
                    class="select-dialog-line"
                    :validate="{required: true}"
                    :options="
                      sunTables.filter(
                        item => item.name === data.options.boSubEntity
                      )
                    "
                  >
                    <template slot-scope="{options}">
                      <el-option-group
                        v-for="(group, idenx) in options"
                        :key="idenx"
                        :label="group.desc"
                      >
                        <el-option
                          v-for="item in group.children"
                          :key="item.name"
                          :label="item.desc"
                          :value="item.name"
                          >{{ item.desc }}</el-option
                        >
                      </el-option-group>
                    </template>
                  </ht-select>
                </ht-form-item>
                <ht-form-item label="数据折叠" v-if="data.ctrlType == 'sunDiv'">
                  <template slot="label">
                    数据折叠
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="实现效果：默认展开则展开所有孙表数据，默认折叠则只展开首条孙表数据"
                      placement="top-start"
                    >
                      <i class="icon-my-todo-comment"></i>
                    </el-tooltip>
                  </template>
                  <el-radio
                    v-model="data.options.dataExpand"
                    label="expand"
                    @change="changeDataExpand('expand')"
                    >默认展开</el-radio
                  >
                  <el-radio
                    v-model="data.options.dataExpand"
                    label="collapse"
                    @change="changeDataExpand('collapse')"
                    >默认折叠</el-radio
                  >
                </ht-form-item>
                <ht-form-item class="form-inline-item">
                  <template slot="label">
                    孙表回填
                    <el-tooltip
                      content="需先配置自定义对话框，实现效果：配置孙表回填后会在孙表上显示配置的按钮，点击后弹出对话框，选择数据将已选数据回填到孙表中。"
                    >
                      <i class="icon-my-todo-comment" />
                    </el-tooltip>
                  </template>
                  <el-switch
                    v-model="data.subtableBackfill"
                    :active-value="true"
                    :inactive-value="false"
                  >
                  </el-switch>
                </ht-form-item>
                <ht-load-data
                  url="/form/customDialog/v1/getAll"
                  requestMethod="get"
                  context="form"
                  @after-load-data="afterCustomDialogLoadData"
                ></ht-load-data>
                <template v-if="data.subtableBackfill">
                  <ht-form-item label="孙表回填按钮">
                    <ht-input
                      v-model="data.customDialogjson.name"
                      style="width: 166px ;margin-right:14px"
                    ></ht-input>
                    <div class="icon-selected" style="display:inline-flex">
                      <div class="icon">图标</div>
                      <div
                        class="icon-box"
                        @click="iconSelected('customDialogjsonIcon')"
                      >
                        <i :class="data.customDialogjson.icon"></i>
                      </div>
                      <i
                        class="el-icon-caret-bottom"
                        @click="iconSelected('customDialogjsonIcon')"
                      ></i>
                      <IconDialog
                        @selected="icons"
                        ref="customDialogjsonIcon"
                        v-show="false"
                      />
                    </div>
                  </ht-form-item>
                  <ht-form-item label-width="100px">
                    <template slot="label">
                      选择回填源
                      <el-tooltip
                        content="所选择的自定义查询作为选项时的绑定，对话框配置发生变更，需点击【刷新】更新配置后保存表单才能生效。"
                      >
                        <i class="icon-my-todo-comment" />
                      </el-tooltip>
                    </template>
                    <div class="select-dialog-line">
                      <ht-select
                        clearable
                        filterable
                        @change="changeCustDialog"
                        v-model="data.customDialogjson.custDialog.alias"
                        :options="customDialogs"
                        :props="{key: 'alias', value: 'name'}"
                      />
                      <el-button
                        icon="el-icon-refresh"
                        @click="refreshDialogConfig"
                      ></el-button>
                    </div>
                  </ht-form-item>
                  <!-- 参数绑定 -->
                  <ht-form-item
                    v-if="
                      data.customDialogjson.custDialog.conditions &&
                        data.customDialogjson.custDialog.conditions.length > 0
                    "
                  >
                    <template slot="label">
                      参数绑定
                      <el-tooltip content="自定义对话框需要的参数传入">
                        <i class="icon-my-todo-comment" />
                      </el-tooltip>
                    </template>
                    <table
                      class="form-table custDialog-table"
                      cellspacing="0"
                      cellpadding="0"
                      border="0"
                    >
                      <tbody>
                        <tr class="linkageTable-tr linkageTable-title">
                          <td width="100px;">参数名</td>
                          <td>取值对象</td>
                        </tr>
                        <tr
                          class="linkageTable-tr"
                          v-for="(condition, indexCondition) in data
                            .customDialogjson.custDialog.conditions"
                          :key="indexCondition"
                        >
                          <td>{{ condition.comment }}</td>
                          <td>
                            <ht-select
                              clearable
                              v-model="condition.bind"
                              :options="sunTableDialogParams"
                              :props="{key: 'name', value: 'desc'}"
                            >
                              <template slot-scope="{options}">
                                <el-option-group
                                  v-for="(group, idenx) in options"
                                  :key="idenx"
                                  :label="group.desc"
                                >
                                  <el-option
                                    v-for="item in group.children"
                                    :key="item.id"
                                    :label="item.desc"
                                    :value="
                                      'data.' + item.path + '.' + item.name
                                    "
                                  ></el-option>
                                </el-option-group>
                              </template>
                            </ht-select>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </ht-form-item>
                  <ht-form-item
                    label="设置映射"
                    v-if="data.customDialogjson.custDialog.alias"
                  >
                    <el-button
                      class="custDialog-btn"
                      icon="el-icon-setting"
                      size="small"
                      type="primary"
                      plain
                      @click="custDialogSunClick"
                      >设置返回值</el-button
                    >
                  </ht-form-item>
                </template>
              </template>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-scrollbar>
      <el-dialog
        title="设置对话框返回值"
        :visible.sync="dialogcustDialogVisible"
        append-to-body
        class="urgent-text"
        :close-on-click-modal="false"
        width="800px"
      >
        <table class="form-table" cellspacing="0" cellpadding="0" border="0">
          <tbody>
            <tr class="linkageTable-th">
              <td width="200px">返回结果字段</td>
              <td width="250px">绑定显示的属性</td>
              <td>回填模式</td>
            </tr>
            <template v-if="data.customDialogjson">
              <tr
                class="linkageTable-tr"
                v-for="(field, index) in data.customDialogjson.resultField"
                :key="index"
              >
                <td>{{ field.comment }}</td>
                <td>
                  <ht-select
                    v-model="custDialogprop[field.comment]"
                    :options="
                      subTables.filter(
                        item => item.name === data.options.boSubEntity
                      )
                    "
                    :props="{key: 'name', value: 'desc'}"
                    clearable
                    filterable
                  >
                    <template slot-scope="{options}">
                      <el-option-group
                        v-for="(group, idenx) in options"
                        :key="idenx"
                        :label="group.desc"
                      >
                        <el-option
                          v-for="item in group.children"
                          :key="item.id"
                          :label="item.desc"
                          :value="item.path + '.' + item.name"
                        ></el-option>
                      </el-option-group>
                    </template>
                  </ht-select>
                </td>
                <td>
                  <ht-radio
                    v-model="field.fillBackType"
                    @change="$forceUpdate()"
                    :options="[
                      {key: 1, value: '覆盖回填'},
                      {key: 2, value: '有值不覆盖'}
                    ]"
                    style="width:100%"
                    optionLayout="horizontal"
                  />
                </td>
              </tr>
            </template>
          </tbody>
        </table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogcustDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="custDialogOk">确 定</el-button>
        </div>
      </el-dialog>

      <i18n-message-edit
        ref="i18nMessageEdit"
        :messageKey="sums"
        @after-save="afterSaveI18n"
      />
    </template>
    <template v-else-if="data && data.ctrlType == 'formTable'">
      <ht-form-item label-width="100px">
        <template slot="label">
          选择表单列表
          <el-tooltip content="所选择的表单列表作为选项时的绑定">
            <i class="property-tip icon-my-todo-comment" />
          </el-tooltip>
        </template>
        <eip-data-template-selector
          v-model="data.templateObj"
          @handleRemove="handleFormTableRemove"
          placeholder="请选择表单列表"
          :single="true"
          v-if="templateShow"
          permission="b"
          :isMobile="formType === 'mobile'"
        ></eip-data-template-selector>
      </ht-form-item>

      <ht-form-item
        label="设置参数绑定"
        v-if="data.templateKey && data.templateKey != ''"
      >
        <el-button
          class="custDialog-btn"
          icon="icon-list2"
          size="mini"
          type="primary"
          plain
          @click="dataViewClick()"
          >设置参数绑定</el-button
        >
      </ht-form-item>
      <el-dialog
        title="设置表单列表回填"
        :visible.sync="dialogcustDialogVisible"
        append-to-body
        class="urgent-text"
        :close-on-click-modal="false"
        width="600px"
      >
        <table class="form-table" cellspacing="0" cellpadding="0" border="0">
          <tbody>
            <tr class="linkageTable-tr">
              <td width="150px">返回结果字段</td>
              <td width="220px">绑定表单的字段属性</td>
              <td width="80px">解除绑定</td>
            </tr>
            <tr
              class="linkageTable-tr"
              v-for="(field, index) in data.templateField"
              :key="index"
            >
              <td>{{ field.desc }}</td>
              <td>
                <ht-select
                  filterable
                  validate="required"
                  v-model="custDialogprop[field.name]"
                  :options="tablefields"
                  :props="{key: 'name', value: 'desc'}"
                >
                  <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>
              </td>
              <td>
                <el-button
                  icon="el-icon-delete"
                  @click="unbind(field.name)"
                ></el-button>
              </td>
            </tr>
          </tbody>
        </table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogcustDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="custDialogOk">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog
        title="设置表单列表参数"
        :visible.sync="dialogDataViewVisible"
        v-if="dialogDataViewVisible"
        append-to-body
        class="urgent-text"
        :close-on-click-modal="false"
        width="800px"
      >
        <table class="form-table" cellspacing="0" cellpadding="0" border="0">
          <tbody>
            <tr class="linkageTable-tr">
              <td width="180px"></td>
              <td width="240px">表单字段</td>
              <td width="240px">表单列表字段</td>
              <td width="80px">操作</td>
            </tr>
            <tr class="linkageTable-tr">
              <td width="180px">
                <el-tooltip
                  content="表单参数绑定,可根据绑定表单字段对数据报表数据进行过滤展示;不绑定则显示所有数据"
                >
                  <i class="property-tip icon-my-todo-comment" />
                </el-tooltip>
                <span>关联查询字段</span>
                <el-button
                  class="btn-padding"
                  style="margin-left: 5px"
                  icon="el-icon-plus"
                  @click="addSelectList()"
                ></el-button>
              </td>
              <td colspan="6">
                <table class cellspacing="0" cellpadding="0" border="0">
                  <tr v-for="(item, index) in selectList" :key="index">
                    <td width="240px">
                      <ht-select
                        v-model="item.selectField"
                        :options="tablefields"
                        :props="{key: 'name', value: 'desc'}"
                        :clearable="true"
                        filterable
                        style="margin: 10px 20px"
                        @change="
                          value => changeSelectField(value, tablefields, item)
                        "
                      >
                        <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 changeOptions(group)"
                              :key="item[propKey]"
                              :label="item[propValue]"
                              :value="item[propKey]"
                            ></el-option>
                          </el-option-group>
                        </template>
                      </ht-select>
                    </td>
                    <td width="240px">
                      <el-select
                        v-model="item.bindSelectd"
                        clearable
                        placeholder="请选择"
                        style="margin: 10px 10px 10px 30px"
                        @change="
                          value =>
                            changeBindSelected(
                              value,
                              dataViewConditionField,
                              item
                            )
                        "
                      >
                        <el-option
                          v-for="item in dataViewConditionField"
                          :key="item.id"
                          :label="item.cm"
                          :value="`${item.queryPre}${item.name}`"
                        ></el-option>
                      </el-select>
                    </td>
                    <td width="80px" style="text-align: center">
                      <el-button
                        class="btn-padding"
                        style="margin-left: 20px"
                        icon="el-icon-delete"
                        @click="selectList.remove(item)"
                      ></el-button>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr class="linkageTable-tr">
              <td width="180px">
                <el-tooltip
                  content="字段回填，将表单字段的值回填到数据视图表单字段中；不绑定则不回填。"
                >
                  <i class="property-tip icon-my-todo-comment" />
                </el-tooltip>
                <span>关联填充字段</span>
                <el-button
                  class="btn-padding"
                  style="margin-left: 5px"
                  icon="el-icon-plus"
                  @click="addBindList()"
                ></el-button>
              </td>
              <td colspan="6">
                <table class cellspacing="0" cellpadding="0" border="0">
                  <tr v-for="(item, index) in bindList" :key="index">
                    <td width="240px">
                      <ht-select
                        v-model="item.fillField"
                        :options="tablefields"
                        :props="{key: 'name', value: 'desc'}"
                        :clearable="true"
                        filterable
                        style="margin: 10px 20px"
                      >
                        <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 changeOptions(group)"
                              :key="item[propKey]"
                              :label="item[propValue]"
                              :value="item[propKey]"
                            ></el-option>
                          </el-option-group>
                        </template>
                      </ht-select>
                    </td>
                    <td width="240px">
                      <el-select
                        v-model="item.bindFilld"
                        clearable
                        placeholder="请选择"
                        style="margin: 10px 10px 10px 30px"
                      >
                        <el-option
                          v-for="item in data.templateField"
                          :key="item.id"
                          :label="item.desc"
                          :value="item.name"
                        ></el-option>
                      </el-select>
                    </td>
                    <td width="80px" style="text-align: center">
                      <el-button
                        class="btn-padding"
                        style="margin-left: 20px"
                        icon="el-icon-delete"
                        @click="bindList.remove(item)"
                      ></el-button>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </tbody>
        </table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogDataViewVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmDataView()">确 定</el-button>
        </div>
      </el-dialog>
    </template>
    <template v-else-if="data && data.ctrlType == 'dataView'">
      <ht-form-item label-width="100px">
        <template slot="label">
          选择数据列表
          <el-tooltip content="所选择的数据列表作为选项时的绑定">
            <i class="property-tip icon-my-todo-comment" />
          </el-tooltip>
        </template>
        <div>
          <draggable
            tag="ul"
            class="column-ul autocomplete-list"
            :list="data.dataTemplateObj"
            v-bind="{
              group: {name: 'options'},
              ghostClass: 'ghost',
              handle: '.drag-item'
            }"
            handle=".drag-item"
          >
            <li
              v-for="(data, index) in data.dataTemplateObj"
              :key="data.id"
              class="data-list-item"
            >
              <i class="drag-item icon-drag1"></i>
              <span
                style="width:175px;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
                :title="data.name"
                >{{ data.name }}</span
              >
              <el-button
                type="text"
                size="mini"
                @click="dataListClick(data, index)"
                >参数绑定</el-button
              >
              <el-button
                @click="handleDataListsRemove(data)"
                type="text"
                size="mini"
                >删除</el-button
              >
            </li>
          </draggable>

          <el-button
            style="width: 100%"
            plain
            @click="selectDatalist"
            size="small"
            icon="el-icon-tickets"
            class="style__tabs-btn"
            >选择数据列表</el-button
          >
        </div>
        <eip-data-list-template-selector
          ref="EipDataListTemplateSelector"
          @onConfirm="DataListTemplateDialogOnConfirm"
          :single="false"
          placeholder="请选择数据列表"
          permission="b"
        ></eip-data-list-template-selector>
        <el-dialog
          title="设置数据列表参数"
          :visible.sync="dialogDataListsVisible"
          v-if="dialogDataListsVisible"
          append-to-body
          class="data-list-dialog"
          :close-on-click-modal="false"
          width="800px"
        >
          <el-form
            label-width="80px"
            style="width: 100%"
            v-form
            data-vv-scope="form"
          >
            <div style="margin-bottom: 8px;">
              <span>关联查询字段</span>
              <el-tooltip
                content="表单参数绑定,可根据绑定表单字段对数据列表数据进行过滤展示;不绑定则显示所有数据"
              >
                <i class="property-tip icon-my-todo-comment" />
              </el-tooltip>
            </div>
            <el-button
              icon="el-icon-plus"
              size="small"
              type="primary"
              style="margin-bottom: 10px"
              @click="addSelectDataList"
              >添加
            </el-button>
            <el-table border :data="selectDataList">
              <el-table-column label="表单字段">
                <template scope="scope">
                  <ht-select
                    v-model="scope.row.selectField"
                    :options="tablefields"
                    :props="{key: 'name', value: 'desc'}"
                    :clearable="true"
                    filterable
                    @change="
                      value => changeSelectField(value, tablefields, scope.row)
                    "
                  >
                    <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 changeOptions(group)"
                          :key="item[propKey]"
                          :label="item[propValue]"
                          :value="item[propKey]"
                        ></el-option>
                      </el-option-group>
                    </template>
                  </ht-select>
                </template>
              </el-table-column>
              <el-table-column label="数据列表字段">
                <template scope="scope">
                  <el-select
                    v-model="scope.row.bindSelectd"
                    clearable
                    placeholder="请选择"
                    style="width:100%"
                    @change="
                      value =>
                        changeBindSelected(value, dataTemplateField, scope.row)
                    "
                  >
                    <el-option
                      v-for="item in dataTemplateField"
                      :key="item.id"
                      :label="item.desc"
                      :value="item.name"
                    ></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="70px">
                <template scope="scope">
                  <el-button
                    @click="selectDataList.remove(scope.row)"
                    type="text"
                    size="small"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogDataListsVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmDataLists()"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </ht-form-item>
    </template>
    <template v-else>
      <div class="property-empty">当前布局字段没有可配置属性</div>
    </template>
    <el-dialog
      title="设置孙表对话框返回值"
      :visible.sync="dialogSunDialog"
      append-to-body
      class="urgent-text"
      :close-on-click-modal="false"
      width="800px"
    >
      <table class="form-table" cellspacing="0" cellpadding="0" border="0">
        <tbody>
          <tr class="linkageTable-th">
            <td width="200px">返回结果字段</td>
            <td width="250px">绑定显示的属性</td>
            <td>回填模式</td>
          </tr>
          <template v-if="data.customDialogjson">
            <tr
              class="linkageTable-tr"
              v-for="(field, index) in data.customDialogjson.resultField"
              :key="index"
            >
              <td>{{ field.comment }}</td>
              <td>
                <ht-select
                  v-model="custDialogprop[field.comment]"
                  :options="
                    sunTables.filter(
                      item => item.name === data.options.boSubEntity
                    )
                  "
                  :props="{key: 'name', value: 'desc'}"
                  clearable
                  filterable
                >
                  <template slot-scope="{options}">
                    <el-option-group
                      v-for="(group, idenx) in options"
                      :key="idenx"
                      :label="group.desc"
                    >
                      <el-option
                        v-for="item in group.children"
                        :key="item.id"
                        :label="item.desc"
                        :value="item.path + '.' + item.name"
                      ></el-option>
                    </el-option-group>
                  </template>
                </ht-select>
              </td>
              <td>
                <ht-radio
                  v-model="field.fillBackType"
                  @change="$forceUpdate()"
                  :options="[
                    {key: 1, value: '覆盖回填'},
                    {key: 2, value: '有值不覆盖'}
                  ]"
                  style="width:100%"
                  optionLayout="horizontal"
                />
              </td>
            </tr>
          </template>
        </tbody>
      </table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogSunDialog = false">取 消</el-button>
        <el-button type="primary" @click="custDialogSunOk">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="设置栅格布局样式"
      :visible.sync="dialogStyleVisible"
      append-to-body
      class="urgent-text"
      :before-close="includeStyleNo"
      :close-on-click-modal="false"
      width="600px"
    >
      <span style="color: red">
        编辑的只能为Style样式内容，如：border: 1px solid
        #ccc;&nbsp;&nbsp;border-left: none; &nbsp;&nbsp;border-right:
        none;&nbsp;&nbsp;border-top: none;&nbsp;&nbsp;border-bottom: none;
      </span>
      <el-row style="height: 100%">
        <codemirror
          v-model="style"
          :options="cmStyle"
          style="width: 99%; height: 100%"
        ></codemirror>
        <div style="width: 15%; float: left">
          <div>颜色：</div>
          <div class="block">
            <el-color-picker v-model="clickColor"></el-color-picker>
          </div>
        </div>
        <div style="width: 30%; float: left; margin-right: 25px">
          <div>类型：</div>
          <div class="block">
            <el-select v-model="selectBorderType" placeholder="请选择">
              <el-option
                v-for="item in borderType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div style="width: 30%; float: left">
          <div>可见性：</div>
          <el-select
            v-model="hiddenBorder"
            multiple
            collapse-tags
            placeholder="请选择"
          >
            <el-option
              v-for="item in hiddenBorderType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="includeStyleNo">取 消</el-button>
        <el-button type="primary" @click="includeStyleOk">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="添加关联关系"
      :visible.sync="relationVisible"
      append-to-body
      width="600px"
      :close-on-click-modal="false"
    >
      <el-form :inline="true">
        <el-button type="primary" @click="add">添加</el-button>
      </el-form>
      <el-table style="width: 100%" :data="relations" border>
        <el-table-column type="selection" width="55" />
        <el-table-column label="子表字段">
          <template slot-scope="scope">
            <el-select v-model="scope.row.key_">
              <el-option
                v-for="result in data.list"
                :key="result.key"
                :label="result.name"
                :value="result.name"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="value_" label="主表字段">
          <template slot-scope="scope">
            <el-select v-model="scope.row.value_">
              <el-option
                v-for="result in tablefields[0].children"
                :key="result.id"
                :label="result.name"
                :value="result.path + '.' + result.name"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-delete"
              @click="remove(scope.$index)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="relationVisible = false">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
    <!-- <hot-table-field-dialog ref="hotTableFieldDialog" @after-save="hotTableFieldSave" /> -->

    <el-dialog
      title="设置自动回填"
      :visible.sync="dialogcustOrgVisible"
      append-to-body
      class="urgent-text"
      :close-on-click-modal="false"
      width="600px"
    >
      <table
        v-if="data.customDialogjson && data.customDialogjson.orgConfig"
        class="form-table"
        cellspacing="0"
        cellpadding="0"
        border="0"
      >
        <tbody>
          <tr class="linkageTable-tr">
            <td width="150px">单位名称</td>
            <td width="220px">
              <ht-select
                filterable
                v-model="data.customDialogjson.orgConfig.name"
                :options="
                  subTables.filter(
                    item => item.name === data.options.boSubEntity
                  )
                "
                :props="{key: 'name', value: 'desc'}"
                clearable
              >
                <template slot-scope="{options}">
                  <el-option-group
                    v-for="(group, idenx) in options"
                    :key="idenx"
                    :label="group.desc"
                  >
                    <el-option
                      v-for="item in group.children"
                      :key="item.id"
                      :label="item.desc"
                      :value="item.path + '.' + item.name"
                    ></el-option>
                  </el-option-group>
                </template>
              </ht-select>
            </td>
          </tr>
          <tr class="linkageTable-tr">
            <td width="150px">单位ID</td>
            <td width="220px">
              <ht-select
                v-model="data.customDialogjson.orgConfig.id"
                :options="
                  subTables.filter(
                    item => item.name === data.options.boSubEntity
                  )
                "
                :props="{key: 'name', value: 'desc'}"
                clearable
                filterable
              >
                <template slot-scope="{options}">
                  <el-option-group
                    v-for="(group, idenx) in options"
                    :key="idenx"
                    :label="group.desc"
                  >
                    <el-option
                      v-for="item in group.children"
                      :key="item.id"
                      :label="item.desc"
                      :value="item.path + '.' + item.name"
                    ></el-option>
                  </el-option-group>
                </template>
              </ht-select>
            </td>
          </tr>
          <tr class="linkageTable-tr">
            <td width="150px">单位编码</td>
            <td width="220px">
              <ht-select
                v-model="data.customDialogjson.orgConfig.code"
                :options="
                  subTables.filter(
                    item => item.name === data.options.boSubEntity
                  )
                "
                :props="{key: 'name', value: 'desc'}"
                clearable
                filterable
              >
                <template slot-scope="{options}">
                  <el-option-group
                    v-for="(group, idenx) in options"
                    :key="idenx"
                    :label="group.desc"
                  >
                    <el-option
                      v-for="item in group.children"
                      :key="item.id"
                      :label="item.desc"
                      :value="item.path + '.' + item.name"
                    ></el-option>
                  </el-option-group>
                </template>
              </ht-select>
            </td>
          </tr>
          <tr class="linkageTable-tr">
            <td width="150px">实例ID</td>
            <td width="220px">
              <ht-select
                v-model="data.customDialogjson.orgConfig.instId"
                :options="
                  subTables.filter(
                    item => item.name === data.options.boSubEntity
                  )
                "
                :props="{key: 'name', value: 'desc'}"
                clearable
                filterable
              >
                <template slot-scope="{options}">
                  <el-option-group
                    v-for="(group, idenx) in options"
                    :key="idenx"
                    :label="group.desc"
                  >
                    <el-option
                      v-for="item in group.children"
                      :key="item.id"
                      :label="item.desc"
                      :value="item.path + '.' + item.name"
                    ></el-option>
                  </el-option-group>
                </template>
              </ht-select>
            </td>
          </tr>
        </tbody>
      </table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogcustOrgVisible = false">取 消</el-button>
        <el-button type="primary" @click="custOrgDialogOk">确 定</el-button>
      </div>
    </el-dialog>

    <!-- <el-dialog
      title="设置表头"
      :visible.sync="dialogHotHeaderDialogVisible"
      append-to-body
      class="urgent-text"
      :close-on-click-modal="false"
      width="1000px"
    >
      <table class="form-table" cellspacing="0" cellpadding="0" border="0">
        <tbody>
          <tr class="linkageTable-tr">
            <td width="100px">字段别名</td>
            <td width="130px">字段名称</td>
            <td width="100px">首行汇总</td>
            <td width="420px">
              操作
              <el-button size="mini" icon="el-icon-refresh" @click="initHotColHeaders()">初始化表头</el-button>
            </td>
          </tr>

          <tr
            class="linkageTable-tr"
            v-for="(field, index) in this.data.options.colHeadersRelations"
            :key="index"
          >
            <td>{{ field.name }}</td>
            <td>
              <ht-input v-model="field.desc" style="width: 175px" />
            </td>
            <td>
              <el-checkbox v-model="field.isSum"></el-checkbox>
            </td>
            <td>
              <el-button
                icon="el-icon-edit"
                @click="setHotColumType(field)"
                :style="isFill(field.column)?{background:'#EBB563',color:'#ffffff'}:{background:'#ffffff'}"
              >控件</el-button>
              <el-button
                icon="el-icon-edit"
                @click="setHotMathExp(field)"
                :style="field.column.mathExp?{background:'#EBB563',color:'#ffffff'}:{background:'#ffffff'}"
              >行内统计</el-button>
              <el-button
                icon="el-icon-edit"
                @click="setHotRowMathExp(field)"
                :style="field.column.rowMathExp.length!==0?{background:'#EBB563',color:'#ffffff'}:{background:'#ffffff'}"
              >跨行统计</el-button>
              <el-button icon="el-icon-delete" @click="hotHeaderRemove(field)"></el-button>
              <el-button
                size="small"
                icon="el-icon-arrow-up"
                @click="up(index,data.options.colHeadersRelations)"
              ></el-button>
              <el-button
                icon="el-icon-arrow-down"
                @click="down(index,data.options.colHeadersRelations)"
              ></el-button>
            </td>
          </tr>
        </tbody>
      </table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="hotHeaderDialogOk">确 定</el-button>
        <el-button @click="dialogHotHeaderDialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="设置跨表取数"
      :visible.sync="dialogHotCrossMappingVisible"
      append-to-body
      class="urgent-text"
      :close-on-click-modal="false"
      width="1080px"
    >
      <el-container style="height:350px">
        <el-header
          style="height:30px;line-height:30px;background: #fafafa; font-weight: bold;font-size: 14px;"
        >
          <el-button size="small" type="text" icon="el-icon-plus" @click="addHotCrossMapping()">添加</el-button>
        </el-header>
        <el-main style="padding:0 0 0 20px">
          <table class="form-table" cellspacing="0" cellpadding="0" border="0">
            <tbody>
              <tr class="linkageTable-tr">
                <td width="160px">取数字段</td>
                <td width="90px">行号</td>
                <td width="500px">
                  取数源
                  <el-tooltip content="如果是从多个字段取数，则是做求和运算">
                    <i class="property-tip icon-my-todo-comment" />
                  </el-tooltip>
                </td>
                <td width="220px">操作</td>
              </tr>

              <tr
                class="linkageTable-tr"
                v-for="(field, index) in this.data.options.crossMapping"
                :key="index"
              >
                <td>
                  <ht-select
                    v-model="field.toField"
                    :options="
                          subTables.filter(
                            item => item.name === data.options.boSubEntity
                          )
                        "
                    :props="{ key: 'name', value: 'desc' }"
                    clearable
                    filterable
                  >
                    <template slot-scope="{ options }">
                      <el-option-group
                        v-for="(group, idenx) in options"
                        :key="idenx"
                        :label="group.desc"
                      >
                        <el-option
                          v-for="item in group.children"
                          :key="item.id"
                          :label="item.desc"
                          :value="item.path + '.' + item.name"
                        ></el-option>
                      </el-option-group>
                    </template>
                  </ht-select>
                </td>
                <td>
                  <ht-input
                    size="mini"
                    width="80px"
                    type="number"
                    v-model="field.toIndex"
                    :min="0"
                  />
                </td>
                <td>
                  <table class="form-table" cellspacing="0" cellpadding="0" border="0">
                    <tbody>
                      <tr class="linkageTable-tr">
                        <td width="180px">源子表</td>
                        <td width="160px">源字段</td>
                        <td width="90px">行号</td>
                        <td width="220px">
                          操作
                          <el-button icon="el-icon-plus" @click="addHotCrossMappingField(field)"></el-button>
                        </td>
                      </tr>
                      <tr
                        class="linkageTable-tr"
                        v-for="(ffield, index) in field.fromFields"
                        :key="index"
                      >
                        <td>
                          <ht-select
                            v-model="ffield.fromSubTabPath"
                            :options="
                                        subTables.filter(
                                          item => item.name !== data.options.boSubEntity
                                        )
                                      "
                            clearable
                            filterable
                            :props="{ key: 'path', value: 'desc' }"
                          />
                        </td>
                        <td>
                          <ht-select
                            v-model="ffield.fromField"
                            :options="
                                        subTables.filter(
                                          item => item.path === ffield.fromSubTabPath
                                        )
                                      "
                            :props="{ key: 'name', value: 'desc' }"
                            clearable
                            filterable
                          >
                            <template slot-scope="{ options }">
                              <el-option-group
                                v-for="(group, idenx) in options"
                                :key="idenx"
                                :label="group.desc"
                              >
                                <el-option
                                  v-for="item in group.children"
                                  :key="item.id"
                                  :label="item.desc"
                                  :value="item.path + '.' + item.name"
                                ></el-option>
                              </el-option-group>
                            </template>
                          </ht-select>
                        </td>
                        <td>
                          <ht-input
                            size="mini"
                            width="80px"
                            type="number"
                            v-model="ffield.fromIndex"
                            :min="0"
                          />
                        </td>
                        <td>
                          <el-button icon="el-icon-plus" @click="addHotCrossMappingField(field)"></el-button>
                          <el-button
                            icon="el-icon-delete"
                            @click="hotCrossMappingFiledRemove(field,ffield)"
                          ></el-button>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
                <td>
                  <el-button icon="el-icon-delete" @click="hotCrossMappingRemove(field)"></el-button>
                  <el-button
                    size="small"
                    icon="el-icon-arrow-up"
                    @click="up(index,data.options.crossMapping)"
                  ></el-button>
                  <el-button
                    icon="el-icon-arrow-down"
                    @click="down(index,data.options.crossMapping)"
                  ></el-button>
                  <el-button
                    icon="el-icon-document-copy"
                    @click="data.options.crossMapping.push(JSON.parse(JSON.stringify(field)))"
                  ></el-button>
                </td>
              </tr>
            </tbody>
          </table>
        </el-main>
      </el-container>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="hotCrossMappingDialogOk">确 定</el-button>
        <el-button @click="dialogHotCrossMappingVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="主表汇总"
      :visible.sync="dialogMainTableCalcVisible"
      append-to-body
      class="urgent-text"
      :close-on-click-modal="false"
      width="1080px"
    >
      <el-container style="height:350px">
        <el-header
          style="height:30px;line-height:30px;background: #fafafa; font-weight: bold;font-size: 14px;"
        >
          <el-button size="small" type="text" icon="el-icon-plus" @click="addHotMainTableCalc()">添加</el-button>
        </el-header>
        <el-main style="padding:0 0 0 20px">
          <table class="form-table" cellspacing="0" cellpadding="0" border="0">
            <tbody>
              <tr class="linkageTable-tr">
                <td width="160px">名称</td>
                <td width="160px">主表字段</td>
                <td width="160px">求和字段</td>
                <td width="220px">操作</td>
              </tr>

              <tr
                class="linkageTable-tr"
                v-for="(field, index) in this.data.options.mainTableCalcs"
                :key="index"
              >
                <td>
                  <ht-input size="mini" width="130px" v-model="field.name" />
                </td>
                <td>
                  <ht-select
                    v-model="field.mainField"
                    :options="boDefData.children"
                    :props="{ key: 'name', value: 'desc' }"
                    clearable
                    filterable
                  >
                    <template slot-scope="{ options }">
                      <el-option-group
                        v-for="(group, idenx) in options"
                        :key="idenx"
                        :label="group.desc"
                      >
                        <el-option
                          v-for="item in group.children"
                          v-show="item.nodeType=='field'"
                          :key="item.id"
                          :label="item.desc"
                          :value="item.path + '.' + item.name"
                        ></el-option>
                      </el-option-group>
                    </template>
                  </ht-select>
                </td>
                <td>
                  <ht-select
                    v-model="field.sumField"
                    :options="
                          subTables.filter(
                            item => item.name === data.options.boSubEntity
                          )
                        "
                    :props="{ key: 'name', value: 'desc' }"
                    clearable
                    filterable
                  >
                    <template slot-scope="{ options }">
                      <el-option-group
                        v-for="(group, idenx) in options"
                        :key="idenx"
                        :label="group.desc"
                      >
                        <el-option
                          v-for="item in group.children"
                          :key="item.id"
                          :label="item.desc"
                          :value="item.path + '.' + item.name"
                        ></el-option>
                      </el-option-group>
                    </template>
                  </ht-select>
                </td>

                <td>
                  <el-button icon="el-icon-delete" @click="hotMainTableCalcRemove(field)"></el-button>
                  <el-button
                    size="small"
                    icon="el-icon-arrow-up"
                    @click="up(index,data.options.mainTableCalcs)"
                  ></el-button>
                  <el-button
                    icon="el-icon-arrow-down"
                    @click="down(index,data.options.mainTableCalcs)"
                  ></el-button>
                </td>
              </tr>
            </tbody>
          </table>
        </el-main>
      </el-container>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="hotMainTableCalcDialogOk">确 定</el-button>
        <el-button @click="dialogMainTableCalcVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="单元格计算"
      :visible.sync="dialogCellCalcVisible"
      append-to-body
      class="urgent-text"
      :close-on-click-modal="false"
      width="1280px"
    >
      <el-container style="height:520px">
        <el-header
          style="height:30px;line-height:30px;background: #fafafa; font-weight: bold;font-size: 14px;"
        >
          <el-button size="small" type="text" icon="el-icon-plus" @click="addHotCellCalc()">添加</el-button>
        </el-header>
        <el-main style="padding:0 0 0 20px">
          <table class="form-table" cellspacing="0" cellpadding="0" border="0">
            <tbody>
              <tr class="linkageTable-tr">
                <td width="160px">计算列</td>
                <td width="90px">行号</td>
                <td width="360px">计算公式</td>
                <td width="220px">操作</td>
              </tr>

              <tr
                class="linkageTable-tr"
                v-for="(field, index) in this.data.options.cellCalcs"
                :key="index"
              >
                <td>
                  <ht-select
                    v-model="field.cellField"
                    :options="
                          subTables.filter(
                            item => item.name === data.options.boSubEntity
                          )
                        "
                    :props="{ key: 'name', value: 'desc' }"
                    clearable
                    filterable
                  >
                    <template slot-scope="{ options }">
                      <el-option-group
                        v-for="(group, idenx) in options"
                        :key="idenx"
                        :label="group.desc"
                      >
                        <el-option
                          v-for="item in group.children"
                          :key="item.id"
                          :label="item.desc"
                          :value="item.path + '.' + item.name"
                        ></el-option>
                      </el-option-group>
                    </template>
                  </ht-select>
                </td>
                <td>
                  <ht-input
                    size="mini"
                    width="80px"
                    type="number"
                    v-model="field.rowIndex"
                    :min="0"
                  />
                </td>
                <td>
                  <ht-input type="textarea" v-model="field.mathExp" />
                </td>
                <td>
                  <el-button icon="el-icon-edit" @click="hotCellCalcEdit(field)"></el-button>
                  <el-button icon="el-icon-delete" @click="hotCellCalcRemove(field)"></el-button>
                  <el-button
                    size="small"
                    icon="el-icon-arrow-up"
                    @click="up(index,data.options.cellCalcs)"
                  ></el-button>
                  <el-button icon="el-icon-arrow-down" @click="down(index,data.options.cellCalcs)"></el-button>
                </td>
              </tr>
            </tbody>
          </table>
        </el-main>
      </el-container>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="hotCellCalcDialogOk">确 定</el-button>
        <el-button @click="dialogCellCalcVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="设置嵌套表头"
      :visible.sync="dialogHotNestedHeadersVisible"
      append-to-body
      class="urgent-text"
      :close-on-click-modal="false"
      width="1200px"
    >
      <el-container style="height:350px">
        <el-header
          style="height:30px;line-height:30px;background: #fafafa; font-weight: bold;font-size: 14px;"
        >
          <el-button size="small" type="text" icon="el-icon-plus" @click="addHotNestedHeaders()">添加</el-button>
        </el-header>
        <el-main style="padding:0 0 0 20px">
          <table class="form-table" cellspacing="0" cellpadding="0" border="0">
            <tbody>
              <tr class="linkageTable-tr">
                <td width="60px">序号</td>
                <td>表头设置</td>
                <td width="200px">操作</td>
              </tr>

              <tr
                class="linkageTable-tr"
                v-for="(field, index) in data.options.nestedHeaders"
                :key="index"
              >
                <td>{{index+1}}</td>
                <td>
                  <table class="form-table" cellspacing="0" cellpadding="0" border="0">
                    <tbody>
                      <tr class="linkageTable-tr">
                        <td width="120px">合并列名</td>
                        <td width="150px">开始列</td>
                        <td width="150px">结束列</td>
                        <td width="220px">操作</td>
                      </tr>
                      <tr
                        class="linkageTable-tr"
                        v-for="(header, index) in field.headers"
                        :key="index"
                      >
                        <td>
                          <ht-input size="mini" type="text" v-model="header.name" />
                        </td>
                        <td>
                          <ht-select
                            v-model="header.startField"
                            :options="data.options.colHeadersRelations"
                            :props="{ key: 'name', value: 'desc' }"
                            clearable
                            filterable
                          >
                            <template slot-scope="{ options }">
                              <el-option
                                v-for="(item, cidenx) in options"
                                v-show="cidenx!=0"
                                :key="item.id"
                                :label="item.desc"
                                :value="item.name"
                              ></el-option>
                            </template>
                          </ht-select>
                        </td>
                        <td>
                          <ht-select
                            v-model="header.endField"
                            :options="data.options.colHeadersRelations"
                            :props="{ key: 'name', value: 'desc' }"
                            clearable
                            filterable
                          >
                            <template slot-scope="{ options }">
                              <el-option
                                v-for="(item, cidenx) in options"
                                v-show="cidenx!=0"
                                :key="item.id"
                                :label="item.desc"
                                :value="item.name"
                              ></el-option>
                            </template>
                          </ht-select>
                        </td>
                        <td>
                          <el-button
                            size="small"
                            icon="el-icon-plus"
                            @click="hotNestedHeadersItemAdd(field.headers)"
                          ></el-button>
                          <el-button
                            icon="el-icon-delete"
                            @click="hotNestedHeadersItemRemove(field.headers,header)"
                          ></el-button>
                          <el-button
                            size="small"
                            icon="el-icon-arrow-up"
                            @click="up(index,field.headers)"
                          ></el-button>
                          <el-button icon="el-icon-arrow-down" @click="down(index,field.headers)"></el-button>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
                <td>
                  <el-button icon="el-icon-delete" @click="hotNestedHeadersRemove(field)"></el-button>
                  <el-button
                    size="small"
                    icon="el-icon-arrow-up"
                    @click="up(index,data.options.nestedHeaders)"
                  ></el-button>
                  <el-button
                    icon="el-icon-arrow-down"
                    @click="down(index,data.options.nestedHeaders)"
                  ></el-button>
                </td>
              </tr>
            </tbody>
          </table>
        </el-main>
      </el-container>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="hotNestedHeadersDialogOk">确 定</el-button>
        <el-button @click="dialogHotNestedHeadersVisible = false">取 消</el-button>
      </div>
    </el-dialog> -->

    <!-- <el-dialog
      title="统计函数"
      ref="hotMathDialog"
      :visible.sync="dialogHotCountVisible"
      destroy-on-close
      append-to-body
      :close-on-click-modal="false"
    >
      <math-dialog ref="mathDialog" :bo-def-data="boDefData" :visible.sync="dialogHotCountVisible" />
    </el-dialog>

    <hot-subDialog ref="hotSubDialog" :custdialog="data.customDialogjson"></hot-subDialog>

    <el-dialog
      title="单元格统计函数"
      ref="hotCellMathDialog"
      :visible.sync="dialogCellCountVisible"
      destroy-on-close
      append-to-body
      :close-on-click-modal="false"
    >
      <cell-math-dialog
        ref="cellMathDialog"
        :bo-def-data="boDefData"
        :visible.sync="dialogCellCountVisible"
      />
    </el-dialog>

    <el-dialog
      title="跨行统计函数"
      ref="hotRowsMathDialog"
      :visible.sync="dialogHotRowsCountVisible"
      destroy-on-close
      append-to-body
      :close-on-click-modal="false"
    >
      <math-row-dialog
        ref="mathRowDialog"
        :bo-sub-entity="data.options.boSubEntity"
        :bo-def-data="boDefData"
        :sub-tables="subTables"
        :visible.sync="dialogHotRowsCountVisible"
      />
    </el-dialog> -->
    <el-dialog
      title="自定义表头"
      :visible.sync="dialogincluddingFileVisible"
      append-to-body
      class="urgent-text"
      custom-class="custom-table-head"
      :before-close="includeFilesOk"
      :close-on-click-modal="false"
      top="6vh"
    >
      <el-row style="height: 100%">
        <el-col :span="13" class="urgent-text-letf">
          <codemirror
            ref="htmlCode"
            key="htmlCode"
            v-model="subCustomHeader"
            :options="cmOptions"
            class="code"
          >
          </codemirror>
          <!-- <textarea
            v-model="subCustomHeader"
            type="textarea"
            rows="30"
            autocomplete="off"
            ref="scriptText"
            style="width: 480px; height: 100%; max-width: 900px"
          ></textarea> -->
        </el-col>
        <el-col :span="10">
          <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
              <span>使用说明</span>
            </div>
            <ol class="guide-ol" v-if="data.ctrlType === 'suntable'">
              <li>
                <div class="li-left">1</div>
                <div class="li-right">
                  可从
                  <code>引入脚本</code>处复制头部 <code>thead标签</code>中行
                  <code>tr标签</code>所有数据作为二级头部信息
                </div>
              </li>
              <li>
                参照复制的二级头部数据，进行
                <code>th标签</code>的修改合并为一级头部
              </li>
              <li>
                示例：
                <el-input
                  v-model="tableHeaderExample"
                  :autosize="{minRows: 2, maxRows: 7}"
                  type="textarea"
                />
              </li>
            </ol>
            <ul class="guide-ul_wrap" v-else>
              <li class="li-item">
                <div class="li-left">1</div>
                <div class="li-right">
                  可从
                  <code>引入脚本</code>处复制所有el-table-column
                  <code>标签</code>进行修改
                </div>
              </li>
              <li class="li-item">
                <div class="li-left">2</div>
                <div class="li-right right-vertical-center">
                  具体使用可参考<code
                    ><a
                      href="https://element.eleme.cn/#/zh-CN/component/table"
                      target="_blank"
                      >element-ui官方文档</a
                    ></code
                  >
                </div>
              </li>
              <li class="li-item">
                <div class="li-left">3</div>
                <div class="li-right right-vertical-center">
                  多级表头示例：
                </div>
              </li>
              <li class="last-li">
                <el-input
                  v-model="customTableHeaderExample"
                  :autosize="{minRows: 8, maxRows: 14}"
                  type="textarea"
                  resize="none"
                />
              </li>
            </ul>
          </el-card>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="
            dialogincluddingFileVisible = false
            subCustomHeader = ''
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="includeFilesOk">确 定</el-button>
      </div>
    </el-dialog>

    <DialogCombinedColumn
      @CombinedColumnEdit="CombinedColumnEdit"
      :areadlyList="data.CombinedColumnList"
      ref="DialogCombinedColumn"
    ></DialogCombinedColumn>
  </div>
</template>
<script>
import layoutPropertyMixin from '@/mixins/layoutPropertyMixin.js'
import Draggable from 'vuedraggable'
import IconDialog from '@/components/dialog/IconDialog.vue'
import i18nMessageEdit from '@/components/system/I18nMessageEdit'
import HotTableFieldDialog from '@/components/form/HotTableFieldDialog'
import HotSubDialog from '@/components/form/HotSubDialog'
import MathDialog from '@/components/form/customView/MathDialog.vue'
import MathRowDialog from '@/components/form/customView/MathRowDialog.vue'
import CellMathDialog from '@/components/form/customView/CellMathDialog.vue'
import FormTabsDialog from '@/components/form/FormTabsDialog.vue'
import DialogCombinedColumn from '@/components/form/DialogCombinedColumn.vue'
import {Base64} from 'js-base64'
import utils from '@/hotent-ui-util.js'
import form from '@/api/form.js'
const EipDataTemplateSelector = () =>
  import('@/components/selector/EipDataTemplateSelector.vue')
const EipDataListTemplateSelector = () =>
  import('@/components/selector/EipDataListTemplateSelector.vue')

const SubImportMergeDialog = () =>
  import('@/components/form/customView/SubImportMergeDialog.vue')

export default {
  name: 'layout-property',
  mixins: [layoutPropertyMixin],
  components: {
    FormTabsDialog,
    Draggable,
    IconDialog,
    i18nMessageEdit,
    EipDataTemplateSelector,
    EipDataListTemplateSelector,
    HotTableFieldDialog,
    HotSubDialog,
    MathDialog,
    MathRowDialog,
    CellMathDialog,
    SubImportMergeDialog,
    DialogCombinedColumn
  },
  props: [
    'data',
    'subTables',
    'sunTables',
    'tablefields',
    'boDefData',
    'formType',
    'allModelingData'
  ],
  data() {
    return {
      cmOptions: {
        value: '',
        mode: 'vue',
        readOnly: false,
        smartIndent: true,
        tabSize: 2,
        theme: 'base16-light',
        lineNumbers: true, // 是否显示行数
        lineWrapping: true, // 是否自动换行
        styleActiveLine: true, // line选择是是否加亮
        matchBrackets: true, // 括号匹配
        line: true,
        autoRefresh: true
      },
      activeName: ['baseInfo', 'designControl'],
      selectQueryDialog: false,
      subCustomHeader: '',
      customQuerys: [{alias: '', name: ''}],
      subTableEnt: [{name: '', desc: ''}],
      customDialogs: [], //对话框列表数据,
      dialogcustDialogVisible: false,
      dialogSunDialog: false,
      custDialogprop: {},
      dialogincluddingFileVisible: false,

      pageBtnScriptDialog: false,
      pageBtnScriptBase: '',
      i18nMessageKey: '',
      dialogStyleVisible: false, //编写栅格布局样式对话框
      selectList: [], //表单列表
      bindList: [],
      selectDataList: [], //数据列表
      bindDataIndex: '',
      dataTemplateField: [], //数据列表数组
      DataListboDefAlias: '',
      dataViewConditionField: [],
      dialogDataViewVisible: false, //表单列表
      dialogDataListsVisible: false, //数据列表
      templateShow: false,
      style: '', //栅格布局样式
      styleIndex: '', //栅格布局样式下标
      cmStyle: {
        value: '',
        mode: 'css',
        readOnly: false,
        smartIndent: true,
        tabSize: 2,
        theme: 'base16-light',
        lineNumbers: true,
        line: true
      },
      relationVisible: false,
      relations: [],
      dialogHotHeaderDialogVisible: false,
      dialogHotCrossMappingVisible: false,
      dialogHotNestedHeadersVisible: false,
      dialogHotCountVisible: false,
      dialogCellCountVisible: false,
      dialogHotRowsCountVisible: false,
      currentHotColumnField: {},
      dialogcustOrgVisible: false,
      dialogMainTableCalcVisible: false,
      dialogCellCalcVisible: false,
      currentMainTableCalcField: {},
      currentCellCalcField: {},
      clickColor: '',
      selectBorderType: '',
      typeOption: null,
      activeNameTagOption: 'first',

      borderType: [
        {value: ' border-style: solid; ', label: '————————————'},
        {value: ' border-style: dotted; ', label: '●●●●●●●●●●●●●●●●●●●●'},
        {
          value: ' border-style: dashed; ',
          label: '------------------------------'
        },
        {value: ' border-style: double; ', label: '=================='}
      ],
      hiddenBorder: '',
      hiddenBorderType: [
        {value: ' border-left: none; ', label: '隐藏左边框'},
        {value: ' border-right: none; ', label: '隐藏右边框'},
        {value: ' border-top: none; ', label: '隐藏上边框'},
        {value: ' border-bottom: none; ', label: '隐藏下边框'}
      ],
      tableHeaderExample:
        '<tr class="sub-table-header" @click="transitionIndex = -1">\n' +
        '\n' +
        '    <th colspan="2" style="min-width: 200px;font-weight:normal;color:#000000;"><span>*</span>\n' +
        '        <span style="color:#000000;margin-left: 5px;">一级表头名称</span>\n' +
        '    </th>\n' +
        '\n' +
        '</tr>\n' +
        '<tr class="sub-table-header" @click="transitionIndex = -1">\n' +
        '\n' +
        '    <th v-if="permission.fields.表名.字段名!=\'n\'" style="min-width: 200px;font-weight:normal;color:#000000;"><span\n' +
        '            v-if="permission.fields.表名.字段名==\'b\'">*</span>\n' +
        '        <span style="color:#000000;margin-left: 5px;">默认显示字段名</span>\n' +
        '    </th>\n' +
        '    <th v-if="permission.fields.表名.字段名!=\'n\'" style="min-width: 200px;font-weight:normal;color:#000000;"><span\n' +
        '            v-if="permission.fields.表名.字段名==\'b\'">*</span>\n' +
        '        <span style="color:#000000;margin-left: 5px;">默认显示字段名</span>\n' +
        '    </th>\n' +
        '\n' +
        '</tr>',
      tableTempAddRowIndex: 0,
      tableTempAddColIndex: 0,
      tableTempDelRowIndex: 0,
      tableTempDelColIndex: 0,
      freezeColList: [],
      customTableHeaderExample: `<el-table-column align="center" prop="cszb1" key="cszb1_0" label="测试1" v-if="permission.fields.zbmbcs.cszb1!='n'"> <template slot="header" slot-scope="scope"> <span style="color:#e55555" v-if="permission.fields.zbmbcs.cszb1=='b'">*</span> <span style="color:#000000">测试子表1</span> </template> <template slot-scope="{row}">
                          <ht-input v-model="row.cszb1" name="测试1" model-name="data.cszbmb.sub_zbmbcs.cszb1" :permission="permission.fields.zbmbcs.cszb1"> </ht-input>
                          </template> </el-table-column>
                        <el-table-column align="center" prop="cszb2" key="cszb2_1" label="测试2" v-if="permission.fields.zbmbcs.cszb2!='n'">
                        <el-table-column align="center" prop="zb4" key="zb4_2" label="测试3" v-if="permission.fields.zbmbcs.zb4!='n'"> <template slot="header" slot-scope="scope"> <span style="color:#e55555" v-if="permission.fields.zbmbcs.zb4=='b'">*</span> <span style="color:#000000">子表4</span> </template> <template slot-scope="{row}">
                          <ht-input v-model="row.zb4" name="测试3" model-name="data.cszbmb.sub_zbmbcs.zb4" :permission="permission.fields.zbmbcs.zb4"> </ht-input>
                        </template> </el-table-column>
                        <template slot-scope="{row}">
                            <ht-input v-model="row.cszb2" name="测试2" model-name="data.cszbmb.sub_zbmbcs.cszb2" :permission="permission.fields.zbmbcs.cszb2"> </ht-input>
                          </template> </el-table-column>`
    }
  },
  mounted() {
    //回填显示数据视图控件
    if (this.data.ctrlType) {
      if (this.data.templateId) {
        if (this.data.templateId != '') {
          form
            .getBpmDataTemplateById(this.data.templateId, '')
            .then(response => {
              if (response.status == 0) {
                this.$message.error(response.msg)
              }
              this.data.templateObj = response.data
              this.templateShow = true
            })
        }
      } else {
        this.templateShow = true
      }
      if (this.data.ctrlType === 'subtable') {
        this.$set(this.data, 'tableHeight', 200)
      }
    }
  },
  watch: {
    'data.CombinedColumnList': {
      handler(val) {
        val && val.length > 0
          ? (this.data.showSummary = true)
          : (this.data.showSummary = false)
      },
      immediate: true,
      deep: true
    },
    'data.subtablePagination': function(newVal) {
      // 子表不支持前端分页时，也取消前端导入导出。
      if (!newVal) {
        delete this.data.subtableImportExport
        delete this.data.subtableImportMergeExp
      }
    },
    'data.subtableImportExport': function(newVal) {
      // 不支持导入导出时，也删除导入合并代码
      if (!newVal) {
        delete this.data.subtableImportMergeExp
      }
    },
    'data.templateObj': function(newVal, oldVal) {
      if (JSON.stringify(newVal) != '{}') {
        //保存boDefAlias
        this.tablefields.forEach(item => {
          if (item.type == 'main') {
            this.data.options.boDefAlias = item.boDefAlias
          }
        })
        if (newVal) {
          this.data.templateKey = newVal.alias
          this.data.templateId = newVal.id
          if (newVal && newVal.id) {
            form.getBpmDataTemplateById(newVal.id, '').then(response => {
              this.data.templateField = response.formField
              this.dataViewConditionField = JSON.parse(
                response.bpmDataTemplate.conditionField
              )
            })
          }
          this.selectList = JSON.parse(
            JSON.stringify(this.data.options.selectList)
          )
          this.bindList = JSON.parse(JSON.stringify(this.data.options.bindList))
        }
      } else {
        this.data.templateField = []
        this.dataViewConditionField = []
        this.data.templateKey = ''
        this.data.templateId = ''
        this.data.options = {
          showLabel: true,
          boDefAlias: '',
          selectList: [],
          bindList: []
        }
      }
    },
    'data.dataTemplateObj': {
      handler(newVal, oldVal) {}
    },
    'data.ctrlType': {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          if (newVal == 'hottable') {
            if (!this.data.customDialogjson.orgConfig) {
              this.data.customDialogjson.orgConfig = {
                name: '',
                code: '',
                id: ''
              }
            }
            if (!this.data.options.hasOwnProperty('initSumRowField')) {
              this.data.options.initSumRowField = ''
            }
            if (!this.data.options.hasOwnProperty('initSumRowValue')) {
              this.data.options.initSumRowValue = ''
            }
          }
        }
        if (['subtable', 'subDiv'].includes(newVal)) {
          this.$emit('get-subtable-type', newVal)
        }
        if (
          ['subDiv', 'sunDiv'].includes(newVal) &&
          !this.data.options.dataExpand
        ) {
          this.data.options.dataExpand = 'expand'
        }
        if (newVal === 'grid') {
          //线型 边框回显
          if (this.data.options.lineType) {
            this.changeSelection(this.data.options.lineType)
          } else {
            this.changeSelection('1px solid')
          }
        }
        if (
          newVal === 'grid' &&
          this.data.columns &&
          this.data.columns.length > 0
        ) {
          let span = []
          this.data.columns.forEach(item => {
            span.push(item.span)
          })
          let spanStr = span.join(':')

          this.columnsList.forEach(item => {
            item.type.forEach(tyItem => {
              if (tyItem.key === spanStr) {
                tyItem.active = true
              } else {
                tyItem.active = false
              }
            })
          })
        }
      },
      immediate: true,
      deep: true
    },
    'data.list': {
      handler(val) {
        if (val && val.length > 0) {
          this.freezeColList = val.map((item, index) => {
            return {
              ...item,
              subTableIndex: index
            }
          })
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    //grid标题加粗
    hangridDescBold() {
      if (this.data.options.gridDescBold != 'bolder') {
        this.$set(this.data.options, 'gridDescBold', 'bolder')
      } else {
        this.$set(this.data.options, 'gridDescBold', 500)
      }
    },
    changeSelection(val) {
      this.$nextTick(() => {
        for (let index in this.lineTypeOptions) {
          let obj = this.lineTypeOptions[index]

          if (obj.value == val && val == 'none') {
            this.data.options.styleType = obj.key
            this.$refs[
              'changeSelection'
            ].$el.children[0].children[0].setAttribute(
              'style',
              `border: none;border: 1px solid ;
                    border-color: #dcdfe6 !important;
         position:relative;top:0;
         height: 32px;
         line-height: 32px;width: 100%;left: 0px;
         `
            )
          }
          if (obj.value == val && val != 'none') {
            this.data.options.styleType = obj.key
            this.$refs[
              'changeSelection'
            ].$el.children[0].children[0].setAttribute(
              'style',
              `border: none;
            border-top: ${obj.key} black; 
           
         position:relative;top:50%;
         height: 1px;
         line-height: 1px;width: 50%;left: -7px;
         `
            )
          }
        }
      })
    },
    //列配置布局
    tyItemClick(type) {
      //变色
      this.columnsList.forEach((item, index) => {
        item.type.forEach((tyitem, tyKey) => {
          tyitem.active = false

          if (type.value == tyitem.value) {
            tyitem.active = true
          }
        })
      })

      let len = type.key.split(':').length
      let columnslen = _.cloneDeep(this.data.columns.length)

      if (len <= columnslen) {
        this.data.columns.length = len
      } else {
        this.data.columns.push({
          span: '',
          list: []
        })
        if (len - columnslen == 2) {
          this.data.columns.push({
            span: '',
            list: []
          })
        }
      }

      this.data.columns.forEach((item, i) => {
        item.span = type.key.split(':')[i] ? Number(type.key.split(':')[i]) : ''
      })
      this.data.columns = Object.assign([], this.data.columns)
    },
    changeDataExpand(type) {
      this.$set(this.data.options, 'dataExpand', type)

      this.data = Object.assign({}, this.data)
    },
    inputColumns(item) {
      let arr = this.data.columns
      let num = 0
      arr.forEach(vals => {
        num = num + parseInt(vals.span)
      })
      if (num > 24) {
        this.$message.warning('栅格总和不能大于24分栏')
        item.span = 0
      }
    },
    //子表布局切换
    subChange() {
      if (this.data.ctrlType == 'subtable' && this.data.list.length > 0) {
        let oldList = this.data.list
        let newList = []
        for (let i = 0; i < oldList.length; i++) {
          if (oldList[i].ctrlType == 'grid') {
            //DIV子表存在栅格布局
            if (oldList[i].columns.length > 0) {
              for (let j = 0; j < oldList[i].columns.length; j++) {
                if (oldList[i].columns[j].list.length > 0) {
                  for (let k = 0; k < oldList[i].columns[j].list.length; k++) {
                    newList.push(oldList[i].columns[j].list[k])
                  }
                }
              }
            }
          } else {
            newList.push(oldList[i])
          }
        }
        this.data.list = newList
      } else {
        this.data.options.dataExpand = 'expand'
      }
    },
    openFormtbsDialog(index) {
      this.$refs.FormtbsDialog.openDialog(index)
    },
    openFormCollDialog(index) {
      this.$refs.FormCollDialog.openDialog(index)
    },
    //选择下拉框控件并绑定关联查询
    async setSelectQuery(alias, type = '') {
      if (type === 'refresh') {
        if (!alias) {
          return
        }
        if (this.$refs.customQueryRef) {
          await this.$refs.customQueryRef.getData()
        }
      }
      const _this = this
      _this.customQuerys.forEach(item => {
        //判断选择的关联查询是否存在
        if (alias == item.alias) {
          if (typeof item.conditionfield == 'string') {
            item.conditionfield = JSON.parse(item.conditionfield) //parseToJson(item.customQuery.conditionfield);
            item.resultfield = JSON.parse(item.resultfield) // parseToJson(item.customQuery.resultfield);
            item.conditionfield.forEach(res => {
              _this.$set(res, 'fieldPath', '') //关联查询条件字段绑定的表单参数路径
            })
            item.resultfield.forEach(res => {
              _this.$set(res, 'fieldPath', '') //关联查询返回字段绑定的表单参数路径
            })
            // 刷新最新配置
            if (type === 'refresh') {
              item.conditionfield.forEach((k, i) => {
                let oldItem = this.data.customQuery.conditionfield.find(sub => {
                  return sub.field === k.field
                })
                if (oldItem) {
                  item.conditionfield[i] = oldItem
                }
              })
              item.resultfield.forEach((k, i) => {
                let oldItem = this.data.customQuery.resultfield.find(sub => {
                  return sub.field === k.field
                })
                if (oldItem) {
                  item.resultfield[i] = oldItem
                }
              })
              this.data.customQuery.conditionfield = item.conditionfield
              this.data.customQuery.resultfield = item.resultfield
              this.data.customQuery.name = item.name
              this.$message.info('更新配置成功！点击保存表单后生效。')
            }
          }
          //把当前对象克隆一份到控件属性配置
          Object.assign(_this.data.customQuery, item)
          // 删除多余属性
          _this.slimCustomQuery(_this.data.customQuery)
        }
      })
    },
    // 当字段与关联查询绑定后，将关联查询中多余的属性删除
    slimCustomQuery(customQuery) {
      if (customQuery && customQuery.constructor == Object) {
        // 删除多余的属性
        delete customQuery['id']
        delete customQuery['createTime']
        delete customQuery['pkVal']
        delete customQuery['objName']
        delete customQuery['needPage']
        delete customQuery['pageSize']
        delete customQuery['dsalias']
        delete customQuery['dataParam']
        delete customQuery['sortfield']
        delete customQuery['diySql']
        delete customQuery['isTable']
        delete customQuery['sqlBuildType']
        // delete customQuery["dsType"];
        delete customQuery['url']
        delete customQuery['header']
        delete customQuery['requestType']
        delete customQuery['pageKey']
        delete customQuery['pageSizeKey']
        delete customQuery['totalKey']
        delete customQuery['listKey']
      }
    },
    //打开下拉框绑定关联查询弹框
    showSelectQueryDialog() {
      // if (!this.data.options.boSubEntity) {
      //   this.$message.warning('请先绑定子表')
      //   return
      // }
      // this.subTableEnt = this.subTables.filter(
      //   (ent) => ent.name == this.data.options.boSubEntity
      // )
      // this.data.customQuery.path = 'data.' + this.subTableEnt[0].path

      // this.$http.post('${form}/form/customQuery/v1/list').then((res) => {
      //   this.customQuerys = res.data.rows
      //   this.selectQueryDialog = true
      // })
      this.selectQueryDialog = true
    },
    filterFields(obj) {
      if (obj.nodeType == 'sub') {
        return false
      } else {
        return true
      }
    },
    //编写栅格布局样式后取消事件
    includeStyleNo() {
      this.style = ''
      this.styleIndex = ''
      this.clickColor = ''
      this.hiddenBorder = ''
      this.selectBorderType = ''
      this.dialogStyleVisible = false
    },
    //编写栅格布局样式后确认事件
    includeStyleOk() {
      let color = ''
      if (this.clickColor) {
        color = ' border-color: ' + this.clickColor + '; '
      }
      let hiddenBorder = ''
      if (this.hiddenBorder) {
        this.hiddenBorder.forEach(v => {
          hiddenBorder += v
        })
      }
      if (this.style || color || this.selectBorderType || hiddenBorder) {
        this.data.columns[this.styleIndex].style =
          this.style + color + this.selectBorderType + hiddenBorder
      } else {
        this.data.columns[this.styleIndex].style = ''
      }
      this.style = ''
      this.clickColor = ''
      this.hiddenBorder = ''
      this.selectBorderType = ''
      this.styleIndex = ''
      this.dialogStyleVisible = false
    },
    //打开编写栅格布局样式对话框
    handleGridColumnStyle(index) {
      this.styleIndex = index
      if (this.data.columns[index].style) {
        this.style = this.data.columns[index].style
      } else {
        this.style = ''
      }
      this.dialogStyleVisible = true
    },
    autoRunJSScript(type, isBnt) {
      this.BtnScriptType = type
      let script
      if (type == 1) {
        //下一步按钮的前置脚本
        script = this.data.options.nextBntjson.preScript
      }
      this.pageBtnScriptDialog = true
      if (!script) return
      this.pageBtnScriptBase = Base64.decode(script)
    },
    pageBtnScriptDialogOk() {
      this.pageBtnScriptDialog = false
    },
    pageBtnScriptDialogClose() {
      this.pageBtnScriptDialog = false
    },
    iconSelected(data) {
      this.$refs[data].choiceIcon()
    },
    pegeNextIcon(icon) {
      this.data.nextButton.icon = icon
    },
    pegeBackIcon(icon) {
      this.data.backButton.icon = icon
    },
    includeFilesOk() {
      this.dialogincluddingFileVisible = false
      if (this.subCustomHeader) {
        this.data.customHeader = Base64.encode(this.subCustomHeader, 'utf-8')
      } else {
        this.data.customHeader = ''
      }
    },
    includdingFile() {
      this.dialogincluddingFileVisible = true
      if (this.data.customHeader) {
        this.subCustomHeader = Base64.decode(this.data.customHeader, 'utf-8')
      } else {
        this.subCustomHeader = ''
      }
    },
    unbind(key) {
      for (var item in this.custDialogprop) {
        if (key == item) {
          this.$set(this.custDialogprop, key, '')
          delete this.custDialogprop[key]
        }
      }
    },
    editI18nMessage(data) {
      this.i18nMessageKey = this.data.options.subTablePath
      if (data) {
        this.i18nMessageKey = data
      }
      this.$refs.i18nMessageEdit.handleOpen()
    },
    afterSaveI18n(data) {
      data.key = data.key.replace('$', '#')
      if (this.data.ctrlType == 'grid') {
        this.data.options.gridDesc = data.key
        this.data.options.gridDesc_zh = data.desc
      } else {
        this.data.desc = data.key
        this.data.desc_zh = data.desc
      }
    },

    // 子表对话框确定事件
    custDialogOk() {
      //对话框返回值
      var mappingConf = []
      for (var key in this.custDialogprop) {
        mappingConf.push({
          from: key,
          target: [this.custDialogprop[key]]
        })
      }
      this.data.customDialogjson.custDialog.mappingConf = mappingConf
      this.dialogcustDialogVisible = false
    },
    custOrgDialogOk() {
      this.dialogcustOrgVisible = false
    },
    //打开设置子表对话框返回值
    custDialogClick() {
      this.dialogcustDialogVisible = true
      this.custDialogprop = null
      let tempGroup = {}
      var initConf = this.data.customDialogjson
      if (initConf.custDialog.mappingConf) {
        for (var i = 0, c; (c = initConf.custDialog.mappingConf[i++]); ) {
          if (!c) continue
          var target = c.target
          if (target) target = target.join(',')
          tempGroup[c.from] = target
        }
      }
      initConf.resultField.forEach(f => {
        if (!tempGroup[f.comment]) {
          tempGroup[f.comment] = ''
        }
        if (f.hasOwnProperty('fillBackType') && f.fillBackType) {
          f.fillBackType = f.fillBackType
        } else {
          this.$set(f, 'fillBackType', 1)
        }
      })
      this.custDialogprop = tempGroup
    },
    custOrgClick() {
      if (!this.data.customDialogjson.orgConfig) {
        this.data.customDialogjson.orgConfig = {
          name: '',
          code: '',
          id: '',
          instId: ''
        }
      }
      this.dialogcustOrgVisible = true
    },
    initHotColHeaders() {
      let nowHeaders = this.data.options.colHeadersRelations
      let children = []
      this.subTables.forEach(sub => {
        if (sub.name == this.data.options.boSubEntity) {
          children = sub.children
        }
      })
      if (children.length > 0) {
        for (let index = 0; index < children.length; index++) {
          let child = children[index]
          let isExist = false
          nowHeaders.forEach(f => {
            if (f.name == child.name) {
              isExist = true
            }
          })
          if (!isExist) {
            let columnPropertis = {
              data: child.name,
              readOnly: false,
              readOnlyRows: '',
              required: false,
              requiredRows: '',
              mergeCell: false,
              type: 'text',
              source: [],
              dateFormat: '',
              mathExp: '',
              rowMathExp: [],
              width: 90,
              style: {
                size: 0,
                color: '',
                bold: false,
                background: '',
                diyStyle: ''
              }
            }
            this.data.options.colHeadersRelations.push({
              name: child.name,
              desc: child.comment,
              column: columnPropertis,
              isSum: false
            })
          }
        }
      }
    },
    setColHeader() {
      this.dialogHotHeaderDialogVisible = true
    },
    setCrossMapping() {
      if (!this.data.options.crossMapping) {
        this.data.options.crossMapping = [
          {
            toField: '',
            toIndex: 1,
            fromFields: [{fromSubTabPath: '', fromField: '', fromIndex: 1}]
          }
        ]
      }
      this.dialogHotCrossMappingVisible = true
    },
    setNestedHeaders() {
      if (!this.data.options.nestedHeaders) {
        this.data.options.nestedHeaders = []
      }
      this.dialogHotNestedHeadersVisible = true
    },
    setMainTableCalc() {
      if (!this.data.options.mainTableCalcs) {
        this.data.options.mainTableCalcs = []
      }
      this.dialogMainTableCalcVisible = true
    },
    setCellCalc() {
      if (!this.data.options.cellCalcs) {
        this.data.options.cellCalcs = []
      }
      this.dialogCellCalcVisible = true
    },
    hotHeaderDialogOk(isDialog) {
      if (this.data.options.colHeadersRelations) {
        let newColHeadersRelations = JSON.stringify(
          this.data.options.colHeadersRelations
        )
        this.data.options.colHeadersRelations = []
        this.data.options.colHeadersRelations = JSON.parse(
          newColHeadersRelations
        )
      }
      this.dialogHotHeaderDialogVisible = false
    },
    hotCrossMappingDialogOk() {
      this.dialogHotCrossMappingVisible = false
    },
    hotMainTableCalcDialogOk() {
      this.dialogMainTableCalcVisible = false
    },
    hotCellCalcDialogOk() {
      this.dialogCellCalcVisible = false
    },
    hotNestedHeadersDialogOk() {
      this.dialogHotNestedHeadersVisible = false
    },
    addHotCrossMapping() {
      this.data.options.crossMapping.push({
        toField: '',
        toIndex: 1,
        fromFields: [{fromSubTabPath: '', fromField: '', fromIndex: 1}]
      })
    },
    addHotCrossMappingField(field) {
      field.fromFields.push({
        fromSubTabPath: '',
        fromField: '',
        fromIndex: 1
      })
    },
    addHotMainTableCalc() {
      this.data.options.mainTableCalcs.push({
        name: '',
        mainField: '',
        sumField: ''
      })
    },
    addHotCellCalc() {
      this.data.options.cellCalcs.push({
        cellField: '',
        rowIndex: 1,
        mathExp: ''
      })
    },
    addHotNestedHeaders() {
      this.data.options.nestedHeaders.push({
        headers: [{name: '', startField: '', endField: ''}]
      })
    },
    hotHeaderRemove(item) {
      this.data.options.colHeadersRelations.remove(item)
    },
    hotCrossMappingRemove(item) {
      this.data.options.crossMapping.remove(item)
    },
    hotCrossMappingFiledRemove(field, item) {
      field.fromFields.remove(item)
    },
    hotMainTableCalcRemove(item) {
      this.data.options.mainTableCalcs.remove(item)
    },
    hotCellCalcRemove(item) {
      this.data.options.cellCalcs.remove(item)
    },
    hotMainTableCalcEdit(item) {
      this.currentHotColumnField = {}
      this.dialogHotCountVisible = true
      let _this = this
      setTimeout(function() {
        _this.$refs.mathDialog.mathExpAssign(item.script)
        _this.currentMainTableCalcField = item
      }, 0)
    },
    hotCellCalcEdit(item) {
      this.currentCellCalcField = {}
      this.dialogCellCountVisible = true
      let _this = this
      setTimeout(function() {
        _this.$refs.cellMathDialog.mathExpAssign(item.mathExp)
        _this.currentCellCalcField = item
      }, 0)
    },
    hotNestedHeadersRemove(item) {
      this.data.options.nestedHeaders.remove(item)
    },
    hotNestedHeadersItemAdd(headers) {
      headers.push({name: '', startField: '', endField: ''})
    },
    hotNestedHeadersItemRemove(headers, item) {
      headers.remove(item)
    },
    setHotMathExp(fillField) {
      this.currentMainTableCalcField = {}
      this.dialogHotCountVisible = true
      let _this = this
      setTimeout(function() {
        _this.$refs.mathDialog.mathExpAssign(fillField.column.mathExp)
        _this.currentHotColumnField = fillField
      }, 0)
    },
    setHotRowMathExp(fillField) {
      this.currentMainTableCalcField = {}
      this.dialogHotRowsCountVisible = true
      let _this = this
      setTimeout(function() {
        if (!fillField.column.rowMathExp) {
          fillField.column.rowMathExp = []
        }
        _this.$refs.mathRowDialog.mathExpAssign(fillField.column.rowMathExp)
        _this.currentHotColumnField = fillField
      }, 0)
    },
    setHotColumMathExp(exp) {
      if (Object.keys(this.currentMainTableCalcField) != 0) {
        this.currentMainTableCalcField.script = exp
      } else if (Object.keys(this.currentHotColumnField) != 0) {
        this.currentHotColumnField.column.mathExp = exp
      }
      this.$refs.mathDialog.mathExpAssign('')
    },
    setHotCellMathExp(exp) {
      if (Object.keys(this.currentCellCalcField) != 0) {
        this.currentCellCalcField.mathExp = exp
      }
      this.$refs.cellMathDialog.mathExpAssign('')
    },
    setHotColumRowMathExp(exp) {
      this.currentHotColumnField.column.rowMathExp = exp
      this.$refs.mathRowDialog.mathExpAssign([])
    },
    setHotColumType(item) {
      this.$refs.hotTableFieldDialog.handleOpen(item)
    },
    hotTableFieldSave(field) {},
    // 孙表对话框确定事件
    custDialogSunOk(isDialog) {
      //对话框返回值
      var mappingConf = []
      for (var key in this.custDialogprop) {
        mappingConf.push({
          from: key,
          target: [this.custDialogprop[key]]
        })
      }
      this.data.customDialogjson.custDialog.mappingConf = mappingConf
      this.dialogSunDialog = false
    },
    //打开设置孙表对话框返回值
    custDialogSunClick() {
      this.dialogSunDialog = true
      this.custDialogprop = null
      let tempGroup = {}
      var initConf = this.data.customDialogjson
      if (initConf.custDialog.mappingConf) {
        for (var i = 0, c; (c = initConf.custDialog.mappingConf[i++]); ) {
          if (!c) continue
          var target = c.target
          if (target) target = target.join(',')
          tempGroup[c.from] = target
        }
      }
      initConf.resultField.forEach(f => {
        if (!tempGroup[f.comment]) {
          tempGroup[f.comment] = ''
        }
        if (f.hasOwnProperty('fillBackType') && f.fillBackType) {
          f.fillBackType = f.fillBackType
        } else {
          this.$set(f, 'fillBackType', 1)
        }
      })
      this.custDialogprop = tempGroup
    },
    //数据视图控件方法
    dataViewClick() {
      if (!this.data.templateKey || this.data.templateKey == '') {
        this.$message.warning('请先选择表单列表')
        return
      }
      if (this.data.options.selectList) {
        this.selectList = JSON.parse(
          JSON.stringify(this.data.options.selectList)
        )
      }
      if (this.data.options.bindList) {
        this.bindList = JSON.parse(JSON.stringify(this.data.options.bindList))
      }
      this.dialogDataViewVisible = true
    },
    //数据设置关联方法
    dataListClick(data, index) {
      this.bindDataIndex = index
      this.dataTemplateField = JSON.parse(data.dataTemplateField)
      if (this.data.dataTemplateObj[index].bindOptions.selectList) {
        this.selectDataList = JSON.parse(
          JSON.stringify(
            this.data.dataTemplateObj[index].bindOptions.selectList
          )
        )
      }
      this.dialogDataListsVisible = true
    },
    handleFormTableRemove() {
      //删除方法
      this.selectList = [{selectField: '', bindSelectd: ''}]
      this.bindList = [{fillField: '', bindFilld: ''}]
      this.data.templateObj = {}
    },
    handleDataListsRemove(data) {
      //删除方法
      this.data.dataTemplateObj.remove(data)
    },
    selectDatalist() {
      this.$refs.EipDataListTemplateSelector &&
        this.$refs.EipDataListTemplateSelector.showDialog(
          this.data.dataTemplateObj
        )
    },
    confirmDataView() {
      //校验
      if (this.selectList && this.selectList.length > 0) {
        for (var i = 0; i < this.selectList.length; i++) {
          if (
            this.selectList[i].selectField == '' ||
            this.selectList[i].bindSelectd == ''
          ) {
            this.$message.warning(
              '关联查询第' + (i + 1) + '行表单字段、数据报表字段为空！'
            )
            return false
          }
        }
      }
      if (this.bindList && this.bindList.length > 0) {
        for (var i = 0; i < this.bindList.length; i++) {
          if (
            this.bindList[i].fillField == '' ||
            this.bindList[i].bindFilld == ''
          ) {
            this.$message.warning(
              '关联填充第' + (i + 1) + '行表单字段、数据报表字段为空！'
            )
            return false
          }
        }
      }
      let resField = this.isRepeat(this.selectList, 'selectField')
      if (!resField) {
        this.$message.warning('关联查询字段只能绑定唯一的表单字段')
        return false
      }
      let resultSelect = this.isRepeat(this.selectList, 'bindSelectd')
      if (!resultSelect) {
        this.$message.warning('关联查询字段只能绑定唯一的表单列表字段')
        return false
      }
      let resultFill = this.isRepeat(this.bindList, 'fillField')
      if (!resultFill) {
        this.$message.warning('关联填充字段只能绑定唯一的表单字段')
        return false
      }
      let resultBind = this.isRepeat(this.bindList, 'bindFilld')
      if (!resultBind) {
        this.$message.warning('关联填充字段只能绑定唯一的表单列表字段')
        return false
      }
      this.data.options.selectList = JSON.parse(JSON.stringify(this.selectList))
      this.data.options.bindList = JSON.parse(JSON.stringify(this.bindList))
      this.dialogDataViewVisible = false
    },
    //数据列表
    confirmDataLists() {
      //校验
      if (this.selectDataList && this.selectDataList.length > 0) {
        for (var i = 0; i < this.selectDataList.length; i++) {
          if (
            this.selectDataList[i].selectField == '' ||
            this.selectDataList[i].bindSelectd == ''
          ) {
            this.$message.warning(
              '关联查询第' + (i + 1) + '行表单字段、数据报表字段为空！'
            )
            return false
          }
        }
      }
      let resField = this.isRepeat(this.selectDataList, 'selectField')
      if (!resField) {
        this.$message.warning('关联查询字段只能绑定唯一的表单字段')
        return false
      }
      let resultSelect = this.isRepeat(this.selectDataList, 'bindSelectd')
      if (!resultSelect) {
        this.$message.warning('关联查询字段只能绑定唯一的表单列表字段')
        return false
      }
      this.data.dataTemplateObj[
        this.bindDataIndex
      ].bindOptions.selectList = JSON.parse(JSON.stringify(this.selectDataList))
      this.bindDataList = ''
      this.dialogDataListsVisible = false
    },
    isRepeat(arr, key) {
      var obj = {}
      for (let i = 0; i < arr.length; i++) {
        if (obj[arr[i][key]]) {
          return false
        } else {
          obj[arr[i][key]] = arr[i]
        }
      }
      return true
    },
    addSelectList() {
      if (this.tablefields) {
        for (let i = 0; i < this.tablefields.length; i++) {
          if (this.tablefields[i].nodeType == 'main') {
            let children = this.tablefields[i].children
            if (children) {
              if (this.selectList.length >= children.length) {
                this.$message.warning('不能添加更多的关联查询字段！')
                return false
              }
            }
          }
        }
      }
      let selectObj = {
        selectField: '',
        selectFieldType: '',
        bindSelectd: '',
        bindSelectdType: ''
      }
      this.selectList.push(selectObj)
    },
    addBindList() {
      if (this.tablefields) {
        for (let i = 0; i < this.tablefields.length; i++) {
          if (this.tablefields[i].nodeType == 'main') {
            let children = this.tablefields[i].children
            if (children) {
              if (this.bindList.length >= children.length) {
                this.$message.warning('不能添加更多的关联填充字段！')
                return false
              }
            }
          }
        }
      }
      let bindObj = {fillField: '', bindFilld: ''}
      this.bindList.push(bindObj)
    },
    addSelectDataList() {
      if (this.tablefields) {
        for (let i = 0; i < this.tablefields.length; i++) {
          if (this.tablefields[i].nodeType == 'main') {
            let children = this.tablefields[i].children
            if (children) {
              if (this.selectDataList.length >= children.length) {
                this.$message.warning('不能添加更多的关联查询字段！')
                return false
              }
            }
          }
        }
      }
      let selectObj = {
        selectField: '',
        selectFieldType: '',
        bindSelectd: '',
        bindSelectdType: ''
      }
      this.selectDataList.push(selectObj)
    },
    addBindDataList() {
      if (this.tablefields) {
        for (let i = 0; i < this.tablefields.length; i++) {
          if (this.tablefields[i].nodeType == 'main') {
            let children = this.tablefields[i].children
            if (children) {
              if (this.bindDataList.length >= children.length) {
                this.$message.warning('不能添加更多的关联填充字段！')
                return false
              }
            }
          }
        }
      }
      let bindObj = {fillField: '', bindFilld: ''}
      this.bindDataList.push(bindObj)
    },
    afterCustomDialogLoadData(data) {
      this.customDialogs = data
    },
    afterCustomQueryLoadData(data) {
      this.customQuerys = data.rows
    },
    icons(icon) {
      if (this.data.customDialogjson) {
        this.data.customDialogjson.icon = icon
      } else {
        this.data.options.customDialogjson.icon = icon
      }
    },
    changeCustDialog() {
      this.custDialogprop = {}
      this.data.customDialogjson.custDialog.conditions = []
      this.data.customDialogjson.custDialog.conditions.custQueryJson = []
      this.data.customDialogjson.custDialog.mappingConf = []
      if (this.customDialogs.length == 0) return
      if (this.data.customDialogjson.custDialog.alias == null) {
        this.data.customDialogjson.custDialog.conditions = []
        return
      }
      for (var i = 0, d; (d = this.customDialogs[i++]); ) {
        if (d.alias == this.data.customDialogjson.custDialog.alias) {
          var treeData
          if (d.listDialog && d.listDialog.resultfield) {
            treeData = eval('(' + d.listDialog.resultfield + ')')
            this.data.customDialogjson.custDialog.type = 'combiDialog'
          }
          if (d.resultfield) {
            treeData = eval('(' + d.resultfield + ')')
            this.data.customDialogjson.custDialog.type = 'custDialog'
          }
          for (var q = 0, f; (f = treeData[q++]); ) {
            f.field = f.comment
          }
          this.data.customDialogjson.resultField = treeData
          var conditionList = eval('(' + d.conditionfield + ')')
          this.data.customDialogjson.custDialog.conditions = []
          //只处理类型等于1的对话框参数（defaultType：1：用户输入，2：固定值 ，3：参数传入）
          if (conditionList && conditionList.length > 0) {
            for (var j = 0, c; (c = conditionList[j++]); ) {
              if (c.defaultType == '3') {
                var has = false
                if (!has)
                  this.data.customDialogjson.custDialog.conditions.push(c)
              }
            }
          }
        }
      }
    },
    // 刷新对话框配置
    refreshDialogConfig() {
      if (
        !this.data.customDialogjson.custDialog.alias ||
        !this.customDialogs ||
        !this.customDialogs.length
      )
        return
      let currentDialog = this.customDialogs.find(item => {
        return item.alias === this.data.customDialogjson.custDialog.alias
      })
      if (!currentDialog) {
        return
      }
      this.data.customDialogjson.custDialog.selectNum = currentDialog.selectNum //单选多选  1：单选。-1：多选
      let treeData
      if (currentDialog.style === 2) {
        let combineConfig = JSON.parse(currentDialog.combinationRule)
        let listDialog = this.customDialogs.filter(
          item => item.alias === combineConfig.rightDialog
        )
        treeData = JSON.parse(listDialog[0].resultfield)
        this.data.customDialogjson.custDialog.type = 'combiDialog'
      }
      if (currentDialog.listDialog && currentDialog.listDialog.resultfield) {
        treeData = eval('(' + currentDialog.listDialog.resultfield + ')')
        this.data.customDialogjson.custDialog.type = 'combiDialog'
      }
      if (currentDialog.resultfield && currentDialog.resultfield !== '[]') {
        treeData = eval('(' + currentDialog.resultfield + ')')
        this.data.customDialogjson.custDialog.type = 'custDialog'
      }
      if (treeData) {
        for (let q = 0, f; (f = treeData[q++]); ) {
          f.field = f.comment
        }
      }
      this.data.customDialogjson.resultField = treeData
      let conditionList = eval('(' + currentDialog.conditionfield + ')')
      let newCondition = []
      //只处理类型等于1的对话框参数（defaultType：1：用户输入，2：固定值 ，3：参数传入）
      if (conditionList && conditionList.length > 0) {
        for (let j = 0, c; (c = conditionList[j++]); ) {
          if (c.defaultType == '3') {
            newCondition.push(c)
          }
        }
      }
      newCondition.forEach((item, index) => {
        let oldItem = this.data.customDialogjson.custDialog.conditions.find(
          sub => {
            return (
              sub.field === item.field && sub.defaultType === item.defaultType
            )
          }
        )
        if (oldItem) {
          newCondition[index] = oldItem
        }
      })
      this.data.customDialogjson.custDialog.conditions = newCondition
      this.$message.info('更新配置成功！点击保存表单后生效。')
    },
    handleGridColumnRemove(index) {
      if (this.data.options.activeNames != undefined) {
        this.data.options.activeNames.remove(this.data.columns[index].idKey)
      }
      this.data.columns.splice(index, 1)
    },
    addCombinedColumn(item, index) {
      this.typeOption = null
      if (typeof index === 'number') {
        this.typeOption = index
      }

      this.$refs.DialogCombinedColumn.showDialog(
        item,
        this.data.list,
        this.data.name
      )
    },
    delCombinedColumn(item, index) {
      this.data.CombinedColumnList.splice(index, 1)
      console.log(
        'this.data.CombinedColumnList: ',
        this.data.CombinedColumnList
      )
    },
    CombinedColumnEdit(list) {
      let CombinedColumnList = this.data.CombinedColumnList || []
      if (typeof this.typeOption === 'number') {
        CombinedColumnList[this.typeOption] = list
      } else {
        CombinedColumnList.push({...list})
      }

      this.data.CombinedColumnListJson = Base64.encode(
        JSON.stringify(CombinedColumnList),
        'utf-8'
      )
      this.$set(this.data, 'CombinedColumnList', CombinedColumnList)
    },

    handleGridColumnAdd(type) {
      if (type == 'tab') {
        this.data.columns.push({
          span: '标签页' + (this.data.columns.length + 1),
          list: [],
          permission: '',
          permissionPath: ''
        })
      } else if (type == 'page') {
        this.data.columns.push({
          span: '分页' + (this.data.columns.length + 1),
          list: []
        })
      } else if (type == 'collapse') {
        this.data.columns.push({
          span: '折叠面板' + (this.data.columns.length + 1),
          idKey: Date.parse(new Date()) + utils.getName(),
          isOpen: false,
          list: []
        })
      } else {
        this.data.columns.push({
          span: '',
          list: []
        })
      }
    },
    switchChange(item) {
      if (eval(item.isOpen)) {
        this.data.options.activeNames.push(item.idKey)
      } else {
        this.data.options.activeNames.remove(item.idKey)
      }
    },
    subTableChange(value, data) {
      this.data.name = data.name
      this.data.list = []
      this.data.desc = data.desc
      this.data.options.subTablePath = data.path
      if (data.show == '子实体') {
        this.data.options.subDivTablePath = data.path
      }
      this.data.options.relation = data.relation
      if (this.data.ctrlType == 'hottable' && data.children) {
        let fields = []
        let list = []
        for (let index = 0; index < data.children.length; index++) {
          let child = data.children[index]
          let columnPropertis = {
            data: child.name,
            readOnly: false,
            readOnlyRows: '',
            required: false,
            requiredRows: '',
            mergeCell: false,
            type: 'text',
            source: [],
            dateFormat: '',
            mathExp: '',
            rowMathExp: [],
            width: 90,
            style: {
              size: 0,
              color: '',
              bold: false,
              background: '',
              diyStyle: ''
            }
          }
          fields.push({
            name: child.name,
            desc: child.comment,
            column: columnPropertis
          })
          let listField = {options: {}}
          listField.boDefId = child.boDefId
          listField.boAttrId = child.id
          listField.fieldPath = child.path + '.' + child.name
          listField.name = child.name
          listField.desc = child.desc
          listField.title = child.desc
          listField.entId = child.entId
          listField.boDefAlias = child.boDefAlias
          listField.tableName = child.tableName
          listField.columnType = child.columnType
          if (child.dataType == 'date') {
            listField.options.format = child.format
            listField.options.inputFormat = child.format
          } else if (child.dataType == 'number') {
            listField.options.maxDecimalDigits = child.decimalLen
            listField.options.decimalDigits = child.decimalLen
          }
          list.push(listField)
        }
        this.data.list = list
        this.data.options.colHeadersRelations = fields
      }
    },
    addRelation() {
      this.relationVisible = true
      this.relations = []
      this.data.list.forEach(item => {
        if (item.options.mapping) {
          this.relations.push({
            key_: item.name,
            value_: item.options.mapping
          })
        }
      })
    },
    add() {
      this.relations.push({
        key_: '',
        value_: ''
      })
    },
    remove(index) {
      this.relations.splice(index, 1)
    },
    submit() {
      let flag = false
      let map = new Map()
      this.relations.forEach(item => {
        if (!item.key_ || !item.value_) {
          flag = true
        }
        map.set(item.key_, item.value_)
      })
      if (flag) {
        this.$message('映射关系不能为空')
        return
      }
      this.data.list.forEach(item => {
        if (map.has(item.name)) {
          item.options.mapping = map.get(item.name)
        } else {
          delete item.options.mapping
        }
      })
      this.relationVisible = false
    },
    initHotTableData() {
      this.$refs.hotSubDialog.showDialog()
    },
    hotTableInitData(initData) {
      this.data.options.initFillbackData = initData
    },
    up(index, data) {
      if (index === 0) {
        this.$message({
          message: '已经是列表中第一位',
          type: 'warning'
        })
      } else {
        let temp = data[index - 1]
        this.$set(data, index - 1, data[index])
        this.$set(data, index, temp)
      }
    },
    down(index, data) {
      if (index === data.length - 1) {
        this.$message({
          message: '已经是列表中最后一位',
          type: 'warning'
        })
      } else {
        this.isTransition = true
        let i = data[index + 1]
        this.$set(data, index + 1, data[index])
        this.$set(data, index, i)
      }
    },
    handleTableTdClose(rowIndex, colIndex) {
      const tempRow = this.data.rows[rowIndex]
      if (tempRow.cols.length > 1) {
        if (colIndex > 0) {
          tempRow.cols[colIndex - 1].colspan += 1
        } else if (colIndex == 0 && tempRow.cols.length > 1) {
          tempRow.cols[colIndex + 1].colspan += 1
        }
        tempRow.cols.splice(colIndex, 1)
      } else {
        const rows = this.data.rows
        rows.splice(rowIndex, 1)
        this.$set(this.data, 'rows', rows)
      }
    },
    tableOperation(oType, dType) {
      const rows = this.data.rows
      if (dType == 'row') {
        let rowIndex =
          oType == 'add' ? this.tableTempAddRowIndex : this.tableTempDelRowIndex
        if (!rowIndex) {
          this.$message({
            message: '请输入具体下标（大于0）。',
            type: 'warning'
          })
          return
        }
        if (
          (oType == 'add' && rowIndex > rows.length + 1) ||
          (oType == 'del' && rowIndex > rows.length)
        ) {
          this.$message({
            message: '行下标超出范围，当前最大值为：' + rows.length,
            type: 'warning'
          })
          return
        }
        if (oType == 'add') {
          rows.splice(rowIndex - 1, 0, this.getTableRowInit(rows[0].cols))
        } else if (oType == 'del') {
          rows.splice(rowIndex - 1, 1)
        }
        this.$set(this.data, 'rows', [...rows])
      } else if (dType == 'col') {
        let celIndex =
          oType == 'add' ? this.tableTempAddColIndex : this.tableTempDelColIndex
        if (!celIndex) {
          this.$message({
            message: '请输入具体下标（大于0）。',
            type: 'warning'
          })
          return
        }
        let colslen = 0
        rows[0].cols.forEach(_item => {
          colslen += _item.colspan
        })
        if (
          (oType == 'add' && celIndex > colslen + 1) ||
          (oType == 'del' && celIndex > colslen)
        ) {
          this.$message({
            message: '列下标超出范围，当前最大值为：' + colslen,
            type: 'warning'
          })
          return
        }
        if (oType == 'add') {
          rows.forEach(item => {
            let cols = item.cols
            cols.splice(celIndex - 1, 0, {colspan: 1, list: []})
          })
        } else if (oType == 'del') {
          let countColSpan = 0
          rows.forEach(item => {
            countColSpan = 0
            let _celIndex = celIndex - 1

            let removeColIndex = 0
            // 中间的删除
            let modifyColspan = false
            item.cols.forEach(_item => {
              countColSpan += _item.colspan
              if (countColSpan >= _celIndex + 1) {
                if (_item.colspan > 1) {
                  //_item.list.pop();
                  _item.colspan = _item.colspan - 1
                  modifyColspan = true
                } else {
                  if (removeColIndex == 0) {
                    removeColIndex = _celIndex
                  }
                }
              }
            })
            if (removeColIndex != 0 && !modifyColspan) {
              if (removeColIndex >= item.cols.length) {
                removeColIndex = item.cols.length - 1
              }
              item.cols.splice(removeColIndex, 1)
            }
          })
        }
        this.$nextTick(() => {
          this.$set(this.data, 'rows', [...rows])
        })
      }
    },
    getTableRowInit(cols) {
      let size = 2
      if (cols && cols.length > 0) {
        size = 0
        cols.forEach(col => {
          size += col.colspan
        })
      }
      let row = {cols: []}
      for (let i = 0; i < size; i++) {
        row.cols.push({colspan: 1, list: []})
      }
      return {...row}
    },
    isFill(column) {
      if (
        column.readOnly ||
        column.readOnlyRows ||
        column.required ||
        column.requiredRows ||
        column.mergeCell ||
        column.dateFormat ||
        column.style.background ||
        column.style.color ||
        column.style.bold ||
        column.style.size !== 0 ||
        column.style.diyStyle
      ) {
        return true
      }
      return false
    },
    handleTableCol(rowIndex, colIndex) {
      let rows = this.data.rows
      if (rows.length == 1 && rows[rowIndex].cols.length == 1) {
        this.$message({message: '最后一行不能删除！', type: 'warning'})
        return
      }
      if (rows[rowIndex].cols.length == 1) {
        rows.splice(rowIndex, 1)
      } else if (rows[rowIndex].cols.length > 1) {
        if (colIndex > 0) {
          rows[rowIndex].cols[colIndex - 1].colspan =
            rows[rowIndex].cols[colIndex - 1].colspan +
            rows[rowIndex].cols[colIndex].colspan
        } else {
          rows[rowIndex].cols[colIndex + 1].colspan =
            rows[rowIndex].cols[colIndex + 1].colspan +
            rows[rowIndex].cols[colIndex].colspan
        }
        rows[rowIndex].cols.splice(colIndex, 1)
      }
      this.$set(this.data, 'rows', [...rows])
    },
    // 打开子表导入数据合并代码的编辑对话框
    openSubImportMergeDialog() {
      this.$refs.subImportMergeDialog && this.$refs.subImportMergeDialog.open()
    },
    // 更新子表导入数据合并代码
    handleUpdateExpression(expression) {
      this.$set(this.data, 'subtableImportMergeExp', expression)
    },
    tableHasColspan(rowIndex) {
      let row = this.data.rows[rowIndex]
      let showAdd = false
      row.cols.forEach(td => {
        if (td.colspan > 1) {
          showAdd = true
          return true
        }
      })
      return showAdd
    },
    tableAddTd(rowIndex) {
      let row = this.data.rows[rowIndex]
      let canAdd = false
      for (let index = row.cols.length - 1; index >= 0; index--) {
        const col = row.cols[index]
        if (col.colspan > 1) {
          --col.colspan
          this.data.rows[rowIndex].cols.push({colspan: 1, list: []})
          return
        }
      }
      this.$message({
        message: '当前行列数已达上限，请按整列添加！',
        type: 'warning'
      })
    },
    filterConditionField(data) {
      let conditionField = []
      if (data && data.length > 0) {
        conditionField = data.filter(item => item.defaultType === '1')
      }
      return conditionField
    },
    changeOptions(group) {
      if (group.children) {
        let options = _.cloneDeep(group.children)

        options.unshift({
          name: 'ref_id_',
          desc: '外键',
          nodeType: 'field'
        })
        options.unshift({
          name: 'id_',
          desc: '主键',
          nodeType: 'field'
        })
        let list = options.filter(obj => {
          return this.filterFields(obj)
        })

        return list
      }
    },
    /**
     * 改变时触发事件，设置视图查询时选择的对象值
     * @param value 当前选择的字段
     * @param tableFields 表单字段数组
     * @param item 当前行对象
     */
    changeSelectField(value, tableFields, item) {
      if (!tableFields || !tableFields.length || !value) {
        return
      }
      tableFields.forEach(filed => {
        //是否有子属性
        const hasChildren = filed.hasOwnProperty('children')
        //没有子属性，则用自己本身属性进行拷贝
        const children = _.cloneDeep(hasChildren ? filed.children : filed)
        //找到第一个name等于value的对象
        const child = hasChildren
          ? children && children.find(item => item.name === value)
          : filed
        //将数据类型赋值给item
        if (child) {
          //dataType或者type取其一
          item[hasChildren ? 'selectFieldType' : 'bindSelectdType'] =
            child['dataType'] || child['type']
        }
      })
    },
    /**
     * 改变时触发事件，设置视图查询时绑定的对象值
     * @param value 当前选择的字段
     * @param bindSelecteds 要被绑定表单字段数组
     * @param item 当前行对象
     */
    changeBindSelected(value, bindSelecteds, item) {
      if (!bindSelecteds || !bindSelecteds.length || !value) {
        return
      }
      //找到第一个name等于value的对象
      const bindSelected =
        bindSelecteds && bindSelecteds.find(item => item.name === value)
      //将数据类型赋值给item
      if (bindSelected) {
        item['bindSelectdType'] = bindSelected['type']
      }
    },
    DataListTemplateDialogOnConfirm(selection, name) {
      this.data.dataTemplateObj = []
      this.tablefields.forEach(item => {
        if (item.type == 'main') {
          this.DataListboDefAlias = item.boDefAlias
        }
      })
      selection.forEach(item => {
        this.data.dataTemplateObj.push({
          name: item.name,
          dataTemplateField: item.dataTemplateField
            ? item.dataTemplateField
            : JSON.parse(JSON.stringify(item.conditions)),
          dataTemplateKey: item.dataTemplateKey
            ? item.dataTemplateKey
            : item.alias,
          alias: item.alias,
          id: item.id,
          dataTemplateId: item.dataTemplateId ? item.dataTemplateId : item.id,
          bindOptions: item.bindOptions
            ? item.bindOptions
            : {
                //保存boDefAlias
                boDefAlias: this.DataListboDefAlias,
                selectList: []
              }
        })
      })
    }
  },
  computed: {
    subList() {
      let subKey = this.data.options.boSubEntity
      if (!subKey) {
        return []
      }
      let subArrs = this.subTables.filter(item => {
        return item.name == subKey
      })
      if (!subArrs || subArrs.length == 0) {
        return []
      }
      let options = []
      subArrs[0].children.forEach(item => {
        options.push({
          name: item.name,
          desc: item.desc
        })
      })
      return options
    },
    subTableOption() {
      const option = [
        {key: 'subtable', value: '子表'},
        {key: 'subDiv', value: 'DIV子表'}
      ]
      return this.formType === 'mobile'
        ? option.filter(item => item.key === 'subDiv')
        : option
    },
    // 孙表回填 参数选择
    sunTableDialogParams() {
      if (this.data.parentNodeType && this.data.parentNodeType === 'sub') {
        return this.allModelingData.filter(item => {
          return item.nodeType === 'main' || item.name === this.data.boSubEntity
        })
      }
      return this.allModelingData.filter(item => item.nodeType === 'main')
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/form-editor.scss';
@import '@/assets/css/element-variables.scss';

>>> .el-dialog__body {
  /*padding: 10px !important;*/
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}
.column-ul {
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0px;
  .data-list-item {
    background-color: #f9f9f9;
    height: 36px;
    line-height: 36px;
    padding: 0 12px;
  }
}

.column-ul li {
  display: flex;
  align-items: center !important;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.column-ul .icon-draggable {
  font-weight: bold;
  font-size: 18px;
  cursor: move;
}

.grid-remove-button {
  margin-left: 8px;
}

.ghost {
  background: #f56c6c;
  border: 2px solid #f56c6c;
  outline-width: 0;
  height: 3px;
  box-sizing: border-box;
  font-size: 0;
  content: '';
  overflow: hidden;
  padding: 0;
}

.property-empty {
  text-align: center;
  width: 100%;
  margin-top: 150px;
  font-size: 16px;
  color: #ccc;
}
.linkageTable-tr td {
  text-align: center;
}
.custDialog-btn {
  width: 100%;
}
.custDialog-table td {
  padding: 5px;
  /*  .inputs.ht-form-inputs__inline {
    width: 90px;
  } */
}
>>> .custDialog-item {
  margin-bottom: 5px;
}

.basics-property .el-form-item {
  margin-bottom: 0px;
}
.linkageTable-tr td {
  text-align: center;
}
.basics-property >>> .el-form-item {
  margin-bottom: 0px;
}
.basics-label >>> .el-form-item__label {
  text-align: center;
}
.hottable_btn_row {
  margin: 5px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.tableUl {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tableTdAddBt {
  padding: 3px;
  margin-left: 5px;
}
>>> .margin-right {
  label.el-checkbox-horizontal {
    margin-right: 0;
  }
}
.tagOption-form-item {
  .column-ul li {
    display: flex;
    align-items: center;
    background: #f9f9f9;
    padding: 8px;
    .inputs {
      width: 190px;
      margin-right: 5px;
    }
    .accordion-inputs {
      width: 170px;
    }
    .accordion-number-inputs {
      width: 180px;
    }
  }
  &-elTabs {
    padding: 0 !important;
    ::v-deep {
      .el-tabs__nav {
        width: 100%;
        display: flex;
        justify-content: space-around;
        & > div {
          flex: 1;
          text-align: center;
        }
      }
      .el-tabs__header {
        margin-bottom: 23px;
      }
      .el-tabs__item {
        background-color: #fff;
        font-weight: 400;
        color: #262626;

        border-bottom: 1px solid #dcdee0;
        height: 32px !important;
        line-height: 32px !important;
      }
      .el-tabs__item.is-active {
        background-color: #fff;
        border: 1px solid;
        color: #409eff;
      }
    }
    &_left {
      .tagOption-form-item-elTabs_title {
        color: #262626;
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        margin-bottom: 8px;
      }
      .tagOption-form-item-elTabs_value {
        margin-bottom: 16px;
        &:last-child {
          margin-bottom: 0;
        }
      }

      ::v-deep {
        .el-button {
          width: 48px;
          margin-right: 14px;
          border-radius: 4px;
          padding: 8px 16px;
          &:last-child {
            margin-right: 0;
          }
          i {
            font-size: 16px;
          }
        }
      }
      .is-activeB {
        background: #fff;
        border-color: #409eff;
        i {
          color: #409eff;
        }
      }
    }
  }
}
.table-input-width.inputs.ht-form-inputs__inline {
  width: 100px;
}
.urgent-text-letf {
  // width: auto;
  margin-right: 32px;
  /deep/.CodeMirror {
    height: 558px;
  }
}
.select-icon__wrap {
  /deep/.el-form-item__content {
    display: flex;
    align-items: center;
    .el-container {
      flex: unset;
    }
    .icon-item {
      padding-left: 8px;
    }
  }
}
.col-style {
  margin-left: 16px;
}
.init-template {
  ::v-deep {
    .el-radio-button--mini .el-radio-button__inner {
      padding: 7px 12px;
    }
  }
}
::v-deep .select-dialog-line {
  display: flex;
  align-items: center;
  .inputs.ht-form-inputs__inline {
    flex: 1;
    width: 180px;
  }
  .el-button {
    padding: 7px;
    margin-left: 2px;
  }
}

.layout-property {
  padding: 0;
  ::v-deep {
    .inputs.ht-form-inputs__inline {
      width: unset;
    }
  }
}
::v-deep .mini-radio-group {
  .el-radio-button__inner {
    padding: 7px 10px;
  }
}
.layout-property {
  /deep/ .el-form-item__label {
    text-align: left;
    float: none;
    word-break: break-word;
  }
  /deep/.el-form-item__content {
    margin-left: 0 !important;
  }
  .inputs {
    width: 100%;
  }
  /deep/.el-input-group__prepend {
    padding: 0;
    text-align: center;
  }
}
.style__tabs-btn {
  border-style: dashed !important;
  width: 100%;
}
.icon-drag1 {
  color: #409eff;
  margin-right: 8px;
}
.ht-form-item-colon ::v-deep .el-form-item__label::after {
  content: '';
}
.ht-form-item-colon >>> .el-form-item__label:after {
  content: '';
}
.tag-radio-group {
  /deep/.el-radio-button__inner {
    width: 77px;
  }
}
.style-radio-group {
  /deep/.el-radio-button__inner {
    width: 103px;
  }
}
.gird-layout {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;

  /deep/ .el-radio-button.is-active .el-radio-button__inner {
    background-color: #fff !important;
    color: #409eff !important;
    border-color: #409eff;
  }
}
.gird-layout-tips {
  font-weight: 400;
  line-height: 32px;
  text-align: center;
  color: rgb(64, 158, 255);
  background: rgba(64, 158, 255, 0.08);
}
.grid-radio-group {
  /deep/.el-radio-button__inner {
    width: 40px;
  }
}
/* 不换行的表单项 */
.form-inline-item {
  display: flex;
  flex-wrap: nowrap !important;
  /deep/.el-form-item__label {
    text-align: left;
  }
}
/* 文字在内部开关 */
.switchStyle /deep/.el-switch__label {
  position: absolute;
  display: none;
  color: #999;
}
.switchStyle /deep/.el-switch__label--left {
  z-index: 9;
  left: 20px;
}
.switchStyle /deep/.el-switch__label--right {
  z-index: 9;
  left: -2px;
}
.switchStyle /deep/.el-switch__label.is-active {
  display: block;
  color: #fff;
}
.switchStyle.el-switch /deep/.el-switch__core,
/deep/.el-switch .el-switch__label {
  width: 50px !important;
}
.switchStyle /deep/.el-switch__label * {
  font-size: 12px;
}
.color-selected {
  display: flex;
  position: relative;
  align-items: center;
  border: 1px solid #dcdee0;
  text-align: center;
  height: 30px;
  line-height: 30px;
  margin-right: 15px;
  .color {
    display: inline-block;
    padding: 0 10px;
    background: #f5f7fa;
  }
  .color2 {
    white-space: nowrap;
    display: inline-block;
    padding: 0 10px;
    background: #f5f7fa;
    width: 56px;
    height: 30px;
    line-height: 30px;
  }
  .el-icon-caret-bottom {
    position: absolute;
    right: 7px;
  }
  /deep/.el-color-picker--mini {
    height: 20px;
    margin: 0 12px;
  }
  /deep/.el-color-picker--mini .el-color-picker__trigger {
    height: 20px;
    width: 32px;
    padding: 0 !important;
  }
  ::v-deep {
    .el-input__inner {
      padding: 0 10px !important;
    }
  }
  .color-picker {
    width: 26px;

    padding: 3px;
    margin: 0 !important;
    height: 26px !important;
    ::v-deep {
      .el-color-picker__trigger {
        height: 100% !important;
        width: 26px !important;
      }
    }
  }
}
.icon-selected {
  display: flex;
  align-items: center;
  border: 1px solid #dcdee0;
  text-align: center;
  height: 30px;
  line-height: 30px;
  width: 118px;
  .icon {
    display: inline-block;
    width: 56px;
    background: #f5f7fa;
    height: 30px;
    line-height: 30px;
  }
  .icon-box {
    width: 16px;
    padding: 12px;
  }
}
::v-deep {
  .custom-table-head {
    .box-card {
      border-radius: 2px;
      border-color: #e6e6e6;
      color: #333;
      height: 556px;
      .el-card__header {
        padding: 14px 20px;
        font-weight: bold;
      }
      .el-card__body {
        padding: 24px 16px 16px 16px;
      }
      .guide-ul_wrap {
        .li-item {
          display: flex;
          padding-bottom: 16px;
          .li-left {
            background: #f5f5f5;
            color: #409eff;
            width: 42px;
            min-width: 42px;
            height: 42px;
            line-height: 42px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            margin-right: 16px;
          }
          .right-vertical-center {
            display: flex;
            align-items: center;
          }
          .li-right {
            code {
              color: #ffae44;
              a {
                color: #409eff;
                font-weight: bold;
              }
            }
          }
        }
        .last-li {
          .el-textarea__inner {
            border-radius: 2px;
            border: none;
            background: #f3f3f3;
          }
        }
      }
    }
    .dialog-footer {
      .el-button {
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }
}
/deep/.el-radio-button:first-child .el-radio-button__inner {
  border-radius: 2px 0 0 2px;
}
/deep/.el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0 2px 2px 0;
}
/deep/.el-input-group__append,
.el-input-group__prepend {
  border-radius: 2px;
}

.linkageTable-title {
  background: rgb(244, 244, 244);
  color: rgb(51, 51, 51);
  font-weight: bold;
}
.dialog-footer {
  text-align: right;
}
.data-list-dialog {
  /deep/.el-dialog__body {
    padding: 20px;
  }
}

.CombinedColumnList {
  &_icon {
    font-size: 16px;
    color: #409eff;
  }
  &_item {
    width: calc(100% - 24px);
    height: 36px;
    background: #f9f9f9;
    border-radius: 4px;
    margin-bottom: 8px;
    padding: 0px 12px;
    display: flex;
    justify-content: space-between;

    &_left {
      width: calc(100% - 40px);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    i {
      cursor: pointer;
    }
  }
  ::v-deep {
    .el-button {
      width: 100%;
      border-radius: 4px 4px 4px 4px;
      color: #262626;
    }
  }
}

.gridStyle {
  display: flex;
  margin-bottom: 8px;
  & > div {
    border-radius: 4px;
  }
  & > div:last-child {
    margin-right: 0;
  }
}
.hide-title {
  position: absolute;
  top: -32px;
  right: 5px;
}
.is-gridDescBold {
  font-weight: bolder;
  background: #fff;
  border-color: #409eff;
  color: #409eff;
}

::v-deep {
  .el-color-picker__icon {
    color: #8c8c8c;
  }
  .el-dialog__body {
    padding: 20px;
  }
}
.options-gutter {
  ::v-deep {
    .is-controls-right {
      height: auto !important;
    }
  }
}
</style>
