<style lang="scss" scoped>
.user-nav-box {
  width: 240px;
}
.avatar {
  width: 94px;
  height: 94px;
  background: #ffffff;
  border: 2px solid #f0efef;
  border-radius: 50%;
  margin: 0 auto;
  display: block;
}
.nav-item {
  padding: 10px 30px;
}
</style>
<template>
  <div class="user-nav-box">
    <div class="bg-white q-mt-lg">
      <div class="q-pt-xl">
        <img class="avatar" v-if="LoginUser.photo" :src="LoginUser.photo" />
        <img class="avatar" v-else src="../../../assets/img/avatar.png" />
      </div>
      <div class="text-primary text-center q-mt-sm">个人信息</div>
      <div class="q-mt-xl q-pb-lg">
        <div
          class="nav-item flex justify-between items-center cursor-pointer"
          @click="navigateTo(item.key)"
          v-for="item in menuList"
          :key="item.key"
        >
          <div class="flex items-center">
            <i class="iconfont icontime"></i>
            <span class="q-ml-lg">{{ item.label }}</span>
          </div>
          <span class="text-primary">{{ item.label }}</span>
        </div>
      </div>
    </div>
    <div class="bg-white q-mt-lg q-py-lg">
      <div
        class="nav-item flex justify-between items-center cursor-pointer"
        @click="navigateTo(item.key)"
        v-for="item in menuList2"
        :key="item.key"
      >
        <div class="flex items-center">
          <i class="iconfont icontime"></i>
          <span class="q-ml-lg">{{ item.label }}</span>
        </div>
        <!-- <span class="text-primary">{{item.label}}</span> -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      LoginUser: {},
      menuList: [
        {
          icon: "",
          key: "/coupon",
          label: "可用優惠券",
          number: "",
        },
        {
          icon: "",
          key: "/order",
          label: "訂單",
          number: "",
        },
        {
          icon: "",
          key: "",
          label: "我的评价",
          number: "",
        },
        {
          icon: "",
          key: "/payInfo",
          label: "支付管理",
          number: "",
        },
      ],
      menuList2: [
        {
          icon: "",
          key: "/setUsersList",
          label: "出行人信息管理",
          number: "",
        },
        {
          icon: "",
          key: "/setAddress",
          label: "管理邮寄地址",
          number: "",
        },
        {
          icon: "",
          key: "/loginInfo",
          label: "登录方式管理",
          number: "",
        },
        {
          icon: "",
          key: "/setUserInfo",
          label: "账户设置",
          number: "",
        },
      ],
    };
  },
  mounted() {
    if (localStorage.b2bUser) {
      this.LoginUser = JSON.parse(window.localStorage.getItem("b2bUser"));
    }
  },
  methods: {
    navigateTo(route) {
      console.log("usercenter navigateTo", route);
      this.CommonJump(route, {});
    },
  },
};
</script>