<style lang="scss" scoped>
.avatar {
  width: 60px;
  height: 60px;
  background: #ffffff;
  border: 2px solid #f0efef;
  border-radius: 50%;
  margin: 0 auto;
  display: block;
}
.nav-item {
  margin:0 10px;
  padding: 10px;
  border-bottom: 1px solid #eee;
}
.nav-item:last-child {
  border-bottom: none;
}
.select {
  height: 41px;
  border-radius: 8px;
  color: #ffffff;
}
.action-item {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin-left: 10px;
}
.edit-info {
  width: 12px;
  height: 12px;
}
.padding-20 {
  padding: 20px;
}
.card {
  margin: 25px 15px;
  border-radius: 15px;
  padding: 10px;
}
.order-item {
  width: 25%;
  display: inline-block;
}
.order-img {
  width: 26px;
  height: 26px;
}
.go-play {
  width: 36px;
  height: 36px;
}
.play-box {
padding: 8px;
background: #FAF9F9;
border-radius: 9px;
margin: 10px 13px 0 13px;
}
.order-number {
  text-align: center;
  position: absolute;
  right:  10px;
  top: 0;
  height: 14px;
  width: 14px;
  font-size: 9px;
  line-height: 14px;
  border-radius: 50%;
  color: #fff;
  background-color: var(--q-color-primary);
}
</style>
<template>
  <div class="user-nav-box">
    <div class="padding-20">
      <div class="flex justify-between items-center">
        <span class="f20">个人中心</span>
        <div>
          <img class="action-item" src="../../assets/img/userCenter/help.png" />
          <img @click="CommonJump('/setInfo')" class="action-item" src="../../assets/img/userCenter/set.png" />
        </div>
      </div>
      <div class="flex items-center q-mt-md">
        <div>
          <img class="avatar" v-if="LoginUser.photo" :src="LoginUser.photo" />
          <img class="avatar" v-else src="../../assets/img/avatar.png" />
        </div>
        <div class="q-ml-md">
          <div class="f18">hello，开起你的旅程吧~</div>
          <div @click="CommonJump('/setUserInfo')">
            <img class="edit-info" src="../../assets/img/userCenter/edit.png" />
            個人信息管理
          </div>
        </div>
      </div>
    </div>
      <div class="bg-white  card">
        <div
          class="order-item cursor-pointer relative"
          @click="navigateTo(item.key)"
          v-for="item in orderList"
          :key="item.key"
          :class="{ 'select bg-primary': selectKey === item.key }"
        >
          <div class="column flex-center">
            <img class="order-img" :src="require(`../../assets/img/userCenter/${item.icon}.png`)" />
            <div>{{ item.label }}</div>
            <div class="absoulte order-number" v-if="item.number">{{item.number}}</div>
          </div>
          <!-- <span class="text-primary">{{ item.label }}</span> -->
        </div>
        <div class="flex play-box q-mt-md" v-if="useOrder">
            <img class="go-play q-mr-md" :src="useOrder.GoodsPic" />
            <div class="f12">
              <div>即將出行</div>
              <div class="text-grey-6">[{{useOrder.UseDate}}]{{useOrder.GoodsName}}</div>
            </div>
        </div>
      </div>
      <div class="bg-white card">
        <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" :class="item.icon"></i>
            <span class="q-ml-lg">{{ item.label }}</span>
          </div>
        <i class="iconfont iconpreviewright"></i>
          <!-- <span class="text-primary">{{ item.label }}</span> -->
        </div>
      </div>
    <div class="bg-white card">
      <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" :class="item.icon"></i>
          <span class="q-ml-lg">{{ item.label }}</span>
        </div>
        <i class="iconfont iconpreviewright"></i>
        <!-- <span class="text-primary">{{item.label}}</span> -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectKey: "",
      LoginUser: {},
      useOrder: null,
      orderList: [
        {
          icon: "order-pay",
          key: "/order?type=1",
          label: "待付款",
          number: "",
        },
        {
          icon: "order-use",
          key: "/order?type=2",
          label: "待出行",
          number: "",
        },
        {
          icon: "order-finish",
          key: "/order?type=3",
          label: "已完成",
          number: "",
        },
        {
          icon: "order-all",
          key: "/order?type=0",
          label: "全部订单",
          number: "",
        },
      ],
      menuList: [
        {
          icon: "iconqianbao",
          key: "/coupon",
          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"));
      this.getUserOrderInfo()
    }
  },
  methods: {
    navigateTo(route) {
      this.selectKey = route;
      this.CommonJump(route, {});
    },
    getUserOrderInfo() {
      this.apipost(
        "GetMyOrderNum_post",
        {},
        (res) => {
          if (res.data.resultCode == 1) {
            const { NoPayCount, PayCount, RetultList } = res.data.data;
            this.useOrder = RetultList[0] ? RetultList[0] : null
            this.orderList.forEach(item => {
              if(item.label === '待付款') {
                item.number = NoPayCount
              } else if(item.label === '待出行') {
                item.number = PayCount
              }
            })
          } else {
            // // this.$notify(res.data.message);
            // this.$q.notify({
            //   type: "negative",
            //   message: res.data.message,
            //   position: "top",
            //   timeout: 2000, // 以毫秒为单位; 0意味着没有超时
            // });
          }
        },
        null
      );
    },
  },
};
</script>