<template>
  <div class="widget-overviewolmap">
    <div ref="overview" class="leaflet-control-minimap" id="overviewdiv"></div>
    <div v-show="isScreenVisible" class="screenTools">
      <el-dropdown>
        <el-button> 图层控制<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
        <el-dropdown-menu slot="dropdown" class="layerdropmenu">
          <el-tabs v-model="activeName" @tab-click="tabClick">
            <el-tab-pane label="基础图层" name="baselayer">
              <el-tree
                ref="baseTree"
                empty-text=""
                @check="checkLayer"
                :data="baselayers"
                node-key="id"
                :props="defaultProps"
                show-checkbox
                :default-expanded-keys="baseDefaultExpand"
                :default-checked-keys="baseDefaultCheck"
              >
              </el-tree>
            </el-tab-pane>
            <el-tab-pane label="专题图" name="themelayer">
              <el-tree
                ref="themeTree"
                empty-text=""
                @check="checkLayer"
                :data="themelayers"
                node-key="id"
                :props="defaultProps"
                show-checkbox
                :default-expanded-keys="themeDefaultExpand"
                :default-checked-keys="themeDefaultCheck"
              >
              </el-tree>
            </el-tab-pane>
          </el-tabs>
        </el-dropdown-menu>
      </el-dropdown>
      <div class="linkSwitch">
        <div>
          <label>联动：</label>
          <el-switch v-model="linkStatus" @change="linkStatusChange"></el-switch>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import OverMapBar from './OverMapBar'
import $ from 'jquery'
const LayerType = {
  S3M: 'S3M',
  Imagery: 'Imagery',
  Terrain: 'Terrain',
  Mvt: 'Mvt'
}
export default {
  name: 'OverViewOlMap',
  data() {
    return {
      linkStatus: false,
      isScreenVisible: false,
      activeName: 'baselayer',
      defaultProps: {
        label: 'label',
        children: 'children'
      },
      currentLayer: 'sjpipelayer',
      currentRef: '',
      layer: {
        baselayer: 'baselayer',
        themelayer: 'themelayer'
      },

      baselayers: [],
      themelayers: [],
      baseDefaultExpand: ['baselayer_0'],
      baseDefaultCheck: [],
      themeDefaultExpand: ['themelayer_0'],
      themeDefaultCheck: [],
      config: {
        baseServices: ['tdtimg', 'tdtimgano'],
        baseServiceKeys: ['tdtyx', 'tdtyxbz'],
        pipeMap: 'maps',
        themeMap: 'theme',
        pipeMapKeys: ['sjdt'],
        offlineServices: 'img',
        offlineServicesKey: 'vec3d',
        themelayer: [
          {
            label: '专题图',
            data: []
          }
        ],
        baselayer: [
          {
            label: '基础图层',
            data: []
          }
        ],
        loadmapService: ['img', 'theme'],
        mapService: ['img']
      }
    }
  },
  props: {
    isInit: false
  },
  computed: {
    AppX() {
      return this.$store.getters.AppX
    },
    tdtlayer() {
      return this.$store.state.cesiumMap.tdtlayer
    },
    sceneMode() {
      return this.$store.state.cesiumMap.sceneMode
    }
  },
  watch: {
    isInit() {
      this.viewer = window.viewer
      this.initBaseMap()
    },
    tdtlayer() {
      this.updateTdtLayer(this.tdtlayer)
    },
    sceneMode() {
      this.initSceneMode(this.sceneMode)
    }
  },
  mounted() {
    //this.initBaseMap();
  },
  methods: {
    /**初始化基础底图*/
    initBaseMap() {
      const source = this.AppX.appConfig.gisResource
      const mapList = this.config.loadmapService
      const baseLayer = []
      for (let name in source) {
        if (mapList.indexOf(name) > -1) {
          const config = source[name].config
          for (let layerkey in config) {
            const item = config[layerkey]
            baseLayer.push({ name: layerkey, type: name, show: item.isDisplay === '0' ? false : true })
          }
        }
      }
      let layerInfo = baseLayer
      this.initOverViewOlMap(layerInfo)
      // this.buildEvent=window.setInterval(function(){
      //     let layer = this.AppX.runtimeConfig.activeView.scene.layers.find(this.config.buildLayer);
      //     if(layer){
      //         window.clearInterval(this.buildEvent);
      //         layer.visible = false;
      //     }
      // }.bind(this),200)
    },
    startLayerList() {
      this.initLayerList()
      this.initLayers()
      this.currentRef = this.$refs.baseTree
    },
    tabClick(data) {
      switch (data.name) {
        case this.layer.baselayer:
          this.currentRef = this.$refs.baseTree
          break
        case this.layer.themelayer:
          this.currentRef = this.$refs.themeTree
          break
      }
    },
    /**
     * 加载图层列表
     */
    initLayers() {
      let initlayer = null
      for (let layertype in this.layer) {
        switch (this.layer[layertype]) {
          case this.layer.baselayer:
            initlayer = this.config.baselayer
            break
          case this.layer.themelayer:
            initlayer = this.config.themelayer
            break
        }
        this.currentLayer = this.layer[layertype]
        let layerConfig = []
        this.getNode(initlayer, this.layer[layertype], layerConfig)
        switch (this.layer[layertype]) {
          case this.layer.baselayer:
            this.baselayers = layerConfig
            break
          case this.layer.themelayer:
            this.themelayers = layerConfig
            break
        }
      }
    },
    /**
     * 处理图层配置
     *
     * */
    getNode(data, pid, parentLayer) {
      let num = 0
      let checkednum = 0
      let isExitNum = 0
      data.forEach((item, i) => {
        if (item.data) {
          let parentConfig = { label: item.label, children: [], id: pid + '_' + num }
          let checked = this.getNode(item.data, pid + '_' + num, parentConfig.children)
          if (checked && checked != 'NoExit') {
            checkednum++
          }
          if (checked && checked == 'NoExit') {
            isExitNum++
          }
          let open = false
          if (pid.split('_').length == 1) {
            open = true
          }
          if (checked != 'NoExit') {
            parentLayer.push(parentConfig)
          }
        } else {
          let checked = false
          let type = null
          let Exit = false
          //判断是否属于layers图层
          if (item.name) {
            let data_item = item.name.split(',')
            if (data_item.length > 0) {
              $.each(
                data_item,
                function (i, item2) {
                  let item_search1 = this.viewer.scene.layers.find(item2)
                  if (item_search1) {
                    type = LayerType.S3M
                    checked = item_search1.visible
                    Exit = true
                  }
                }.bind(this)
              )
            }
          }
          //判断是否属于影像图层
          if (type == null) {
            //添加影像，不勾选
            if (item.type === 'img' && item.add) {
              checked = !item.add
              type = LayerType.Imagery
              Exit = true
            }

            $.each(this.viewer.imageryLayers._layers, function (index, item_s) {
              if (item_s.imageryProvider.credit && item.name == item_s.imageryProvider.credit.html) {
                checked = item_s.show
                type = LayerType.Imagery
                Exit = true
              }
            })
          }
          //判断是否属于地形图层
          if (type == null && item.label == '地形') {
            if (this.viewer.terrainProvider._credit) {
              if (
                this.AppX.runtimeConfig.terrain === this.viewer.terrainProvider &&
                this.viewer.terrainProvider._credit.html == item.label
              ) {
                checked = true
                Exit = true
              } else {
                checked = false
              }
            } else {
              checked = false
            }
            type = LayerType.Terrain
          }
          //判断是否属于切片图层
          if (type == null && item.type == 'mvt') {
            //添加影像，不勾选
            if (item.add) {
              checked = !item.add
              type = LayerType.Mvt
              Exit = true
            }
            let layer = this.viewer.scene.getVectorTilesLayer(item.name)
            if (layer) {
              if (layer.show) {
                checked = true
                Exit = true
              } else {
                checked = false
              }
            } else {
              checked = false
            }
          }
          if (checked) {
            checkednum++
            //设置树组件默认选中节点
            switch (this.currentLayer) {
              case this.layer.baselayer:
                this.baseDefaultCheck.push(pid + '_' + num)
                break
              case this.layer.themelayer:
                this.themeDefaultCheck.push(pid + '_' + num)
                break
            }
          }
          if (Exit) {
            parentLayer.push({
              id: pid + '_' + num,
              dic: item.dic,
              label: item.label,
              layer_name: item.name,
              type: type,
              name_2d: item.name_2d ? item.name_2d : ''
            })
          } else {
            isExitNum++
          }
        }
        num++
      })
      if (isExitNum == data.length) {
        return 'NoExit'
      }
      if (checkednum == data.length - isExitNum) {
        return true
      }
    },
    /**
     * 图层勾选控制
     * @param data node对象
     * @param checked 选中状态
     */
    checkLayer(data, checkedkeys) {
      const checkednodes = this.currentRef.getCheckedKeys()
      const checked = !(checkednodes.indexOf(data.id) === -1)
      this.onAndClose(data, checked)
    },
    /**
     * 图层的关闭和打开
     *
     */
    onAndClose(clickNode, checked) {
      let layer = undefined
      const that = this
      if (!clickNode) {
        return
      }
      if (clickNode.children) {
        $.each(
          clickNode.children,
          function (i, item) {
            this.onAndClose(item, checked)
          }.bind(this)
        )
      } else {
        let data = null
        if (clickNode.name_2d != '') {
          $.each(this.maplayer, function (i, item) {
            let names = clickNode.name_2d.split(',')
            if (names.length > 1) {
              $.each(names, function (i2, item2) {
                if (item.name == item2) {
                  item.visible = checked
                }
              })
            } else {
              if (item.name == clickNode.name_2d) {
                item.visible = checked
              }
            }
          })
        }
        switch (clickNode.type) {
          case LayerType.S3M:
            data = clickNode.layer_name.split(',')
            if (data.length > 0) {
              $.each(
                data,
                function (i, item) {
                  layer = this.viewer.scene.layers.find(item)
                  if (layer) {
                    layer.visible = checked
                  }
                }.bind(this)
              )
            }
            break
          case LayerType.Imagery:
            const imageLayers = this.viewer.imageryLayers
            data = clickNode.layer_name.split(',')
            if (data.length > 0) {
              $.each(data, function (i, item) {
                that.imageLayerControl(item, clickNode.dic, checked)
              })
            }
            break
          case LayerType.Terrain:
            if (checked) {
              this.viewer.terrainProvider = this.AppX.runtimeConfig.terrain
            } else {
              this.viewer.scene.terrainProvider = new Cesium.EllipsoidTerrainProvider() //无法控制地形显隐，替换一个简单地形
            }
            break
          case LayerType.Mvt:
            data = clickNode.layer_name.split(',')
            if (data.length > 0) {
              $.each(data, function (i, item) {
                that.mvtLayerControl(item, checked)
              })
            }
            break
        }
      }
    },
    /**
     * 该方法用于增加
     * @param key 影像服务key,同时也是credit
     * @param dic 影像服务字典编码
     * @param checked 是否打开
     */
    imageLayerControl(key, dic, checked) {
      const layers = this.overViewMap._miniMap.getLayers()
      layers.forEach((layer) => {
        if (layer.values_.credit === key) {
          layer.setVisible(checked)
        }
      })
    },
    /**
     * 切片图层得打开关闭
     * @param key 服务key,同时也是credit
     * @param checked 是否打开
     */
    mvtLayerControl(key, checked) {
      if (checked) {
        const url = this.AppX.appConfig.gisResource['img'].config[key].url
        this.AppX.runtimeConfig.viewer.scene.addVectorTilesMap({
          url: url,
          name: key
        })
      } else {
        this.AppX.runtimeConfig.viewer.scene.removeVectorTilesMap(key)
      }
    },
    linkStatusChange(checked) {
      this.overViewMap._isViewLink = checked
    },
    initLayerList() {
      const themeLayer = []
      const baseLayer = []
      const gisSource = this.AppX.appConfig.gisResource
      const themeConfig = gisSource[this.config.themeMap].config
      const themegroup = this.initThemelayers(themeConfig)
      // for (let i = 0; i < themeConfig.length; i++) {
      //     const themeitem = themeConfig[i];
      //     themeLayer.push({ label: themeitem.name, name: themeitem.key, type: "img", add: true, dic: this.config.themeMap, sort: themeitem.sort ? themeitem.sort : 1000 });
      // }
      // //排序
      // themeLayer.sort((a, b) => { return a.sort - b.sort; })
      this.config.themelayer[0].data = themegroup
      const mapService = this.config.mapService
      for (let j = 0; j < mapService.length; j++) {
        const keyName = mapService[j]
        const config = gisSource[mapService[j]].config
        for (let layerkey in config) {
          const item = config[layerkey]
          baseLayer.push({
            label: item.name,
            name: layerkey,
            type: 'img',
            add: true,
            dic: keyName,
            sort: item.sort ? item.sort : 1000
          })
        }
      }
      //排序
      baseLayer.sort((a, b) => {
        return a.sort - b.sort
      })
      this.config.baselayer[0].data = this.config.baselayer[0].data.concat(baseLayer)
    },
    /**
     * 鹰眼初始化
     */
    initOverViewOlMap(imglayerInfo) {
      var layers = []
      if (this.AppX.appConfig.online == true) {
        this.config.baseServices.forEach(
          function (item, index) {
            var configItem = this.AppX.appConfig.gisResource[item]
            var type = configItem.type
            var url = configItem.config[this.config.baseServiceKeys[index]].url
            switch (type) {
              case 'img_c':
                layers.push(
                  new ol.layer.Tile({
                    source: new ol.source.Tianditu({
                      layerType: 'vec',
                      key: url,
                      projection: 'EPSG:4326'
                    })
                  })
                )
                break
              case 'cia_c':
                layers.push(
                  new ol.layer.Tile({
                    source: new ol.source.Tianditu({
                      layerType: 'vec',
                      key: url,
                      isLabel: true,
                      projection: 'EPSG:4326'
                    })
                  })
                )
                break
            }
          }.bind(this)
        )
      } else {
        // var offlineMapUrl = this.AppX.appConfig.gisResource[this.config.offlineServices].config[this.config.offlineServicesKey].url;
        // layers.push(new ol.layer.Tile({
        //     source: new ol.source.TileSuperMapRest({
        //         url: offlineMapUrl,
        //         wrapX: true
        //     }),
        //     projection: 'EPSG:4326'
        // }));
      }
      var configs = this.AppX.appConfig.gisResource[this.config.pipeMap].config
      var container = this.$refs.overview
      var options = {
        container: container,
        targetId: 'overviewdiv',
        toggleDisplay: true,
        isViewLink: true,
        minimized: false,
        width: '300px',
        height: '200px',
        position: 'bottomright',
        parent: this
      }

      var pipelayers = []
      imglayerInfo.forEach((item) => {
        //if (item.show) {
        const gisItem = this.AppX.appConfig.gisResource[item.type].config[item.name]
        if (!gisItem) {
          return true
        }
        const url = gisItem.url
        if (this.config.loadmapService.indexOf(item.type) > -1) {
          // this.AppX.runtimeConfig.activeView.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
          //     url: url,
          //     credit: item.name
          // }))
          pipelayers.push(
            new ol.layer.Tile({
              source: new ol.source.TileSuperMapRest({
                url: url,
                wrapX: true,
                prjCoordSys: { epsgCode: 4326 }
              }),
              visible: item.show,
              credit: item.name
            })
          )
        }
        //}
      })
      this.overViewMap = new OverMapBar(this.viewer, pipelayers, options)
      this.updateTdtLayer(this.tdtlayer)
      /*
      this.config.pipeMapKeys.forEach(function (item, index) {
          var url = configs[item].url;
          //地图服务子图层控制
          
          const layerinfo = new ol.supermap.LayerInfoService(url);
          this.layerinfoService=layerinfo;
          layerinfo.getLayersInfo((result) => {
              if(result.type==="processFailed") return;
              const sublayers=result.result.subLayers.layers as any[];
              this.initLayerList(sublayers);
              const newLayers=sublayers.map((item)=>{
                  return new SuperMap.LayerStatus({"layerName":item.name,"isVisible":true});
              })
              const hiddenlayers=sublayers.map((item)=>{
                  return new SuperMap.LayerStatus({"layerName":item.name,"isVisible":false});
              })
              const statusparam = new SuperMap.SetLayerStatusParameters({layerStatusList:newLayers});
              layerinfo.setLayerStatus(statusparam, (resul2) => {
                  
                  this.layerID=resul2.result.newResourceID;
                  this.olSource=new ol.source.TileSuperMapRest({
                      url: url,
                      layersID: resul2.result.newResourceID,
                      cacheEnabled:false
                  })
                  this.oltileLayer=new ol.layer.Tile({
                      source: this.olSource,
                      projection: 'EPSG:4326'
              })
                  pipelayers.push(this.oltileLayer);
                  
              })
          })
          
          
      }.bind(this))*/
      //this.AppX.runtimeConfig.overViewMap.addPipeLayers(pipelayers);
    },
    /**
     * 该方法用于专题图分组组合
     */
    initThemelayers(themeConfig) {
      const group = []
      for (let layerkey in themeConfig) {
        const themeitem = themeConfig[layerkey]
        const groupLayer = _.find(group, (item) => {
          return item.label === themeitem.sourceGroup
        })
        if (!groupLayer && themeitem.sourceGroup) {
          //新建分组
          group.push({
            label: themeitem.sourceGroup,
            data: [
              {
                label: themeitem.name,
                name: layerkey,
                type: 'img',
                add: true,
                dic: this.config.themeMap,
                sort: themeitem.sort ? themeitem.sort : 1000
              }
            ],
            sort: 1000
          })
        } else if (groupLayer && themeitem.sourceGroup) {
          //现有分组增加
          groupLayer.data.push({
            label: themeitem.name,
            name: layerkey,
            type: 'img',
            add: true,
            dic: this.config.themeMap,
            sort: themeitem.sort ? themeitem.sort : 1000
          })
        } else if (!themeitem.sourceGroup) {
          //现有分组增加
          group.push({
            label: themeitem.name,
            name: layerkey,
            type: 'img',
            add: true,
            dic: this.config.themeMap,
            sort: themeitem.sort ? themeitem.sort : 1000
          })
        }
      }
      //组内分组排序
      group.forEach((item) => {
        if (item.data) {
          item.data.sort((a, b) => {
            return a.sort - b.sort
          })
          item.sort = item.data[0].sort
        }
      })
      //分组排序
      group.sort((a, b) => {
        return a.sort - b.sort
      })
      return group
    },
    updateTdtLayer(layerConfig) {
      if (this.overViewMap) {
        this.overViewMap.updateTianditu(layerConfig.base, true)
      }
    },
    initSceneMode(mode) {
      if (!this.overViewMap) return
      if (mode === '3d') {
        $(this.$el).removeClass('showOverviewmap')
        $('#cesiumContainer').css('width', 'calc(100%)')
        $(this.$el).css('bottom', '2px').css('right', '2px')
        $('.leaflet-control-minimap').css('border-width', '2px')
        this.overViewMap.restoreScreen()
        this.isScreenVisible = false
        this.linkStatus = false
      } else {
        $('#cesiumContainer').css('width', 'calc(50%)')
        $(this.$el).css('bottom', '0px').css('right', '0px')
        $(this.$el).addClass('showOverviewmap')
        $('.leaflet-control-minimap').css('border-width', '0px 0px 0px 2px')
        $('.leaflet-control-minimap').css('color', 'rgba(6, 59, 117, 0.8)')
        var opt = {
          width: $('#mainMapContainer').width() / 2 + 'px',
          height: $('#mainMapContainer').height() + 'px'
        }
        this.overViewMap.splitScreen(opt)
        this.isScreenVisible = true
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.widget-overviewolmap {
  position: absolute;
  right: 2px;
  bottom: 2px;
  z-index: 101;
  .nav-tabs {
    border: none;
  }
  .nav-tabs .nav-item {
    width: 50%;
    text-align: center;
    color: white !important;
    background: rgba(0, 255, 255, 0.2);
    .nav-link {
      padding: 0.5rem 0.1rem;
      border: 0;
    }
    .nav-link.active {
      background: rgba(0, 255, 255, 0.3);
      border: none;
    }
    .nav-link:hover {
      border: none;
    }
    h6 {
      color: #00fffc;
      font-size: 16px;
      margin-bottom: 0px;
      padding: 4px;
    }
  }
  .leaflet-control-minimap {
    transition: none;
  }
  .layerBtn {
    position: absolute;
    top: 80px;
    right: 165px;
    .dropdown-menu {
      padding: 0;
      width: 280px;
      background-color: #0b3693bf;
      .tab-content {
        height: 300px;
        overflow: auto;
      }
    }
  }
  .switchContainer {
    position: absolute;
    top: 80px;
    right: 20px;
    height: 38px;
    background-color: #6c757d;
    color: white;
    border-color: #6c757d;
    padding: 0.357rem 0.75rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
      box-shadow 0.15s ease-in-out;
  }
  .linklayerList {
    .ztree li span {
      color: white;
    }
    .ztree li a:hover {
      background: unset;
    }
  }
  .screenTools {
    display: flex;
    position: absolute;
    right: 20px;
    top: 80px;
    .linkSwitch {
      background-color: #fff;
      display: flex;
      align-items: center;
      padding: 12px 20px;
      box-sizing: border-box;
      height: 40px;
      margin-left: 20px;
      border-radius: 4px 12px;
      color: #606266;
      border: 1px solid #dcdfe6;
    }
  }
}
</style>
<style lang="scss">
.leaflet-control-minimap {
  box-sizing: border-box;
  border: solid #0035a8 2px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
  border-radius: 0px;
  background: #f8f8f9;
  -o-transition: all 0.6s;
  transition: all 0.6s;
}

.leaflet-control-minimap a {
  background-color: #0fc8f3;
  background-repeat: no-repeat;
  z-index: 8888;
  -o-transition: all 0.6s;
  transition: all 0.6s;
}

.leaflet-control-minimap a.minimized-bottomright {
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  border-radius: 0px;
}

.leaflet-control-minimap a.minimized-topleft {
  -webkit-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  border-radius: 0px;
}

.leaflet-control-minimap a.minimized-bottomleft {
  -webkit-transform: rotate(270deg) !important;
  -o-transform: rotate(270deg) !important;
  transform: rotate(270deg) !important;
  border-radius: 0px;
}

.leaflet-control-minimap a.minimized-topright {
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  border-radius: 0px;
}

.leaflet-control-minimap-toggle-display {
  background-image: url('./images/toggle.png');
  background-size: cover;
  position: absolute;
  border-radius: 3px 0px 0px 0px;
}

.leaflet-oldie .leaflet-control-minimap-toggle-display {
  background-image: url('./images/toggle.png');
}

.leaflet-control-minimap-toggle-display-bottomright {
  bottom: 0;
  right: 0;
}

.leaflet-control-minimap-toggle-display-topleft {
  top: 0;
  left: 0;
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.leaflet-control-minimap-toggle-display-bottomleft {
  bottom: 0;
  left: 0;
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.leaflet-control-minimap-toggle-display-topright {
  top: 0;
  right: 0;
  -webkit-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

/* Old IE */
.leaflet-oldie .leaflet-control-minimap {
  border: 1px solid #999;
}

.leaflet-oldie .leaflet-control-minimap a {
  background-color: #fff;
}

.leaflet-oldie .leaflet-control-minimap a.minimized {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.widget-overviewolmap.showoverviewolmap {
  left: 50% !important;
  height: 100% !important;
  width: 50% !important;
}
.widget-overviewolmap.showoverviewolmap .leaflet-control-minimap {
  height: 100% !important;
  width: 100% !important;
}
.layerdropmenu {
  width: 300px;
  .el-tabs__nav {
    width: 100%;
  }
  .el-tabs__item {
    width: 50%;
    text-align: center;
  }
  .el-tabs__content {
    height: 300px;
    overflow: auto;
  }
}
</style>