<template>
  <div ref="dataCenterTableBox" class="data-center-table-box" id="dataCenterTableBox" style="width:100%;" :style="{height:(tableConfig.noNeedScrollbar?'':'100%')}" @click="parentClickFunc($event)">
    <el-row class="data-center-table-header-box">
      <!-- 分页组件  全选区域 -->
      <div class="data-center-table-header-choose-box" ref="dataCenterTableHeaderChooseBox" v-if="tableConfig.paginationArea && tableConfig.tableContentArea.needSelection && multipleSelection.length > 0">
        <div class="data-center-table-header-choose-box-div" v-show="!isChooseAllSelect">
          <span>{{$t('cs.common.text.alreadySelectedData', {v1: multipleSelection ? multipleSelection.length : '0',v2:tableConfig.paginationArea.total})}}，</span>
          <el-link type="primary" :underline="false" @click="paginationAreaSelectAll">
            {{$t('cs.common.text.selectAllData', {v: filterModel.filterGroupModel[0].filterFields.length > 0 ? $t('cs.common.text.screeningResults') : $t('cs.common.text.data')})}}</el-link>
        </div>
        <div v-show="isChooseAllSelect">
          <span>{{$t('cs.common.text.alreadySelectAllData', {v1: tableConfig.paginationArea.total,v2:filterModel.filterGroupModel[0].filterFields.length > 0 ? $t('cs.common.text.screeningResults') : $t('cs.common.text.data')})}}</span>
        </div>
      </div>
      <div class="data-center-table-header-tool-box">
        <!-- 查询区域 -->
        <el-col v-if="tableConfig.queryConditionArea && isAreadyLoadQueryConfitionArea && isAreadyLoad" class="data-center-table-condition" :span="queryConditionAreaWidthNum" style="display: flex;position: relative;">
          <div class="grid-content " v-for="(queryConditionAreaItem, queryConditionAreaIndex) in tableConfig.queryConditionArea.queryList" :key="queryConditionAreaIndex + 'queryConditionAreaItem'"
            style="display:flex;margin-right:30px;">
            <div class="data-center-table-condition-label" v-if="queryConditionAreaItem.type === 'label'">
              {{$t(queryConditionAreaItem.labelName)}}
            </div>
            <el-select size="small" :clearable="queryConditionAreaItem.clearable" v-if="queryConditionAreaItem.type === 'select'"
              @change="queryConditionAreaFirstSelectClick(queryConditionAreaItem.queryConditionAreaSelectValue,queryConditionAreaItem)" v-model="queryConditionAreaItem.queryConditionAreaSelectValue"
              :disabled="queryConditionAreaItem.disabled">
              <el-option v-for="(items,conditionIndex) in queryConditionAreaItem.selectOptions" :key="conditionIndex + '-queryConditionAreaMain'" :label="$t(items.label)" :value="items.value">
              </el-option>
            </el-select>
            <template>
              <el-input v-if="queryConditionAreaItem.filterShowType === 'input'  " v-model="queryConditionAreaItem.filtersValue" :placeholder="$t('cs.common.text.pleaseInput')" size="small"
                class="data-center-table-condition-input" @keyup.enter.native="queryConditionAreaItemSearch(tableConfig.queryConditionArea)">
              </el-input>
              <el-input style="width:240px;" v-if="queryConditionAreaItem.filterShowType === 'singleInput' " prefix-icon="el-icon-search" v-model="queryConditionAreaItem.filtersValue" :placeholder="$t('cs.common.text.searchPlaceholder2',{
                  content:$t(queryConditionAreaItem.singleInputPlaceholder)
                })" size="small" class="data-center-table-condition-input data-center-table-condition-change" @keyup.enter.native="queryConditionAreaItemSearch(tableConfig.queryConditionArea)">
              </el-input>
              <div v-if="queryConditionAreaItem.filterShowType === 'date'" class="data-center-table-condition-date">
                <el-date-picker v-model="queryConditionAreaItem.startDateValue" type="date" size="small" clearable value-format="yyyy-MM-dd HH:mm:ss" :editable="false"
                  @change="queryConditionAreaStartDatePicker(queryConditionAreaItem)" :default-value="defaultvalue" @blur="defaultvalueInit" :placeholder="$t('cs.common.text.startDate')">
                </el-date-picker>
                <span class="data-center-table-condition-date-span">{{$t('cs.common.text.to')}}</span>
                <el-date-picker v-model="queryConditionAreaItem.endDateValue" type="date" size="small" clearable value-format="yyyy-MM-dd HH:mm:ss" :editable="false"
                  @change="queryConditionAreaEndDatePicker(queryConditionAreaItem)" :default-value="defaultvalue" @blur="defaultvalueInit" :placeholder="$t('cs.common.text.endDate')">
                </el-date-picker>
              </div>
              <!-- <el-date-picker
                                v-if="queryConditionAreaItem.filterShowType === 'date'"
                                v-model="queryConditionAreaItem.filtersValue"
                                type="daterange"
                                range-separator="至"
                                size="small"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>   -->
              <el-select size="small" v-if="queryConditionAreaItem.filterShowType === 'select'" v-model="queryConditionAreaItem.filtersValue">
                <el-option v-for="(items,childSelectOptionIndex) in (queryConditionAreaItem.childSelectOptions ? queryConditionAreaItem.childSelectOptions : childSelectOptions)" :key="childSelectOptionIndex + 'child'"
                  :label="$t(items.label)" :value="items.value"></el-option>
              </el-select>
            </template>
          </div>
          <el-button style="margin-right:10px;" v-if="!tableConfig.queryConditionArea.searchBtnShow" size="small" type="primary" @click="queryConditionAreaItemSearch(tableConfig.queryConditionArea)">
            {{$t("cs.common.button.search")}}</el-button>
          <div class="query-condition-area-baffle" :class="{'baffle-foundation-show': backupsRowEditItem}">
          </div>
        </el-col>
        <!-- 按钮区域 -->
        <el-col v-if="(tableConfig.operationArea && tableConfig.operationArea.buttonList && tableConfig.operationArea.buttonList.length>0)" :span="operationAreaWidthNum">
          <div v-if="isAreadyLoad" :style="{opacity:(operationAreaIsAready?'1': '0')}" class="grid-content data-center-table-header">
            <el-button size="small" v-for="(buttonItem,buttonIndex) in tableConfig.operationArea.buttonList" :key="buttonIndex+'button'"
              :type="tableConfig.operationArea.buttonType ? tableConfig.operationArea.buttonType : 'primary'" :plain="tableConfig.operationArea.plain" :round="tableConfig.operationArea.round"
              :circle="tableConfig.operationArea.circle" :icon="tableConfig.operationArea.icon" :disabled="buttonItem.disabled" v-show="!buttonItem.RoleShowInTransverseListMethod"
              @click="operationAreaButtonClick(buttonItem,$event)" :title=" buttonItem.justDisabledShowTitle ?  buttonItem.disabled && buttonItem.titleToolTip ? $t(buttonItem.titleToolTip) : '' : buttonItem.titleToolTip ? $t(buttonItem.titleToolTip) : '' " class="data-center-table-header-button-item">{{$t(buttonItem.prop)}}</el-button>
            <!-- 更多 -->
            <div class="more" v-show="isShowMoreMethodApplication" style="margin-left:10px;">
              <el-dropdown trigger="click">
                <el-button size="small" plain>
                  {{$t("cs.common.button.more")}}
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="(buttonItems,buttonIndexs) in tableConfig.operationArea.buttonList" :key="buttonIndexs+'button-more-item'" :disabled="buttonItems.disabled"
                    v-show="buttonItems.RoleShowInTransverseListMethod" :title=" buttonItems.justDisabledShowTitle ?  buttonItems.disabled && buttonItems.titleToolTip ? $t(buttonItems.titleToolTip) : '' : buttonItems.titleToolTip ? $t(buttonItems.titleToolTip) : '' " @click.native="operationAreaButtonClick(buttonItems,$event)">
                    {{$t(buttonItems.prop)}}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </el-col>
      </div> 
    </el-row>
    <div :key="tableTipIndexKey" v-if="tableConfig.tableContentArea.needTip && isShowAllDataNum" style="
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px;
    box-sizing: border-box;
    background-color: #e4f1ff;
    margin-bottom: 16px;
"> 
      <div>
        <span>{{$t('cs.common.text.alreadySelect')}}</span>
        <span style="color: #1890ff;">&nbsp;{{tableConfig.tableContentArea.allDataNum}}&nbsp;</span>
        <span>{{$t('cs.common.text.alreadySelect1')}}</span>
        <span style="color:#939099;">{{$t('cs.common.text.alreadySelect2')}}</span>
      </div>
      <div style="color: #1890ff; cursor: pointer;" @click="clearSelection">清空</div>
    </div>
    <div class="table" :class="tableOnlyClass" v-if="testShow" :style="{maxHeight:(tableConfig.noNeedScrollbar?'': tableBoxHeight)}">
      <div :class="{'has-frozen-colums': hasFrozenColums && tableData.length > 0}" style="width:100%;position:relative;" :style="{height:(tableConfig.noNeedScrollbar?'': tableHeight)}">
        <!-- <div class="table" :style="{maxHeight:tableBoxHeight}">
            <div style="width:100%;" :style="{height:tableHeight}"> -->
        <el-table :row-key="getRowKey" :default-expand-all="tableConfig.tableContentArea.defaultExpandAll ? tableConfig.tableContentArea.defaultExpandAll : false" :expand-row-keys="tableConfig.tableContentArea.expandRowKeys ? tableConfig.tableContentArea.expandRowKeys : []" @row-click="rowClickFunc" ref="multipleTable" v-el-table-infinite-scroll="infiniteScrollLoadData" :infinite-scroll-immediate="true" v-if="isAreadyLoad"
          :height="tableConfig.noNeedScrollbar ? (tableConfig.customTableHeight + 60) : tableComponentsHeight" :data="tableData" @cell-dblclick="cellDoubleClick" @cell-mouse-enter="cellMouseEnter"
          @cell-mouse-leave="cellMouseLeave" @sort-change="sortChange" @cell-click="cellClick" @select-all="selectAll" :header-cell-class-name="handleHeaderClass" @header-dragend="headerDragend"
          :stripe="tableConfig.tableContentArea.needStripe" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}"  :lazy="tableConfig.tableContentArea.tableTreeLazy ? tableConfig.tableContentArea.tableTreeLazy : false" :load="tableTreeload"
          :header-cell-style="{background: '#fafafa',color: '#626066',fontWeight:tableConfig.tableContentArea.headerCellFontWeight? tableConfig.tableContentArea.headerCellFontWeight : 'normal' }" style="width:100%"
          @selection-change="handleSelectionChange" @select="handleSelect" @header-click="headerClick" @header-contextmenu="headerContextmenu" :key="tableIndexKey">
          <el-table-column align="center" v-if="tableConfig.tableContentArea.needSelection" :selectable='checkboxSelect' type="selection" :fixed="!tableConfig.tableContentArea.cancelFirstSelectionFixed" width="55">
            <!-- <template #header>
                            <div id="fjlTest" style="width:50px;height:50px;background:red;position:absolute;top:0;left:0;">
                            </div>
                        </template> -->
          </el-table-column>
          <el-table-column v-for="(item,index) in tableConfig.tableContentArea.columns" :key="index + 'el-table-column' + item.id" :prop="item.prop" :label="$t(item.label)" :width="item.width" :min-width="item.minWidth"
            :align="item.align ? item.align : centerAlign(item)" :class-name="item.customClassName" :header-align="item.headerAlign" :selectable="item.selectable" :fixed="item.fixed"
            :show-overflow-tooltip="(isIE()&&item.type === 'label')? false : item.showOverflowTooltip ? true : item.showOverflowTooltip">
            <template #header >
              <div style="width: 100%; position: relative;display: flex;" v-if="item.type === 'checkBox' && item.showHeaderCheck">
                <div :title="item.hideHeaderToolTip ? '' : $t(item.label)"  style="width: 100%; padding-right:12px;display: inline-flex;" class="checkBox-box" :style="{maxWidth:(item.sortable?'calc(100% - 36px)': 'calc(100% - 12px)')}">
                  <el-checkbox v-model="item.headerCheck" :disabled="tableData.length < 1" @change="headerCheckAllSelect(item,item.headerCheckFunc)"></el-checkbox>
                  <span style="margin-left: 5px;display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ $t(item.label) }}</span>
                </div>
                <span @click.stop="frozen(item)" v-show="item.isHideForzenIocn ? !item.isHideForzenIocn : true" class="caret-wrapper frozen-div" style="flex-shrink: 0; justify-content: center;position: absolute;top: 0;right: 0;">
                    <i v-show="!item.fixed" class="el-icon-unlock"></i>
                    <i v-show="item.fixed" class="el-icon-lock"></i>
                  </span>
                <div :title="item.hideHeaderToolTip ? '' : $t(item.label)" :class="{'baffle-foundation-show': backupsRowEditItem}" class="baffle-foundation">
                </div>
              </div>
              <div class="show-header-toolTip" @dblclick="headerDBClick(item,$event)" v-else-if="!item.type && item.showHeaderToolTip" style="height: 100%; width: 100%;position: relative;">
                <div style="width: 100%;max-width:calc(100% - 12px); padding-right:12px;">
                  <el-tooltip :enterable="false" :content="$t(item.label)" placement="top">
                    <span class="long-title" :title="item.hideHeaderToolTip ? '' : $t(item.label)" >
                      {{$t(item.label)}}
                    </span>
                  </el-tooltip>
                </div>
                <span @click.stop="frozen(item)" v-show="item.isHideForzenIocn ? !item.isHideForzenIocn : true" class="caret-wrapper frozen-div" style="flex-shrink: 0; justify-content: center;position: absolute;top: 0;right: 0;">
                    <i v-show="!item.fixed" class="el-icon-unlock"></i>
                    <i v-show="item.fixed" class="el-icon-lock"></i>
                  </span>
              </div>
              <div class="show-header-toolTip" @dblclick="headerDBClick(item,$event)" v-else-if="item.sortable && item.sortable == 'custom'" style="width: 100%; height: 100%;position: relative;"  :class="item.multiOrder === 'descending' ? 'descending' : item.multiOrder === 'ascending' ? 'ascending' : ''">
                  <div style="width: 100%; padding-right:12px;display: inline-flex;" :style="{maxWidth:(item.sortable?'calc(100% - 36px)': 'calc(100% - 12px)')}">
                    <span class="long-title" :title="item.hideHeaderToolTip ? '' : $t(item.label)">
                      {{$t(item.label)}}
                    </span>
                    <span @click.stop="sortChangeFunc(item)" class="caret-wrapper" style="flex-shrink:0;">
                      <i class="sort-caret ascending" style="top:6px;"></i>
                      <i class="sort-caret descending" style="bottom:6px;"></i>
                    </span>
                  </div>
                  <span @click.stop="frozen(item)" v-show="item.isHideForzenIocn ? !item.isHideForzenIocn : true" class="caret-wrapper frozen-div" style="flex-shrink: 0; justify-content: center;position: absolute;top: 0;right: 0;">
                    <i v-show="!item.fixed" class="el-icon-unlock"></i>
                    <i v-show="item.fixed" class="el-icon-lock"></i>
                  </span>
              </div>
              <div v-else @dblclick="headerDBClick(item,$event)"  class="show-header-toolTip test" style="height: 100%; width: 100%;position: relative;" >
                <div style="width: 100%;max-width:calc(100% - 12px); padding-right:12px;">
                  <span class="long-title" :title="item.hideHeaderToolTip ? '' : $t(item.label)">
                    {{$t(item.label)}}
                  </span>
                </div>
                  <span @click.stop="frozen(item)" v-show="item.isHideForzenIocn ? !item.isHideForzenIocn : true" class="caret-wrapper frozen-div test" style="flex-shrink: 0; justify-content: center;position: absolute;top: 0;right: 0;">
                    <i v-show="!item.fixed" class="el-icon-unlock"></i>
                    <i v-show="item.fixed" class="el-icon-lock"></i>
                  </span>
              </div>
              <div style="position: absolute;opacity: 0;z-index: -1;" class="show-header-toolTip" >
                <span class="long-title" :title="item.hideHeaderToolTip ? '' : $t(item.label)">
                  {{$t(item.label)}}
                </span>
              </div>
            </template>
            <template #default="scope">
              <div :title="(isIE() && (item.showOverflowTooltip ? item.showOverflowTooltip : true))? scope.row[item.prop] : ''" 
                style="width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-left:9px;" v-if="!item.type&&!(item.prop == 'dataLength' && scope.row[item.prop] == -10)">
                {{scope.row[item.prop]}}
              </div>
              <div :title="(isIE() && (item.showOverflowTooltip ? item.showOverflowTooltip : true))? scope.row[item.prop] : ''"
                style="width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-left:9px;" v-if="!item.type&&(item.prop == 'dataLength' && scope.row[item.prop] == -10)">
                MAX
              </div>
              <div style="width: 100%;" v-if="item.type">
                <!-- 输入框 -->
                <el-input :ref="`${tableConfig.tableContentArea.targetRowId? scope.row[tableConfig.tableContentArea.targetRowId] :  `inputRef${scope.$index}${index}`}${item.prop}`"
                  v-if="item.type === 'input'  && (scope.row.customRowConfigData[item.needHideText] ? !scope.row.customRowConfigData[item.needHideText] : true)" v-model="scope.row[item.prop]"
                  :disabled="scope.row.customRowConfigData.disabledList ? scope.row.customRowConfigData.disabledList[item.disabledPropName] : false" :clearable="item.clearable ? item.clearable : false"
                  :placeholder="item.placeholder? item.placeholder :  ''" @change="inputChange(scope.row,item)" @focus="inputFocus(scope.row,item,$event)" @blur="inputBlur(scope.row,item,$event)" size="small"
                  :class="scope.row.customRowConfigData.alwaysShowInputBox ? '' : 'item-edit-target'"></el-input>
                <el-input v-if="item.type === 'input' && (scope.row.customRowConfigData[item.needHideText] ? scope.row.customRowConfigData[item.needHideText] : false )"
                  :disabled="scope.row.customRowConfigData.disabledList ? scope.row.customRowConfigData.disabledList[item.disabledPropName] : false" size="small"
                  :class="scope.row.customRowConfigData.alwaysShowInputBox ? '' : 'item-edit-target'"></el-input>
                <!-- 文字链接 -->
                <div class="data-center-table-link-box" v-if="item.type === 'link'">
                  <el-link href="javascript:;" v-for="(linkItem,linkIndex) in item.linkList" :key="linkIndex+'link'" :type="item.linkType ? item.linkType : 'primary'" :underline="item.underline"
                    :disabled="scope.row.customRowConfigData.disabledList ? scope.row.customRowConfigData.disabledList[linkItem.disabledPropName] : false " :icon="item.iconName"
                    v-show="(scope.row.customRowConfigData.isShowLinkList && linkItem.isShowLink) ? scope.row.customRowConfigData.isShowLinkList[linkItem.isShowLink] : true">
                    <span @click="linkFunc(linkItem,scope.row,item)" :style="{color:getTextColor(linkItem,scope.row)}">{{$t(toLinkName(linkItem,scope.row))}}</span>
                  </el-link>
                </div>
                <!-- 图标按钮 -->
                <div class="data-center-table-icon data-center-table-icon-list" v-if="item.type === 'iconButton'">
                  <i @click="iconButtonFunc(iconItem,scope.row, item)"  v-for="(iconItem,linkIndex) in item.iconButtonList" :key="linkIndex+'iconButton'"  :class="{'icon-default':typeof item.clickFunc !== 'function'}" v-show="!item.iconTitle">
                    <el-tooltip class="item" effect="dark" :content="$t(iconItem.iconToolTip)" placement="top" v-if="iconItem.iconToolTip">
                      <el-link href="javascript:;" :type="item.linkType ? item.linkType : 'primary'" :underline="false"
                        :disabled="scope.row.customRowConfigData.disabledList ? scope.row.customRowConfigData.disabledList[iconItem.disabledPropName] : false " :icon="iconItem.iconName"
                        v-show="(scope.row.customRowConfigData.isShowIconButtonList && iconItem.isShowLink) ? scope.row.customRowConfigData.isShowIconButtonList[iconItem.isShowLink] : true">
                      </el-link>
                    </el-tooltip>
                    <el-link  v-if="!iconItem.iconToolTip" href="javascript:;" :type="item.linkType ? item.linkType : 'primary'" :underline="false"
                      :disabled="scope.row.customRowConfigData.disabledList ? scope.row.customRowConfigData.disabledList[iconItem.disabledPropName] : false " :icon="iconItem.iconName"
                      v-show="(scope.row.customRowConfigData.isShowIconButtonList && iconItem.isShowLink) ? scope.row.customRowConfigData.isShowIconButtonList[iconItem.isShowLink] : true">
                    </el-link>
                  </i>
                </div>
                <!-- 动态名称文字链接 -->
                <div class="data-center-table-dynamicLink-box" v-if="item.type === 'dynamicLink'">
                  <el-link href="javascript:;" v-for="(linkItem,linkIndex) in item.linkList" :key="linkIndex+'dynamicLink'" :type="item.linkType ? item.linkType : 'primary'" :underline="item.underline"
                    :disabled="scope.row.customRowConfigData.disabledList ? scope.row.customRowConfigData.disabledList[linkItem.disabledPropName] : false " :icon="item.iconName"
                    v-show="(scope.row.customRowConfigData.isShowLinkList && linkItem.isShowLink) ? scope.row.customRowConfigData.isShowLinkList[linkItem.isShowLink] : true">
                    <span @click="dynamicLinkFunc(linkItem,scope.row,item)">{{scope.row[linkItem.linkPropName]}}</span>
                  </el-link>
                </div>
                <!-- 图标 -->
                <div v-if="item.type === 'icon'" class="data-center-table-icon">
                  <el-tooltip class="item" effect="dark" :content="toIconTitle(item,scope.row)" placement="top" v-if="item.iconTitle">
                    <i @click="iconFunc(item,scope.row)" :class="{'icon-default':typeof item.clickFunc !== 'function'}">
                      <el-link :underline="false" :type="item.linkType ? item.linkType : 'primary'" href="javascript:;" :icon="toIconName(item,scope.row)"
                        :disabled="scope.row.customRowConfigData.disabledList ? scope.row.customRowConfigData.disabledList[item.disabledPropName] : false">
                      </el-link>
                    </i>
                  </el-tooltip>
                  <i @click="iconFunc(item,scope.row)" :class="{'icon-default':typeof item.clickFunc !== 'function'}" v-if="!item.iconTitle">
                    <el-link :underline="false" :type="item.linkType ? item.linkType : 'primary'" href="javascript:;" :icon="toIconName(item,scope.row)"
                      :disabled="scope.row.customRowConfigData.disabledList ? scope.row.customRowConfigData.disabledList[item.disabledPropName] : false">
                    </el-link>
                  </i>
                </div>
                <!-- 按钮 -->
                <div v-if=" item.type === 'button' ">
                  <el-button size="small" v-for="(buttonItem,buttonIndex) in item.buttonList" :key="buttonIndex+'button'" :type="item.buttonType ? item.buttonType : 'primary'" :plain="item.plain" :round="item.round"
                    :circle="item.circle" :disabled="scope.row.customRowConfigData.disabledList ? scope.row.customRowConfigData.disabledList[item.disabledPropName] : false" :icon="item.icon"
                    @click="buttonFunc(scope.row,buttonItem)">{{$t(buttonItem.buttonName)}}</el-button>
                </div>
                <!-- 多选框 -->
                <div v-if="item.type === 'checkBox'" style="width:100%;position:relative;padding-left:10px;padding-right:9px;">
                  <el-checkbox v-model="scope.row[item.prop]" :disabled="scope.row.customRowConfigData.disabledList ? scope.row.customRowConfigData.disabledList[item.disabledPropName] : false"
                    @change="checkboxColumnCheckFunc(scope.row, item)"></el-checkbox>
                  <div :class="{'baffle-foundation-show': (backupsRowEditItem && !(nowAdd && scope.row.customRowConfigData.alwaysShowInputBox))}" class="baffle-foundation">
                  </div>
                </div>
                <!-- 下拉框 -->
                <el-select :ref="`selectRef${scope.$index}${index}`" style="position:relative;" size="small" :popper-append-to-body="true"
                  :class="scope.row.customRowConfigData.alwaysShowInputBox ? '' : 'item-edit-target'" :clearable="item.clearable" v-if="item.type === 'select'"
                  @click.native="selectCLick($event,`selectRef${scope.$index}${index}`)" @focus="selectFocus(`selectRef${scope.$index}${index}`,$event,scope.row)" @blur="selectBlur($event)"
                  @visible-change="visibleSelectChange" @change="selectChange(scope.row,item)" v-model="scope.row[item.prop]"
                  :disabled="scope.row.customRowConfigData.disabledList ? scope.row.customRowConfigData.disabledList[item.disabledPropName] : false">
                  <el-option v-for="items in item.options" :key="items.value + '-select'" :label="$t(items.label)" :value="items.value"></el-option>
                </el-select>
                <!-- 纯文本形式 -->
                <span :title="(isIE() && (item.showOverflowTooltip ? item.showOverflowTooltip : true))? scope.row[item.prop] : ''" v-if="item.type === 'text'" :style="{color:getTextColor(item,scope.row)}"
                  class="default-span">{{$t(getTextName(item,scope.row))}}</span>
                <!-- 类输入框形式 -->
                <div v-if="item.type === 'label'" class="data-center-table-label" style="position:relative;">
                  <div class="data-center-table-label-item-box" :class="{'label-item-disabled' : scope.row.customRowConfigData.disabledList ? scope.row.customRowConfigData.disabledList[item.disabledPropName] : false}"
                      v-if="!scope.row[item.prop]">
                    <span  v-if="scope.row.customRowConfigData.disabledList ? !scope.row.customRowConfigData.disabledList[item.disabledPropName] : true" class="default-label-span">
                      {{$t('cs.common.text.dblclickOther', { selectTitle: `${$t((item.defalutLabelTitleName ? scope.row.customRowConfigData.labelPlaceholder ? scope.row.customRowConfigData.labelPlaceholder : item.defalutLabelTitleName : 'cs.common.button.select'))}` ,selectValue: `${$t((item.defalutLabelName ? item.defalutLabelName : ''))}`})}}
                    </span>
                    <div>
                      <div>
                        <el-input class="label-span" UNSELECTABLE="on" v-model="scope.row[item.prop]" size="small" @focus="labelInputFocus($event)" @blur="labelInputBlur($event)"
                          :title="$t('cs.common.text.dblclickOther', { selectTitle: `${$t((item.defalutLabelTitleName ? scope.row.customRowConfigData.labelPlaceholder ? scope.row.customRowConfigData.labelPlaceholder : item.defalutLabelTitleName : 'cs.common.button.select'))}` ,selectValue: `${$t((item.defalutLabelName ? item.defalutLabelName : ''))}`})" readonly></el-input>
                      </div>
                    </div>
                  </div>
                  <div class="data-center-table-label-item-box" :class="{'label-item-disabled' : scope.row.customRowConfigData.disabledList ? scope.row.customRowConfigData.disabledList[item.disabledPropName] : false}"
                    v-if="scope.row[item.prop]">
                    <span :class="{'label-item-show-icon-span' : scope.row.customRowConfigData.labelTypeConfig ? scope.row.customRowConfigData.labelTypeConfig[item.isShowlabelTypeLeftIconName] : false}" :title="(isIE() && (item.showOverflowTooltip ? item.showOverflowTooltip : true) && scope.row[item.prop] ) ? scope.row[item.prop] : ''" class="default-label-span sssssspan">
                      {{scope.row[item.prop]}}
                    </span>
                    <div v-if="scope.row.customRowConfigData.disabledList ? !scope.row.customRowConfigData.disabledList[item.disabledPropName] : true" style="display:flex;align-items:center;justify-content:center;">
                      <el-tooltip :disabled="(scope.row.customRowConfigData.labelTypeConfig ? scope.row.customRowConfigData.labelTypeConfig[item.labelLeftIconToolTip] ? false : true : true)" :enterable="false" :content="$t((scope.row.customRowConfigData.labelTypeConfig ? scope.row.customRowConfigData.labelTypeConfig[item.labelLeftIconToolTip] : false) ? scope.row.customRowConfigData.labelTypeConfig[item.labelLeftIconToolTip] : '')" placement="top">
                        <i :class="(scope.row.customRowConfigData.labelTypeConfig ? scope.row.customRowConfigData.labelTypeConfig[item.labelLeftIconName] : false) ? scope.row.customRowConfigData.labelTypeConfig[item.labelLeftIconName] : 'el-icon-warning-outline'" v-show="scope.row.customRowConfigData.labelTypeConfig ? scope.row.customRowConfigData.labelTypeConfig[item.isShowlabelTypeLeftIconName] : false" style="position: absolute;top: 10px;left: 5px;z-index: 1;color: red;"></i>
                      </el-tooltip>
                      <div style="height: 100%;width: 100%;">
                        <!-- 输入框 -->
                        <el-input :class="{'label-item-show-icon' : scope.row.customRowConfigData.labelTypeConfig ? scope.row.customRowConfigData.labelTypeConfig[item.isShowlabelTypeLeftIconName] : false}" class="label-span" UNSELECTABLE="on" v-model="scope.row[item.prop]" size="small" readonly @focus="labelInputFocus($event)" @blur="labelInputBlur($event)"
                          :title="scope.row[item.prop] ? $t('cs.common.text.dblclickOther', { selectTitle: `${$t((item.defalutLabelTitleName ? scope.row.customRowConfigData.labelPlaceholder ? scope.row.customRowConfigData.labelPlaceholder : item.defalutLabelTitleName : 'cs.common.button.select'))}` ,selectValue: `${$t((item.defalutLabelName ? item.defalutLabelName : ''))}`}) : ''">
                        </el-input>
                      </div>
                      <!-- 如果穿了每行单独的配置 那就读单独的配置 没有就取列配置 列配置也没有那就默认false -->
                      <div v-if="scope.row.customRowConfigData.labelTypeConfig ? scope.row.customRowConfigData.labelTypeConfig[item.isShowClearButtonName] : item.isShowClearButton ? item.isShowClearButton : false" @click.stop="dbClickTypeClear(item,scope.row)" class="el-input__icon el-icon-close bouble-click-clear-button">
                      </div>
                    </div>
                  </div>
                  <div style="height: 32px;cursor: default;" v-show="((scope.row.customRowConfigData.disabledList ? scope.row.customRowConfigData.disabledList[item.disabledPropName] : false) && scope.row[item.prop] )" :title="!nowAdd ? $t('cs.common.text.dblclickToView') : ''" :class="{'baffle-foundation-show': ((scope.row.customRowConfigData.disabledList ? scope.row.customRowConfigData.disabledList[item.disabledPropName] : false) && scope.row[item.prop] )}" class="baffle-foundation">
                  </div>
                </div>
                <!-- 人员 -->
                <div v-if="item.type === 'role'" >
                    <div class="table-role">
                        <div v-show="scope.row[item.prop] && scope.row[item.prop].length" @click="rolePeopleFunc(scope.row, item)" class="table-role-label">
                          <i class="el-icon-user-solid"></i>
                          <span>{{$t("cs.common.text.total")}}&nbsp;{{scope.row[item.prop] && scope.row[item.prop].length ? scope.row[item.prop].length : 0}}&nbsp;{{$t("cs.common.text.people1")}}</span>
                        </div>
                        <div class="table-role-item" v-for="(roleItem,roleIndex) in scope.row[item.prop]" :key="roleItem.id + roleIndex +'role'" >
                          <span>{{roleItem[item.showNameProp]}}</span>
                          <i v-if="(roleItem.isDefault ? roleItem[item.userIdProp] != item.systemUserId : true)" @click="deleteRolePeopleFunc(scope.row, item, roleItem)" class="el-icon-remove"></i>
                        </div>
                      <div class="table-role-add" @click="addRolePeopleFunc(scope.row, item)">
                        <i class="el-icon-plus"></i>
                      </div>
                    </div>
                </div>
                <span :title="(isIE() && (item.showOverflowTooltip ? item.showOverflowTooltip : true))? scope.row[item.prop] : ''"
                  :class="scope.row.customRowConfigData.alwaysShowInputBox ? 'item-hide-span' : 'item-span'"
                  v-if="(item.type === 'input' && (scope.row.customRowConfigData[item.needHideText] ? !scope.row.customRowConfigData[item.needHideText] : true))&&(item.prop == 'dataLength' && scope.row[item.prop] == -10)">MAX</span>
                <span :title="(isIE() && (item.showOverflowTooltip ? item.showOverflowTooltip : true))? scope.row[item.prop] : ''"
                  :class="scope.row.customRowConfigData.alwaysShowInputBox ? 'item-hide-span' : 'item-span'"
                  v-if="(item.type === 'input' && (scope.row.customRowConfigData[item.needHideText] ? !scope.row.customRowConfigData[item.needHideText] : true))&&!(item.prop == 'dataLength' && scope.row[item.prop] == -10)">{{scope.row[item.prop]}}</span>
                <span :class="scope.row.customRowConfigData.alwaysShowInputBox ? 'item-hide-span' : 'item-span'"
                  v-if="(item.type === 'input' && (scope.row.customRowConfigData[item.needHideText] ? scope.row.customRowConfigData[item.needHideText] : false))"></span>
                <span :title="(isIE() && (item.showOverflowTooltip ? item.showOverflowTooltip : true))? $t(scope.row.customRowConfigData[item.selectValueProp]) : ''"
                  :class="scope.row.customRowConfigData.alwaysShowInputBox ? 'item-hide-span' : 'item-span'" v-if="(item.type === 'select')">{{$t(scope.row.customRowConfigData[item.selectValueProp])}}</span>
              </div>
            </template>
          </el-table-column>
          <template slot="append">
            <div @click="del($event)" class="install-icon-del" :class="tableConfig.tableContentArea.customColumnAddButtonHeight ? 'del-align-center' : ''" :style="{height:(tableConfig.tableContentArea.customColumnAddButtonHeight ? tableConfig.tableContentArea.customColumnAddButtonHeight + 'px': '48px')}" v-show="nowAdd && tableData.length > 0">
              <i class="el-icon-delete"></i>
            </div>
          </template>
          <template slot="empty">
            <div class="out-empty-box" v-show="tableDataBack && tableData.length < 1" :style="{height:(tableConfig.noNeedScrollbar?'': `calc(${tableHeight} - 50px - 10%)`)}">
              <div class="empty-box">
                <img v-show="showTableNoDataImg" src="../Images/NoData.png">
                <span>{{$t(tableConfig.tableContentArea.noData ? tableConfig.tableContentArea.noData : tableNoData)}}</span>
              </div>
            </div>
          </template>
        </el-table>
        <!-- <div style="background: white;width: 100%;position: absolute;bottom: 0;z-index:1;" :style="{height:(tableConfig.noNeedScrollbar?'': tableOtherHeight)}"></div> -->
      </div>
    </div>
    <div v-if="tableConfig.paginationArea&&isAreadyLoad" class="data-center-table-pagination">
      <!-- :hide-on-single-page="tableConfig.paginationArea.hideOnSinglePage" -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="tableConfig.paginationArea.currentPage" :page-sizes="tableConfig.paginationArea.pageSizes"
        :page-size="tableConfig.paginationArea.pageSize" :layout="tableConfig.paginationArea.layout" :total="tableConfig.paginationArea.total">
      </el-pagination>
      <!-- <div v-show="hasNotSinglePage">共 {{tableConfig.paginationArea.total}} 条记录    第{{nowFirstPage}}至{{nowLastPage}}条记录</div> -->
      <div v-show="tableConfig.paginationArea.total > 0">{{$t("cs.common.text.pageInfo",{
                    total:tableConfig.paginationArea.total,
                    startNum:nowFirstPage,
                    endNum:nowLastPage,
                })}}</div>
      <div v-show="tableConfig.paginationArea.total < 1">{{$t("cs.common.text.dataNumber",{
                    len:tableConfig.paginationArea.total,
                })}}</div>
      <!-- <div v-show="hasNotSinglePage">{{$t("cs.common.text.pageInfo",{
                    total:tableConfig.paginationArea.total,
                    startNum:nowFirstPage,
                    endNum:nowLastPage,
                })}}</div> -->
    </div>
  </div>
</template>
<script src="../JS/CSTable.js" scoped></script>
<style lang="less">
@import '../CSS/CSTable.less';
</style>