<template>
  <ui-page-layout :showLeft="false" title="个人中心" class="w-screen">
    <ui-scroll-view>
      <layout-user-header></layout-user-header>
      <div class="h-24rem"></div>
      <div class=" bg-white">
        <div class="flex items-center px-24rem h-100rem justify-between">
          <div class="text-size-36rem text-[#282828]">{{ $t("我的订单") }}</div>
          <div @click="$router.push('/user/order')" class="text-size-30rem text-[#686868] flex items-center">
            <span>{{ $t("全部") }}</span>
            <img src="/imgs/my-order-arrow-right.png" class="w-10rem h-auto ml-20rem" />
          </div>

        </div>
        <div class="h-0.5px bg-[#E8E8E8] w-full"></div>
        <div class="flex justify-around items-center h-200rem">
          <div @click="$router.push('/user/order?active=0')" class="flex flex-col items-center">
            <img src="/imgs/h5-vip-order.png" class="w-60rem h-auto mb-20rem" />
            <div class="text-size-30rem">{{ $t("会员订单") }}</div>
          </div>
          <div @click="$router.push('/user/order?active=1')" class="flex flex-col items-center">
            <img src="/imgs/h5-goods-order.png" class="w-60rem mb-20rem" />
            <div class="text-size-30rem">{{ $t("商品订单") }}</div>
          </div>
        </div>
      </div>
      <div class="h-24rem"></div>
      <div @click="$router.push('/user/collection')" class="h-100rem bg-white px-24rem mb-24rem flex justify-between items-center">
        <div class="flex items-center">
          <img src="/imgs/h5-user-collection.png" class="w-40rem h-auto" />
          <div class="text-size-30rem text-[#282828] ml-33rem">{{ $t("我的收藏") }}</div>
        </div>
        <img src="/imgs/my-order-arrow-right.png" class="w-10rem h-auto ml-20rem" />
      </div>
      <div @click="$router.push('/user/subscription')" class="h-100rem bg-white px-24rem mb-24rem flex justify-between items-center">
        <div class="flex items-center">
          <img src="/imgs/h5-user-subscription.png" class="w-40rem h-auto" />
          <div class="text-size-30rem text-[#282828] ml-33rem">{{ $t("我的订阅") }}</div>
        </div>
        <img src="/imgs/my-order-arrow-right.png" class="w-10rem h-auto ml-20rem" />
      </div>
      <div @click="$router.push('/user/comment')" class="h-100rem bg-white px-24rem mb-24rem flex justify-between items-center">
        <div class="flex items-center">
          <img src="/imgs/h5-user-comment.png" class="w-40rem h-auto" />
          <div class="text-size-30rem text-[#282828] ml-33rem">{{ $t("我的评论") }}</div>
        </div>
        <img src="/imgs/my-order-arrow-right.png" class="w-10rem h-auto ml-20rem" />
      </div>
      <div @click="$router.push('/user/like')" class="h-100rem bg-white px-24rem mb-24rem flex justify-between items-center">
        <div class="flex items-center">
          <img src="/imgs/h5-user-like.png" class="w-40rem h-auto" />
          <div class="text-size-30rem text-[#282828] ml-33rem">{{ $t("我的点赞") }}</div>
        </div>
        <img src="/imgs/my-order-arrow-right.png" class="w-10rem h-auto ml-20rem" />
      </div>
      <div @click="$router.push('/user/history')" class="h-100rem bg-white px-24rem mb-24rem flex justify-between items-center">
        <div class="flex items-center">
          <img src="/imgs/h5-user-history.png" class="w-40rem h-auto" />
          <div class="text-size-30rem text-[#282828] ml-33rem">{{ $t("浏览记录") }}</div>
        </div>
        <img src="/imgs/my-order-arrow-right.png" class="w-10rem h-auto ml-20rem" />
      </div>

      <div class="flex justify-center pt-32rem">
        <div
        @click="handleLogout"
                class="right-30rem  w-280rem h-70rem bg-primary rounded-full flex justify-center items-center text-size-30rem text-white">
          {{$t('退出登录')}}
        </div>
      </div>

    </ui-scroll-view>
  </ui-page-layout>
</template>

<script>
export default {

  data() {
    return {
      currentPath: this.$route.path,
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.currentPath = to.path;
    });
  },
  methods:{
    async handleLogout(){
      await this.$dialog.confirm( {
        message:this.$t('您现在正在进行退出登录, 是否继续?'),
        title:this.$t('提示'),
        confirmButtonText: this.$t('确认'),
        cancelButtonText: this.$t('取消'),
      });

      let resp = await  this.$http.post(this.$api.mzUser.logout);
      if(resp.data.status === 200){
        this.$store.dispatch('LOGOUT')
        this.$router.push('/login');
      }
    }
  },
  created() {
    if(!this.$store.state.userinfo.code){
      this.$router.push('/login?routeBack=true');
      return;
    }
  }
};
</script>
