<template>
    <div>
      <div class="container">
        <!-- 标题  -->
        <MenuTitle :menuTile="'预审事项管理'"></MenuTitle>
        <!-- 高级搜索按钮 -->
        <div class="highSearchBtn" @click="showSearch = !showSearch">查询</div>
        <!-- 搜索项 -->
        <div v-show="showSearch" class="searchTable">
          <a-form class="ant-advanced-search-form" :form="form" layout="inline" labelAlign="right">
            <a-row :gutter="24" :style="{ textAlign: 'center' }">
              <a-col :span="12">
                <a-form-item label="事项名称" props="displayName">
                  <a-input placeholder="请输入事项名称关键词" v-model="queryParams.displayName" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="事项类型" props="eventType">
                  <a-input placeholder="请输入事项类型" v-model="queryParams.eventType" />
                </a-form-item>
              </a-col>
              <a-divider dashed />
              <a-col :span="12">
                <a-form-item label="实施主体/区划" props="departName">
                  <a-input placeholder="请输入实施主体/区划" v-model="queryParams.departName" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="办件类型" props="processingType">
                  <a-input placeholder="请输入办件类型" v-model="queryParams.processingType" />
                </a-form-item>
              </a-col>
              <a-divider dashed />
            </a-row>
          </a-form>
          <!-- 搜索按钮 -->
          <div class="searchBtns">
            <a-button icon="search" type="primary" @click="search">搜索</a-button>
            <a-button icon="sync" @click="reset">重置</a-button>
          </div>
        </div>
      </div>
      <div class="container mrt_10">
        <div class="tab">
          <div style="position: absolute; right: 4%;z-index: 999">
                <a-button @click="handleAddAnyTitle('选择事项')" type="primary" icon="plus">新增</a-button>
          </div>
          <a-tabs type="card" @change="callback" :tabBarGutter="10">
            <a-tab-pane key="3" tab="全部"> </a-tab-pane>
            <a-tab-pane key="1" tab="已授权"> </a-tab-pane>
            <a-tab-pane key="0" tab="未授权"> </a-tab-pane>
          </a-tabs>
        </div>
        <!-- 列表 -->
        <div class="list">
          <a-table
            :columns="columns"
            bordered
            rowKey="id"
            :expandIconColumnIndex="1"
            :data-source="tableData"
            :pagination="false"
            childrenColumnName="cd"
            @expand="expand"
          >
            <span slot="bagQrCode" slot-scope="bagQrCode">
                 <a @click="handleQrCode(bagQrCode)">查看</a>
            </span>
            <span slot="delFlag" slot-scope="delFlag">
              <span v-if="delFlag == '0'">在用</span>
              <span v-if="delFlag == '1'">已删除</span>
            </span>
            
            <span slot="authorStatus" slot-scope="authorStatus">
              <span v-if="authorStatus == '0'">未授权</span>
              <span v-if="authorStatus == '1'">已授权</span>
            </span>
            
            <span slot="handle" slot-scope="text, record">
              <a @click="showEditModal(record)">编辑</a>
              <a> | </a>
              <a v-if="record.authorStatus == '0'" @click="author(record.id)">授权</a>
              <a v-else @click="author(record.id)" style="color: red;">取消授权</a>
              <a> | </a>
              <a @click="cancel(record.id)" style="color: red;">删除</a>
              <a> | </a>
              <a @click="setFormField(record)">设置表单</a>
            </span>
            <span slot="handlePrint" slot-scope="text, record">
              <a-upload name="file" :data="{'id':record.id,'filed':'printTemplateUrl'}" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" :customRequest="customUpload">
              	上传
			  </a-upload>
              <a> | </a>
              <a @click="downloadFile(record.printTemplateUrl)">下载</a>
            </span>
            <span slot="handleReport" slot-scope="text, record">
              <a-upload name="file" :data="{'id':record.id,'filed':'reportTemplateUrl'}" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" :customRequest="customUpload">
              	上传
			  </a-upload>
              <a> | </a>
              <a @click="downloadFile(record.reportTemplateUrl)">下载</a>
            </span>
          </a-table>
          <div class="myPagination">
            <a-pagination
              :current="Number(queryParams.pageNo)"
              @change="changeNum"
              @showSizeChange="changePage"
              show-quick-jumper
              show-less-items
              show-size-changer
              :show-total="(total) => `共 ${total} 条记录 第 ${queryParams.pageNo} / ${pageTotal} 页`"
              :total="total"
            />
          </div>
        </div>
      </div>
      <ysDirectoryAdd-modal ref="modalForm" @ok="modalFormOk"></ysDirectoryAdd-modal>
      <ysDirectoryField-modal ref="modalfieldForm" @ok="modalFormOk"></ysDirectoryField-modal>
      <a-modal ref="modalEditForm" v-model="editvisible" title="编辑" @ok="handleOk">
	  	<a-form class="ant-advanced-edit-form" :form="form" layout="inline" labelAlign="right">
	  		<a-form-item label="事项名称" props="displayNameEdit">
                  <a-input placeholder="请输入事项名称关键词" v-model="queryParams.displayNameEdit" />
                </a-form-item>
	  	</a-form>
	  </a-modal>
    </div>
  </template>
  
  <script>
  import MenuTitle from '@/views/ai/MenuTitle'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import YsDirectoryAddModal from './modules/YsDirectoryAddModal'
  import YsDirectoryFieldModal from './modules/YsDirectoryFieldModal'
  import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
  import { httpAction, getAction} from '@/api/manage'
  import moment from 'moment'
  export default {
    mixins: [JeecgListMixin],
    components: {
      MenuTitle,
      YsDirectoryAddModal,
      YsDirectoryFieldModal,
    },
    data() {
      return {
        editvisible: false,
        url: {
          list: '/ai/preExaminationMatters/list',
          acceptanceList: '/ai/preExaminationMatters/list',
          cancel:'/ai/preExaminationMatters/cancel',
          author:'/ai/preExaminationMatters/author',
          state: '/application/offline/route/flow/state',
          getNumber: '/application/offline/route/get/number/each/flow/state',
          importExcelUrl: "/sys/common/upload",
          editUrl: "/ai/preExaminationMatters/edit",
          saveMattersFieldUrl: "/ai/preExaminationMattersField/save",
        },
        that: this,
        // 是否展示搜索项
        showSearch: false,
        loading: false,
  
        showDetail: false,
        type: '',
        // 总条数
        total: 0,
        // 总页数
        pageTotal: 0,
        form: {},
        timeList: ['今日', '本周', '本月', '全年'],
        moment,
        startTime: null,
        endTime: null,
        activeCate: -1,
        columns: [
          {
            title: '序号',
            // key: 'index',
            customRender: (text, record, index) =>
              `${(this.queryParams.pageNo - 1) * this.queryParams.pageSize + (index + 1)}`,
            // dataIndex: 'id',
            align: 'center',
            width: '45px',
          },
          {
            title: '机器人上展示事项名称',
            dataIndex: 'displayName',
            align: 'center',
          },
          {
            title: '事项编码',
            dataIndex: 'eventCode',
            align: 'center',
          },
          {
            title: '实施主体',
            dataIndex: 'departName',
            align: 'center',
          },
          {
            title: '办件类型',
            dataIndex: 'processingType',
            align: 'center',
          },
          {
            title: '事项状态',
            dataIndex: 'delFlag',
            align: 'center',
            scopedSlots: { customRender: 'delFlag' },
          },
          {
            title: '授权状态',
            dataIndex: 'authorStatus',
            align: 'center',
            scopedSlots: { customRender: 'authorStatus' },
          },
          {
            title: '打印模板',
            align: 'center',
            key: 'handlePrint',
            scopedSlots: { customRender: 'handlePrint' },
          },
          {
            title: '报告模板',
            align: 'center',
            key: 'handleReport',
            scopedSlots: { customRender: 'handleReport' },
          },
          {
            title: '操作',
            align: 'center',
            key: 'handle',
            scopedSlots: { customRender: 'handle' },
          },
        ],
        tableData: [],
        data: [],
        queryParams: {
          pageNo: 1,
          pageSize: 10,
          delFlag: 0
        },
        //受理状态
        deStatus: undefined,
        // 状态字典
        statusOption: [
          { label: '材料待取', value: 0 },
          { label: '材料流转中', value: 1 },
          { label: '办理中', value: 2 },
          { label: '结果待取', value: 3 },
          { label: '结果流转中', value: 4 },
          { label: '结果获取', value: 5 },
        ],
        //服务类型字典
        dictServeOptions: [],
        // 操作服务
        acceptanceItem: {},
        // 服务数量
        serviceNum: {
          pendingFlowNum: 0,
          materialFlowNum: 0,
          inProcessNum: 0,
          resultPendingNum: 0,
          resultsInFlowNum: 0,
          resultAcquisitionNum: 0,
        },
        ws: null,
      }
    },
    filters: {
      // 服务类型过滤
      serveTypeFilter(data, that) {
        return that.dictServeOptions[data]
      },
    },
    created() {
      //this.startTime = moment().startOf('year').format('YYYY-MM-DD')
      //this.endTime = moment().endOf('year').format('YYYY-MM-DD')
      this.getList()
    },
    methods: {
	    setFormField(record){
	    	this.$refs.modalfieldForm.edit(record);
	      	this.$refs.modalfieldForm.title = "设置表单字段";
	      	this.$refs.modalfieldForm.disableSubmit = false;
	    },
	    handleOk(){
	    	httpAction(this.url.editUrl, {id:this.$refs.modalEditForm.id,displayName:this.queryParams.displayNameEdit},"POST").then((res) => {
              	if (res.success) {
	                this.$message.success(res.message)
	                this.editvisible = false;
	                this.queryParams.displayNameEdit = null
	                this.$refs.modalEditForm.id=null
	                this.getList()
	              } else {
	                this.$message.warning(res.message)
	              }
            })
	    },
	     handleOkField(){
	    	httpAction(this.url.saveMattersFieldUrl, {id:this.$refs.modalEditForm.id,displayName:this.queryParams.displayNameEdit},"POST").then((res) => {
              	if (res.success) {
	                this.$message.success(res.message)
	                this.editvisible = false;
	                this.queryParams.displayNameEdit = null
	                this.$refs.modalEditForm.id=null
	                this.getList()
	              } else {
	                this.$message.warning(res.message)
	              }
            })
	    },
    customUpload(info){
    console.log("------info------->",info)
     	const formData = new FormData();
	    formData.append('file', info.file);
	    formData.append('biz', new Date().toLocaleDateString());
	    httpAction(this.url.importExcelUrl, formData,"POST").then((res) => {
                console.log("------res------->",res)
              if (res.code == 0) {
               let filed = info.data.filed;
               let param = {id:info.data.id,reportTemplateUrl:res.message}
               if(filed=="reportTemplateUrl"){
               		param = {id:info.data.id,printTemplateUrl:res.message}
               }
              	httpAction(this.url.editUrl, param,"POST").then((res) => {
              		this.$message.success("上传成功")
              	})
              } else {
                this.$message.error('上传失败')
              }
            })
	},
      cancel(id){
        let param = {id:id}
        getAction(this.url.cancel, param).then((res) => {
          if (res.success) {
             this.getList()
          }
        })
      },
      author(id){
        let param = {id:id}
        getAction(this.url.author, param).then((res) => {
          if (res.success) {
             this.getList()
          }
        })
      },
      del(id){
        let param = {id:id}
        getAction(this.url.del, param).then((res) => {
          if (res.success) {
             this.getList()
          }
        })
      },
      edit(record){
         this.$refs.modalForm.edit(record);
      	this.$refs.modalForm.title = "编辑";
      	this.$refs.modalForm.disableSubmit = false;
      },
      showEditModal(record){
      	this.editvisible = true;
      	this.$refs.modalEditForm.id=record.id;
      },
      // 获取列表数据
      getList() {
      console.log("-----ee----------",this.queryParams);
        this.loading = true
        getAction(this.url.acceptanceList, this.queryParams).then((res) => {
          if (res.success) {
            this.total = res.result.total || 0
            this.pageTotal = Math.ceil(this.total / this.queryParams.pageSize)
            this.tableData = res.result.records
            this.loading = false
          }
        })
        // this.getNumber()
      },
      ws_connect: function () {
        let _this = this
        let windowInfo = this.$store.state.user.windowInfo
        // console.log(windowInfo)
        let ws_url =
          window._CONFIG['domianURL'].replace('https://', 'wss://').replace('http://', 'ws://') +
          '/jeecg-cloud-system-start/websocket/window_'+windowInfo.id
        if ('WebSocket' in window) {
          this.ws = new WebSocket(ws_url)
        } else if ('MozWebSocket' in window) {
          this.ws = new MozWebSocket(ws_url)
        } else {
          console.log('Error: 此浏览器不支持WebSocket!')
          return
        }
        //webSocket建立连接
        this.ws.onopen = function () {
          console.log('WebSocket已经建立连接!')
        }
        //webSocket关闭
        this.ws.onclose = function () {
          console.log('WebSocket已经关闭!')
          setTimeout(() => {
            _this.ws_connect()
          }, 2000)
        }
        //webSocket返回消息
        this.ws.onmessage = function (message) {
          console.log('webSocket返回消息:' , message)
          _this.getList()
        }
      },
      getNumber() {
        getAction(this.url.getNumber, this.queryParams).then((res) => {
          // console.log(res)
          if (res.success) {
            this.serviceNum = res.result
          }
        })
      },
      //获取服务类型字典
      initDictServe() {
        //优先从缓存中读取字典配置
        if (getDictItemsFromCache('service_type')) {
          getDictItemsFromCache('service_type').forEach((item) => {
            this.dictServeOptions[item.value] = item.text
          })
          // console.log(this.dictServeOptions);
          return
        }
  
        //根据字典Code, 初始化字典数组
        ajaxGetDictItems('service_type', null).then((res) => {
          if (res.success) {
            res.result.forEach((item) => {
              this.dictServeOptions[item.value] = item.text
            })
          }
        })
      },
      //日期选择
      changeTime(e, i) {
        if (e == '今日') {
          this.startTime = moment().format('YYYY-MM-DD')
          this.endTime = moment().format('YYYY-MM-DD')
        } else if (e == '本周') {
          this.startTime = moment().startOf('week').format('YYYY-MM-DD')
          this.endTime = moment().endOf('week').format('YYYY-MM-DD')
        } else if (e == '本月') {
          this.startTime = moment().startOf('month').format('YYYY-MM-DD')
          this.endTime = moment().endOf('month').format('YYYY-MM-DD')
        } else if (e == '全年') {
          this.startTime = moment().startOf('year').format('YYYY-MM-DD')
          this.endTime = moment().endOf('year').format('YYYY-MM-DD')
        }
        this.queryParams.startApplicationTime = this.startTime + ' 00:00:00'
        this.queryParams.endApplicationTime = this.endTime + ' 23:59:59'
        this.activeCate = i
      },
      onChangeTime(date, dateString) {
        this.startTime = dateString[0]
        this.endTime = dateString[1]
        if (dateString[0] != '') {
          this.queryParams.startApplicationTime = dateString[0] + ' 00:00:00'
          this.queryParams.endApplicationTime = dateString[1] + ' 23:59:59'
        } else {
          this.queryParams.startApplicationTime = null
          this.queryParams.endApplicationTime = null
        }
      },
      // 分页
      //改变页码
      changeNum(page, pageSize) {
        this.queryParams.pageNo = page
        this.getList()
      },
      //改变页数
      changePage(current, size) {
        this.queryParams.pageSize = size
        this.getList()
      },
      // 选择状态条件
      handleStatusChange(value) {
        console.log(value)
        this.queryParams.status = value
      },
      //跳转配置页
      handleView(text) {
        //  console.log(text)
        this.$router.push({
          path: '/serviceDetails',
          query: {
            type: '1',
            acceptId: text.id,
            serviceId: text.serviceId,
            serviceType: text.serviceType,
          },
        })
      },
      goConfig(text) {
        // this.acceptanceItem = text
        // this.visible = true
        getAction(this.url.state, {
          acceptId: text.id,
          flowStatus: ++text.flowStatus,
          // opRemark: this.form2.remark,
        }).then((res) => {
          if (res.success) {
            // this.visible = false
            // this.form2 = {}
            this.getList()
            this.$message.success('操作成功')
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      //子组件方法
      goBack(val) {
        // console.log(val)
        this.showServeConfig = !this.showServeConfig
      },
      //搜索
      search() {
        this.queryParams.pageNo = 1
        this.queryParams.delFlag = 0
        this.getList()
      },
      // 展开
      expand(flag, e) {
        console.log(flag, e)
      },
      //重置
      reset() {
        this.queryParams = {
          pageNo: 1,
          pageSize: 10,
          eventType: null,
          displayName: null,
          departName: null,
          processingType: null
        }
        let thisyear = new Date().getFullYear()
        this.startTime = thisyear + '-1-1'
        this.endTime = thisyear + '-12-31'
        this.activeCate = -1
        this.deStatus = undefined
        this.getList()
      },
      callback(key) {
        this.queryParams.authorStatus = key == '3' ? '' : key
        this.getList()
      },
    },
  }
  </script>
  
  <style lang="less" scoped>
  @import '~@assets/less/shaDow.less';
  
  .container {
    background: #ffffff;
    position: relative;
    padding: 0px 31px;
  
    .highSearchBtn {
      width: 100px;
      height: 36px;
      position: absolute;
      top: 8px;
      right: 30px;
      background: inherit;
      background-color: rgba(255, 255, 255, 1);
      box-sizing: border-box;
      border-width: 1px;
      border-style: solid;
      border-color: rgba(217, 217, 217, 1);
      border-radius: 2px;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      font-family: 'PingFangSC-Regular', 'PingFang SC';
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.647058823529412);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  
    .searchTable {
      width: 100%;
      margin-top: 20px;
      // height: 141px;
      background: inherit;
      background-color: rgba(255, 255, 255, 1);
      box-sizing: border-box;
      // border-width: 1px;
      // border-style: solid;
      // border-color: rgba(224, 230, 240, 1);
      border-radius: 0px;
      border-bottom: none;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
  
      // 搜索项
      .ant-advanced-search-form {
        .ant-form-item {
          width: 100%;
          display: flex;
          align-items: center;
          margin-bottom: 16px;
        }
  
        ::v-deep .ant-form-item-label {
          // width: 18%;
          white-space: inherit;
        }
  
        ::v-deep .ant-form-item-control-wrapper {
          width: 85%;
          // padding-left: 15px;
        }
  
        ::v-deep .ant-form-item-children {
          display: flex;
        }
  
        .apply {
          display: flex;
  
          .apply_time {
            display: flex;
            align-items: center;
            margin-right: 10px;
  
            .check_time {
              width: 45px;
              height: 24px;
              line-height: 24px;
              display: block;
              font-family: 'PingFangSC-Regular', 'PingFang SC';
              font-weight: 400;
              font-style: normal;
              font-size: 14px;
              cursor: pointer;
              border-radius: 5px;
              margin-right: 2px;
            }
  
            .active {
              background-color: #1890ff;
              color: #ffffff;
            }
          }
        }
      }
  
      .ant-input {
        // width: 580px;
        height: 32px;
      }
  
      ::v-deep .ant-form-item-label label {
        font-family: 'PingFangSC-Regular', 'PingFang SC';
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        text-align: right;
        line-height: 28px;
        width: 125px;
        display: inline-block;
        margin-right: 28px;
      }
  
      ::v-deep .ant-divider-horizontal {
        min-width: 98%;
        width: 99%;
        margin: 11px 0;
      }
  
      // 搜索按钮
      .searchBtns {
        width: 100%;
        height: 58px;
        display: flex;
        justify-content: center;
        align-items: center;
  
        .ant-btn {
          width: 73px;
          height: 30px;
          font-size: 14px;
          // color: #ffffff;
          text-align: center;
          line-height: 22px;
          margin-right: 10px;
          padding-left: 10px;
        }
      }
    }
  
    .list {
      ::v-deep .ant-table-thead > tr > th {
        padding-left: 5px;
        font-size: 16px;
        color: #000;
        background: #f5faff !important;
        border-radius: 0;
      }
  
      // 当表格数据为空时，修改.ant-empty-normal样式，会撑高空白样式
      ::v-deep.ant-table {
        min-height: 1.9% !important;
      }
  
      ::v-deep tr {
        height: 34px !important;
        padding: 0px !important;
        font-size: 13px !important;
        color: #000;
      }
  
      ::v-deep td {
        height: 34px !important;
        padding: 0px !important;
        font-size: 13px !important;
        color: #000;
      }
  
      ::v-deep th {
        height: 34px !important;
        padding: 0px !important;
        font-size: 13px !important;
        color: #000;
      }
  
      ::v-deep td:nth-child(2) {
        padding: 0px 0px 0px 10px !important;
      }
  
      .myPagination {
        padding: 24px 0;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
  
        ::v-deep .ant-pagination-total-text {
          color: rgba(0, 0, 0, 0.427450980392157);
        }
      }
  
      ::v-deep .ant-table-align-left {
        text-align: center !important;
      }
  
      .expand {
        color: #1890ff;
      }
  
      .table_line {
        margin: 0 4px;
        background: #1890ff;
      }
    }
  
    .green {
      color: #52c41a;
    }
  
    .red {
      color: #ff0000;
    }
  
    .yellow {
      color: #faad14;
    }
  
    // 标签页样式
    .tab {
      margin-top: 28px;
      padding: 0 10px;
      ::v-deep .ant-tabs-bar {
        border-bottom: 1px solid rgb(44, 140, 240);
      }
      ::v-deep .ant-tabs {
        overflow: visible;
      }
      ::v-deep .ant-tabs-tab {
        width: 100px;
        text-align: center;
        color: rgb(44, 140, 240);
        background: #fff;
        border: 1px solid rgb(44, 140, 240);
      }
      ::v-deep .ant-tabs-tab-active {
        color: #fff !important;
        background-color: rgb(44, 140, 240);
      }
      .list {
        margin: 0 -10px;
        ul {
          // margin: 0;
          padding: 0;
          li {
            display: flex;
            justify-content: space-between;
            // margin: 20px 0;
            padding: 20px 10px;
            .left {
              // width: 80%;
              .type {
                font-weight: 400;
                font-style: normal;
                font-size: 18px;
                color: rgb(44, 140, 240);
                margin-bottom: 8px;
                cursor: pointer;
  
                .title {
                  margin-left: 5px;
                }
                .notitle {
                  margin-left: 5px;
                  color: #000;
                }
              }
            }
            .right {
              width: 250px;
              text-align: start;
              .serve_promise {
                margin-bottom: 15px;
              }
              .time {
                color: rgb(44, 140, 240);
                margin-right: 2px;
              }
            }
          }
          .checked {
            border: 1px solid rgb(186, 231, 255);
            background-color: rgba(230, 247, 255, 0.298);
            border-radius: 4px;
          }
        }
        img {
          width: 180px;
          margin: 0 auto;
          display: block;
        }
      }
    }
  }
  
  .mrt_10 {
    margin-top: 10px;
    padding-top: 32px;
  }
  
  // 弹框
  ::v-deep .ant-modal-title {
    position: relative;
    padding-left: 48px;
    font-family: 'PingFangSC-Regular', 'PingFang SC';
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
  }
  
  // ::v-deep .ant-modal-body {
  //   padding: 0 24px 24px;
  // }
  
  ::v-deep .ant-modal-title::before {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 24px;
    height: 25px;
    // background-image: url(../../../../assets/window/u2.png);
    background-size: 100% 100%;
  }
  
  .lzbz {
    ::v-deep .ant-modal-footer {
      border-top: 0;
    }
  }
  ::v-deep .ant-tabs-bar {
    position: relative;
    .ant-tabs-extra-content {
      position: absolute;
      left: 0;
      // z-index: 10;
      .tabBox {
        padding-left: 110px;
        .ant-badge {
          margin-right: 10px;
        }
        .tabItem {
          width: 100px;
          height: 40px;
        }
      }
    }
  }
  </style>