<template>
  <el-container class="fullheight display-setting">
    <el-aside width="648px">
      <el-form class="header-form">
        <ht-form-item label="选择列表字段">
          <el-select
            value-key="name"
            v-model="selectedFields"
            multiple
            filterable
            :class="{'set-height': selectedFields && selectedFields.length > 4}"
          >
            <el-option-group
              v-for="group in displaySettingFields"
              :key="group.name"
              :label="group.desc"
            >
              <el-option
                v-for="item in group.fields"
                :key="item.name"
                :label="item.desc"
                :value="item"
              >
                <span style="float: left">
                  {{
                    item.desc + '(' + item.name + ')' + '(' + item.type + ')'
                  }}
                </span>
              </el-option>
            </el-option-group>
          </el-select>
          <div class="btn-wrap">
            <el-button type="primary" @click="allFillToDisplay">添加</el-button>
            <el-button @click="addMultiTableHeader('header', null)">
              添加表头
            </el-button>
            <el-button @click="sqlDialogShow()">添加虚拟列</el-button>
          </div>
        </ht-form-item>
        <div class="mobile-config">
          <ht-form-item label="设为标题" class="is-required">
            <template #label>
              <span>设为标题</span>
              <el-tooltip
                class="item"
                effect="dark"
                content="设置移动端标题字段"
                placement="bottom"
              >
                <div slot="content">
                  设置移动端标题字段<br />格式化设置附件、图片和进度条不生效
                </div>
                <i class="el-icon-info"></i>
              </el-tooltip>
            </template>
            <el-select
              v-model="mobileListTitle"
              placeholder="请选择"
              clearable
              @change="handleFieldChange"
            >
              <template v-for="item in mobileDisplayFieldList">
                <el-option
                  v-if="!item.isStatus"
                  :key="item.value"
                  :label="item.desc"
                  :value="item.name"
                >
                </el-option>
              </template>
            </el-select>
          </ht-form-item>
          <ht-form-item label="设为状态">
            <template #label>
              <span>设为状态</span>
              <el-tooltip
                class="item"
                effect="dark"
                content="设置移动端状态"
                placement="bottom"
              >
                <div slot="content">
                  设置移动端状态<br />格式化设置附件、图片和进度条不生效
                </div>
                <i class="el-icon-info"></i>
              </el-tooltip>
            </template>
            <el-select
              v-model="mobileShowStatus"
              placeholder="请选择"
              clearable
              @change="handleStatusChange"
            >
              <template v-for="item in mobileDisplayFieldList">
                <el-option
                  v-if="!item.isTitle"
                  :key="item.value"
                  :label="item.desc"
                  :value="item.name"
                >
                </el-option>
              </template>
            </el-select>
          </ht-form-item>
        </div>
      </el-form>
      <ht-tree
        ref="displaySettingTree"
        support-filter
        node-key="id"
        :data="displayFields"
        default-expand-all
        :expand-on-click-node="false"
        @node-click="nodeClick"
        @node-drag-start="handleDragStart"
        @node-drag-enter="handleDragEnter"
        @node-drag-leave="handleDragLeave"
        @node-drag-over="handleDragOver"
        @node-drag-end="handleDragEnd"
        @node-drop="handleDrop"
        @check="handleCheck"
        draggable
        show-checkbox
        :allow-drop="allowDrop"
        :allow-drag="allowDrag"
        :props="{label: 'desc', children: 'children'}"
        :class="{'edit-tree': isEditor, 'tree-border': !validateLoopFn()}"
        :isShowrefresh="false"
      >
        <div class="custom-tree-node" slot-scope="{node, data}">
          <div class="tree-node__wrap">
            <div
              v-if="data.name"
              style="display: flex;
              align-items: center;"
            >
              <el-tooltip
                effect="light"
                placement="top"
                popper-class="testtooltip"
                :disabled="tooltipDis"
              >
                <div slot="content" class="tooltip">
                  <div class="tooltip-container">
                    <ul>
                      <li v-if="!data.customColumn">
                        <span>所属表：</span><span>{{ data.tableName }}</span>
                      </li>
                      <li>
                        <span>字段名称：</span><span>{{ data.desc }}</span>
                      </li>
                      <li>
                        <span>字段别名：</span><span>{{ data.name }}</span>
                      </li>
                      <li v-if="!data.customColumn">
                        <span>字段类型：</span><span>{{ data.type }}</span>
                      </li>
                    </ul>
                  </div>
                </div>
                <i class="icon-drag1 drag-icon"></i>
              </el-tooltip>
              <div class="editi18_input">
                <el-input
                  v-model="data.desc"
                  :maxlength="50"
                  :minlength="1"
                  show-word-limit
                  size="small"
                  class="el-tree-node__label"
                  :class="{notCheck: data.desc == ''}"
                >
                  <i
                    v-if="data.customColumn"
                    style="line-height: 32px; color: #333; padding-left: 6px"
                    slot="prefix"
                    class="icon-xuni"
                  ></i>
                </el-input>
                <el-button
                  icon="icon-guojihua"
                  class="alignment"
                  @click="editI18nMessage(data.name)"
                >
                </el-button>
              </div>
              <el-select
                v-model="data.align"
                placeholder="对齐方式"
                size="small"
                class="alignment"
              >
                <el-option
                  v-for="item in alignOptions"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                >
                </el-option>
              </el-select>
              <el-input-number
                size="small"
                v-model="data.width"
                placeholder="列宽(px)"
                controls-position="right"
                :precision="0"
                :step="10"
                v-if="data.name"
              ></el-input-number>
            </div>
            <div v-if="!data.name">
              <i class="icon-drag1 drag-icon"></i>
              <el-input
                v-model="data.desc"
                maxlength="50"
                minlength="1"
                show-word-limit
                size="small"
                @input="inputChange(data.desc)"
                class="el-tree-node__label alignment"
                :class="{notCheck: data.desc == ''}"
              >
              </el-input>
              <el-select
                v-model="data.align"
                placeholder="对齐方式"
                size="small"
                class="alignment"
              >
                <el-option
                  v-for="item in alignOptions"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                >
                </el-option>
              </el-select>
            </div>
            <div class="btn-wrap">
              <el-tooltip
                class="item"
                effect="light"
                content="添加下级表头"
                placement="top"
                popper-class="testtooltip"
              >
                <i
                  class="icon-tianjia btn-item"
                  v-if="!data.name"
                  @click="() => addMultiTableHeader(node, data)"
                >
                </i>
              </el-tooltip>
              <template v-if="data.name">
                <el-tooltip
                  class="item"
                  effect="light"
                  content="配置SQL"
                  placement="top"
                  popper-class="testtooltip"
                >
                  <i
                    class="icon-editor1 btn-item"
                    :class="{'has-info': data.name}"
                    @click="() => sqlDialogShow(data)"
                    v-if="data.customColumn"
                  >
                  </i>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="light"
                  content="显示设置"
                  placement="top"
                  popper-class="testtooltip"
                >
                  <i
                    class="btn-item"
                    :class="
                      isShowSet(data)
                        ? 'icon-xianshishezhi-sel has-set'
                        : 'icon-setup'
                    "
                    @click="setting(data)"
                  ></i>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="light"
                  :content="
                    data.mpDisplay === '1' ? '移动端显示' : '移动端隐藏'
                  "
                  placement="top"
                  popper-class="testtooltip"
                >
                  <i
                    class="icon-shoujiduanxianshi btn-item"
                    :class="{'mobile-show': data.mpDisplay == '1'}"
                    @click="() => mobileIsDisplay(data, '1')"
                  ></i>
                </el-tooltip>
                <el-tooltip
                  placement="top"
                  popper-class="testtooltip"
                  effect="light"
                  v-if="rightToDesc(data.right) != '所有人'"
                >
                  <div slot="content">{{ rightToDesc(data.right) }}</div>
                  <i
                    class="icon-application-empower btn-item has-info"
                    @click="() => setFieldRightDialog(data)"
                  ></i>
                </el-tooltip>
                <el-tooltip
                  v-else
                  class="item"
                  effect="light"
                  content="授权"
                  placement="top"
                  popper-class="testtooltip"
                >
                  <i
                    class="icon-application-empower btn-item"
                    @click="() => setFieldRightDialog(data)"
                  ></i>
                </el-tooltip>
              </template>
              <el-tooltip
                class="item"
                effect="light"
                content="删除"
                placement="top"
                popper-class="testtooltip"
              >
                <i
                  class="icon-application-delete btn-item"
                  @click="() => remove(node, data)"
                ></i>
              </el-tooltip>
            </div>
          </div>
        </div>
        <template #custom-prefix>
          <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            :disabled="isDisabled"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
        </template>
        <template #custom-button>
          <div class="top-btn__wrap">
            <el-button
              title="批量删除"
              icon="icon-application-delete"
              :disabled="isDisabled"
              @click="handleDeleteSelected"
            ></el-button>
            <el-popconfirm
              title="确定清除所有数据？"
              class="clear-all__wrap"
              @confirm="handleDeleteAll"
            >
              <el-button
                title="清空"
                icon="icon-application-empty"
                class="clear-all"
                :disabled="isDisabled"
                slot="reference"
              ></el-button>
            </el-popconfirm>

            <el-button
              icon="icon-shoujiduanxianshi"
              :disabled="isDisabled"
              title="批量设置移动端显示或隐藏"
              @click="handleBatchMobile"
            ></el-button>
            <el-button
              icon="icon-application-empower"
              :disabled="isDisabled"
              title="批量授权"
              @click="handleBatchAuthorization"
            ></el-button>
          </div>
        </template>
      </ht-tree>
    </el-aside>
    <el-main class="display-setting__main"
      ><dynamic-table
        :table-header="displayFields"
        v-if="showDynamicTable && displayFields.length > 0"
      ></dynamic-table>
      <el-empty v-else :image-size="380" :image="noDataImg"> </el-empty>
    </el-main>
    <!-- 选择对话框  -->
    <eip-auth-dialog
      ref="eipAuthDialog"
      name="eipAuthDialog"
      isTip
      @onConfirm="authDialogOnConfirm"
      append-to-body
    />
    <el-dialog
      v-if="settingVisible"
      title="设置"
      width="50%"
      :visible.sync="settingVisible"
      append-to-body
      destroy-on-close
      custom-class="setting-dialog"
      @close="cancelSetting"
    >
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="格式化设置" name="formatter">
          <div class="toolbar-container">
            温馨提示：字段设置移动端显示并设为标题或状态后，格式化设置附件、图片和进度条不生效
          </div>
          <div style="margin-top: 5px">
            <el-radio-group
              v-model="selectedRow.formatterType"
              @change="clearFormatterData"
            >
              <el-radio label="1" size="small">文本</el-radio>
              <el-radio label="2" size="small">附件</el-radio>
              <el-radio label="3" size="small">图片</el-radio>
              <el-radio label="4" size="small">数据字典</el-radio>
            </el-radio-group>
            <el-button
              size="mini"
              style="margin-right: 50px; float: right"
              @click="clearFormatterType"
              >清除</el-button
            >
          </div>
          <div v-if="selectedRow.formatterType == '1'" style="margin-top: 5px">
            <div class="tip-message">
              类似固定选项的方式配置实际值和显示内容的映射关系，例如：实际值为：0，显示内容为：男士；实际值为：1，显示内容为：女士
            </div>
            <el-button
              type="primary"
              icon="el-icon-plus"
              style="margin-bottom: 16px"
              @click="addSetting"
              >添加</el-button
            >
            <el-form data-vv-scope="settingForm">
              <el-table :data="selectedRow.formatterData" row-key="id" border>
                <el-table-column label="实际值">
                  <template slot-scope="scope">
                    <ht-input
                      v-model="scope.row.key_"
                      :maxlength="50"
                      validate="required"
                      show-word-limit
                    />
                  </template>
                </el-table-column>
                <el-table-column label="显示内容">
                  <template slot-scope="scope">
                    <ht-input
                      v-model="scope.row.value_"
                      :maxlength="50"
                      show-word-limit
                      validate="required"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" @click="removeSetting(scope.$index)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-form>
          </div>
          <el-form
            v-else-if="selectedRow.formatterType === '4'"
            class="data-dictionary-form"
          >
            <ht-form-item label="数据字典选项">
              <Treeselect
                v-model="selectedRow.dataDictionary"
                :normalizer="normalizer"
                @select="dicNodeClick"
                :multiple="false"
                :appendToBody="true"
                :options="dataDictionaryOption"
                noOptionsText="暂无数据 "
                noChildrenText=" "
                placeholder="请选择"
                style="width: 80%"
                :disable-branch-nodes="true"
              />
            </ht-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="设置链接" name="url">
          <el-form
            v-form="{inputsDisplay: 'block', formItemAlign: 'right'}"
            label-width="120px"
            data-vv-scope="settingForm"
          >
            <ht-form-item label="链接类型">
              <el-radio-group
                v-model="selectedRow.urlType"
                @change="$forceUpdate()"
              >
                <el-radio label="edit">查询明细</el-radio>
                <el-radio label="reportForm"
                  >选择其它报表
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="该配置项移动端无效"
                    placement="top"
                  >
                    <i
                      class="icon-my-todo-comment"
                      style="color:#409EFF;margin-left:8px"
                    ></i>
                  </el-tooltip>
                </el-radio>
                <el-radio label="url">URL地址</el-radio>
                <!-- <el-radio label="noUrl">无链接</el-radio> -->
              </el-radio-group>
              <el-button
                size="mini"
                style="margin-right: 50px; float: right"
                @click="clearUrlType"
                >清除</el-button
              >
            </ht-form-item>
            <template v-if="selectedRow.urlType === 'url'">
              <ht-form-item label="pc地址">
                <ht-input
                  v-model="selectedRow.url"
                  clearable
                  placeholder="请输入url地址"
                  validate="required"
                />
              </ht-form-item>
              <ht-form-item label="移动端地址">
                <ht-input
                  v-model="selectedRow.mobileUrl"
                  clearable
                  placeholder="请输入url地址"
                />
              </ht-form-item>
              <ht-form-item label="追加参数">
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  @click="urlParamsAdd()"
                  >添加</el-button
                >
                <el-table :data="urlParams" class="params-table" border>
                  <el-table-column prop="name" label="参数名">
                    <template slot-scope="{row}">
                      <ht-input
                        size="mini"
                        type="text"
                        v-model="row.name"
                        :maxlength="50"
                        show-word-limit
                        :validate="{
                          required: true,
                          regex: {
                            exp: '^[a-zA-Z][a-zA-Z0-9_]+$',
                            message:
                              '参数名以字母开头，且只能包含字母、数字和下划线'
                          }
                        }"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column prop="field" label="取值列">
                    <template slot-scope="{row}">
                      <ht-select
                        value-key="name"
                        v-model="row.field"
                        validate="required"
                        :options="formVariables"
                        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.fields"
                              :key="item.name"
                              :label="item.desc"
                              :value="item.name"
                            >
                              <span style="float: left">{{
                                item.desc +
                                  '(' +
                                  item.name +
                                  ')' +
                                  '(' +
                                  item.type +
                                  ')'
                              }}</span>
                            </el-option>
                          </el-option-group>
                        </template>
                      </ht-select>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="{row}">
                      <el-button type="text" @click="urlParamsRemove(row)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                  <template slot="empty">
                    <el-empty
                      :image="tableNoDataImg"
                      :image-size="122"
                    ></el-empty>
                  </template>
                </el-table>
              </ht-form-item>
            </template>
            <ht-form-item
              label="选择报表"
              v-if="selectedRow.urlType == 'reportForm'"
            >
              <ht-input
                type="text"
                @focus="showDataTemplateDialog"
                placeholder="请选择报表"
                v-model="reportName"
                :validate="{
                  required: errorsStatus
                }"
              >
                <el-button
                  slot="append"
                  type="primary"
                  icon="el-icon-search"
                  @click="showDataTemplateDialog"
                  >选择</el-button
                >
              </ht-input>
            </ht-form-item>
            <!-- conditionField.length > 0 && -->
            <ht-form-item
              label="参数关系"
              v-if="selectedRow.urlType == 'reportForm' && reportName"
            >
              <template>
                <el-table
                  :data="conditionField"
                  max-height="250"
                  border
                  style="width: 100%"
                >
                  <el-table-column
                    prop="sourceField"
                    :label="dataTemplateName"
                    align="center"
                    min-width="230"
                  >
                    <template slot-scope="scope">
                      <ht-select
                        value-key="name"
                        v-model="scope.row.parameter"
                        validate="required"
                        :options="formVariables"
                      >
                        <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.fields"
                              :key="item.name"
                              :label="item.desc"
                              :value="item.name"
                            >
                              <span style="float: left">{{
                                item.desc + '(' + item.name + ')'
                              }}</span>
                            </el-option>
                          </el-option-group>
                        </template>
                      </ht-select>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="targetField"
                    :label="formData.report.name"
                    align="center"
                    min-width="230"
                  >
                    <template slot-scope="scope">
                      <ht-select
                        v-model="scope.row.key"
                        validate="required"
                        :options="targetFieldOptionList"
                      ></ht-select>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="right">
                    <template slot="header" slot-scope="scope">
                      <el-button
                        size="mini"
                        icon="el-icon-plus"
                        @click="handleAdd(scope.$index, scope.row)"
                        >增加</el-button
                      >
                    </template>
                    <template slot-scope="scope">
                      <el-button
                        size="mini"
                        type="danger"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </template>
              <!-- <el-table :data="conditionField">
                <el-table-column :label="data.data.name">
                  <template slot-scope="scope">
                    <ht-select
                      v-model="scope.row.parameter"
                      :props="{key: 'name', value: 'desc'}"
                      :options="displayFields[0].children"
                    >
                    </ht-select>
                  </template>
                </el-table-column>
                <el-table-column :label="reportName">
                  <template slot-scope="scope">
                    <ht-select
                      v-model="scope.row.key"
                      :options="conditionField"

                    >
                    </ht-select>
                  </template>
                </el-table-column>
              </el-table> -->
            </ht-form-item>
            <ht-form-item label="打开方式">
              <template #label>
                <span>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="该配置项移动端无效"
                    placement="top"
                  >
                    <i
                      class="icon-my-todo-comment"
                      style="color:#409EFF;margin-right:8px"
                    ></i>
                  </el-tooltip>
                  打开方式
                </span>
              </template>
              <el-radio-group
                v-model="selectedRow.openType"
                @change="$forceUpdate()"
              >
                <el-radio label="old">当前页面打开</el-radio>
                <el-radio label="new">新窗口打开</el-radio>
                <el-radio label="dialog">弹窗打开</el-radio>
              </el-radio-group>
              <!-- <el-button
                size="mini"
                style="margin-right: 50px; float: right"
                @click="clearOpenType"
                >清除</el-button
              > -->
            </ht-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="显示设置" name="showSetting">
          <el-button
            type="primary"
            class="el-icon-plus"
            @click="addProSetting"
            style="margin: 14px 0 16px 0"
            >添加</el-button
          >
          <span style="margin: 0 5px 0 20px" v-if="selectedRow.type == 'number'"
            >进度条</span
          >
          <el-switch
            v-model="proSetting2"
            v-if="selectedRow.type == 'number'"
            @change="proSwitchChange"
            style="margin-right: 20px"
          >
          </el-switch>
          <el-radio-group
            v-if="proSetting2"
            style="width: 150px"
            v-model="selectedRow.ruleSetting"
          >
            <el-radio :label="100">按100计算</el-radio>
            <el-radio :label="10">按10计算</el-radio>
            <el-radio :label="1">按1计算</el-radio>
            <el-radio :label="selectedRow.diyProRule">输入统计总数</el-radio>
          </el-radio-group>
          <!--  <ht-radio
            v-model="selectedRow.ruleSetting"
            v-if="proSetting2"
            :options="calOptions"
            style="width: 150px"
          /> -->
          <el-input-number
            v-model="selectedRow.diyProRule"
            v-if="proSetting2"
            :controls="false"
            size="mini"
            @change="diyProRuleChange"
          />
          <br />
          <el-table
            :data="selectedRow.ruleSettings"
            border
            style="margin-top: 3px"
          >
            <el-table-column label="文字颜色">
              <template slot-scope="scope">
                <el-color-picker v-model="scope.row.proColor" />
              </template>
            </el-table-column>
            <el-table-column label="规则设置">
              <template slot-scope="scope">
                <!--<el-input v-model="scope.row.proRule" />-->
                <el-button
                  @click="
                    showRuleSettingDialog(scope.row.proRule, scope.$index)
                  "
                  icon="icon-setup"
                  >规则设置</el-button
                >
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="removeProSetting(scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
            <template slot="empty">
              <el-empty :image="tableNoDataImg" :image-size="122"></el-empty>
            </template>
          </el-table>
          <div class="is-required-class">
            注：若多条规则均返回true时，采用最后一条规则的文字颜色。
          </div>
        </el-tab-pane>
        <el-tab-pane label="脱敏设置" name="desensitization">
          <el-form class="desensitizationForm" data-vv-scope="settingForm">
            <ht-form-item label-width="150px">
              <template slot="label">
                <el-tooltip placement="right">
                  <div slot="content">
                    如果配置了格式化和显示设置，可能会导致脱敏无效
                  </div>
                  <i class="icon-question" style="margin-right: 8px" />
                </el-tooltip>
                <span>是否设置脱敏</span>
              </template>
              <el-switch
                v-model="selectedRow.isDesensitization"
                :active-value="true"
                :inactive-value="false"
                active-text="是"
                inactive-text="否"
              >
              </el-switch>
            </ht-form-item>
            <div v-if="selectedRow.isDesensitization">
              <ht-form-item label-width="120px">
                <template slot="label">
                  <el-tooltip placement="right">
                    <div slot="content">
                      掩码规则,将该字段的开始位置到结束位置的根据填字符替换
                    </div>
                    <i class="icon-question" style="margin-right: 8px" />
                  </el-tooltip>
                  <span>脱敏规则</span>
                </template>
                <el-tooltip content="掩码开始位置" placement="top">
                  <ht-input
                    type="number"
                    v-model="desensitizationForm.startPosition"
                    autocomplete="off"
                    :min="1"
                    placeholder="开始位置"
                    :validate="{
                      required: true,
                      method: {
                        callback: checkStartPosition,
                        message: '掩码开始位置必须小于或等于结束位置'
                      }
                    }"
                  ></ht-input>
                </el-tooltip>
                <el-tooltip content="掩码结束位置" placement="top">
                  <ht-input
                    type="number"
                    v-model="desensitizationForm.endPosition"
                    autocomplete="off"
                    :min="1"
                    :validate="{
                      required: true,
                      method: {
                        callback: checkEndPosition,
                        message: '掩码结束位置必须大于或等于开始位置'
                      }
                    }"
                    placeholder="结束位置"
                  ></ht-input>
                </el-tooltip>
                <el-tooltip content="掩码填充符" placement="top">
                  <ht-select
                    v-model="desensitizationForm.pad"
                    autocomplete="off"
                    :clearable="false"
                    :options="[
                      {key: '*', value: '*'},
                      {key: '_', value: '_'},
                      {key: '.', value: '.'},
                      {key: '#', value: '#'}
                    ]"
                    style="width: 120px"
                    placeholder="填充字符默认为*"
                  />
                </el-tooltip>
              </ht-form-item>
              <ht-form-item label="脱敏说明" label-width="120px">
                <ht-input
                  v-model="desensitizationForm.desensitizationDesc"
                  type="textarea"
                  :rows="3"
                  style="width: 100%"
                  placeholder="请输入"
                  autocomplete="off"
                ></ht-input>
              </ht-form-item>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="组件设置" name="componentSetting">
          <el-tag>
            <span style="color: #7a59159e">插槽组件默认根路径为”components/tableSlot“， 为了避免混乱请先以模块名称新建文件夹， 然后以字段名称命名（如”test/Test.vue“【产品表/产品标题插槽组件】【vue文件大写开头】）- 案例：TestTest</span>
          </el-tag>
          <table style='margin-top: 10px;' class="form-table" cellspacing="0" cellpadding="0" border="0">
            <tbody>
            <tr>
              <td>组件路径</td>
              <td>
                <el-input
                    v-model="selectedRow.componentSetting"
                    placeholder="输入组件路径（vue文件大写开头）"
                ></el-input>
              </td>
            </tr>
            </tbody>
          </table>
        </el-tab-pane>
      </el-tabs>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelSetting">取 消</el-button>
        <el-button type="primary" @click="dialogOk">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="配置SQL"
      :visible.sync="sqlConfigDialog"
      v-if="sqlConfigDialog"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form
        :model="sqlConfigRow"
        :rules="sqlConfigRowRules"
        ref="sqlConfigRowRef"
      >
        <el-form-item label="注释" prop="desc" required>
          <el-input v-model="sqlConfigRow.desc" />
        </el-form-item>
        <el-form-item label="字段别名" prop="originalName" required>
          <el-input v-model="sqlConfigRow.originalName" />
        </el-form-item>
        <el-form-item label="子查询" prop="sql" required>
          <el-input type="textarea" v-model="sqlConfigRow.sql" />
        </el-form-item>
      </el-form>

      <div>
        此处写的SQL，会动态的插入到原执行SQL语句中，故请详细阅读规则:<br />
        <span>①</span
        >因为SQL拼接位置为SELECT当中，语句最前面需要拼接一个逗号。<br />
        <span>②</span>最后取别名的时候一定要取与列的列名（name）一样的。<br />
        <span>③</span
        >查询字段不要用*，只查询一个字段,并且返回值只能为一个。<br />
        <span>④</span>只能查询同数据库下的表。<br />
        <span class="is-required-class">参考案例:</span>
        <span style="margin-left: 10px"
          >,( SELECT uc_user.account_ FROM uc_user WHERE uc_user.id_ = '1' ) AS
          "userAccount" </span
        ><br />
        <span>⑤</span>字段别名不能与显示列表的字段别名重复。<br />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="
            sqlConfigDialog = false
            sql = ''
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="sqlConfigOk()">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="配置规则"
      :visible.sync="isShowRuleSettingDialog"
      append-to-body
      class="urgent-text"
      :close-on-click-modal="false"
      :destroy-on-close="true"
    >
      <div style="margin-top: 10px; margin-bottom: 25px">
        <code>
          <span style="color: red; margin-left: 15px"
            >编辑的脚本内容会直接填充到function(data){...}里面；data是表单数据对象，可以通过data.{显示字段列名}来获取字段的值。</span
          >
          <br />
          <span style="color: red; margin-left: 15px"
            >返回true时按此规则的文字颜色来显示。</span
          >
          <br />
          <span style="color: red; margin-left: 15px">
            例如： if(data.fieldName && data.fieldName == '张三' ){ return true;
            }else{ return false; }
          </span>
        </code>
      </div>
      <div style="width: 100%; height: 100%">
        <codemirror
          ref="scriptText"
          v-model="dialogRuleData"
          :options="cmOptions"
          class="code"
          style="width: 99%; height: 100%"
        ></codemirror>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowRuleSettingDialog = false">取 消</el-button>
        <el-button type="primary" @click="methodOk()">确 定</el-button>
      </div>
    </el-dialog>

    <eip-data-template-dialog
      :appendToBody="true"
      ref="dataTemplateDialog"
      :single="true"
      @onConfirm="reportDialogOnConfirm"
    ></eip-data-template-dialog>
    <!-- @onConfirm="onDataTemplateConfirm" -->
    <div
      id="perTreeMenu"
      v-if="tmDisplay"
      class="tree_menu"
      :style="{...rightMenu}"
    >
      <ul>
        <li
          @click="() => addMultiTableHeader(currentNode, currentData)"
          v-if="!currentData.name"
        >
          添加下级表头
        </li>
        <li @click="() => remove(currentNode, currentData)">删除 delete</li>
        <li
          @click="() => setFieldRightDialog(currentData)"
          v-if="currentData.name"
        >
          授权 alt+p
        </li>
        <li @click="() => setting(currentData)" v-if="currentData.name">
          显示设置 alt+c
        </li>
        <li
          @click="() => mobileIsDisplay(currentData, '1')"
          v-if="
            currentData.name &&
              (currentData.mpDisplay == '2' || !currentData.mpDisplay)
          "
        >
          移动端显示 alt+m+k
        </li>
        <li
          @click="() => mobileIsDisplay(currentData, '2')"
          v-if="currentData.name && currentData.mpDisplay == '1'"
        >
          移动端隐藏 alt+m+l
        </li>
        <li
          @click="() => sqlDialogShow(currentData)"
          v-if="currentData.customColumn"
        >
          SQL设置 alt+s+q+l
        </li>
      </ul>
    </div>
    <i18n-message-edit
      ref="i18nMessageEdit"
      :messageKey="i18nMessageKey"
      @after-save="afterSaveI18n"
    />
  </el-container>
</template>

<script>
import {mapState, mapGetters} from 'vuex'
import form from '@/api/form.js'
const eipAuthDialog = () => import('@/components/dialog/EipAuthDialog.vue')
const EipDataTemplateDialog = () =>
  import('@/components/dialog/EipDataTemplateDialog.vue')
const dynamicTable = () =>
  import('@/components/form/multiTableHeader/DynamicTable.vue')
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import i18nMessageEdit from '@/components/system/I18nMessageEdit.vue'
import utils from '@/hotent-ui-util.js'

export default {
  components: {
    eipAuthDialog,
    EipDataTemplateDialog,
    dynamicTable,
    Treeselect,
    i18nMessageEdit
  },
  name: 'display-setting',
  props: ['data', 'operateStatus', 'dataTemplateName'],

  data() {
    return {
      validateTree: true,
      sqlConfigRowRules: {
        desc: [{required: true, message: '必填'}],
        originalName: [{required: true, message: '必填'}],
        sql: [{required: true, message: '必填'}]
      },
      checkAll: false,
      isIndeterminate: false,
      isDisabled: false,
      activeName: 'formatter',
      reportName: '',
      showDynamicTable: true,
      conditionField: [],
      dataTemplate: {},
      // displaySettingFields: [],
      displayFields: [],
      permissionMap: {},
      permissionList: [],
      rightList: [
        {key: '', value: '请选择'},
        {key: 'none', value: '无'},
        {key: 'everyone', value: '所有人'}
      ],
      tabHeight: `${document.documentElement.clientHeight}` - 245,
      currentAuthRow: null,
      settingVisible: false,
      selectedRow: {
        formatterType: '',
        fielType: '1',
        dataDictionary: '',
        urlType: 'edit',
        openType: 'old',
        isDesensitization: false,
        desensitizationRules: null
      },
      desensitizationForm: {
        startPosition: 1,
        endPosition: 1,
        pad: '*',
        desensitizationDesc: ''
      },
      proSetting2: true,
      formFieldList: [],
      urlParams: [],
      defaultRight: '[{"type":"everyone","id":"","name":"","script":""}]',
      sqlConfigDialog: false,
      sql: '',
      sqlConfigRow: {sql: '', originalName: '', desc: ''},
      isShowRuleSettingDialog: false,
      cmOptions: {
        value: '        ',
        mode: 'javascript',
        readOnly: false,
        tabSize: 3,
        theme: 'base16-light',
        lineNumbers: true,
        line: true
      },
      errorsStatus: true,
      diyScript: '',
      ruleSettingIndex: '',
      dialogRuleData: '',
      drawer: false,
      headerTitle: '',
      selectedFields: null,
      isEditor: true,
      tmDisplay: false,
      rightMenu: null,
      currentNode: null,
      currentData: null,
      alignOptions: [
        {key: 'left', value: '居左'},
        {key: 'center', value: '居中'},
        {key: 'right', value: '居右'}
      ],
      formData: {
        report: {
          id: '',
          name: '',
          key: ''
        },
        boDefKey: ''
      },
      targetFieldOptions: [],
      addAction: false,
      dragStart: null,
      rowBeforeSet: {formatterType: '1', fielType: '1'},
      noDataImg: require('@/assets/nodata_images/no-data.png'),
      selectedNodesData: [],
      dataDictionaryOption: [],
      dicDefaultProps: {
        children: 'children',
        label: 'name'
      },
      tableNoDataImg: require('@/assets/nodata_images/table-no-data.png'),
      // 含主键和外键的主表与关联表列
      tablesContainsPk: [],
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children:
            node.children && node.children.length > 0 ? node.children : 0, // 过滤掉children为null或[]
          isDefaultExpanded: false,
          isDisabled:
            node.hasOwnProperty('typeGroupKey') &&
            node.children &&
            node.children.length === 0
        }
      },
      i18nMessageKey: '',
      tooltipDis: false, //气泡是否可用
      displayFieldsNew: [],
      mobileListTitle: '',
      mobileDisplayFieldList: [],
      mobileShowStatus: ''
    }
  },
  computed: {
    ...mapGetters('form', {
      displaySettingFields: 'displayFormListCommonVar'
    }),
    calOptions: function() {
      return [
        {key: 100, value: '按100计算'},
        {key: 10, value: '按10计算'},
        {key: 1, value: '按1计算'},
        {key: this.selectedRow.diyProRule, value: '输入统计总数'}
      ]
    },
    formVariables() {
      return this.displaySettingFields.map(item => {
        return {
          ...item,
          fields: item.fields.map(it => {
            const fieldName = it.oldTableField
              ? `${it.tableName}${it.oldTableField}`
              : it.name
            return {
              ...it,
              name: it.oldTableField
                ? fieldName.toLowerCase().replaceAll('_', '')
                : fieldName
            }
          })
        }
      })
    },
    targetFieldOptionList() {
      return this.targetFieldOptions.filter(i => {
        return !['id_', 'ref_id_', 'form_data_rev_'].includes(i.key)
      })
    }
  },
  watch: {
    displayFields: {
      handler(val) {
        this.isDisabled = val && val.length < 1 ? true : false
        this.mobileDisplayFieldList = utils
          .nest2tile(val)
          .filter(item => item.mpDisplay === '1')
        this.mobileListTitle = this.findTargetObj('isTitle')
          ? this.findTargetObj('isTitle').name
          : ''
        this.mobileShowStatus = this.findTargetObj('isStatus')
          ? this.findTargetObj('isStatus').name
          : ''
      },
      deep: true
    },
    mobileDisplayFieldList: {
      handler(val) {
        if (val && val.length < 1) {
          this.mobileListTitle = ''
          this.mobileShowStatus = ''
        }
      }
    },
    'selectedRow.formatterType': {
      handler(val) {
        if (val == '4') {
          this.dicClick()
        }
      },
      deep: true
    },
    'sqlConfigRow.originalName': {
      handler(val) {
        this.sqlConfigRow.name = val.toLowerCase()
      }
    },
    'selectedRow.isDesensitization': {
      handler(val) {
        if (!val) {
          this.desensitizationForm = {
            startPosition: 1,
            endPosition: 1,
            pad: '*',
            desensitizationDesc: ''
          }
        }
      },
      deep: true
    },
    settingVisible: {
      handler(val) {
        if (val) {
          this.activeName = 'formatter'
        } else {
          this.selectedRow = {}
        }
      },
      immediate: true
    },
    activeName: {
      handler(val) {
        if (val == 'url') {
          this.formData = {
            report: {
              id: '',
              name: '',
              key: ''
            },
            boDefKey: ''
          }
          this.reportName = ''
          this.conditionField = []
          this.targetFieldOptions = []
          let data = this.selectedRow.reportNameConfigure
          if (data) {
            this.formData.report.key = data.alias ? data.alias : ''
            this.formData.report.name = data.reportName ? data.reportName : ''
            this.formData.boDefKey = data.boDefKey ? data.boDefKey : ''
            this.formData.formField = data.formField ? data.formField : ''
            this.conditionField = data.conditionField || []
            this.reportName = data.reportName || ''
            if (data.boDefKey) {
              this.updateTargetFieldOptions({
                boDefAlias: data.boDefKey,
                formField: data.formField
              })
            }
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.dataTemplate = this.data.bpmDataTemplate
    this.templates = this.data.templates
    this.permissionMap = this.data.permissionList
    this.initData()
    this.keyCodeForEvent()
    this.checkPkKeyTables([...this.data.fields])
  },
  methods: {
    findTargetObj(type) {
      return utils.nest2tile(this.displayFields).find(item => item[type])
    },
    isShowSet(data) {
      return (
        (data.ruleSettings && data.ruleSettings.length > 0) ||
        (data.formatterData && data.formatterData.length > 0) ||
        data.proSetting ||
        (data.urlType && data.urlType != 'noUrl') ||
        ['2', '3'].includes(data.formatterType) ||
        data.dataDictionary ||
        data.isDesensitization ||
        data.componentSetting
      )
    },
    //掩码开始位置校验
    checkStartPosition(value, args) {
      return new Promise(resolve => {
        setTimeout(() => {
          const {endPosition} = this.desensitizationForm
          if (
            Number(endPosition) &&
            Number(value) &&
            Number(value) <= Number(endPosition)
          ) {
            resolve(true)
          } else {
            resolve(false)
          }
        }, 300)
      })
    },
    //掩码结束位置校验
    checkEndPosition(value, args) {
      return new Promise(resolve => {
        setTimeout(() => {
          const {startPosition} = this.desensitizationForm
          if (
            Number(startPosition) &&
            Number(value) &&
            Number(value) >= Number(startPosition)
          ) {
            resolve(true)
          } else {
            resolve(false)
          }
        }, 300)
      })
    },
    //所有字段的选项，包括主键、外键和流程字段
    checkPkKeyTables(tablesSrc) {
      //深度复制
      this.tablesContainsPk = JSON.parse(JSON.stringify(tablesSrc))
      const pkKey = 'id_'
      const fk = 'ref_id_'
      let appendOptions = [
        {
          name: pkKey,
          desc: '主键',
          type: 'varchar',
          colPrefix: ''
        },
        {
          name: fk,
          desc: '外键',
          type: 'varchar',
          colPrefix: ''
        }
      ]
      this.tablesContainsPk.forEach(table => {
        let tableNew = {}
        tableNew.name = table.name
        tableNew.desc = table.desc

        let hasPkKey = false
        table.fields.forEach(item => {
          if (item.name === pkKey) {
            hasPkKey = true
          }
        })
        if (!hasPkKey) {
          table.fields = appendOptions.concat(table.fields)
        }
      })
    },
    clearFormatterData(val) {
      // this.selectedRow.formatterData = []
      if (val != '1') {
        this.$set(this.selectedRow, 'formatterData', [])
      }
    },
    dicClick(visible) {
      if (this.dataDictionaryOption && this.dataDictionaryOption.length > 0)
        return
      form.getCategory('DIC', data => {
        this.dataDictionaryOption = data.data
      })
    },
    dicNodeClick(data) {
      this.$set(this.selectedRow, 'dataDictionaryKey', data.typeKey)
      this.$set(this.selectedRow, 'dataDictionary', data.id)
      // this.$refs.dicSelect.blur()
      this.getDic()
    },
    //获取字典分类下的键值对
    getDic() {
      this.selectedRow.formatterData = []
      if (this.selectedRow.dataDictionaryKey) {
        this.$requestConfig
          .getDictionaryByKey(this.selectedRow.dataDictionaryKey)
          .then(
            resp => {
              for (let i = 0; i < resp.length; i++) {
                const {key, name} = resp[i]
                this.selectedRow.formatterData.push({
                  key_: key,
                  value_: name
                })
                this.getChildren(resp[i], this.selectedRow.formatterData)
              }
            },
            error => {
              reject(error)
            }
          )
      }
    },
    getChildren(parent, dataOut) {
      if (parent && parent.children) {
        parent.children.forEach(child => {
          const {key, name} = child
          dataOut.push({
            key_: key,
            value_: name
          })
          this.getChildren(child, dataOut)
        })
      }
    },
    handleCheck(node, list) {
      const currentCheckedNode = list.checkedNodes.filter(item => item.fielType)
      if (this.displayFields.length === currentCheckedNode.length) {
        this.checkAll = true
        this.isIndeterminate = false
      } else if (
        this.displayFields.length > currentCheckedNode.length &&
        currentCheckedNode.length > 0
      ) {
        this.isIndeterminate = true
      } else {
        this.isIndeterminate = false
      }
    },
    handleCheckAllChange(val) {
      this.isIndeterminate = false
      this.checkAll = val
      this.$refs.displaySettingTree.$refs.elTree.setCheckedNodes(
        val ? this.displayFields : []
      )
    },
    getCurrentCheckedNodes() {
      return this.$refs.displaySettingTree.$refs.elTree.getCheckedNodes() || []
    },
    setIsIndeterminate() {
      if (this.getCurrentCheckedNodes().length > 0) {
        this.isIndeterminate = true
      }
    },
    handleDeleteSelected() {
      const selectedNode = this.getCurrentCheckedNodes()
      if (selectedNode.length < 1)
        return this.$message.warning('请选择一条数据或多条数据')
      this.displayFields = this.filterDeleteTree(
        [...this.displayFields],
        selectedNode
      )
    },
    filterDeleteTree(data, selectNode) {
      var newTree = data.filter(x => {
        let flag = true
        selectNode.forEach(item => {
          if (item.id === x.id) {
            flag = false
          }
        })
        return flag
      })
      newTree.forEach(
        x =>
          x.children &&
          (x.children = this.filterDeleteTree(x.children, selectNode))
      )
      return newTree
    },
    handleBatchMobile() {
      if (this.getCurrentCheckedNodes().length < 1)
        return this.$message.warning('请选择一条数据或多条数据')
      this.getCurrentCheckedNodes().map(item => {
        this.$set(item, 'mpDisplay', item.mpDisplay === '1' ? '2' : '1')
      })
    },
    handleBatchAuthorization() {
      const selectedNode = this.getCurrentCheckedNodes()
      if (selectedNode.length < 1)
        return this.$message.warning('请选择一条数据或多条数据')
      const multiLevelHead = selectedNode.filter(item => !item.name)
      if (multiLevelHead && multiLevelHead.length > 0) {
        this.$message.warning(
          `有${multiLevelHead.length}条数据是多级表头节点没有该设置`
        )
      }
      this.selectedNodesData = selectedNode.filter(item => item.name)
      const conf = {
        right: JSON.parse(this.selectedNodesData[0].right),
        permissionList: this.permissionList
      }
      this.currentAuthRow = 'all'
      this.$refs.eipAuthDialog.showDialog(conf)
    },
    handleDeleteAll() {
      this.displayFields = []
    },
    //模拟组合键触发函数
    keyCodeForEvent() {
      let self = this
      let code = 0
      let code2 = 0
      let code3 = 0
      let code4 = 0
      document.onkeydown = e => {
        let evn = e || event
        let key = evn.keyCode || evn.which || evn.charCode
        // 删除
        if (key === 46) {
          this.remove(this.currentNode, this.currentData)
        }
        // alt key
        if (key === 18) {
          code = 18
        }
        // p key
        if (key === 80) {
          code2 = 80
        }
        // c key
        if (key === 67) {
          code2 = 67
        }
        // s key
        if (key === 83) {
          code2 = 83
        }
        // m key
        if (key === 77) {
          code2 = 77
        }
        // k key
        if (key === 75) {
          code3 = 75
        }
        // L key
        if (key === 76) {
          code3 = 76
        }

        // Q key
        if (key === 81) {
          code4 = 81
        }

        // alt + p
        if (code == 18 && code2 == 80) {
          this.setFieldRightDialog(this.currentData)
        }

        // alt + m
        if (code == 18 && code2 == 77) {
          // k
          if (code3 == 75) {
            this.mobileIsDisplay(this.currentData, '1')
          }
          // L
          if (code3 == 76) {
            this.mobileIsDisplay(this.currentData, '2')
          }
        }
        // alt + s + q + l
        if (code == 18 && code2 == 83 && code3 == 76 && code4 == 81) {
          this.sqlDialogShow(this.currentData)
        }
        // alt + c
        if (code == 18 && code2 == 67) {
          this.setting(this.currentData)
        }
      }
      document.onkeyup = function(e) {
        let evn = e || event
        let key = evn.keyCode || evn.which || evn.charCode
        // alt keyup
        if (key === 18) {
          code = 0
        }
        // p keyup
        if (key === 80) {
          code2 = 0
        }
        // c keyup
        if (key === 67) {
          code2 = 0
        }
        // s keyup
        if (key === 83) {
          code2 = 0
        }
        // m keyup
        if (key === 77) {
          code2 = 0
        }
        // k keyup
        if (key === 75) {
          code3 = 0
        }
        // L keyup
        if (key === 76) {
          code3 = 0
        }

        // Q keyup
        if (key === 81) {
          code4 = 0
        }
      }
    },
    showMultiTableHeader() {
      this.$refs.multiTableHeaderSetting.showDrawer()
    },
    dialogOk() {
      utils
        .validateForm(this, 'settingForm')
        .then(r => {
          var conditionField = this.conditionField

          let isDislogClose = true
          this.selectedRow.parameter = []
          conditionField.forEach(item => {
            this.selectedRow.parameter.push({
              property: item.key,
              value: item.parameter,
              group: 'main',
              operation: item.qt || 'EQUAL',
              relation: 'AND'
            })
          })

          this.selectedRow.reportNameConfigure = {
            alias: this.formData.report.key,
            reportName: this.formData.report.name,
            boDefKey: this.formData.boDefKey,
            formField: this.formData.formField,
            conditionField: this.conditionField
          }

          //如果是数据字典，给formatterData赋值为分类下的项
          if (this.selectedRow.formatterType === '4') {
            if (!this.selectedRow.dataDictionary) {
              this.$message.error(`请选择数据字典选项`)
              return false
            }
            // this.getDic()
          }
          if (this.selectedRow.urlType == 'url' && this.urlParams) {
            this.urlParams.forEach(param => {
              const reg = /^[a-zA-Z][a-zA-Z0-9_]+$/
              if (param.name && !reg.test(param.name)) {
                isDislogClose = false
                this.$message.warning(
                  '参数名以字母开头，且只能包含字母、数字和下划线！'
                )
              }
            })
            if (isDislogClose) {
              this.selectedRow.urlParams = [...this.urlParams]
              this.urlParams = []
            }
          }
          if (this.selectedRow.isDesensitization) {
            this.selectedRow.desensitizationRules = this.desensitizationForm
          }
          if (isDislogClose) {
            this.settingVisible = false
          }
          let newArray = _.cloneDeep(this.displayFields)
          let data = this.displayFieldsSet(newArray, this.selectedRow)
          this.$set(this, 'displayFields', data)
        })
        .catch(items => {
          this.$message.error(
            `有${items.length}个字段未通过校验，请正确填写表单内容。`
          )
        })
    },
    displayFieldsSet(data, updata) {
      for (let i = 0, len = data.length; i < len; i++) {
        if (data[i].children) {
          this.displayFieldsSet(data[i].children, updata)
        }
        if (data[i].name === updata.name) {
          data[i] = updata
        }
      }
      return data
    },
    //获取已选择报表的表单数据-是否为外部表单
    updateTargetFieldOptions(dataTemplate) {
      var me_ = this
      this.$http
        .get(
          '${form}/bo/def/v1/getJsonByAlias?alias=' + dataTemplate.boDefAlias
        )
        .then(function(resp) {
          if (resp.data) {
            var boDef = resp.data
            me_.targetFieldOptions = []
            //选择报表后查询报表所对应表单的字段
            let formField = dataTemplate.formField
              ? JSON.parse(dataTemplate.formField)
              : []

            var isExternal = boDef && boDef.boEnt.isExternal
            for (let i = 0; i < formField.length; i++) {
              let field = formField[i]
              if (!me_.existsOption(me_.targetFieldOptions, field.name)) {
                me_.targetFieldOptions.push({
                  key: isExternal ? field.oldTableField : field.name,
                  value: field.desc
                })
              }
            }

            me_.$forceUpdate()
          }
        })
    },
    //判断下拉选项中是否含有某个字段
    existsOption(options, key) {
      return options.some(item => item.key === key)
    },
    //选择报表后确认回调
    reportDialogOnConfirm(data) {
      //单选，只取第一条数据
      if (data && data.length > 0) {
        this.errorsStatus = false
        let d = data[0]
        this.reportName = d.name
        this.formData.report.name = d.name
        this.formData.report.id = d.id
        this.formData.report.key = d.alias
        this.formData.boDefKey = d.boDefAlias
        this.formData.formField = d.formField
        setTimeout(() => {
          this.errorsStatus = true
        }, 50),
          this.updateTargetFieldOptions(d)
      }

      //反射字段清空
      this.conditionField = []
    },
    //添加一行
    handleAdd(index, row) {
      let d = {parameter: '', key: ''}
      this.conditionField.push(d)
    },
    //删除一行
    handleDelete(index, row) {
      this.conditionField.splice(index, 1)
    },
    onDataTemplateConfirm(selectedNode) {
      if (selectedNode && selectedNode.length > 0) {
        this.$nextTick(() => {
          this.conditionField = []
          var conditionField = JSON.parse(selectedNode[0].conditionField)
          conditionField.forEach(item => {
            var obj = {
              key: item.colPrefix + item.name,
              parameter: '',
              qt: item.qt,
              value: item.cm
            }
            this.conditionField.push(obj)
          })
          this.reportName = selectedNode[0].name
          this.selectedRow.reportNameConfigure = {
            alias: selectedNode[0].alias,
            reportName: selectedNode[0].name,
            conditionField: this.conditionField
          }
        })
      } else {
        this.reportName = ''
        this.conditionField = []
        this.selectedRow.reportNameConfigure = {}
      }
    },
    fib(val) {
      let list = val.map(item => {
        if (item.children) {
          this.fib(item.children)
        }
        if (item && item.name) {
          item.name = item.name.toLowerCase()
          if (item.name === this.mobileListTitle) {
            item.isTitle = true
          }
          if (item.name === this.mobileShowStatus) {
            item.isStatus = true
          }
        }
        return item
      })
      return list
    },
    validateLoopFn(arrs) {
      const arr = arrs || this.displayFields
      if (arr && arr.length) {
        for (let i = 0; i < arr.length; i++) {
          const field = arr[i]
          if (!field.desc) {
            // this.$message.error(`显示字段不能为空！`)
            this.validateTree = false
            return false
          }
          if (field.desc && field.children && field.children.length) {
            if (!this.validateLoopFn(field.children)) return false
          }
        }
      }
      this.validateTree = true
      return true
    },
    //保存显示列数据
    saveDisplayField() {
      this.displayFields = this.fib(this.displayFields)
      // this.dataTemplate.mobileDisplayFieldList = this.mobileDisplayFieldList
      this.dataTemplate.mobileListTitle = this.mobileListTitle
      this.dataTemplate.mobileShowStatus = this.mobileShowStatus
      this.dataTemplate.displayField = this.displayFields
        ? JSON.stringify(this.displayFields)
        : null
    },
    //初始化处理
    initData() {
      if (this.dataTemplate.displayField) {
        let displayFields = JSON.parse(this.dataTemplate.displayField)
        displayFields.forEach(item => {
          if (!item.formatterType) {
            item.formatterType = ''
            item.fielType = '1'
          }
        })
        if (this.operateStatus == 'add') {
          this.displayFieldsNew = displayFields.filter(item => {
            return (
              !['ID_', 'REF_ID_', 'F_form_data_rev_'].includes(
                item.oldTableField
              ) && item.flowField != true
            )
          })
        } else {
          this.displayFieldsNew = displayFields
        }
        this.displayFields = this.displayFieldsNew.map((item, index) => {
          return {
            ...item,
            align: item.align ? item.align : 'center',
            id: item.name
              ? item.name
              : item.desc
              ? `${item.desc}_${index}`
              : `tableHeader_${index}`
          }
        })
      }
      if (this.permissionMap) {
        for (let key in this.permissionMap) {
          this.permissionList.push({
            type: key,
            title: this.permissionMap[key]
          })
        }
      }
      if (this.dataTemplate.formField) {
        this.formFieldList = []
        const formFieldList = JSON.parse(this.dataTemplate.formField)
        let fieldMap = {}
        let _this = this
        formFieldList.forEach(ffield => {
          if (!fieldMap[ffield.name]) {
            _this.formFieldList.push(ffield)
            fieldMap[ffield.name] = true
          }
        })
      }
      if (this.dataTemplate.mobileDisplayField) {
        this.mobileDisplayFieldList = JSON.parse(
          this.dataTemplate.mobileDisplayField
        )
      }
    },
    showDataTemplateDialog() {
      this.$refs.dataTemplateDialog.showDialog()
    },
    columnFilter(type) {
      return type != 'sub' && type != 'tabs'
    },
    //双击字段列表中的字段时将该字段加入到显示字段
    fillToDisplay(row, event, column) {
      let isIn = this.isInDisplayFields(row.name, this.displayFields)
      if (!isIn) {
        let fileds = {
          name: row.name,
          desc: row.desc,
          type: row.type,
          showFlowField: row.showFlowField,
          right: this.defaultRight,
          colPrefix: row.colPrefix
        }
        this.displayFields.push(fileds)
      }
    },
    //将字段列表中的已选字段加入到显示字段列表
    allFillToDisplay() {
      let selectrows = this.selectedFields
      if (!selectrows || selectrows.length < 1) {
        this.$message({
          message: '请在选择要显示的字段',
          type: 'warning'
        })
      }
      let existsFields = []
      selectrows.forEach(obj => {
        if (!this.isInDisplayFields(obj.name, this.displayFields)) {
          let fileds = {
            name: obj.name,
            id: obj.name,
            desc: obj.desc,
            type: obj.type,
            showFlowField: obj.showFlowField,
            right: this.defaultRight,
            colPrefix: obj.colPrefix,
            align: 'center',
            tableName: obj.tableName,
            format: obj.format,
            oldTableField: obj.oldTableField
          }
          this.displayFields.push(fileds)
          this.setIsIndeterminate()
        } else {
          existsFields.push(obj.desc)
        }
      })
      existsFields.length &&
        this.$message.warning(`字段【${existsFields.join(',')}】已存在`)
    },
    //打开设置权限
    setFieldRightDialog(row) {
      if (!row) {
        this.$message({
          message: '请先选择操作节点',
          type: 'warning'
        })
        return
      }
      if (!row.name) {
        this.$message({
          message: '多表头节点没有该设置',
          type: 'warning'
        })
        return
      }
      let conf = {
        right: JSON.parse(row.right),
        permissionList: this.permissionList
      }
      this.currentAuthRow = row
      this.$refs.eipAuthDialog.showDialog(conf)
    },
    //递归给选中的节点设置权限
    getAuthTree(val, selectedNodeName, data) {
      let list = val.map(item => {
        if (item.children) {
          this.getAuthTree(item.children, selectedNodeName, data)
        }
        if (item && item.name && selectedNodeName.includes(item.name)) {
          this.$set(item, 'right', JSON.stringify(data))
        }
        return item
      })
      return list
    },
    //设置权限
    authDialogOnConfirm(data) {
      if (this.currentAuthRow.constructor === Object) {
        this.currentAuthRow.right = JSON.stringify(data)
      } else if (this.currentAuthRow === 'all') {
        const selectedNodeName = this.selectedNodesData.map(it => it.name)
        this.displayFields = this.getAuthTree(
          this.displayFields,
          selectedNodeName,
          data
        )
      }
    },
    //显示字段排序
    sort(index, type) {
      if ('up' == type) {
        if (index === 0) {
          this.$message({
            message: '已经是列表中第一位',
            type: 'warning'
          })
        } else {
          let temp = this.displayFields[index - 1]
          this.$set(this.displayFields, index - 1, this.displayFields[index])
          this.$set(this.displayFields, index, temp)
        }
      } else {
        if (index === this.displayFields.length - 1) {
          this.$message({
            message: '已经是列表中最后一位',
            type: 'warning'
          })
        } else {
          let i = this.displayFields[index + 1]
          this.$set(this.displayFields, index + 1, this.displayFields[index])
          this.$set(this.displayFields, index, i)
        }
      }
    },

    //判断字段是否已在显示字段列表中
    isInDisplayFields(name, list) {
      for (let o of list || []) {
        if (o.name == name) return o
        const o_ = this.isInDisplayFields(name, o.children)
        if (o_) return o_
      }
    },
    //显示权限信息
    rightToDesc(right) {
      if (right) {
        right = JSON.parse(right)
      } else {
        return '无'
      }
      let desc = ''
      let _this = this
      right.forEach(r => {
        if (desc) {
          desc += ' 和 '
        }
        var str = _this.permissionMap[r.type]
        if (r.name) {
          str += ':' + r.name
        } else if (r.id) {
          str += ':' + r.id
        }
        desc += str
      })
      return desc
    },
    //标题统一权限设置
    rightRenderHeader(h, para) {
      //下拉框选项
      let _this = this
      let rights = [
        {key: '', value: '请选择'},
        {key: 'none', value: '无'},
        {key: 'everyone', value: '所有人'}
      ]
      let rightMap = {'': '请选择', none: '无', everyone: '所有人'}
      //下拉框内容包裹在一个div里面
      return h('div', {}, [
        h(
          'span',
          {
            //div里面有一个文字提示：下拉框所属内容
            style: {},
            class: 'level-font-class'
          },
          para.column.label
        ),
        h(
          'el-select',
          {
            //el-select实现下拉框
            size: 'mini',
            style: {
              width: '120px',
              marginLeft: '10px'
            },
            on: {
              input: value => {
                //随着下拉框的不同，文字框里的内容在边
                _this.rightLab = rightMap[value]
                if (
                  value &&
                  _this.displayFields &&
                  _this.displayFields.length > 0
                ) {
                  _this.displayFields.forEach(field => {
                    if (field.right) {
                      field.right = JSON.parse(field.right)
                    }
                    if (field.right[0].hasOwnProperty('v')) {
                      field.right[0] = {v: value}
                    } else {
                      field.right[0] = {type: value}
                    }
                    field.right = JSON.stringify(field.right)
                  })
                }
              }
            },
            props: {
              value: _this.rightLab //文字框的内容取决于这个value，如果value不存在，会报错
            }
          },
          [
            //下拉框里面填充选项，通过rights遍历map，为每一个选项赋值。
            rights.map(item => {
              return h('el-option', {
                props: {
                  value: item.key,
                  label: item.value
                }
              })
            })
          ]
        )
      ])
    },
    setting(row) {
      if (!row) {
        return
      }
      this.settingVisible = true
      this.urlParams = []
      this.selectedRow = _.cloneDeep(row)
      if (this.selectedRow.isDesensitization) {
        this.desensitizationForm = this.selectedRow.desensitizationRules
      }
      if (this.selectedRow.reportNameConfigure) {
        this.reportName = this.selectedRow.reportNameConfigure.reportName
        this.conditionField =
          this.selectedRow.reportNameConfigure.conditionField == undefined
            ? []
            : this.selectedRow.reportNameConfigure.conditionField
      }
      if (!this.selectedRow.ruleSettings) {
        this.selectedRow.ruleSettings = []
      }
      if (
        this.selectedRow.formatterType != '1' &&
        this.selectedRow.formatterData
      ) {
        this.selectedRow.formatterData = []
      }
      if (this.selectedRow.proSetting) {
        this.proSetting2 = true
      } else {
        this.selectedRow.proSetting = false
        this.proSetting2 = false
      }
      if (
        this.selectedRow.urlType == 'url' &&
        this.selectedRow.urlParams &&
        this.selectedRow.urlParams.length > 0
      ) {
        this.urlParams = [...this.selectedRow.urlParams]
      }
      this.selectedRow.urlType = this.selectedRow.urlType || 'noUrl'
      this.selectedRow.openType = this.selectedRow.openType || 'new'
    },
    addSetting() {
      if (this.selectedRow.formatterData) {
        this.selectedRow.formatterData.push({
          key_: '',
          value_: ''
        })
      } else {
        this.$set(this.selectedRow, 'formatterData', [
          {
            key_: '',
            value_: ''
          }
        ])
      }
    },
    removeSetting(index) {
      this.selectedRow.formatterData.splice(index, 1)
    },
    removeProSetting(index) {
      this.selectedRow.ruleSettings.splice(index, 1)
    },
    cancelSetting() {
      this.settingVisible = false
      //我也不想这么写，一开始设计得就很难撤销修改，谁有更好的办法就改掉吧- -
      /* this.currentData.formatterType = this.rowBeforeSet.formatterType
      this.currentData.formatterData = this.rowBeforeSet.formatterData
      this.currentData.ruleSettings = this.rowBeforeSet.ruleSettings
      if (this.currentData.url && !this.rowBeforeSet.url) {
        delete this.currentData.url
      } else if (this.rowBeforeSet.url) {
        this.currentData.url = this.rowBeforeSet.url
      }
      if (this.currentData.urlType && !this.rowBeforeSet.urlType) {
        delete this.currentData.urlType
      } else if (this.rowBeforeSet.urlType) {
        this.currentData.urlType = this.rowBeforeSet.urlType
      }
      if (this.currentData.urlParams && !this.rowBeforeSet.urlParams) {
        delete this.currentData.urlParams
      } else if (this.rowBeforeSet.urlParams) {
        this.currentData.urlParams = this.rowBeforeSet.urlParams
      }
      if (this.currentData.openType && !this.rowBeforeSet.openType) {
        delete this.currentData.openType
      } else if (this.rowBeforeSet.openType) {
        this.currentData.openType = this.rowBeforeSet.openType
      }
      if (
        this.currentData.reportNameConfigure &&
        !this.rowBeforeSet.reportNameConfigure
      ) {
        delete this.currentData.reportNameConfigure
      } else if (this.rowBeforeSet.reportNameConfigure) {
        this.currentData.reportNameConfigure = this.rowBeforeSet.reportNameConfigure
      } */
    },
    urlParamsAdd() {
      this.urlParams.push({name: '', field: ''})
    },
    urlParamsRemove(item) {
      this.urlParams.remove(item)
    },
    initMpDisplay(row) {
      this.$set(row, 'mpDisplay', '2')
    },
    // 添加自定义列值
    addCustomColumn() {
      this.displayFields.push({
        desc: '',
        name: '',
        right: '[{"type":"everyone","id":"","name":"","script":""}]',
        showFlowField: true,
        type: 'varchar',
        customColumn: true
      })
    },
    sqlDialogShow(row) {
      if (row && !row.customColumn) {
        this.$message.warning('该操作只支持虚拟字段')
        return
      }
      this.sqlConfigDialog = true
      if (row) {
        this.sqlConfigRow = _.cloneDeep(row)
      } else {
        this.sqlConfigRow = {
          sql: '',
          desc: '',
          originalName: '',
          name: '',
          right: '[{"type":"everyone","id":"","name":"","script":""}]',
          showFlowField: true,
          type: 'varchar',
          customColumn: true,
          align: 'center',
          rawId: Math.ceil(Math.random() * 99999) //添加标识来区分是不是编辑当前数据
        }
      }
      this.addAction = !row
      if (!row) {
        this.$nextTick(() => {
          this.$refs.sqlConfigRowRef.resetFields()
        })
      }
    },
    sqlConfigOk() {
      this.$refs.sqlConfigRowRef.validate(valid => {
        if (valid) {
          if (this.addAction) {
            this.displayFields.push(this.sqlConfigRow)
            this.setIsIndeterminate()
          } else {
            this.displayFields.forEach((item, index) => {
              if (item.rawId == this.sqlConfigRow.rawId) {
                this.$set(this.displayFields, index, this.sqlConfigRow)
              }
            })
          }
          this.sqlConfigDialog = false
        }
      })
    },
    //添加显示设置
    addProSetting() {
      this.selectedRow.ruleSettings.push({
        proColor: '',
        proRule: ''
      })
    },
    //弹窗规则设置对话框
    showRuleSettingDialog(proRule, index) {
      this.ruleSettingIndex = index
      this.dialogRuleData = proRule
      this.isShowRuleSettingDialog = true
    },
    diyScriptChange(myValue) {
      var cm = this.$refs.scriptText.codemirror
      var doc = cm.getDoc()
      var cursor = doc.getCursor() //gets the line number in the cursor position
      var line = doc.getLine(cursor.line) //get the line contents
      var pos = {
        line: cursor.line,
        ch: line.length - 1 //set the character position to the end of the line
      }
      doc.replaceRange('  ' + myValue + '  ', pos) //adds a new line
    },
    methodOk() {
      this.selectedRow.ruleSettings[
        this.ruleSettingIndex
      ].proRule = this.dialogRuleData
      this.dialogRuleData = ''
      this.isShowRuleSettingDialog = false
    },
    proSwitchChange(data) {
      this.selectedRow.proSetting = data
      if (data) {
        this.selectedRow.diyProRule = 0
      }
    },
    diyProRuleChange(val) {
      this.$set(this.selectedRow, 'diyProRule', val)
      if (val == 1 || val == 10 || val == 100) {
        this.$set(this.selectedRow, 'diyProRule', 0)
      }
      this.$set(this.selectedRow, 'ruleSetting', val)
    },
    inputChange(data) {
      if (!data) {
        this.$message.error(`显示字段不能为空！`)
      }
    },
    addMultiTableHeader(node, data) {
      this.$message.error(`显示字段不能为空！`)
      if (!this.headerTitle && !this.isEditor) {
        this.$message.warning('请先输入表头名')
        return
      }
      const newChild = {
        desc: this.headerTitle,
        children: [],
        id: `children_${new Date().getTime()}`
      }
      if (data) {
        if (!data.children) {
          this.$set(data, 'children', [])
        }
        data.children.push(newChild)
      } else {
        this.displayFields.unshift({
          desc: this.headerTitle,
          id: `header_${new Date().getTime()}`,
          children: []
        })
      }
      this.setIsIndeterminate()
    },
    //删除显示字段
    remove(node, data) {
      if (!data) {
        this.$message({
          message: '请先选择操作节点',
          type: 'warning'
        })
        return
      }
      if (data.children && data.children.length > 0) {
        this.$message.warning('有下级不能删除,下级有字段则先移动')
        return
      }
      this.$confirm(`是否删除${data.desc}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const parent = node.parent
          const children = parent.data.children || parent.data
          const index = children.findIndex(d => d.desc === data.desc)
          children.splice(index, 1)
          this.currentData = null
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    mobileIsDisplay(data, type) {
      if (!data) {
        this.$message({
          message: '请先选择操作节点',
          type: 'warning'
        })
        return
      }
      if (!data.name) {
        this.$message({
          message: '多表头节点没有该设置',
          type: 'warning'
        })
        return
      }
      this.$set(data, 'mpDisplay', data.mpDisplay === '1' ? '2' : '1')

      if (data.mpDisplay === '2') {
        this.mobileListTitle = ''
        this.mobileShowStatus = ''
        this.$set(data, 'isTitle', false)
        this.$set(data, 'isStatus', false)
      }
    },
    handleFieldChange(val) {
      this.mobileDisplayFieldList.map(item => {
        this.$set(item, 'isTitle', item.name === val ? true : false)
      })
      this.displayFields = this.setMobileField(
        this.displayFields,
        val,
        'isTitle'
      )
    },

    handleStatusChange(val) {
      this.mobileDisplayFieldList.map(item => {
        this.$set(item, 'isStatus', item.name === val ? true : false)
      })
      this.displayFields = this.setMobileField(
        this.displayFields,
        val,
        'isStatus'
      )
    },
    setMobileField(data, val, type) {
      return data.map(item => {
        if (item.name) {
          this.$set(item, type, item.name === val ? true : false)
        }
        if (item.children && item.children.length) {
          this.setMobileField(item.children, val, type)
        }
        return item
      })
    },
    //节点开始拖拽时触发的事件
    handleDragStart(node, ev) {
      this.tooltipDis = true
    },
    //拖拽进入其他节点时触发的事件
    handleDragEnter(draggingNode, dropNode, ev) {
      let doms = document.querySelectorAll('.checkout_border')
      doms.forEach(one => {
        one.classList.remove('checkout_border')
      })
      ev.target.children[2].classList.add('checkout_border')
    },
    //拖拽离开某个节点时触发的事件
    handleDragLeave(draggingNode, dropNode, ev) {},
    //在拖拽节点时触发的事件
    handleDragOver(draggingNode, dropNode, ev) {},
    //拖拽结束时（可能未成功）触发的事件
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      let doms = document.querySelectorAll('.checkout_border')
      doms.forEach(one => {
        one.classList.remove('checkout_border')
      })
      this.tooltipDis = false
      this.showDynamicTable = false
      setTimeout(() => {
        this.showDynamicTable = true
      }, 100)
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {},
    allowDrop(draggingNode, dropNode, type) {
      // 是否允许放下
      // 字段不能移动到字段下
      if (dropNode.data.name && type == 'inner') {
        return false
      }
      return true
    },
    allowDrag(draggingNode) {
      // 字段 和 合并字段的表头都允许拖拽
      return true
    },
    nodeClick(data, node, comp) {
      this.currentData = data
      this.currentNode = node
      this.tmDisplay = false
    },
    rightClick(e, data, node, comp) {
      // left click on menu button
      if (!comp) {
        window.event.stopPropagation()
      }
      this.currentData = data
      this.currentNode = node
      let topPosition = e.pageY
      let tempHeight = document.body.clientHeight - topPosition
      if (tempHeight < 150) {
        topPosition = topPosition - 100
      }
      this.rightMenu = {top: topPosition + 'px', left: e.pageX + 'px'}
      this.tmDisplay = true
      const self = this
      document.onclick = function(ev) {
        if (ev.target !== document.getElementById('perTreeMenu')) {
          self.tmDisplay = false
        }
      }
    },
    validateDisplayField() {
      return true
    },
    clearUrlType() {
      this.selectedRow.urlType = ''
      this.$forceUpdate()
    },
    clearOpenType() {
      this.selectedRow.openType = ''
      this.$forceUpdate()
    },
    clearFormatterType() {
      this.selectedRow.formatterType = ''
      this.selectedRow.formatterData = []
      this.selectedRow.dataDictionary = null
    },
    /**
     * 国际化配置
     */
    editI18nMessage(columnName) {
      this.i18nMessageKey = `formTemplate.${this.dataTemplate.alias}.display.${columnName}`
      this.$refs.i18nMessageEdit.handleOpen()
    },
    afterSaveI18n(data) {
      //保存后做一些数据处理
      data.key = data.key.replace('$', '#')
      this.dataTemplate.desc = data.key
      this.dataTemplate.desc_zh = data.desc
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.tip-message {
  padding: 10px 16px;
  background: rgba(64, 158, 255, 0.1);
  border-radius: 2px;
  color: #409eff;
  margin: 20px 0;
}
.is-required-class {
  height: 40px;
  line-height: 40px;
  border-radius: 2px;
  padding-left: 16px;
  margin: 20px 0;
  background: rgba(229, 85, 85, 0.05);
  color: #e55555;
}
.data-dictionary-form {
  margin-top: 32px;
  ::v-deep {
    .el-form-item__label {
      color: #888888;
    }
    .el-select {
      width: 388px;
    }
  }
}
::v-deep {
  .setting-dialog {
    .warning-tip {
      height: 40px;
      line-height: 40px;
      color: #ffae44;
      font-size: 14px;
      padding-left: 16px;
      margin-bottom: 12px;
      background: rgba(255, 174, 68, 0.1);
    }
    .el-dialog__footer {
      text-align: right;
    }
    .params-table {
      margin-top: 16px;
      .el-empty {
        padding: 20px 0;
        .el-empty__description {
          margin-top: 0;
        }
      }
    }
  }
}
/deep/ .custom-tree-node {
  .el-button-group .el-tooltip {
    margin-left: 30px;
  }
}
.tree-border {
  // /deep/ .el-tree__wrapper {
  //   border: 1px solid #f56c6c;
  // }
}
/deep/ .edit-tree {
  .el-select {
    width: 100px;
  }
  .el-input-number {
    width: 120px;
  }
  .el-tree__wrapper {
    background-color: #fff !important;
  }
}
/deep/ .el-dialog__body {
  overflow-y: hidden;
}
/deep/ .el-scrollbar__wrap {
  overflow-x: hidden;
}
/deep/ .el-card__body {
  height: calc(100% - 101px);
}
/deep/ .scrollbar-height {
  height: calc(100% - 60px);
}
.display-setting {
  border: 1px solid #ebebeb;
  height: 100%;
  width: 100%;
  ::v-deep {
    .header-form {
      padding: 16px 20px 0px 20px;
      border-bottom: 1px solid #e6e6e6;
      display: flex;
      flex-direction: column;
      .el-form-item__label {
        color: #888;
      }
      .el-form-item__content {
        display: flex;
        .btn-wrap {
          margin-left: 12px;
          .el-button--small {
            padding: 9px 14px;
            border-radius: 2px;
            color: #666;
          }
          .el-button--primary {
            margin-right: 12px;
            color: #fff;
          }
        }
      }
      .set-height {
        .el-select__tags {
          height: 58px;
          overflow: auto;
        }
      }
    }
    .mobile-config {
      display: flex;
      .inputs.ht-form-inputs__inline div[aria-invalid='true'] {
        margin: 0;
      }
    }
    .el-aside {
      border-right: 1px solid #e6e6e6;
      height: 100%;
      overflow: unset;
      display: flex;
      flex-direction: column;
      .edit-tree {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding-bottom: 24px;
        overflow: hidden;
        .tree-header {
          margin: 0px 20px;
          padding: 24px 0;
          border-bottom: 1px solid #e6e6e6;
          .el-input {
            border: 1px solid #ebebeb;
            margin-left: 20px;
            margin-right: 26px;
            .el-input__inner {
              width: 248px;
            }
          }
          .tree-button-group {
            .tree-icon {
              border: 1px solid #dcdee0;
              padding: 5px;
              margin-left: 12px;
              margin-right: 0;
              border-radius: 2px;
            }
            .refresh {
              padding: 6px 8px 6px 6px;
            }
          }
        }
        .top-btn__wrap {
          display: flex;
          .el-button--small {
            font-size: 14px;
            padding: 7px 8px;
            color: #666;
            border: 1px solid #dcdee0;
            border-radius: 2px;
          }
          .el-button.is-disabled,
          .el-button.is-disabled:hover,
          .el-button.is-disabled:focus {
            color: #c0c4cc;
            border-color: #ebeef5;
          }
          .clear-all__wrap {
            margin: 0 12px;
          }
          .clear-all {
            font-size: 16px;
          }
        }
      }
      .el-tree__wrapper {
        flex: 1;
        overflow: auto;
        .el-tree-node {
          // padding-top: 24px;
          &:first-child {
            padding-top: 14px;
          }
          .el-tree-node__content {
            /*  width: calc(100% - 12px); */
            height: 48px;
            margin: 0 5px;
          }
          .checkout_border {
            border-bottom: solid 1px #409eff;
          }
          .el-tree-node__children {
            /*   width: 100%; */
            &:last-child {
              // margin-bottom: 4px;
            }
          }
          .is-customColumn {
            border: 1px dashed #666;
          }
        }

        .is-current {
          .el-tree-node__content {
            border: 1px solid #409eff;
            border-radius: 2px;
            background: rgba(249, 249, 249, 0.39);
          }
        }
        .custom-tree-node {
          .tree-node__wrap {
            display: flex;
            align-items: center;
          }
          .notCheck {
            input {
              border: solid 1px #e55555;
            }
          }
          .drag-icon {
            padding-right: 8px;
            color: #409eff;
            cursor: move;
          }
          .alignment {
            margin-right: 12px;
          }
          .btn-wrap {
            padding-left: 25px;
            .btn-item {
              padding-right: 8px;
            }
            .has-set,
            .mobile-show,
            .has-info {
              color: #409eff;
            }
          }
        }
      }
      .el-tree > .el-tree-node {
        min-width: 100%;
        display: inline-block;
      }
    }
  }
  .display-setting__main {
    padding: 24px;
    ::v-deep {
      .el-empty {
        .el-empty__description {
          margin-top: -20px;
        }
      }
    }
  }
  ::v-deep {
    .el-empty {
      height: 100%;
    }
    .el-tree__drop-indicator {
      display: none !important;
    }
  }
}
/deep/ .custom-tree-node {
  width: calc(100% - 40px);
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  .el-input-group__prepend {
    button {
      cursor: move;
    }
  }
  .el-tree-node__label {
    width: 180px;
  }
}
/deep/ .tools {
  display: inline;
  .iconfont {
    margin-left: 20px;
  }
}

/deep/
  .el-tree-node.is-drop-inner
  > .el-tree-node__content
  .el-tree-node__label {
  background-color: $--color-primary;
  color: #fff;
  .el-input-group__prepend {
    i {
      color: $--color-primary;
    }
  }
}

/deep/ .tree_menu {
  position: fixed;
  display: block;
  z-index: 20000;
  background-color: #fff;
  padding: 5px 0;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  ul {
    margin: 0;
    padding: 0;
  }
  ul li {
    list-style: none;
    margin: 0;
    padding: 0 15px;
    font-size: 14px;
    line-height: 30px;
    cursor: pointer;
  }
  ul li:hover {
    background-color: #ebeef5;
  }
}
/deep/.vue-treeselect__menu {
  z-index: 1000;
}
.tooltip-container {
  ul {
    min-width: 300px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      display: inline-block;
      flex: 0 0 50%;
      line-height: 22px;
      span:nth-child(1) {
        display: inline-block;
        width: 60px;
        color: #888;
      }
    }
  }
}
//输入框，下拉框校验样式
/deep/ .inputs.ht-form-inputs__block,
/deep/.inputs.ht-form-inputs__inline {
  position: relative;
  div[aria-invalid='true'] {
    margin: 16px 0;
  }
  div[aria-invalid='true'] + .field-tail__wrap {
    text-align: left;
    position: absolute;
    top: calc(100% - 18px);
    left: 0;
    .el-form-item__error {
      top: calc(100% - 16px);
      position: static;
    }
  }
  div[aria-invalid='true'] + div + .field-tail__wrap {
    text-align: left;
    position: absolute;
    left: 15px;
    top: calc(100% - 18px);
    .el-form-item__error {
      top: calc(100% - 16px);
      position: static;
    }
  }
}
.editi18_input {
  display: flex;
  align-items: center;
  .el-button {
    width: 40px;
    padding: 8.1px 15px;
    border-left: none;
    border-radius: 0 2px 2px 0;
    background-color: #f5f7fa;
    color: #909399;
  }
  .el-tree-node__label {
    width: 140px;
    ::v-deep .el-input__inner {
      border-radius: 2px 0 0 2px;
      padding-right: 45px;
    }
  }
}
</style>
<style lang="scss">
.vue-treeselect__portal-target {
  z-index: 3000 !important;
}
.el-tooltip__popper[x-placement^='top'].testtooltip .popper__arrow {
  border-top-color: white !important;
}
.el-tooltip__popper[x-placement^='top'].testtooltip .popper__arrow:after {
  border-top-color: white !important;
}
.el-tooltip__popper[x-placement^='top'].is-light {
  border: 0;
}
.testtooltip {
  background: white !important;
  box-shadow: 1px 1px 10px 3px #d3d3d6;
}
</style>
