<!--
 * @Author: wuruonan wuruonan@yitong.com.cn
 * @Date: 2024-07-09 16:01:43
 * @LastEditors: wuruonan wuruonan@yitong.com.cn
 * @LastEditTime: 2024-07-10 17:51:56
 * @FilePath: /krm-admin-ui/src/components/SystemSwitch/src/SystemSwitch.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
import { useRouter } from 'vue-router'
import { ref, computed } from 'vue'
import { useRouteStore } from '@/store/modules/route'
import { usePermissionStore } from '@/store/modules/permission'
import { useStorage } from '@/hooks/web/useStorage'
const checkname = ref('一表通管理');
const routeStore =  useRouteStore();//使用route的pinia
const permissionStore = usePermissionStore();
const { getStorage } = useStorage();
const items = ref([
  // { text: '案例预警', type:"bslc"},
  // { text: '统计分析', type:"mdgl" },
  // { text: '风险评级', type:"pjgl" },
  { text: '一表通管理', type:"ybt" },
  { text: '系统管理', type:"xtgl" },
]);
const changeSystem = (val) => {
  //修改一个全局的routeType，然后此时切换左侧的菜单
  routeStore.setRouteType(val.type);//修改显示的路由类型
  checkname.value=val.text//修改名称
  const routeArray = getStorage("roleRouters");
  permissionStore.generateRoutes('server', routeArray).catch(() => {});
  // permissionStore.generateRoutes('frontEnd', routeArray).catch(() => {});
}
</script>

<template>
  <ElDropdown trigger="click">
    <div class="flex items-center system-switch">
      <img
        src="@/assets/imgs/changeIcon.png"
        alt=""
        class="w-[calc(var(--logo-height)-30px)] rounded-[50%]"
      />
      <span class="<lg:hidden text-14px pl-[5px] text-[var(--top-header-text-color)]">{{ checkname }}</span>
    </div>
    <template #dropdown>
      <ElDropdownMenu>
        <ElDropdownItem v-for="(item, index) in items" :key="index" @click="changeSystem(item)">
          <div>{{ item.text }}</div>
        </ElDropdownItem>
      </ElDropdownMenu>
    </template>
  </ElDropdown>
</template>

<style lang="less">
.system-switch{
  background: linear-gradient(270deg, #589ef8 0, #589ef8 100%);
  color: #fff;
  height: 40px;
  line-height: 40px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  padding: 0 20px;
  border: none;
  cursor: pointer;
}
// .system-switch:hover{
//   border: none !important;
//   outline: none !important;
// }
</style>
