<template>
  <div>
    <el-row :gutter="0" v-if="isLinkDisabled" style="margin-top: 15px">
      <el-col :span="2" align="left">
        <img v-if="logo" :src="logo" class="sidebar-logo"/>
      </el-col>

      <div>
        <el-form :model="formData" class="order-el-form" ref="formData" label-width="120px">

          <el-col :span="18" style="margin-left: 0px">
              <span style="font-size: 14px;color: #909399">当前工位:&nbsp&nbsp&nbsp&nbsp<span
                style="font-size: 16px;color: #000000">{{ this.formData.workplaceName }}</span>
              &nbsp&nbsp&nbsp&nbsp<el-button type="primary" icon="el-icon-sort" @click="toggleWorkplace" v-if="workPlaceClass == 2"
                                              style="margin-left: 10px;">切换工位</el-button>
              </span>

            <span style="font-size: 14px;color: #909399;margin-left: 20px" v-if="workPlaceClass == 1">当前业务名称:&nbsp&nbsp&nbsp&nbsp<span
              style="font-size: 16px;color: #000000">{{ this.formData.busName }}</span>
              &nbsp&nbsp&nbsp&nbsp <el-button type="primary" icon="el-icon-sort" @click="toggleBusType"
                                              style="margin-left: 10px;">切换业务</el-button>
<!--                <el-button type="danger" @click="closeAllTabs" style="margin-left: 10px;" v-if="this.showContextMenu">关闭所有</el-button>-->
            </span>

          </el-col>

        </el-form>
      </div>

      <el-col :span="4" align="right" style="margin-top: 10px">
        <div class="inv-hos-title">
            <span
              style="margin: 10px;color: #2d8cf0;font-size: 14px;"
            >部门&nbsp:&nbsp{{ this.userInfo.deptName }}</span>
          <span
            style="font-weight: 500;color:rgb(51 48 48); font-size: 14px; margin-right: 20px"
          >&nbsp&nbsp&nbsp&nbsp(用户&nbsp:&nbsp{{
              this.userInfo.userName
            }})</span>
        </div>
      </el-col>

    </el-row>

    <el-row class="tac">
      <el-col :span="2">
        <!--      <h5>默认颜色</h5>-->
        <el-menu
          :default-active="menuActive"
          class="el-menu-vertical-demo"
          style="width: 100%"
          unique-opened="true"
          @open="handleOpen">

<!--          <el-submenu index="11" v-if="workPlaceClass == 1">-->
<!--            <template slot="title">-->
<!--              <i class="el-icon-s-order"></i>-->
<!--              <span>单据管理</span>-->
<!--            </template>-->
            <el-menu-item :index=0 @click="clickMenuItem(0)" v-if="workPlaceClass == 1">
              <!--              <i class="el-icon-edit-outline"></i>-->
              <span slot="title">处理单据</span>
            </el-menu-item>

            <el-menu-item :index=4 @click="clickMenuItem(4)" v-if="workPlaceClass == 1">
              <!--              <i class="el-icon-s-order"></i>-->
              <span slot="title">待处理单</span>
            </el-menu-item>
            <el-menu-item :index=5 @click="clickMenuItem(5)" v-if="workPlaceClass == 1">
              <!--              <i class="el-icon-s-claim"></i>-->
              <span slot="title">已完成单</span>
            </el-menu-item>
            <el-menu-item :index=6 @click="clickMenuItem(6)" v-if="workPlaceClass == 1">
              <!--            <i class="el-icon-upload"></i>-->
              <span slot="title">单据上传</span>
            </el-menu-item>
<!--          </el-submenu>-->


<!--          <el-submenu index="33" v-if="workPlaceClass == 2">-->
<!--            <template slot="title">-->
<!--              <i class="el-icon-s-platform"></i>-->
<!--              <span>工位管理</span>-->
<!--            </template>-->

            <el-menu-item :index=1 @click="clickMenuItem(1)" v-if="workPlaceClass == 2" >
              <!--            <i class="el-icon-s-unfold"></i>-->
              <span slot="title">工位上货</span>
            </el-menu-item>
            <el-menu-item :index=2 @click="clickMenuItem(2)"  v-if="workPlaceClass == 2" >
            <!--            <i class="el-icon-s-fold"></i>-->
              <span slot="title">工位退货</span>
            </el-menu-item>
            <el-menu-item :index=3 @click="clickMenuItem(3)"  v-if="workPlaceClass == 2" >
            <!--            <i class="el-icon-s-platform"></i>-->
              <span slot="title">工位库存</span>
            </el-menu-item>
            <el-menu-item :index=7 @click="clickMenuItem(7)"  v-if="workPlaceClass == 2" >
            <!--            <i class="el-icon-s-help"></i>-->
              <span slot="title">拆零管理</span>
            </el-menu-item>
            <el-menu-item :index=8 @click="clickMenuItem(8)"  v-if="workPlaceClass == 2" >
            <!--            <i class="el-icon-warning"></i>-->
              <span slot="title">存量预警</span>
            </el-menu-item>

<!--          </el-submenu>-->


          <!--<el-submenu index="22" v-if="autoTag == 1">-->
          <!--  <template slot="title">-->
          <!--    <i class="el-icon-s-help"></i>-->
          <!--    <span>库存管理</span>-->
          <!--  </template>-->

          <!--</el-submenu>-->

        </el-menu>
      </el-col>

      <el-col :span="22">
        <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab"
                 @tab-click="upodateMenuActive" @contextmenu.native.prevent="handleContextMenu">
          <el-tab-pane
            v-for="(item, index) in editableTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"
            @contextmenu.stop.prevent="handleTabContextMenu($event, item)"
            style="background-color: white"
          >
            <!--            <ul v-if="showContextMenu" class="context-menu" :style="contextMenuPosition">-->
            <!--              <li @click="closeAllTabs">关闭所有</li>-->
            <!--            </ul>-->
            <div>
              <component v-if="showChild" :is="item.component" v-bind="item.componentProps"
                         :reset-key="resetKeys[item.name]" @parent-method="parentMethod"
                         style="margin-top: -14px"/>
            </div>
          </el-tab-pane>
        </el-tabs>

      </el-col>
    </el-row>


    <el-dialog
      title="选择业务类型"
      :visible.sync="selectBusTypeDisabled"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="selectBusTypeClosrrButDisabled"
      v-if="selectBusTypeDisabled"
      width="65%"
      append-to-body
    >
      <el-row :gutter="24">
        <el-col :span="24" style="display: flex; justify-content: flex-end;">
          <el-button @click="toggleContent" type="primary" style="margin-right: 20px;">
            <span v-if="!isContentVisible">查看更多业务类型</span>
            <span v-if="isContentVisible">查看常用业务类型</span>
            <i :class="{'el-icon-caret-right': !isContentVisible, 'el-icon-caret-bottom': isContentVisible}"> </i>
            <!-- 这里原本想用大括号图标，但Font Awesome默认没有，所以用了上下箭头代替 -->
          </el-button>
        </el-col>
      </el-row>

      <el-row>
        <!--          <el-button v-for="(item, index) in busTypeList" :key="index" type="primary" plain @click="selectBusType(item.code)">{{ item.name }}</el-button>-->

        <el-col v-for="(info, index)  in busTypeList" :key="index" :xs="12" :sm="8" :md="8" :lg="6">
          <el-card :body-style="{margin:'20px'}"
                   style="margin:20px 20px 20px 20px;height: 200px;background-color: #e1f3fb;border-radius: 12px; position: relative;"

          >

            <div
              style="display: flex; justify-content: space-between; align-items: center; height: 46px; /* 约为 200px 的 1/3 */"
              @click="selectBusType(info)">
              <p style="font-size: 20px;background-color: #e1f3fb;font-weight: bold;">{{ info.busName }}</p>
              <!-- 假设你的信息对象中包含一个title属性 -->
              <!--            <div style="width: 60px; height: 60px;  display: flex; justify-content: center; align-items: center;">-->
              <!--              &lt;!&ndash; 二维码占位，这里用灰色方块代替 &ndash;&gt;-->
              <!--&lt;!&ndash;              <span>QR</span>&ndash;&gt;-->
              <!--              <div ref="qrcode" :id="'qrcode-'+index" style="width: 60px;height: 60px;"></div>-->

              <!--            </div>-->
            </div>
            <div style="flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 10px;"
            >
              <!-- 假设这里有一些信息内容 -->
              <p style="font-size: 14px;background-color: #e1f3fb" @click="selectBusType(info)">
                {{ info.remark }}</p>
              <el-button type="primary" style="position: absolute; bottom: 20px; right: 20px;" icon="el-icon-thumb"
                         @click="selectBusType(info)">开始作业
              </el-button>

            </div>


          </el-card>
        </el-col>
      </el-row>
    </el-dialog>



    <el-dialog
      title="选择作业工位"
      :visible.sync="selectWorkplaceeDisabled"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="selectBusTypeClosrrButDisabled"
      v-if="selectWorkplaceeDisabled"
      width="65%"
      append-to-body
    >

      <el-row>
        <el-col v-for="(info, index)  in curWorkPlaces" :key="index" :xs="12" :sm="8" :md="8" :lg="6">
          <el-card :body-style="{margin:'20px'}"
                   style="margin:20px 20px 20px 20px;height: 200px;background-color: #e1f3fb;border-radius: 12px; position: relative;"
          >

            <div
              style="display: flex; justify-content: space-between; align-items: center; height: 46px; /* 约为 200px 的 1/3 */"
              @click="selectWorkplace(info)">
              <p style="font-size: 20px;background-color: #e1f3fb;font-weight: bold;">{{ info.workplaceName }}</p>
              <!-- 假设你的信息对象中包含一个title属性 -->
              <!--            <div style="width: 60px; height: 60px;  display: flex; justify-content: center; align-items: center;">-->
              <!--              &lt;!&ndash; 二维码占位，这里用灰色方块代替 &ndash;&gt;-->
              <!--&lt;!&ndash;              <span>QR</span>&ndash;&gt;-->
              <!--              <div ref="qrcode" :id="'qrcode-'+index" style="width: 60px;height: 60px;"></div>-->

              <!--            </div>-->
            </div>
            <div style="flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 10px;"
            >
              <!-- 假设这里有一些信息内容 -->
              <p style="font-size: 14px;background-color: #e1f3fb" @click="selectWorkplace(info)">
                {{ info.remark }}</p>
              <el-button type="primary" style="position: absolute; bottom: 20px; right: 20px;" icon="el-icon-thumb"
                         @click="selectWorkplace(info)">开始作业
              </el-button>

            </div>


          </el-card>
        </el-col>
      </el-row>
    </el-dialog>

  </div>


</template>

<script>
import logoImg from '@/assets/logo/logo_dm.png'
import DealOrder from '@/views/collect/DealOrder.vue'
import CollectOrderAllot from '@/views/collect/CollectOrderAllot.vue'
import CollectOrderEnd from '@/views/collect/CollectOrderEnd.vue'
import IoCreateOrderReturn from '@/views/collect/IoCreateOrder.vue'
import IoCreateOrderOut from '@/views/collect/IoCreateOrder.vue'
import ioSplitFifoCode from '@/views/collect/ioSplitFifoCode.vue'
import CollectOrderUpload from '@/views/collect/CollectOrderUpload.vue'
import IoDestroyOrder from '@/views/collect/IoDestroyOrder.vue'
import IoSplitFifoRemind from '@/views/collect/IoSplitFifoRemind.vue'
import {listPage, switchWorkplaceStatus} from "@/api/basic/workPlace/sysWorkplaceManage";
import {
  filterListByWorkplace,
  getWorkBindBusTypes,
  removeBusTypeById
} from '@/api/basic/workPlace/sysWorkplaceDocuments'

export default {
  components: {
    DealOrder,
    IoCreateOrderReturn,
    IoCreateOrderOut,
    ioSplitFifoCode,
    CollectOrderAllot,
    CollectOrderEnd,
    CollectOrderUpload,
    IoDestroyOrder
  },
  name: 'CollectOrderTabs',
  data() {
    return {
      isContentVisible: false, // 控制内容是否显示
      showContextMenu: false, // 控制上下文菜单的显示
      contextMenuPosition: {x: 0, y: 0}, // 上下文菜单的位置
      selectWorkplaceClosrrButDisabled: false,
      selectWorkplaceeDisabled: false,
      selectBusTypeDisabled: false,
      selectBusTypeClosrrButDisabled: false,
      selectWorkplaceStatusDisabled: false,
      busQuery: {
        busKey: '',
        isPopular: 1,
        workplaceCode: null,
        page: 1,
        limit: 100
      },
      formData: {
        busName: null,
        workplaceName: null,
        workplaceStatus: null
      },
      curWorkPlaces: [],
      busTypeList: [],
      logo: logoImg,
      isLinkDisabled: false,
      showChild: true,
      userInfo: {
        inv: this.$store.getters.locInvName,
        deptName: this.$store.getters.locDeptName,
        userName: this.$store.getters.user.employeeName,
        companyName: this.$store.getters.companyName
      },
      tabPosition: 'left',
      editableTabsValue: 'DealOrder',
      componentTables: [
        {
          number: 0,
          title: '处理单据',
          name: 'DealOrder',
          component: DealOrder,
          // 假设你需要传递的参数
          componentProps: {
            // title: '这是单据的标题',
          }
        },
        {
          number: 1,
          title: '工位上货',
          name: 'IoCreateOrderOut',
          component: IoCreateOrderOut,
          // 假设你需要传递的参数
          componentProps: {
            fromSplitType: "out"
          }
        },
        {
          number: 2,
          title: '工位退货',
          name: 'IoCreateOrderReturn',
          component: IoCreateOrderReturn,
          // 假设你需要传递的参数
          componentProps: {
            fromSplitType: "return"
          }
        },
        {
          number: 3,
          title: '工位库存',
          name: 'ioSplitFifoCode',
          component: ioSplitFifoCode,
          // 假设你需要传递的参数
          componentProps: {}
        },
        {
          number: 4,
          title: '待处理单',
          name: 'CollectOrderAllot',
          component: CollectOrderAllot,
          // 假设你需要传递的参数
          componentProps: {}
        },
        {
          number: 5,
          title: '已完成单',
          name: 'CollectOrderEnd',
          component: CollectOrderEnd,
          // 假设你需要传递的参数
          componentProps: {}
        },
        {
          number: 6,
          title: '单据上传',
          name: 'CollectOrderUpload',
          component: CollectOrderUpload,
          // 假设你需要传递的参数
          componentProps: {}
        },
        {
          number: 7,
          title: '拆零管理',
          name: 'IoDestroyOrder',
          component: IoDestroyOrder,
          // 假设你需要传递的参数
          componentProps: {}
        },
        {
          number: 8,
          title: '存量预警',
          name: 'IoSplitFifoRemind',
          component: IoSplitFifoRemind,
          // 假设你需要传递的参数
          componentProps: {}
        }],
      editableTabs: [{
        number: 0,
        title: '处理单据',
        name: 'DealOrder',
        component: DealOrder,
        // 假设你需要传递的参数
        componentProps: {
          // title: '这是单据的标题'
        }
      }
      ],
      tabIndex: 0,
      menuActive: 0,
      autoTag: 0,
      workPlaceClass: 1,
      resetKeys: {}
    }
  },
  methods: {
    toggleContent() {
      // 切换isContentVisible的值
      this.isContentVisible = !this.isContentVisible;
      //判断是否展开 展开 就查全部/折叠就是 常用的
      // todo 2024/09/09
      if (this.isContentVisible) {
        this.busQuery.isPopular = 0
      } else {
        this.busQuery.isPopular = 1
      }
      this.getWorkBindBusTypes(this.formData.workplaceId)
    },
    toggleWorkplaceStatus() {
      if (this.formData.workplaceStatus == 0) {
        this.formData.workplaceStatus = 1
      } else {
        this.formData.workplaceStatus = 0
      }
      switchWorkplaceStatus(this.formData).then(resp => {
        if (resp.code == 20000) {
          this.$message.success("切换成功!")

        } else {
          this.$message.error(resp.message)
          if (this.formData.workplaceStatus == 0) {
            this.formData.workplaceStatus = 1
          } else {
            this.formData.workplaceStatus = 0
          }
        }
      }).catch(() => {

      })
    },
    toggleBusType() {
      //隐藏下拉框内容
      // this.$refs.selectHeadEmpId.blur();

      //切换业务时 可以有关闭按钮展示
      this.selectBusTypeClosrrButDisabled = true
      this.selectBusTypeDisabled = true
    },
    toggleWorkplace() {
      //切换业务时 可以有关闭按钮展示
      this.selectWorkplaceClosrrButDisabled = true
      this.selectWorkplaceeDisabled = true
    },
    selectBusType(info) {
      let val = info.documentTypeCode
      this.formData.busType = val
      let newQuery = {...this.$route.query};
      delete newQuery.billNo;
      newQuery.busType = val
      this.$router.push({query: newQuery, path: this.$route.path});
      this.formData.busName = info.busName;
      this.autoTag = info.autoTag;
      this.editableTabs = []
      this.clickMenuItem(0)
      this.showChild = false;
      this.$nextTick(() => {
        this.showChild = true;
      });
      this.selectBusTypeDisabled = false
      this.selectBusTypeClosrrButDisabled = false
    },
    selectWorkplace(info) {
      let val = info.workplaceId
      this.formData.workplaceId = val
      let newQuery = {...this.$route.query};
      delete newQuery.billNo;
      newQuery.workplaceId = val
      delete newQuery.workPlaceClass;
      newQuery.workPlaceClass = info.workPlaceClass
      this.$router.push({query: newQuery, path: this.$route.path});
      this.formData.workplaceName = info.workplaceName;
      this.editableTabs = []
      this.clickMenuItem(1)
      this.showChild = false;
      this.$nextTick(() => {
        this.showChild = true;
      });
      this.selectWorkplaceClosrrButDisabled = false
      this.selectWorkplaceeDisabled = false
      location.reload();
    },
    parentMethod(data) {
      const foundTab = this.findAllTabByName(data)
      this.clickMenuItem(foundTab.number)
      this.showChild = false;
      this.$nextTick(() => {
        this.showChild = true;
      });
    },
    upodateMenuActive(tab, event) {
      const foundTab = this.findTabByName(tab.name)
      if (foundTab) {
        // 如果找到了，执行一些操作
        this.menuActive = foundTab.number
        this.$set(this.resetKeys, foundTab.name, Date.now());
        this.$store.commit('tabActive/SET_MENU_ACTIVE', foundTab.number);
      }
    },
    clickMenuItem(val) {
      //分两种 一种已存在 一种未存在
      let item = this.componentTables[(val)]
      const foundTab = this.findTabByName(item.name)
      if (foundTab) {
        // 如果找到了，执行一些操作
        this.editableTabsValue = foundTab.name
        this.$set(this.resetKeys, foundTab.name, Date.now());
        this.menuActive = foundTab.number
        this.$store.commit('tabActive/SET_MENU_ACTIVE', foundTab.number);
      } else {
        // 如果没有找到，执行其他操作
        this.addTab(item)
      }

    },
    findTabByName(name) {
      // 使用find方法找到ID等于tabId的对象
      const tab = this.editableTabs.find(tab => tab.name === name)
      // 如果找到了，返回该对象；否则返回undefined
      return tab
    },
    findAllTabByName(name) {
      // 使用find方法找到ID等于tabId的对象
      const tab = this.componentTables.find(tab => tab.name === name)
      // 如果找到了，返回该对象；否则返回undefined
      return tab
    },
    addTab(item) {
      ++this.tabIndex
      this.editableTabs.push(item)
      this.editableTabsValue = item.name
      this.menuActive = item.number
      this.$store.commit('tabActive/SET_MENU_ACTIVE', item.number);
    },
    removeTab(targetName) {
      let tabs = this.editableTabs
      let activeName = this.editableTabsValue

      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activeName = nextTab.name
              this.menuActive = nextTab.number
              this.$store.commit('tabActive/SET_MENU_ACTIVE', nextTab.number);
            }
          }
        })
      }

      this.editableTabsValue = activeName
      this.editableTabs = tabs.filter(tab => tab.name !== targetName)
    },
    //获取当前货位
    findCurWorkPlaces(val) {
      let query = {
        key: val,
        status: 1,
        // invCode: this.formData.invCode,
        // workPlaceClass: this.workPlaceClass,
        page: 1,
        limit: 100,
      }
      listPage(query).then((res) => {
        this.curWorkPlaces = res.data.list || [];
        if (this.$route.query.workplaceId != null) {
          let item = this.curWorkPlaces.find(item => item.workplaceId == this.$route.query.workplaceId);
          this.formData.workplaceName = item.workplaceName
          this.formData.workplaceStatus = item.workplaceStatus
        }else
        if (this.curWorkPlaces.length == 1 && this.formData.workPlaceCode == null) {
          this.formData.workPlaceCode = this.curWorkPlaces[0].workplaceId;
          this.workPlaceCodeChange(this.formData.workPlaceCode);
        }
      })
    },
    getWorkBindBusTypes(workplaceId) {
      this.busQuery.workplaceCode = workplaceId
      filterListByWorkplace(this.busQuery).then(res => {
        if (res.code == 20000) {
          this.busTypeList = res.data.list
          this.busTypeTotal = res.data.total

          if (this.$route.query.busType != null) {
            this.formData.busType = this.$route.query.busType
            let busType = this.busTypeList.find(item => item.documentTypeCode == this.formData.busType)
            this.formData.busName = busType.busName;
            this.autoTag = busType.autoTag;
          } else if (this.busTypeList.length == 1) {
            this.formData.busType = this.busTypeList[0].documentTypeCode
            this.autoTag = this.busTypeList[0].autoTag;
            this.$router.push({query: {...this.$route.query, busType: this.formData.busType}, path: this.$route.path})
            this.selectBusTypeDisabled = false
            this.formData.busName = this.busTypeList.find(item => item.documentTypeCode == this.formData.busType).busName;
          } else {
            this.selectBusTypeDisabled = true
            this.formData.busType = null
          }

        }
        return
      })
    },

    handleContextMenu() {
      this.showContextMenu = true;
    },
    handleTabContextMenu(event, tab) {
      this.showContextMenu = true;
      // this.contextMenuTab = tab;
      // this.contextMenuPosition = { x: event.clientX, y: event.clientY };
    },

    closeContextMenu() {
      this.showContextMenu = false;
      // this.contextMenuStyle.display = 'none'; // 隐藏上下文菜单
    },
    closeCurrentTab(index) {
      // 关闭当前标签页的逻辑
      this.editableTabs.splice(index, 1); // 假设这是关闭标签页的方式
      this.editableTabsValue = this.editableTabs.length > 0 ? this.editableTabs[0].name : '';
      this.closeContextMenu();
    },
    closeOtherTabs() {
      // 关闭其他标签页的逻辑
      // ...
      this.closeContextMenu();
    },
    closeAllTabs() {
      // 关闭所有标签页的逻辑
      this.editableTabs = [];
      this.editableTabsValue = '';
      this.closeContextMenu();
    },

  },
  computed: {
    contextMenuPosition() {
      return {
        position: 'fixed', // 使用 fixed 定位确保它浮动在顶层
        left: `${this.contextMenuPosition.x}px`,
        top: `${this.contextMenuPosition.y}px`,
        zIndex: 1000, // 确保它在其他内容之上
        // 其他样式...
      };
    },
  },
  created() {
    this.workPlaceClass =  this.$route.query.workPlaceClass
    if(this.workPlaceClass == 2){
      this.closeAllTabs()
      this.editableTabsValue = 'IoCreateOrderOut';
      this.menuActive= 1,
        this.editableTabs =  [{
          number: 1,
          title: '工位上货',
          name: 'IoCreateOrderOut',
          component: IoCreateOrderOut,
          // 假设你需要传递的参数
          componentProps: {
            fromSplitType: "out"
          }
        }
        ];
    }

    this.findCurWorkPlaces();
    if (this.$route.query.workplaceId != null) {
      this.isLinkDisabled = true
      this.formData.workPlaceCode = Number(this.$route.query.workplaceId);
      this.formData.workplaceId = Number(this.$route.query.workplaceId);
      if(this.workPlaceClass == 1) {
        this.getWorkBindBusTypes(this.formData.workPlaceCode);
      }else if(this.workPlaceClass == 2) {
        this.busQuery.workplaceCode = this.formData.workPlaceCode
        filterListByWorkplace(this.busQuery).then(res => {
          if (res.code == 20000) {
            this.busTypeList = res.data.list
            this.busTypeTotal = res.data.total
          }
          return
        })
      }
    }
  }
}
</script>

<style lang="css" scoped>
.sidebar-logo {
  width: 80px;
  height: 60px;
  vertical-align: middle;
  margin-left: 25px;
}

.context-menu {
  zIndex: 100000;
  position: fixed;
  list-style-type: none;
  padding: 0;
  margin: 0;
  background-color: #f9f9f9;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  /* 其他样式... */
}

.context-menu li {
  padding: 8px 16px;
  cursor: pointer;
  /* 其他样式... */
}

.context-menu li:hover {
  background-color: #e1e1e1;
}

.rounded-box {
  border-radius: 10px;
  background-color: #f8f9fa; /* 浅灰色背景，可选 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 可选，添加阴影以增加立体感 */
  /*display: flex;*/
  /*flex-direction: column;*/
  /*align-items: center;*/
}


</style>
