<script setup lang="ts">
import dayjs from 'dayjs'

const props = defineProps<{
  userInfo: any
  self?: any
}>()

const emit = defineEmits(['buy', 'record'])

defineOptions({ name: 'UserProfileCard' })

const oss_url = `${import.meta.env.VITE_OSS_URL}`
const userInfoBg = `url(${oss_url}/urm/userInfo_center_bg.png) 100%/cover no-repeat`

// 是否显示付费信息
const showPay = computed(() => props.self && !props.userInfo.classId)
// const showPay = true
</script>

<template>
  <div
    :style="{
      background: userInfoBg,
    }"
    class="user-profile-card"
  >
    <div class="basic">
      <user-figure-big :user-info="userInfo" />
    </div>
    <div class="vip">
      <div class="row">
        <Icon :name="`vip_level_${userInfo.vipUserInfo?.currentLevelIntVal}`" size="200" />
        <div class="vip-time">
          有效期至<br />{{ dayjs(userInfo.vipUserInfo?.vipEndTime).format('YYYY-MM-DD') }}
        </div>
      </div>
      <div class="bottom-info">
        <div v-if="userInfo.schoolName" :class="`vip-info ${showPay ? '' : 'pt'}`">
          <div class="info">
            <span class="label">学校：</span>
            {{ userInfo.schoolName || '-' }}
          </div>
          <div class="info">
            <span class="label">班级：</span>
            {{ userInfo.className || '-' }}
          </div>
        </div>
        <div v-else class="area">
          {{ userInfo.area }}
        </div>
        <div v-if="showPay" class="vip-control">
          <mj-button @click.stop="emit('buy')">续费</mj-button>
          <mj-button type="warn" @click.stop="emit('record')">开通记录</mj-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.user-profile-card {
  position: relative;
  width: 65.5vh;
  height: 83.17vh;
  background-size: 100% 100%;

  .basic {
    position: absolute;
    width: 57.83vh;
    height: 63.17vh;
    top: 14.33vh;
    left: 3.83vh;
    transform: rotate(-2deg);

    &_info {
      position: relative;
      display: flex;
      padding: $space-4_h 0 $space-3_h 3vh;
      height: 21.67vh;
      box-sizing: border-box;

      &_photo_name {
        position: relative;
        .name {
          position: absolute;
          top: 11.67vh;
          left: 50%;
          transform: translateX(-50%);
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 2.5vh;
          width: 11.33vh;
          height: 4vh;
          background: rgba(185, 209, 234, 1);
          box-shadow: 0 0 0.5vh 0 rgba(76, 116, 158, 1) inset;
          color: #fff;
          text-shadow: 0 0.33vh 0.17vh rgba(0, 0, 0, 0.25);
          line-height: 3vh;
          text-align: center;
          font-size: $font-size-3;
          z-index: -1;
        }
      }

      &_item {
        position: absolute;
        left: 15.5vh;
        width: 42.5vh;
        &_personal {
          display: flex;
          align-items: center;
          .sex {
            margin-top: 3.67vh;
          }
          .nickname {
            position: relative;
            width: 29.67vh;
            height: 10vh;
            line-height: 4vh;
            margin-left: 1.67vh;
            background-repeat: no-repeat;
            background-position: center;
            padding: 0 2vh;
            @include single_ellipsis;

            .name {
              position: absolute;
              bottom: 1.75vh;
              left: 50%;
              transform: translateX(-50%);
            }
          }
        }
        &_level {
          width: 40.5vh;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 1.83vh;
          // color: rgba(75, 75, 104, 1);

          span {
            white-space: nowrap;
          }

          .progress {
            width: 32.92vh;

            :deep(.el-progress-bar__innerText) {
              margin: -0.5vh 1.83vh 0 0.42vh;
            }
          }
          :deep(.el-progress-bar__outer) {
            height: 2vh !important;
            background: rgba(0, 0, 0, 0.65);
          }
        }
      }
    }
  }
  .bottom-info {
    width: calc(100% - $space-4_h * 2);
    border-top: 0.33vh dashed $font-tag-color;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 20vh;

    .area {
      font-size: 3.33vh;
      line-height: 5vh;
      color: #000;
      text-align: center;
    }
  }
  .vip {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    width: 53.83vh;
    height: 39.17vh;
    top: 35.83vh;
    left: 6.33vh;
    transform: rotate(-2deg);

    .row {
      display: flex;
      align-items: center;
      margin: $space-2_h 0;
      .vip-time {
        margin: $space-2_h;
        font-size: $font-size-7;
        line-height: 3.5vh;
        color: rgba(93, 133, 168, 1);
        text-align: center;
      }
    }

    &-info {
      width: 100%;
      height: 11.67vh;
      font-size: $font-size-7;
      color: #42474d;
      text-align: center;
      .info {
        margin-top: $space-2_h;
      }
      .label {
        color: #a6adbd;
      }
    }

    &-control {
      position: relative;
      width: 100%;
      height: 6.67vh;
      display: flex;
      justify-content: center;
      $path_w: calc(100% + 0.67vh);
      .mj-button {
        &:first-child {
          border-radius: 4.5vh 0 0 4.5vh;
          margin-right: -1vh;
          clip-path: polygon(0 0%, 100% 0%, 85% $path_w, 0% $path_w);
        }
        &:last-child {
          margin-left: -1vh;
          border-radius: 0 4.5vh 4.5vh 0;
          clip-path: polygon(15% 0%, 100% 0%, 100% $path_w, 0% $path_w);
        }
      }
    }
  }
}
</style>
