<template>
  <awsui-layout>
    <awsui-header :height=headerHeight id="header" style="margin-top: 10px;">
      <el-row :style="{'line-height': '30px'}">
        <el-col :span="24">
          <div class="head-title" style="float:left;width: 150px;">
            <div style="padding-left:20px;text-align: left;vertical-align: middle;display: table-cell;width: 100%;height: 36px;">
              共有
              <span style="color:red;">{{totalCount}}</span>
              支流程
            </div>
          </div>
          <div class="head-title" style="float:left;width:200px;">
            <awsui-select id="levelSelect" v-model="levelValue" collapse-tags placeholder="请选择流程层级" :options="levelOptions" multiple @change="searchProcessList(false)"></awsui-select>
          </div>
          <div class="head-title" style="float:right;width: 260px;position: relative;bottom: 5px;">
            <awsui-button class="button-general-color button_fixed_width" type="primary" @click="exportProcessList">导出</awsui-button>
            <el-tooltip class="item" effect="dark" content="重置筛选条件" placement="bottom-end" :hide-after="1000">
              <awsui-button class="button_fixed_width" @click="resetCondition">重置</awsui-button>
            </el-tooltip>
            <!-- 更多搜索 -->
            <template v-if="!showMoreSearch">
              <el-tooltip class="item" effect="dark" content="更多搜索" placement="bottom-end" :hide-after="1000">
                <i class="awsui-iconfont custom_table_dlg_icon" style="margin-right: 10px;" @click="searchMore(true)">&#xe62b;</i>
              </el-tooltip>
            </template>
            <template v-if="showMoreSearch">
              <el-tooltip class="item" effect="dark" content="关闭更多搜索" placement="bottom-end" :hide-after="1000">
                <i class="awsui-iconfont custom_table_dlg_icon" style="margin-right: 10px;" @click="searchMore(false)">&#xe62a;</i>
              </el-tooltip>
            </template>
            <!-- 小组模式不支持自定义表项 -->
            <el-tooltip v-if="teamId == ''" class="item" effect="dark" content="自定义表项" placement="bottom-end" :hide-after="1000">
              <i class="el-icon-circle-plus custom_table_dlg_icon" @click="customTableDlg = true"></i>
            </el-tooltip>
          </div>
          <div class="head-title" style="float:right;width:200px;padding-right: 20px;">
            <awsui-input v-model="searchInput" size="mini" suffixIcon="&#xe6e9;" placeholder="请输入流程名称进行搜索" clearable @input="searchProcessList(false)"></awsui-input>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="showMoreSearch" :style="{'line-height': '30px'}">
        <!-- 发布部门 -->
        <div class="head-title" style="float: left;width: 250px;padding-left: 20px;">
          <span style="padding-right: 10px;">发布部门</span>
          <div style="display: inline-block;width: 180px;">
            <awsui-input v-model="issuingDepartment" size="mini" suffixIcon="&#xe6e9;" readonly placeholder="请选择发布部门" @click.native="choiceAwsOrgComponent()"></awsui-input>
          </div>
        </div>
        <div class="head-title" style="float: left;width: 248px;padding-left: 25px;">
          <span style="padding-right: 10px;">流程架构</span>
          <div style="display: inline-block;width: 180px;">
            <awsui-input v-model="frameworkSearchInput1" size="mini" suffixIcon="&#xe6e9;" readonly placeholder="请选择流程架构L1" @click.native="choicePalProcessTree('L1')"></awsui-input>
          </div>
        </div>
        <div class="head-title" style="float: left;width: 180px;padding-left: 20px;">
          <div style="display: inline-block;width: 180px;">
            <awsui-input v-model="frameworkSearchInput2" size="mini" suffixIcon="&#xe6e9;" readonly placeholder="请选择流程架构L2" @click.native="choicePalProcessTree('L2')"></awsui-input>
          </div>
        </div>
        <div class="head-title" style="float: left;width: 180px;padding-left: 20px;">
          <div style="display: inline-block;width: 180px;">
            <awsui-input v-model="frameworkSearchInput3" size="mini" suffixIcon="&#xe6e9;" readonly placeholder="请选择流程架构L3" @click.native="choicePalProcessTree('L3')"></awsui-input>
          </div>
        </div>
        <div class="head-title" style="float:left;width: 80px;margin-left: 50px;">
          <awsui-button class="button-general-color-reverse button_fixed_width" @click="searchProcessList(false)">查询</awsui-button>
        </div>
      </el-row>
    </awsui-header>
    <awsui-main style="padding-right: 0;padding-bottom: 0;" id="processlistMain">
      <el-table
        :data="tableData"
        style="width: 100%"
        :height="tableHeight"
        size="medium"
        @filter-change="filterTableData"
        ref="table">
        <!--无数据时表格显示内容，设置为空，后期可改为具体图标文字-->
        <template slot="empty">
          <div v-if="dataLoaded" style="text-align: center;">
            <span><i class="iconfont icon-wushuju" style="color: #C2C2C2;font-size: 60px;"></i></span>
            <div class="text-general-color" style="height: 20px; line-height: 20px;">没有查询到结果</div>
          </div>
          <div v-else>
            <span>正在查询</span>
          </div>
        </template>
        <template v-for="col in tableHeaderData">
          <el-table-column v-if="isShowColumn('selectType', col.dataType)"
            :prop="col.prop"
            :label="col.label"
            :width="col.width"
            :min-width="col.minWidth"
            :filters="col.filters"
            filter-placement="right-start"
            column-key="type"
            :key="col.key"
            :show-overflow-tooltip="col.showOverflow" class="el-table-column-row">
          </el-table-column>
          <el-table-column v-if="isShowColumn('selectStatus', col.dataType)"
             :prop="col.prop"
             :label="col.label"
             :width="col.width"
             :min-width="col.minWidth"
             :filters="col.filters"
             filter-placement="right-start"
             column-key="status"
             :key="col.key"
             :show-overflow-tooltip="col.showOverflow" class="el-table-column-row">
          </el-table-column>
          <el-table-column v-if="isShowColumn('default', col.dataType)"
            :prop="col.prop"
            :label="col.label"
            :width="col.width"
            :min-width="col.minWidth"
            :key="col.key"
            :show-overflow-tooltip="col.showOverflow" class="el-table-column-row">
          </el-table-column>
          <!-- 流程名称单独处理 -->
          <el-table-column v-if="isShowColumn('name', col.dataType)"
           :prop="col.prop"
           :label="col.label"
           :width="col.width"
           :min-width="col.minWidth"
           :key="col.key"
           :show-overflow-tooltip="col.showOverflow" class="el-table-column-row">
            <template slot-scope="scope">
              <p class="processlist-title" style="cursor: pointer;" @click="openProcessDesignerPage(scope.row)">{{scope.row.name}}<span class="processlist-title-version"> (v{{scope.row.version}})</span></p>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <div v-if="currentPage > 0" style="height:25px;line-height:25px;vertical-align: middle">
        <span v-if="currentPage < Math.ceil(totalCount / pageStep)" class="btn-more-data" @click="loadData">点击加载更多</span>
        <span v-else >已经到底啦</span>
      </div>
    </awsui-main>
    <awsui-sidebar
            id="customTableDlg"
            ref="customTableDlg"
            title="自定义表项"
            :visible.sync="customTableDlg"
            size="30%"
            :before-close="handleClose"
            @opened="initMoreAttr">
      <div slot="title">
        <div style="display: inline-block;width: 50%;text-align: left;height: 30px;line-height: 30px;vertical-align: middle;">
          <span>自定义表项</span>
        </div>
        <div style="display: inline-block;width: 50%;text-align: right;height: 30px;line-height: 30px;">
          <span style="cursor: pointer;color: #4E7FF9;margin-right: 10px;" @click="initTableColumnm">重置</span>
        </div>

      </div>
      <div style="border-top: 1px solid #e9e9e9;padding: 0px;">
        <div id="customTableDlgHeight" style="overflow-y: auto;">
          <div id="customTabledlgList">
            <p class="draggable-title">已选</p>
            <draggable class="list-group" :list="customTableCheckedData" group="people" @drop="draggableDrop">
              <div class="list-group-item custom-table-dlg-li" v-for="(element) in customTableCheckedData" :key="element.id">
                <span class="custom-table-dlg-li-item"><span class="custom-table-dlg-li-item">{{ element.name }}<span class="text-second-color" style="font-size: 12px;">  （{{element.id}}）</span></span></span>
                <i class="iconfont icon-yidongshu custom-table-dlg-li-item-icon icon-display"></i>
              </div>
            </draggable>
          </div>
          <div>
            <p class="draggable-title" style="margin-top: 20px;">可选</p>
            <draggable class="list-group" :list="customTableUncheckedData" group="people" @drop="draggableDrop">
              <div class="list-group-item custom-table-dlg-li" v-for="(element) in customTableUncheckedData" :key="element.id">
                <span class="custom-table-dlg-li-item"><span class="custom-table-dlg-li-item">{{ element.name }}<span class="text-second-color" style="font-size: 12px;">  （{{element.id}}）</span></span></span>
                <i class="iconfont icon-yidongshu custom-table-dlg-li-item-icon icon-display"></i>
              </div>
            </draggable>
          </div>
        </div>
        <div class="custom-table-dlg-footer">
          <div id="drawerFooter">
            <awsui-button class="button-general-color button_fixed_width" type="primary" @click="saveTableColumnConfig()">保存</awsui-button>
            <awsui-button class="button_fixed_width" @click="closeDlg">取消</awsui-button>
          </div>
        </div>
      </div>
    </awsui-sidebar>
    <iframe style="display: none" id='downloadIframe' ></iframe>
    <!-- 选择流程架构 -->
    <PALRepositoryTree
        ref="palRepositoryAddress"
        :visible.sync="palRepositoryAddress.visible"
        :checkStrictly="palRepositoryAddress.checkStrictly"
        :wsId="palRepositoryAddress.wsId"
        :teamId="palRepositoryAddress.teamId"
        :categorys="palRepositoryAddress.categorys"
        :multiple=true
        v-on:cancel="palRepositoryAddress.visible = false"
        v-on:getResult="savePalRepositoryAddressResult"
        :title="palRepositoryAddress.title"
    ></PALRepositoryTree>
    <BPMOrgAddress
        ref="palAwsOrgAddress"
        :visible.sync="bpmOrgAddress.visible"
        :addressType="bpmOrgAddress.addressType"
        v-on:cancel="bpmOrgAddress.visible = false"
        v-on:getResult="saveBpmOrgAddressResult"
        multiple
        :title="bpmOrgAddress.title"
        :multiple="bpmOrgAddress.multiple"
    />
  </awsui-layout>
</template>

<script>
  import draggable from "vuedraggable";
  import awsuiAxios from "../awsuiAxios";
  import {openDesigner} from "../api/commonFun";
  import PalRelationAddress from  "@/components/common/PalRelationAddress/index.js";
  import PALRepositoryTree from "@/components/common/PALRepositoryTree/index.js";
  import BPMOrgAddress from  "@/components/common/BPMOrgAddress/index.js";// pal平台组织架构地址簿，调用平台部门人员角色
  let levelOptions = levelSelect;
  let levelValue = defaultSelectVal;
  // 配置临时记录
  let tempMoreAttrCheckedConfig = [];
  let tempMoreAttrUnCheckedConfig = [];
  let tempTableFilterObj = {};
    export default {
      name: "ProcesslistHome",
      components: {
        draggable,
        PalRelationAddress,
        BPMOrgAddress,
        PALRepositoryTree
      },
      data() {
        return {
          teamId: teamId,
          customTableDlg : false,
          headerHeight : '30px',
          tableHeight : (document.documentElement.clientHeight - 66 - 20) + 'px',
          tableHeaderData : [],
          searchInput : '',
          levelOptions: levelOptions,
          levelValue: levelValue,
          tableData: [],
          mouseDraggable: false,
          // 分页
          totalCount : '?',
          currentPage: 0,
          pageStep: 0,
          customTableCheckedData: [],
          customTableUncheckedData: [],
          dataLoaded: false,
          serialNumber: 0, // 当前序号
          frameworkSearchInput1: '',
          frameworkSearchInput1Arr: [],
          frameworkSearchInput2: '',
          frameworkSearchInput2Arr: [],
          frameworkSearchInput3: '',
          frameworkSearchInput3Arr: [],
          issuingDepartment: '',
          issuingDepartmentArr: [],
          palRepositoryAddress: {// pal文件树组件
            visible: false,
            checkStrictly: true,
            title: '选择流程',
            wsId: wsId,
            teamId: teamId,
            categorys: 'process',
            type: 'batch',
            level: ''
          },
          bpmOrgAddress: {
            title: '选择发布部门',
            visible: false,
            addressType: "department",
            multiple: true,
            isRequired: false
          },
          showMoreSearch: false,
        }
      },
      methods : {
        draggableDrop(ev) {
          ev.stopPropagation();
          ev.preventDefault();
          ev.dataTransfer = ev.originalEvent.dataTransfer;
        },
        resize() {// 窗口监听window.resize
          const that = this
          let resizeTimer = null;
          window.onresize = () => {
            return (() => {
              if (resizeTimer) clearTimeout(resizeTimer);
              resizeTimer = setTimeout(function(){
                that.tableHeight = (document.documentElement.clientHeight - 66 - 20) + 'px';
                that.searchProcessList(false);
                that.initDlgBodyHeight();
              } , 400);
            })()
          }
        },
        handleClose(done) {
          const that = this;
          that.customTableCheckedData = JSON.parse(JSON.stringify(tempMoreAttrCheckedConfig));
          that.customTableUncheckedData  = JSON.parse(JSON.stringify(tempMoreAttrUnCheckedConfig));
          done();
        },
        closeDlg() {
          this.handleClose(function(){});
          this.customTableDlg = false;
        },
        scorllBottomEvent() {
          const that = this;
          let dom = document.querySelector(".el-table__body-wrapper");
          dom.addEventListener("scroll", function() {
            const scrollDistance =dom.scrollHeight - dom.scrollTop - dom.clientHeight;
            if(scrollDistance <=0){//等于0证明已经到底，可以请求接口
              
            }
          })
        },
        getSearchCondition(params) {// 获取条件
          params.data.searchInput = this.searchInput;
          params.data.levelValue = this.levelValue.join(',');
          params.data.tableFilter = JSON.stringify(tempTableFilterObj);
          params.data.customFilter = JSON.stringify({
            frameworkSearchInput1Arr: this.frameworkSearchInput1Arr,
            frameworkSearchInput2Arr: this.frameworkSearchInput2Arr,
            frameworkSearchInput3Arr: this.frameworkSearchInput3Arr,
            issuingDepartmentArr: this.issuingDepartmentArr,
          });
          return params;
        },
        initPageCount(updateTableColumn) {// 初始化页面总条数，页码等
          const that = this;
          that.dataLoaded = false;
          let params = {
            url:'jd',
            data:{
              cmd: 'com.actionsoft.apps.coe.pal.processlist_header_query',
              wsId: wsId,
              teamId: teamId
            }
          };
          params = this.getSearchCondition(params);
          awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
            if (ro.result == 'ok') {
              let roData = ro.data;
              that.totalCount = roData.totalCount;
              that.customTableCheckedData = roData.customTableCheckedData;
              that.customTableUncheckedData = roData.customTableUncheckedData;
              // 临时记录
              tempMoreAttrCheckedConfig = JSON.parse(JSON.stringify(roData.customTableCheckedData));
              tempMoreAttrUnCheckedConfig = JSON.parse(JSON.stringify(roData.customTableUncheckedData));
              // 宽度处理
              let tempHeadData = JSON.parse(JSON.stringify(roData.customTableCheckedData));
              // 获取屏幕宽度
              let dom = document.querySelector(".el-table__body-wrapper");
              let tableScreenWidth = dom.offsetWidth;
              // 获取元素占用总宽度
              let dataHeaderWidth = 0;// 总宽度
              let dataHeaderSize = tempHeadData.length;// 总个数
              for (let i = 0; i < tempHeadData.length; i++) {
                dataHeaderWidth += parseInt(tempHeadData[i].width);
              }
              if (dataHeaderWidth < tableScreenWidth) {
                // 调整宽度
                let blankWidth = tableScreenWidth - dataHeaderWidth;// 剩余空白
                let addWidth = blankWidth / dataHeaderSize;// 每列增加宽度
                if (blankWidth > 0 && addWidth > 0) {
                  for (let i = 0; i < tempHeadData.length; i++) {
                    tempHeadData[i].width = parseInt(tempHeadData[i].width) + addWidth + "";// 宽度增加
                  }
                }
              }
              for (let i = 0; i < tempHeadData.length; i++) {
                if (updateTableColumn) {
                  tempHeadData[i].key = Math.random();
                } else {
                  tempHeadData[i].key = that.tableHeaderData[i].key;
                }
              }
              that.tableHeaderData = tempHeadData;
              // that.tableHeaderData = JSON.parse(JSON.stringify(roData.customTableCheckedData));
              // 页码及每页计算
              that.currentPage = 0;
              that.serialNumber = 0;
              that.pageStep = Math.ceil(parseInt(that.tableHeight)/45) + 5;
              that.loadData();
            } else {
              // alert('请求响应错误');
              // debugger;
            }
          }).catch(error=>{
            console.log(error);
          })
        },
        loadData() {// 数据加载
          const that = this;
          if(that.currentPage < Math.ceil(that.totalCount / that.pageStep)){//当前页数小于总页数就请求
            let params = {
              url:'jd',
              data:{
              }
            };
            params.data.wsId = wsId;
            params.data.teamId = teamId;
            params.data.currentPage = that.currentPage;
            params.data.pageStep = that.pageStep;
            params.data.tableHead = JSON.stringify(that.tableHeaderData);
            params.data.cmd = 'com.actionsoft.apps.coe.pal.processlist_data_query';
            params = this.getSearchCondition(params);
            awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
              if (ro.result == 'ok') {
                let roData = ro.data.data;
                for (let i = 0; i < roData.length; i++) {
                  roData[i].no_serialNumber = ++that.serialNumber;
                }
                that.tableData = that.tableData.concat(roData);
                that.currentPage++;//当前页数自增
                that.dataLoaded = true;
              }
            }).catch(error=>{
              console.log(error);
            })
          } else {
            that.dataLoaded = true;
          }
        },
        initMoreAttr() {
          // 初始化高度
          this.initDlgBodyHeight();
        },
        initDlgBodyHeight() {
          if (document.getElementById("customTableDlgHeight") != null) {
            document.getElementById("customTableDlgHeight").style.height =
              (document.documentElement.clientHeight - 80 - document.getElementById('drawerFooter').offsetHeight) + 'px';// 82是dialog头部高度，36是底部按钮高度
          }
        },
        saveTableColumnConfig() {// 保存
          const that = this;
          let params = {
            url:'jd',
            data:{
            }
          };
          params.data.wsId = wsId;
          params.data.customTableCheckedData = JSON.stringify(that.customTableCheckedData);
          params.data.cmd = 'com.actionsoft.apps.coe.pal.processlist_config_save';
          params = this.getSearchCondition(params);
          awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
            if (ro.result == 'ok') {
              that.closeDlg();
              tempTableFilterObj = {};// 清空列上的筛选项，不然表格列换位置筛选的显示有问题
              // 查询
              that.searchProcessList(true);
            } else {
              // alert('请求响应错误');
              // debugger;
            }
          }).catch(error=>{
            console.log(error);
          })
        },
        searchProcessList(updateTablecolumn) {// 搜索查询
          this.$refs.table.bodyWrapper.scrollTop = 0;
          this.tableData = [];
          this.initPageCount(updateTablecolumn);
        },
        openProcessDesignerPage(row) {
          const palId = row.id;
          const folder = row.folder;// 是否文件夹
          if (folder) {
            this.$message({
              message: '不支持打开文件夹类型',
              type: 'warning'
            });
            return;
          }
          openDesigner('', palId, this.$store.state.sessionId);
        },
        deepCloneJson(obj) {
          return JSON.parse(JSON.stringify(obj));
        },
        resetCondition() {// 重置搜索条件
          this.levelValue = defaultSelectVal;
          this.searchInput = '';
          this.$refs.table.clearFilter();
          tempTableFilterObj = {};
          this.searchProcessList(false);
        },
        exportProcessList() {// 导出流程清单
          const that = this;
          let params = {
            url:'jd',
            data:{
            }
          };
          params.data.wsId = wsId;
          params.data.teamId = teamId;
          params.data.cmd = 'com.actionsoft.apps.coe.pal.processlist_data_export';
          params = this.getSearchCondition(params);
          awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
            if (ro.result == 'ok') {
              document.getElementById("downloadIframe").src=ro.msg;
            } else {
              // alert('请求响应错误');
              // debugger;
            }
          }).catch(error=>{
            console.log(error);
          })
        },
        tableRowClassName({ row, rowIndex }) {
          return 'table_bg_color'
        },
        isShowColumn(a, b) {
          return a == b;
        },
        filterTableData(filter) {
          if (filter.type) {
            tempTableFilterObj.type = filter.type;
          } else if (filter.status) {
            tempTableFilterObj.status = filter.status;
          }
          // 重新搜索
          this.searchProcessList(false);
        },
        initTableColumnm() {// 初始化表项设置
          const that = this;
          that.customTableCheckedData = [];
          that.customTableUncheckedData = [];
          that.saveTableColumnConfig();
        },
        choicePalProcessTree(level) {// 选择流程
          this.palRepositoryAddress.level = level;
          this.palRepositoryAddress.visible = true;
        },
        savePalRepositoryAddressResult(data) {// 选择流程之后获取确定结果
          this.palRepositoryAddress.visible = false;
          // 移动
          const that = this;
          const result = [];
          let resultStr = [];
          for (let i = 0; i < data.length; i++) {
            result.push({
              id: data[i].id,
              name: data[i].name,
              versionId: data[i].versionId,
              currId: data[i].currId
            });
            resultStr.push(data[i].name);
          }
          if (that.palRepositoryAddress.level == 'L1') {
            that.frameworkSearchInput1Arr = result;
            that.frameworkSearchInput1 = resultStr.join(',')
          } else if (that.palRepositoryAddress.level == 'L2') {
            that.frameworkSearchInput2Arr = result;
            that.frameworkSearchInput2 = resultStr.join(',')
          } else if (that.palRepositoryAddress.level == 'L3') {
            that.frameworkSearchInput3Arr = result;
            that.frameworkSearchInput3 = resultStr.join(',')
          }
        },
        choiceAwsOrgComponent() {// AWS平台部门/人员/角色组件
          this.bpmOrgAddress.visible = true;
        },
        saveBpmOrgAddressResult(data) {
          const that = this;
          this.bpmOrgAddress.visible = false;
          const result = [];
          let resultStr = [];
          for (let i = 0; i < data.length; i++) {
            result.push({
              id: data[i].id,
              name: data[i].name,
              type: data[i].type
            });
            resultStr.push(data[i].name);
          }
          that.issuingDepartmentArr = result;
          that.issuingDepartment = resultStr.join(',')
        },
        searchMore(visible) {// 查询更多
          if (visible) {
            this.headerHeight = '60px';
            this.tableHeight = (document.documentElement.clientHeight - 66 - 20) - 30 + 'px';
          } else {
            this.headerHeight = '30px';
            this.tableHeight = (document.documentElement.clientHeight - 66 - 20) + 'px';
            this.clearSearchMore();
          }
          this.showMoreSearch = visible;
          this.searchProcessList(false);
        },
        clearSearchMore() {
          this.frameworkSearchInput1 = '';
          this.frameworkSearchInput1Arr = [];
          this.frameworkSearchInput2 = '';
          this.frameworkSearchInput2Arr = [];
          this.frameworkSearchInput3 = '';
          this.frameworkSearchInput3Arr = [];
          this.issuingDepartment = '';
          this.issuingDepartmentArr = [];
        }
      },
      created() {

      },
      mounted(){
        if (this.currentPage == 0) {
          this.searchProcessList(true);
        }
        this.resize();
        // this.scorllBottomEvent();
        // 火狐浏览器拖拽问题
        document.body.ondrop = function (event) {
          event.preventDefault();
          event.stopPropagation();
        }
      }
    }
</script>
<style>
  .el-select--medium {
    float:left;
  }
  i,a,button,input,div,span{
    outline: none;
  }
</style>

<style scoped>
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .custom_table_dlg_icon {
    color: #4E7FF9;
    font-size: 20px;
    cursor: pointer;
    position: relative;
    top: 5px;
  }
  .custom-table-dlg-li {
    text-align: left;
    padding-left: 20px;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
    cursor: move;
  }
  .custom-table-dlg-li:hover {
    background-color: #F5F7FA;
  }
  .custom-table-dlg-li-item {
    display: inline-block;
    width: 88%;
  }
  .custom-table-dlg-li-item-icon {
    width: 10%;
    text-align: center;
  }
  .icon-display{
    display: none;
  }
  .custom-table-dlg-li:hover .icon-display{
    display: inline-block;
  }
  .custom-table-dlg-footer {
    height: 40px;
    text-align: right;
    padding: 10px;
  }
  .draggable-title {
    text-align: left;
    padding-left: 20px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: #95A2B2;
  }
  .head-title {
    display: inline-block;
  }
  .button_fixed_width {
    width: 80px;
  }
  #customTableDlg >>> .awsui-sidebar__header {
    padding: 10px 10px 10px 20px;
  }

  #processlistMain >>> .el-table__row:hover .processlist-title {
    color: #4E7FF9 !important;
  }
  #processlistMain >>> .el-table__row:hover .processlist-title-version {
    color: #4E7FF9 !important;
  }
  .processlist-title-version {
    display:inline-block;
    -webkit-transform:scale(0.9);
    font-size:12px;color:#AAA;
  }
  .btn-more-data:hover {
    color: #4E7FF9;
  }
  .btn-more-data {
    cursor: pointer;
  }
</style>
