<template>
  <navigation-bar title="个人中心"></navigation-bar>

  <image src="/static/images/user-bg.png" mode="widthFix" class="bg" />

  <block v-if="user && user.mobilePhone">
    <view class="container" :style="containerStyle">
      <view class="header flex-column">
        <view class="flex-grow flex-center">
          <image
            src="/static/images/user/round.png"
            mode="heightFix"
            style="height: 100%"
          />
        </view>
        <view class="main flex-shrink">
          <view
            class="avatar"
            @click="toPage(2)"
            :style="{
              'background-image': `url(${user.avatar})`,
            }"
          ></view>
          <view class="phone fs-40 fw-500">{{ user.mobilePhoneFormat }}</view>
          <view class="money flex-align-center" @click="toPage(-1)">
            <uni-icons
              type="wallet-filled"
              size="24"
              color="var(--color-primary)"
            ></uni-icons>
            <view class="color-primary ml-12" style="font-size: 16px"
              >我的钱包</view
            >
            <view class="fs-40 fw-500 ml-auto mt-12 color-primary">¥</view>
            <view class="fs-60 fw-500 ml-12 mr-48 color-primary">{{
              user.balance
            }}</view>
          </view>
        </view>
      </view>

      <view class="body">
        <block v-for="(item, index) in menu" :key="index">
          <view
            class="menu flex-align-center"
            v-if="
              index !== menu.length - 1 || user.mobilePhone === '15986907592'
            "
            @click="toPage(index)"
          >
            <image :src="'/static/images/user/'+index+'.png'"></image>
            <view>{{ item.title }}</view>
            <view class="ml-auto">
              <uni-icons
                type="right"
                size="12"
                color="rgba(0,0,0,0.4)"
              ></uni-icons>
            </view>
          </view>
        </block>
      </view>
    </view>
  </block>
</template>

<script setup lang="ts">
import { fetchContact } from "@/api";
import { fetchProfile } from "@/api/user";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref } from "vue";
const containerStyle = ref({});
const user = ref<any>({
  avatar: "",
});
const service = ref("");
const menu = ref([
  {
    title: "我的卡包",
    path: "/pages-charge/card/card",
  },
  {
    title: "充电订单",
    path: "/pages-charge/orders/orders",
  },
  {
    title: "我的收藏",
    path: "/pages-user/collect/collect",
  },
  {
    title: "个人信息",
    path: "/pages-user/profile/profile",
  },
  {
    title: "联系我们",
    path: "",
  },
  {
    title: "常见问题",
    path: "/pages-common/faq/faq",
  },
  {
    title: "电站列表",
    path: "/pages/list/list",
  },
]);
const toPage = (index: number) => {
  if (index < 0) {
    uni.navigateTo({
      url: "/pages-user/wallet/wallet",
    });
    return;
  }
  if (index === 4) {
    uni.makePhoneCall({
      phoneNumber: service.value,
    });
    return;
  }
  const item = menu.value[index];
  uni.navigateTo({
    url: item.path + (index === 5 ? `?service=${service.value}` : ""),
  });
};

onLoad(() => {
  const bound = uni.getMenuButtonBoundingClientRect();
  containerStyle.value = {
    top: `${bound.bottom + 10}px`,
  };
  fetchContact().then((res) => {
    if (res && res.mobile) {
      service.value = res.mobile;
    }
  });
});
onShow(() => {
  fetchProfile().then((res) => {
    res.mobilePhoneFormat =
      res.mobilePhone.slice(0, 3) + "****" + res.mobilePhone.slice(7);
    res.avatar = res.avatar
      ? res.avatar
      : "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0";
    user.value = res;
  });
});
</script>

<style lang="scss">
@import "../../styles/dialog.scss";
.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 660rpx;
}

.container {
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow-y: auto;
}

.header {
  height: 400rpx;
  width: 100%;

  .main {
    height: 334rpx;
    background: rgba(254, 255, 255, 0.7);
    border-radius: 40rpx 40rpx 0 0;
    position: relative;
    text-align: center;

    .avatar {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: -50rpx;
      width: 110rpx;
      height: 110rpx;
      border: 2rpx solid #ffffff;
      filter: drop-shadow(0px 4rpx 8rpx rgba(0, 24, 60, 0.1));
      background-size: cover;
      background-repeat: no-repeat;
      border-radius: 50%;
    }

    .phone {
      padding-top: 78rpx;
      color: #000;
    }

    .money {
      width: 690rpx;
      height: 118rpx;
      background: #feffff;
      border-radius: 120rpx;
      margin: 0 auto;
      margin-top: 30rpx;
      color: #000000;
      padding: 0 24rpx 0 40rpx;
    }
  }
}

.body {
  width: 100%;
  background-color: #fff;
  padding: 0rpx 30rpx;

  .menu {
    background-color: #fff;
    height: 120rpx;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);

    image {
      width: 52rpx;
      height: 52rpx;
      margin-right: 20rpx;
    }

    &:last-child {
      border-bottom: none;
    }
  }
}
</style>
