<template>
  <view class="user-avatar-card-ctn" @click="jumpPage">
    <view class="upper-box">
      <view class="left-box">
        <view class="ss-flex" style="align-items: flex-end">
          <view style="font-size: 36rpx; margin-right: 12rpx">{{
            userInfo?.nickname || nickname
          }}</view>
          <view style="color: #999999; font-size: 24rpx"
            >检测时间：{{ detectionTime?.slice(0, 16) }}</view
          >
        </view>
        <view class="ss-flex user-info-block">
          <view class="user-info-item">{{ userFormData.sex }}</view>
          <view class="user-info-item">{{ userFormData.age }}岁</view>
          <view class="user-info-item">{{ userFormData.height }}cm</view>
          <view class="user-info-item">{{ userFormData.weight }}kg</view>
        </view>
      </view>
      <view class="right-box">
        <image
          class="avatar-img"
          :src="
            isLogin && uploadAvatarImage
              ? sheep.$url.cdn(uploadAvatarImage)
              : sheep.$url.static('https://puton.huimeimeta.com/imgs/default_avatar.png')
          "
          mode="aspectFill"
        >
        </image>
      </view>
    </view>
    <view class="below-box">
      <ul class="attr-ul ss-flex">
        <li class="attr-li">
          <view class="label">脸型</view>
          <view class="value">{{ userFaceInfo.feature }}</view>
          <view class="line" />
        </li>
        <li class="attr-li">
          <view class="label">肤色</view>
          <view class="value">{{ userFaceInfo.complexion }}</view>
          <view class="line" />
        </li>
        <li class="attr-li">
          <view class="label">基因风格</view>
          <view class="value">{{ userFaceInfo.type }}</view>
          <view class="line" />
        </li>
        <li class="attr-li">
          <view class="label">色彩定位</view>
          <view class="value">{{ userFaceInfo.sj_color_type }}</view>
        </li>
      </ul>
    </view>
  </view>
</template>

<script setup>
  import { computed } from 'vue';
  import sheep from '@/sheep';

  const props = defineProps({
    userFormData: {
      type: Object,
      default: () => {},
    },
    userFaceInfo: {
      type: Object,
      default: () => {},
    },
    detectionTime: {
      type: String,
      default: '',
    },
    uploadAvatarImage: {
      type: String,
      default: '',
    },
  });

  // 是否登录
  const isLogin = computed(() => sheep.$store('user').isLogin);

  // 用户信息
  const userInfo = computed(() => sheep.$store('user').userInfo);

  const jumpPage = () => {
    uni.switchTab({
      url: `/pages/index/index`,
    });
  };
</script>

<style lang="scss" scoped>
  .user-avatar-card-ctn {
    width: 100%;
    background: #000;
    color: #fff;
    padding: 36rpx 24rpx;
    box-sizing: border-box;
    .upper-box {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left-box {
        .user-info-block {
          margin-top: 24rpx;
          font-size: 24rpx;
          .user-info-item {
            padding: 4rpx 8rpx;
            background: linear-gradient(
              to right,
              rgba(255, 255, 255, 0.4),
              rgba(255, 255, 255, 0.2)
            );
            margin-right: 10rpx;
            border-radius: 6rpx;
          }
        }
      }

      .right-box {
        width: 144rpx;
        height: 144rpx;
        border-radius: 50%;

        .avatar-img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
    }
    .below-box {
      width: 100%;
      margin-top: 48rpx;
      .attr-ul {
        width: 100%;
        list-style: none;
        margin: 0;
        padding: 0;
        .attr-li {
          width: 25%;
          position: relative;
          .label {
            color: #999999;
            font-size: 24rpx;
          }
          .value {
            color: #fff;
            font-size: 32rpx;
            margin-top: 16rpx;
          }
          .line {
            width: 1rpx;
            height: 100%;
            background: #fff;
            position: absolute;
            right: 30rpx;
            top: 0;
          }
        }
      }
    }
  }
</style>
