<template>
  <div class="logo wh-full flex-center">
    <!-- <transition name="el-fade-in-linear" mode="out-in"> -->
    <!-- <router-link :key="+collapse" class="wh-full flex-center" to="/"> -->
    <img :src="state.userInfo.logo" class="w20px h20px" />
    <!-- <span v-if="!collapse" class="title">{{ userStore.userInfo.shopName }}</span> -->
    <el-dropdown trigger="click" @command="handleCommand">
      <div class="el-dropdown-link" style="display: flex;">
        <div v-if="!collapse" class="title">{{ state.shopName }}</div>
        <el-icon class="el-icon--right" v-if="loginType == 0">
          <arrow-down />
        </el-icon>
      </div>
      <template #dropdown>
        <el-dropdown-menu v-if="loginType == 0">
          <el-dropdown-item :command="item.shopId" v-for="(item, index) in state.branchList" :key="index"> {{
            item.shopName }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <!-- </router-link> -->
    <!-- </transition> -->
  </div>
</template>

<script setup>
import defaultSettings from "@/settings";
import { useUserStore } from "@/store";
import ShopApi from "@/api/account/shop";

const userStore = useUserStore();
const state = reactive({
  branchList: [],
  userInfo: useUserStore().userInfo,
  shopName: useUserStore().userInfo.shopName
});
const loginType = ref(localStorage.getItem("loginType"))
onMounted(() => {
  geiShopList()
});
async function geiShopList() {
  let res = await ShopApi.getBranchList()
  state.branchList = res;
  if (!localStorage.getItem("shopName")) {
    state.shopName = state.branchList[0].shopName
    localStorage.setItem("branch_shopId", state.branchList[0].id)
    localStorage.setItem("shopName", state.branchList[0].shopName)
  } else {
    state.shopName = localStorage.getItem("shopName")
  }

}
async function handleCommand(command) {
  console.log(command)
  let res = state.branchList.filter(v => v.shopId == command)[0]
  // localStorage.getItem("shopId")
  if (localStorage.getItem("shopId") == command) {
    return
  }
  await ShopApi.getBranchChange(res.shopId)
  localStorage.setItem("Instead_olold_order", {})
  // localStorage.setItem("branch_shopId", res.shopId)
  localStorage.setItem("shopName", res.shopName)
  state.shopName = res.shopName
  location.reload()
  console.log(res)
  console.log(command)
}

defineProps({
  collapse: {
    type: Boolean,
    required: true,
  },
});
</script>

<style lang="scss" scoped>
.logo {
  width: 100%;
  height: $navbar-height;
  background-color: $sidebar-logo-background;
  cursor: pointer;

  .title {
    flex-shrink: 0;
    /* 防止容器在空间不足时缩小 */
    margin-left: 10px;
    font-size: 16px;
    color: #5a5e66;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100px;
  }
}

.layout-top,
.layout-mix {
  .logo {
    width: $sidebar-width;
  }

  &.hideSidebar {
    .logo {
      width: $sidebar-width-collapsed;
    }
  }
}
</style>
