<template>
  <div class="app-container">
    <div class="filter-container" style="justify-content: space-between;padding: 0 10px;">
        <div class="filter-container">
            <div class="container_item">
                <span class="item_text">{{ $t('datadictionary.dictDec') }}:</span>
                <el-input v-model="dictName"  class="filter-item input_item"   />
            </div>
            <el-button v-waves class="filter-item" style="margin-right: 10px!important;" type="primary" icon="el-icon-my-search" @click="getData">
                {{ $t('table.search') }}
            </el-button>
            <el-button v-waves class="filter-item" style="margin-right: 10px!important;" type="primary" icon="el-icon-my-reset" @click="handleReset">
                {{ $t('table.reset') }}
            </el-button>
        </div>
    </div>

   <div class="industry-data" >
      <el-row :gutter="10">
        <el-col :span="12">
          <div class="level1-table" :style="{'height':tableHeight+'px'}">
            <div class="table-tit"></div>
            <div class="table-cnt">
              <div class="layout-table table-fixed">
                <div class="thead">
                  <span class="td col">{{ $t('datadictionary.dictType') }}</span>
                  <span class="td col">
                    <span class="col-name">{{ $t('datadictionary.dictDec') }}</span>
                    <span class="btn">
                        <el-button
                        v-if="permission.includes('data_dictionary_cache')"
                        style="margin-right: 10px;"
                        class="item-btn"
                        size="mini"
                        type="text"
                        icon="el-icon-my-redis"
                        :loading="btnLoading"
                        @click="handleTemporary">
                        {{ $t('table.cache') }}
                    </el-button>
                     <el-button
                        v-if="permission.includes('data_dictionary_add')"
                        class="item-btn"
                        size="mini"
                        type="text"
                        icon="el-icon-my-add1"
                        @click="handleCreate('1')">
                        {{ $t('table.add') }}
                    </el-button>
                    </span>
                  </span>
                </div>
                <div class="tbody">
                  <div class="tr"
                    v-for="(item,index) in tableData"
                    :key="item.id"
                    :class="{'active': tab_index === index}"  @click="rowClick(item,index)">
                    <span class="td col" > {{ item.dictType }}</span>
                    <span class="td col">
                      <span class="col-name" :title="item.dictName" > {{ item.dictName }}</span>
                      <span class="btn">
                        <img 
                          v-if="permission.includes('data_dictionary_update')" 
                          @click.stop="handleUpdate(item,1)"  
                          style="margin-right:10px;"
                          :src="tab_index === index ? selectModifyImg:modifyImg" alt="">
                        <img 
                          v-if="permission.includes('data_dictionary_del')" 
                          @click.stop="handleDelete(item,1)" 
                          :src="tab_index === index ? selectDelimg:delImg" alt="">
                      </span>
                    </span>
                  </div>
                </div>
                <div class="tpage">
                  <pagination v-show="listQuery.total>0" :total="listQuery.total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getData"/>
                </div>
              </div>
            </div>
          </div>
        </el-col>
         <el-col :span="12">
          <div class="level-table" :style="{'height':tableHeight+'px'}">
            <div class="table-tit">
              <span class="btn">
               <el-button v-if="permission.includes('data_dictionary_add')" v-waves class="item-btn" type="text" icon="el-icon-my-add1" @click="handleCreate('2')">
                    {{ $t('table.add') }}
                </el-button>
              </span>
            </div>
            <div class="table-cnt" v-loading="loading2">
              <div class="layout-table table-fixed">
                <div class="thead1">
                  <template>
                    <span class="td col" :title="rowData.dictType+'-'+rowData.dictName">
                      {{rowData.dictType}}-{{rowData.dictName}}
                    </span>
                  </template>
                  <span class="td col"></span>
                </div>
                <div class="thead">
                  <span class="td col">{{ $t('datadictionary.optionVal') }}</span>
                  <span class="td col">
                    <span class="col-name">{{ $t('datadictionary.optionDec') }}</span>
                  </span>
                </div>
                <div class="tbody">
                  <div class="tr"
                    v-for="(item,index) in childrenData"
                    :key="item.id"
                    :class="{'active': select1 === index}"
                    @click="dictClick(index)">
                    <span class="td col">
                      {{ item.dictVal }}
                    </span>
                    <span class="td col">
                      <span :title="item.dictName" class="col-name">{{ item.dictName }}</span>
                      <span class="btn">
                        <img v-if="permission.includes('data_dictionary_update')" @click.stop="handleUpdate(item,2)" style="margin-right:10px;" 
                        :src="select1 === index ? selectModifyImg : modifyImg" alt="">
                        <img v-if="permission.includes('data_dictionary_del')" @click.stop="handleDelete(item,2)"
                         :src="select1 === index ? selectDelimg : delImg" alt="">
                      </span>
                    </span>
                  </div>
                </div>
                <div class="tpage">
                  <pagination  :total="listQuery.total1" :page.sync="listQuery.pageNum1" :limit.sync="listQuery.pageSize1" />
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>


    <el-dialog
        :title="textMap[dialogStatus]"
        :visible.sync="dialogVisible"
        v-el-drag-dialog
        :close-on-click-modal="false"
        width="499px">
        <div class="add_info">
          <el-row :gutter="10" style="width: 100%;">
            <el-col :span="24">
                <template v-if="handleType==1">
                    <el-form label-position="right" label-width="120px" :model="form">
                        <el-form-item :label="$t('datadictionary.dictType')+'：'" :class="{'unabled is-disabled': dialogStatus !== 'create1', 'require': dialogStatus === 'create1' }">
                            <el-input
                            oninput="value=value.replace(/[^0-9.]/g,'')"
                            v-model.number="form.dictType"
                            @blur="blurChange($event, 'form', 'dictType')"
                            :disabled="dialogStatus !== 'create1'"
                            placeholder="请输入" ></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('datadictionary.dictDec')+'：'" :class="{'unabled is-disabled': dialogStatus === 'delete', 'require': dialogStatus !== 'delete'}">
                            <el-input
                            v-model="form.dictName"
                            :disabled="dialogStatus === 'delete'"
                            placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-form>
                </template>
                <template v-if="handleType!=1">
                    <el-form label-position="right" label-width="120px" :model="form2" >
                        <el-form-item :label="$t('datadictionary.optionVal')+'：'" :class="{'unabled is-disabled': dialogStatus !== 'create2', 'require': dialogStatus === 'create2' }">
                            <el-input v-model="form2.dictVal" :disabled="dialogStatus !== 'create2'" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('datadictionary.optionDec')+'：'" :class="{'unabled is-disabled': dialogStatus === 'delete2', 'require': dialogStatus !== 'delete2'}">
                            <el-input
                                v-model="form2.dictName"
                                :disabled="dialogStatus === 'delete2'"
                                placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('datadictionary.indexNo')+'：'" :class="{'unabled is-disabled': dialogStatus === 'delete2', 'require': dialogStatus !== 'delete2'}">
                            <el-input-number
                                style="width: 150px!important;"
                                v-if="handleType!=1"
                                :disabled="dialogStatus === 'delete2'"
                                v-model="form2.indexNo"
                                :min="1"
                                :max="120"
                            ></el-input-number>
                        </el-form-item>
                    </el-form>
                </template>
            </el-col>
          </el-row>
        </div>
        <span slot="footer" class="dialog-footer">
            <template v-if="dialogStatus === 'delete' || dialogStatus === 'delete2'">
                <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-delete" @click="sbumitData">
                {{ $t('table.delete') }}
            </el-button>
            </template>
            <template v-else>
                <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-tijiao" @click="sbumitData">
                    {{ $t('table.sbumit') }}
                </el-button>
            </template>
            <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-quxiao" @click="dialogVisible=false">
                {{ $t('table.cancel') }}
            </el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import { mapGetters } from 'vuex'
import waves from '@/directive/waves' // waves directive
import Pagination from '../businessparameters/components/Pagination.vue';
// import { parseTime } from '@/utils'
import http from '@/api/http'

export default {
  name: '',
  components: { Pagination },
  computed: {
    ...mapGetters([
      'permission',
    ])
  },
  directives: { waves, elDragDialog },
  data() {
    return {
      tableHeight: 0,
      cWidth:0,
      tabw:0,
      listQuery:{
        total: 0,
        pageNum: 1,
        pageSize: 10,
        total1: 0,
        pageNum1: 1,
        pageSize1: 10,
      },
      dialogVisible:false,
      tableData:[],
      childrenData:[],
      rowData:{},
      getIndex:'',
      form:{
        dictName: undefined,
        dictType: undefined
      },
      form2: {
        dictVal: undefined,
        dictName: undefined,
        indexNo: 1,
      },
      handleType:1,
      updateVisible:false,
      textMap: {
        create1: '新增数据字典',
        update1: '编辑数据字典',
        delete: '删除数据字典',
        create2: '新增选项值',
        update2: '编辑主索引对应的选项值',
        delete2: '删除主索引对应的选项值'
      },
      dialogStatus: '',
      query:{},
      indexNo: 1,
      dictName: undefined, // 主索引说明
      tab_index:'-1',
      loading: false,
      loading2: false,
      btnLoading: false,
      select1:0,
      selectDelimg: require('@/assets/images/v3/v3_dataSd.png'), //选中删除
      delImg: require('@/assets/images/v3/v3_dataDel.png'),
      modifyImg: require('@/assets/images/v3/v3_dataModify.png'),
      selectModifyImg: require('@/assets/images/v3/v3_dataSm.png') //选中编辑
    }
  },
  created() {
    this.getData()
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 290
      this.cWidth = window.innerWidth- 240
      this.tabw = (this.cWidth-464)/4
    })
  },
  methods: {
    dictClick(index){
        this.select1 = index
    },
    blurChange(event, form, name) {
        event.target.value = event.target.value.replace(/\-/g, "");
        if (event.target.value > 10000) {
            event.target.value = 10000
        }
        this[form][name] = event.target.value
    },
    getData() {
      let { pageSize, pageNum } = this.listQuery
        let params = {
            cpage: pageNum,
            pageSize: pageSize,
            dictName: this.dictName
        }
        this.loading = true
        http.post('/sys/dictionary/getDictTypeList', params).then((res) => {
            this.loading = false
            this.tableData = res.data.list || []
            this.listQuery.total = res.data.total || 0;
            if (this.tableData.length !== 0) {
                this.rowClick(this.tableData[0],0)
            } else {
                this.childrenData = []
            }
        }).catch(err => {this.loading = false});
    },
    // 数据字典主索引 行row点击
    rowClick(row, index) {
        this.rowData = row
        this.tab_index = index
        this.getChildren(row.dictType)
    },
    // 根据字典类型查询字典项列表
    getChildren(dictType){
        this.loading2 = true
        http.post(`/sys/dictionary/getDictionaries`,{dictType:dictType}).then((res)=>{
            this.loading2 = false
            this.childrenData = res.data;
      }).catch(() => { this.loading2 = false });
    },
    // 09、同步数据字典到Redis中
    handleTemporary() {
        this.btnLoading = true
        http.post(`/sys/dictionary/syncSysDictionary`).then((res)=>{
            this.btnLoading = false
            this.$message.success('缓存成功')
      }).catch(() => { this.btnLoading = false });
    },
    sbumitData(){
        let params = {};
        let path = '';
        let submitMes = ''
        switch(this.dialogStatus) {
            // 新增数据字典类型
            case 'create1': {
                let { dictName, dictType } = this.form
                console.log(dictName, dictType);
                if (!dictType) {
                    this.$message.error('字典类型编码不能为空')
                    return
                }
                if (!dictName) {
                    this.$message.error('字典说明不能为空')
                    return
                }
                if (dictName.length > 30) {
                    this.$message.error('字典说明长度需小于30个字符')
                    return
                }
                params = Object.assign({}, { dictName: dictName, dictType: dictType })
                path = `/sys/dictionary/createDictType`;
                submitMes = '新增成功'
                break;
            }
            // 新增数据字典项
            case 'create2': {
                console.log('form2', this.form2);
                let { dictVal, dictName, indexNo } = this.form2;
                if (!dictVal) {
                    this.$message.error('选项值不能为空')
                    return
                }
                if (dictVal.length > 10) {
                    this.$message.error('主索引对应的选项值长度不大于10个字符')
                    return
                }
                if (!dictName) {
                    this.$message.error('选项值的说明不能为空')
                    return
                }
                if (dictName.length > 30) {
                    this.$message.error('选项值的说明长度需小于30个字符')
                    return
                }
                let { id, dictType } = this.rowData; // 字典di
                console.log('rowData', this.rowData);
                params = Object.assign({}, {
                    dictVal: dictVal,
                    dictName: dictName,
                    indexNo: indexNo,
                    pid: id,
                    dictType: dictType,
                })
                path = '/sys/dictionary/createDictionary';
                submitMes = '新增成功'
                break;
            }
            // 更新数据字典类型
            case 'update1': {
                let { dictName, dictType, id } = this.form
                if (!dictType) {
                    this.$message.error('字典类型不能为空')
                    return
                }
                if (!dictName) {
                    this.$message.error('字典说明不能为空')
                    return
                }
                if (dictName.length > 30) {
                    this.$message.error('字典说明长度需小于30个字符')
                    return
                }
                params = Object.assign({}, { dictName: dictName, dictType: dictType, id: id })
                path = `/sys/dictionary/updateDictType`
                submitMes = '修改成功'
                break;
            }
            // 更新数据字典项
            case 'update2': {
                let { dictVal, dictName, indexNo, id } = this.form2;
                if (!dictVal) {
                    this.$message.error('主索引对应的选项值不能为空')
                    return
                }
                if (dictVal.length > 10) {
                    this.$message.error('主索引对应的选项值长度不大于10个字符')
                    return
                }
                if (!dictName) {
                    this.$message.error('选项值的说明不能为空')
                    return
                }
                if (dictName.length > 30) {
                    this.$message.error('选项值的说明长度需小于30个字符')
                    return
                }
                let { dictType } = this.rowData; // 字典di
                console.log('rowData', this.rowData);
                params = Object.assign({}, {
                    id: id,
                    dictVal: dictVal,
                    dictName: dictName,
                    indexNo: indexNo,
                    pid: this.rowData.id,
                    dictType: dictType,
                })
                path = '/sys/dictionary/updateDictionary'
                submitMes = '修改成功'
                break;
            }
            // 删除数据字典类型
            case 'delete': {
                let { id } = this.form
                params = Object.assign({}, { id: id })
                path = `/sys/dictionary/deleteDictType`
                submitMes = '删除成功'
                break;
            }
            // 删除数据字典项
            case 'delete2': {
                console.log('this.form2', this.form2);
                let { id } = this.form2
                params = Object.assign({}, { id: id })
                path = '/sys/dictionary/deleteDictionary'
                submitMes = '删除成功'
                break;
            }
            default:
                break;
        }
        console.log(path, params);
        http.post(path, params).then((res) => {
            this.$message.success(res.msg.info);
            // -----
            if (this.dialogStatus.includes('2')) {
                this.getChildren(this.rowData.dictType)
            } else {
                this.getData();
                if (this.dialogStatus === 'delete') {
                    this.rowData = {}
                }
            }
            this.dialogVisible = false;
        }).catch(() => {});
    },
    handleCreate(type){
        this.dialogStatus = type == 1 ? 'create1' : 'create2'
        this.handleType = type;
        if (type == 1) {
            Object.keys(this.form).forEach((v) => { this.form[v] = undefined })
        } else {
            Object.keys(this.form2).forEach((v) => {
                this.form2[v] = undefined
            })
            this.form2.indexNo = 1
        }
        this.dialogVisible = true
    },
    handleUpdate(row, type){
        console.log(row, type);
        this.dialogStatus = type == 1 ? 'update1' : 'update2'
        if (type == 1) {
            Object.keys(this.form).forEach((v) => {
                this.form[v] = row[v] ? row[v] : undefined;
            })
            this.form = Object.assign(this.form, { id: row.id })
        } else {
            Object.keys(this.form2).forEach((v) => {
                this.form2[v] = row[v] ? row[v] : undefined;
            })
            this.form2 = Object.assign(this.form2, { id: row.id })
        }
        this.handleType = type
        console.log(this.form, this.form2);
        this.dialogVisible = true
    },
    handleDelete(row, type){
        console.log(row, type);
        this.dialogStatus = type== 1 ? 'delete' : 'delete2'
        if (type == 1) {
            Object.keys(this.form).forEach((v) => {
                this.form[v] = row[v] ? row[v] : undefined;
            })
            this.form = Object.assign(this.form, { id: row.id })
        } else {
            Object.keys(this.form2).forEach((v) => {
                this.form2[v] = row[v] ? row[v] : undefined;
            })
            this.form2 = Object.assign(this.form2, { id: row.id })
        }
        this.handleType = type
        this.dialogVisible = true
    },

    handleReset() {
        this.dictName = undefined
        this.getData()
    },

    headerStyle() {
      return 'tableStyle'
    }

  }
}
</script>
<style lang='scss' scoped>
@import '@/styles/mixin.scss';
@import './index.scss';
::v-deep .el-input-number--mini .el-input-number__increase, 
::v-deep .el-input-number--mini .el-input-number__decrease{
    line-height: 28px;
    i{
        color: #000000;
    }
}
  .row-style{
        border: 1px solid red !important;
    }
    .cell-style{
        border-bottom: 1px solid  red !important;
    }
  .el-table__header-wrapper{
    border-radius: 10px 10px 0 0;
  }
// 弹窗样式
  .add_info{
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      .add_l{
          display: flex;
          align-items: flex-end;
          flex-direction: column;
          span{
              font-size: 13px;
                font-family: "SourceHanSansCN";
                font-weight: 500;
                color: #212121;
                display: inline-block;
                line-height: 40px;
          }
      }
      .add_r{
          display: flex;
          justify-content: flex-start;
          flex-direction: column;
          .input_item{
              width: 295px !important;
              margin-bottom: 4px;
              margin-top: 6px;
          }
      }
  }

.industry-data {
  .level1-table {
    overflow: hidden;
    height: 100%;
    .table-cnt {
      width: 100%;
      height: 100%;
      .table-fixed {
        width: 100%;
        .thead {
          height: 36px;
          display: flex;
          font-size: 14px;
          font-family: 'SourceHanSansCN';
          .td:first-child {
            width: 100px;
            @include flex-center;
          }
          .td:last-child {
            flex: 1;
            display: flex;
            .col-name {
              width: calc(100% - 90px);
              padding-left: 10px;
              @include flex-left;
              
            }
            .btn {
            //   width: 90px;
              @include flex-center;
              .slot-cnt {
                font-family: 'SourceHanSansCN';
                font-weight: bold;
                color: #3D5596;
                @include flex-center;
              }
              img {
                width: 22px;
                height: 22px;
                border-radius: 50%;
                margin-right: 2px;
              }
            }
          }
        }
        .tbody {
          padding-right: 2px;
          padding-bottom: 10px;
          height: calc(100% - 90px);
          overflow-x: hidden;
          overflow-y: scroll;
          border: 1px solid #9EAACA;
          &::-webkit-scrollbar {
            width: 6px;
            height: 1px;
          }
          &::-webkit-scrollbar-thumb {
            border-radius: 6px;
            background-color: #A6A6A6;
          }
          &::-webkit-scrollbar-track {
            background-color: #F1F1F1;
          }
        }
      }

      .layout-table {
        font-size: 13px;
        font-family: 'SourceHanSansCN';
        height: 100%;
        .thead .tr {
          display: flex;
        }
        .tbody .tr {
          display: flex;
          background: #F8FAFB;
          border-bottom: 1px solid #C0C4CC;
          cursor: pointer;
          // &:last-child {
          //   border-bottom: none;
          // }
          &.active {
            // background: #4574BE;
            background: linear-gradient(#4574BE, #4574BE) no-repeat, #7e9ed1;
            // background-size: 50% 100%;
            border: none;
            box-sizing: border-box;
            color: #FFFFFF;
            transition: all .3s;
            animation: identSel .3s;
          }
        }
        .tbody .td {
          height: 54px;
        }
        .tbody .td:first-child {
          width: 100px;
          font-size: 13px;
          border-right: 1px solid #C0C4CC;
          @include flex-center;
        }
        .tbody .td:last-child {
          flex: 1;
          display: flex;
           border-right: 1px solid #C0C4CC;
          .col-name {
            border-right: 1px solid #C0C4CC;
            width: calc(100% - 60px);
            padding-left: 10px;
            @include flex-left;
            display: table-cell;
            vertical-align:middle;
            word-break: break-all;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            line-height: 56px;
          }
          .btn {
            width: 90px;
            @include flex-center;
            .slot-cnt {
              font-family: 'SourceHanSansCN';
              font-weight: bold;
              color: #3D5596;
              @include flex-center;
            }
            img {
              width: 27px;
              height: 27px;
              border-radius: 50%;
              margin-right: 2px;
              cursor: pointer;
            }
          }
        }
        .tpage {
          height: 54px;
          border: 1px solid #9EAACA;
          border-top: none;
          background: #F8FAFB;
          display: flex;
          align-items: flex-end;
          justify-content: flex-end;
        }
      }
    }
  }
  .level-table {
    overflow: hidden;
    height: 100%;
    .table-tit {
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .btn {
        // width: 90px;
        @include flex-center;
        .slot-cnt {
          font-family: 'SourceHanSansCN';
          font-weight: bold;
          color: #3D5596;
          @include flex-center;
        }
        img {
          width: 22px;
          height: 22px;
          border-radius: 50%;
          margin-right: 2px;
        }
      }
    }
    .table-cnt {
      width: 100%;
      height: 100%;
      .table-fixed {
        width: 100%;
        // padding-right: 2px;
        .thead1 {
          height: 36px;
          padding-left: 10px;
          font-size: 13px;
          color: #3D5596;
          background-color: #D4EBFE;
          font-family: 'SourceHanSansCN';
          @include flex-left;
          .td:first-child {
            width: calc(100% - 5px);
            height: 36px;
            line-height: 36px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
        .thead {
          height: 36px;
          display: flex;
          font-size: 14px;
          font-family: 'SourceHanSansCN';
          .td:first-child {
            width: 100px;
            @include flex-center;
          }
          .td:last-child {
            flex: 1;
            display: flex;
            .col-name {
              width: calc(100% - 90px);
              padding-left: 10px;
              @include flex-left;
              
            }
            .btn {
              width: 90px;
              @include flex-center;
              .slot-cnt {
                font-family: 'SourceHanSansCN';
                font-weight: bold;
                color: #3D5596;
                @include flex-center;
              }
              img {
                width: 22px;
                height: 22px;
                border-radius: 50%;
                margin-right: 2px;
              }
            }
          }
        }
        .tbody {
          padding-right: 2px;
          height: calc(100% - 125px);
          overflow-x: hidden;
          overflow-y: scroll;
          border: 1px solid #EAEDF0;
          border-bottom-color: #9EAACA;
          &::-webkit-scrollbar {
            width: 6px;
            height: 1px;
          }
          &::-webkit-scrollbar-thumb {
            border-radius: 6px;
            background-color: #A6A6A6;
          }
          &::-webkit-scrollbar-track {
            background-color: #F1F1F1;
          }
        }
      }

      .layout-table {
        border: 1px solid #9EAACA;
        font-size: 13px;
        font-family: 'SourceHanSansCN';
        height: calc(100% - 36px);
        .thead .tr {
          display: flex;
        }
        .tbody .tr {
          display: flex;
          background: #F8FAFB;
          border-bottom: 1px solid #C0C4CC;
          
          cursor: pointer;
          &:nth-child(even) {
            background: #FFFFFF;
          }
          &:nth-child(odd) {
            background: #F5F5F5;
          }
          // &:last-child {
          //   border-bottom: none;
          // }
          &.active {
            // background: #4574BE;
            background: linear-gradient(#4574BE, #4574BE) no-repeat, #7e9ed1;
            // background-size: 50% 100%;
            border: none;
            box-sizing: border-box;
            color: #FFFFFF;
            transition: all .3s;
            animation: identSel .3s;
          }
        }
        .tbody .td {
          height: 36px;
          border-right: 1px solid #C0C4CC;
        }
        .tbody .td:first-child {
          width: 100px;
          font-size: 13px;
          // border-right: 1px solid #EAEDF0;
          @include flex-center;
        }
        .tbody .td:last-child {
          flex: 1;
          display: flex;
          // border-right: 1px solid #EAEDF0;
          .col-name {
            width: calc(100% - 60px);
            padding-left: 10px;
            display: table-cell;
            vertical-align:middle;
            @include flex-left;
            word-break: break-all;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            line-height: 36px;
            border-right: 1px solid #C0C4CC;
          }
          .btn {
            width: 90px;
            @include flex-center;
            .slot-cnt {
              font-family: 'SourceHanSansCN';
              font-weight: bold;
              color: #3D5596;
              @include flex-center;
            }
            img {
              width: 27px;
              height: 27px;
              border-radius: 50%;
              margin-right: 2px;
            }
          }
        }
        .tpage {
          height: 53px;
          border: 1px solid #EAEDF0;
          border-top: none;
          background: #F8FAFB;
          display: flex;
          align-items: flex-end;
          justify-content: flex-end;
        }
      }
    }
  }
}
</style>
<style>
.tab1 /deep/.outer-table.el-table,
.tab1 /deep/.outer-table  .el-table__body-wrapper{
    overflow: inherit;
}
.tab1 /deep/.outer-table .el-table__body{
    border-collapse: collapse;
}
.tab1 /deep/.row-style{
    border: 1px solid #409EFF;
    box-shadow: inset 0px 0px 6px 0px rgba(64, 158, 255, .6);
}
.tab1 /deep/.cell-style{
    border-bottom: 1px solid  #409EFF;
}
.tab_list >.el-scrollbar>.el-scrollbar__wrap {
    overflow-x: hidden;
}
.dict-boby >.el-scrollbar>.el-scrollbar__wrap {
    overflow-x: hidden;
}
.pagination-container {
    background: transparent!important;
}

.item-btn {
    font-family: 'sourceHanSansCN';
    margin-left: 100px;
    display: flex;
    align-items: center;
    color: #3D5596;
    font-weight: bold;
}
</style>
