<template>
  <view class="page flex-col">
    <view class="box_1 flex-row">
      <view class="image-wrapper_1 flex-col">
        <image class="image_1" :src="isLogin
            ? member.avatar
              ? member.avatar
              : '/static/images/mine/default.png'
            : '/static/images/mine/default.png'
          " />
      </view>
      <view class="text-group_1 flex-col justify-between">
        <text class="text_1" v-if="isLogin" @tap="
          serv({
            type: 'pages',
            pages: '/pages/components/pages/mine/userinfo',
          })
          ">
          Hi, {{ member.nickname }}
        </text>
        <text class="text_1" v-else @tap="login"> Hi, 游客 </text>
        <text class="text_2">点击头像可以修改个人信息</text>
      </view>
    </view>
    <view class="box_5 flex-col">
      <view class="box_6 flex-row justify-between">
        <!-- 积分卡片 -->
        <view class="group_2 flex-col">
          <text class="text_4">积分</text>
          <view class="group_3 flex-row justify-between">
            <text class="text_5">{{ isLogin ? member.integral : 0 }}</text>
            <view class="box_7 flex-row justify-end" @tap="
              serv({
                type: 'pages',
                pages: '/pages/components/pages/balance/bill?cate=1',
              })
              ">
              <text class="text_6">去兑换</text>
              <image class="label_2" src="/static/images/mine/arrow_right_small.png" />
            </view>
          </view>
          <text class="text_7">积分可用于兑换产品</text>
        </view>
        <!-- 优惠券卡片 -->
        <view class="group_4 flex-col">
          <text class="text_8">优惠券</text>
          <view class="section_1 flex-row justify-between">
            <text class="text_9">{{ isLogin ? member.couponCount : 0 }}</text>
            <view class="block_1 flex-row justify-end" @tap="
              serv({
                type: 'pages',
                pages: '/pages/components/pages/coupons/coupons',
              })
              ">
              <text class="text_10">去使用</text>
              <image class="label_3" src="/static/images/mine/arrow_right_small.png" />
            </view>
          </view>
          <text class="text_11">使用优惠券享受更多优惠</text>
        </view>
      </view>

      <!-- 服务项目列表 -->
      <view v-for="(item, index) in services" :key="index">
        <!-- 招兵买马 -->
        <!-- <view v-if="index === 0" class="box_8 flex-row" @tap="serv(item)">
					<view class="image-wrapper_3 flex-col">
						<image class="label_4" :src="item.image || '/static/images/mine/recruit_icon.png'" />
					</view>
					<text class="text_12">{{ item.name }}</text>
					<image class="label_5" src="/static/images/mine/arrow_right.png" />
				</view> -->
        <!-- 订单 -->
        <!-- <view v-if="index === 1" class="box_8 flex-row" @tap="serv(item)">
          <view class="image-wrapper_3 flex-col">
            <image class="label_4" :src="item.image || '/static/images/mine/order_icon.png'" />
          </view>
          <text class="text_12">{{ item.name }}</text>
          <image class="label_5" src="/static/images/mine/arrow_right.png" />
        </view> -->

        <!-- 历史消费 -->
        <!-- <view
          v-else-if="index === 1"
          class="box_9 flex-row"
          @tap="
            serv({
              type: 'pages',
              pages: '/pages/components/pages/balance/bill?cate=0',
            })
          "
        >
          <view class="section_2 flex-col">
            <image
              class="label_4"
              :src="item.image || '/static/images/mine/history_icon.png'"
            />
          </view>
          <text class="text_13">历史消费</text>
          <image class="label_6" src="/static/images/mine/arrow_right.png" />
        </view> -->

        <!-- 客服 -->
        <!-- <view v-else-if="index === 2" class="box_11 flex-row" @tap="serv(item)">
          <view class="image-wrapper_5 flex-col">
            <image
              class="label_7"
              :src="
                item.image || '/static/images/mine/customer_service_icon.png'
              "
            />
          </view>
          <text class="text_14">{{ item.name }}</text>
          <image class="label_8" src="/static/images/mine/arrow_right.png" />
        </view> -->

        <!-- 地址 -->
        <!-- <view v-else-if="index === 3" class="box_12 flex-row" @tap="serv(item)">
          <view class="section_3 flex-col">
            <image
              class="label_4"
              :src="item.image || '/static/images/mine/address_icon.png'"
            />
          </view>
          <text class="text_15">{{ item.name }}</text>
          <image class="label_9" src="/static/images/mine/arrow_right.png" />
        </view> -->

        <!-- 其他服务项 -->
        <view class="box_14 flex-row" @tap="serv(item)">
          <view class="image-wrapper_6 flex-col">
            <image class="label_10" :src="item.image || '/static/images/mine/help_center_icon.png'" />
          </view>
          <text class="text_16">{{ item.name }}</text>
          <image class="label_11" src="/static/images/mine/arrow_right.png" />
        </view>
      </view>

      <!-- 退出登录 -->
      <!-- 	<view v-if="isLogin" class="box_16 flex-row" @tap="login">
				<image class="label_14" src="/static/images/mine/logout_icon.png" />
				<text class="text_18">退出登录</text>
				<image class="label_15" src="/static/images/mine/arrow_right.png" />
			</view> -->
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import { useMainStore } from "@/store/store";
import { storeToRefs } from "pinia";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { formatDateTime, kmUnit } from "@/utils/util";
import { userGetUserInfo, mineService } from "@/api/user";
const main = useMainStore();
const { member, isLogin } = storeToRefs(main);

const title = ref("个人中心");
const services = ref([]);

const growthValue = computed(() => {
  if (!isLogin.value) return 0;
  const { currentValue, needValue } = member.value;
  return (currentValue / (currentValue + needValue)) * 100;
});

onLoad(() => {
  getServices();
});
onShow(() => {
  getUserInfo();
});

const getUserInfo = async () => {
  if (isLogin.value) {
    let data = await userGetUserInfo();
    if (data) {
      main.SET_MEMBER(data);
    }
  }
};
const getServices = async () => {
  let data = await mineService();
  if (data) {
    services.value = data;
  }
};
const makePhoneCall = (phoneNumber) => {
  uni.makePhoneCall({
    phoneNumber: phoneNumber,
  });
};
const login = () => {
  uni.navigateTo({
    url: "/pages/components/pages/login/login",
  });
};
const packages = () => {
  if (!isLogin.value) {
    login();
    return;
  }
  uni.navigateTo({
    url: "/pages/components/pages/packages/index",
  });
};
const serv = (item) => {
  switch (item.type) {
    case "pages":
      if (!isLogin.value) {
        login();
        return;
      }
      if (item.pages === "/pages/components/pages/fenxiao/fenxiao") {
        if (member.value.spreadUid === 0 || member.value.spreadUid === null || member.value.spreadUid === '0' || member.value.spreadUid === "") {
          uni.navigateTo({
            url: `/pages/components/pages/fenxiao/fenxiaorequestform?id=${member.value.id}`,
          });
        } else {
          uni.navigateTo({
            url: `${item.pages}?spreadUid=${member.value.spreadUid}`,
          });
        }
      } else if (item.pages === "/pages/components/pages/invoice/invoice") {
        uni.navigateTo({
          url: `/pages/components/pages/invoice/invoice?userId=${member.value.id}`,
        });
      } else if (item.pages === "/pages/order/order") {
        uni.switchTab({
          url: '/pages/order/order'
        });
      } else if (item.pages === "/pages/components/pages/mine/helpcenter") {
        uni.navigateTo({
        url:
          "/pages/components/pages/mine/helpcenter?id=" +
          item.id +
          "&name=" +
          item.name +
          "&phone=" +
          item.phone,
      });
      break;
      } else {
        uni.navigateTo({
          url: item.pages,
        });
      }
      break;
    case "miniprogram":
      uni.navigateToMiniProgram({
        appId: item.app_id,
      });
      break;
    case "menu":
      uni.navigateTo({
        url:
          "/pages/components/pages/mine/service?id=" +
          item.id +
          "&name=" +
          item.name,
      });
      break;
    case "content":
      uni.navigateTo({
        url:
          "/pages/components/pages/mine/content?id=" +
          item.id +
          "&name=" +
          item.name,
      });
      break;
    case "call":  // 新增电话拨打类型
      if (item.phone) {
        uni.makePhoneCall({
          phoneNumber: item.phone
        });
      }
      break;
  }
};
</script>

<style>
@import "./common.css";

.page {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 750rpx;
  height: 100vh;
  overflow: hidden;
}

.box_1 {
  position: relative;
  width: 750rpx;
  height: 336rpx;
  background: url("/static/images/mine/background.png") 100% no-repeat;
  background-size: 100% 100%;
}

.image-wrapper_1 {
  box-shadow: 0px 18px 18px 0px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 1);
  border-radius: 50%;
  height: 100rpx;
  border: 1px solid rgba(217, 217, 217, 1);
  width: 100rpx;
  margin: 170rpx 0 0 55rpx;
}

.image_1 {
  width: 100rpx;
  height: 100rpx;
  /* margin: 3rpx 0 0 5rpx; */
  border-radius: 100%;
}

.text-group_1 {
  width: 277rpx;
  height: 87rpx;
  margin: 176rpx 291rpx 0 27rpx;
}

.text_1 {
  width: 277rpx;
  height: 53rpx;
  overflow-wrap: break-word;
  color: rgba(82, 172, 65, 1);
  font-size: 38rpx;
  font-family: PingFang SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 38rpx;
}

.text_2 {
  width: 277rpx;
  height: 28rpx;
  overflow-wrap: break-word;
  color: rgba(158, 158, 158, 1);
  font-size: 20rpx;
  font-family: PingFang SC-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 20rpx;
  margin-top: 6rpx;
}

.box_5 {
  width: 750rpx;
  height: auto;
  min-height: 500rpx;
}

.box_6 {
  width: 694rpx;
  height: 191rpx;
  margin-left: 32rpx;
}

.group_2 {
  width: 331rpx;
  height: 191rpx;
  background: url("/static/images/mine/integral_card.png") 100% no-repeat;
  background-size: 100% 100%;
  justify-content: flex-center;
}

.text_4 {
  width: 78rpx;
  height: 36rpx;
  overflow-wrap: break-word;
  color: rgba(131, 126, 126, 1);
  font-size: 26rpx;
  font-family: PingFang SC-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 26rpx;
  margin: 32rpx 0 0 32rpx;
}

.group_3 {
  width: 174rpx;
  height: 62rpx;
  margin: 8rpx 0 0 32rpx;
}

.text_5 {
  width: 78rpx;
  height: 62rpx;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 44rpx;
  font-family: PingFang SC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 44rpx;
}

.box_7 {
  background-color: rgba(82, 172, 65, 1);
  border-radius: 12px 24px 2px 24px;
  width: 88rpx;
  height: 30rpx;
  margin-top: 13rpx;
}

.text_6 {
  width: 60rpx;
  height: 28rpx;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 20rpx;
  font-family: PingFang SC-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 20rpx;
  margin: 1rpx 0 0 8rpx;
}

.label_2 {
  width: 24rpx;
  height: 24rpx;
  margin: 3rpx 0 0 -4rpx;
}

.text_7 {
  width: 180rpx;
  height: 28rpx;
  overflow-wrap: break-word;
  color: rgba(234, 183, 41, 1);
  font-size: 20rpx;
  font-family: PingFang SC-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 20rpx;
  margin: -7rpx 0 32rpx 32rpx;
}

.group_4 {
  width: 331rpx;
  height: 191rpx;
  background: url("/static/images/mine/coupon_card.png") 100% no-repeat;
  background-size: 100% 100%;
  justify-content: flex-center;
}

.text_8 {
  width: 78rpx;
  height: 36rpx;
  overflow-wrap: break-word;
  color: rgba(131, 126, 126, 1);
  font-size: 26rpx;
  font-family: PingFang SC-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 26rpx;
  margin: 32rpx 0 0 32rpx;
}

.section_1 {
  width: 145rpx;
  height: 62rpx;
  margin: 8rpx 0 0 32rpx;
}

.text_9 {
  width: 45rpx;
  height: 62rpx;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 44rpx;
  font-family: PingFang SC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 44rpx;
}

.block_1 {
  background-color: rgba(82, 172, 65, 1);
  border-radius: 12px 24px 2px 24px;
  width: 88rpx;
  height: 30rpx;
  margin-top: 13rpx;
}

.text_10 {
  width: 60rpx;
  height: 28rpx;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 20rpx;
  font-family: PingFang SC-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 20rpx;
  margin: 1rpx 0 0 8rpx;
}

.label_3 {
  width: 24rpx;
  height: 24rpx;
  margin: 3rpx 0 0 -4rpx;
}

.text_11 {
  width: 180rpx;
  height: 28rpx;
  overflow-wrap: break-word;
  color: rgba(82, 172, 65, 1);
  font-size: 20rpx;
  font-family: PingFang SC-Regular;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 20rpx;
  margin: -7rpx 0 32rpx 32rpx;
}

.box_8,
.box_9,
.box_11,
.box_12,
.box_14,
.box_16 {
  width: 686rpx;
  height: 48rpx;
  margin: 64rpx 0 0 32rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.box_8 {
  margin-top: 60rpx;
}

.image-wrapper_3,
.section_2,
.image-wrapper_5,
.section_3,
.image-wrapper_6 {
  background-color: rgba(255, 255, 255, 1);
  height: 48rpx;
  width: 48rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.label_4,
.label_7,
.label_10,
.label_14 {
  width: 38rpx;
  height: 38rpx;
}

.text_12,
.text_13,
.text_14,
.text_15,
.text_16,
.text_18 {
  width: auto;
  height: 39rpx;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 28rpx;
  font-family: PingFang SC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 28rpx;
  margin: 5rpx 0 0 24rpx;
}

.label_5,
.label_6,
.label_8,
.label_9,
.label_11,
.label_15 {
  width: 24rpx;
  height: 24rpx;
  margin-left: auto;
  margin-right: 20rpx;
}
</style>
