<template>
  <el-dropdown trigger="click">
    <div class="flex-center h100% p13px">
      <img :src="userStore.userInfo.logo" class="rounded-full mr-10px w40px h40px" />
      <span class="title">{{ userStore.userInfo.shopName }}</span>
      <el-icon>
        <CaretBottom />
      </el-icon>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="handleOpenUserProfile">店铺配置</el-dropdown-item>
        <el-dropdown-item divided @click="refResetPasswordRef.show(shopInfo)">修改密码</el-dropdown-item>
        <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  <resetPassword ref="refResetPasswordRef" />
</template>

<script setup lang="ts">
defineOptions({
  name: "UserProfile",
});
import { useTagsViewStore, useUserStore } from "@/store";
import { useCartsStore } from '@/store/modules/carts'
import resetPassword from "@/components/resetPassword/index.vue";

const shopInfo = JSON.parse(localStorage.getItem("userInfo") || "{}");

const refResetPasswordRef = ref(null);
const tagsViewStore = useTagsViewStore();
const userStore = useUserStore();

const cartStore = useCartsStore()

const route = useRoute();
const router = useRouter();

/**
 * 打开个人中心页面
 */
function handleOpenUserProfile() {
  router.push({ name: "shopConfig" });
}

/**
 * 注销登出
 */
function logout() {
  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    lockScroll: false,
  }).then(() => {
    userStore
      .logout()
      .then(() => {
        console.log(111111111);
        tagsViewStore.delAllViews();
      })
      .then(() => {
        console.log(222222222);
        localStorage.setItem('Instead_olold_order', '')
        localStorage.setItem('carts', '')
        cartStore.table_code = ''
        cartStore.oldOrder = ''

        console.log('cartStore.table_code', cartStore.table_code);

        router.push(`/login?redirect=${route.fullPath}`);
      });
  });
}
</script>

<style lang="scss" scoped></style>
<style scoped>
.title {
  font-size: 16px;
  color: #5a5e66;
}
</style>