<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 {
  margin: 10px 28px;
  padding: 10px;
}
.select {
height: 41px;
border-radius: 8px;
color: #ffffff;
}
</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 cursor-pointer" @click="navigateTo('/setUserInfo')">个人信息</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"
        :class="{'select bg-primary': selectKey === item.key}"
        >
          <div class="flex items-center">
            <i class="iconfont" :class="item.icon"></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"
        :class="{'select bg-primary': selectKey === item.key}"
      >
        <div class="flex items-center">
          <i class="iconfont" :class="item.icon"></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 {
      selectKey: '',
      LoginUser: {},
      menuList: [
        {
          icon: "iconqianbao",
          key: "/coupon",
          label: "可用優惠券",
          number: "",
        },
        {
          icon: "iconorder",
          key: "/order",
          label: "訂單",
          number: "",
        },
        // {
        //   icon: "iconmessage",
        //   key: "",
        //   label: "我的评价",
        //   number: "",
        // },
        // {
        //   icon: "iconmoney-credit-card",
        //   key: "/payInfo",
        //   label: "支付管理",
        //   number: "",
        // },
      ],
      menuList2: [
        {
          icon: "iconpeople1",
          key: "/setUsersList",
          label: "出行人信息管理",
          number: "",
        },
        {
          icon: "iconemail",
          key: "/setAddress",
          label: "管理邮寄地址",
          number: "",
        },
        {
          icon: "iconcomputer",
          key: "/loginInfo",
          label: "登录方式管理",
          number: "",
        },
        {
          icon: "iconset",
          key: "/setInfo",
          label: "账户设置",
          number: "",
        },
      ],
    };
  },
  mounted() {
    this.selectKey = this.$route.path
    if (localStorage.b2bUser) {
      this.LoginUser = JSON.parse(window.localStorage.getItem("b2bUser"));
    }
  },
  methods: {
    navigateTo(route) {
      this.selectKey= route
      this.CommonJump(route, {});
    },
  },
};
</script>