<template>
  <div class="custom-header" v-if="userFaceInfo">
    <img class="new-header" src="/static/imgs/new-header.png" />

    <div class="custom-pic-box">
      <div class="custom-pic-main">
        <img class="custom-pic-main-bg" src="/static/imgs/main.png" />

        <view class="card-tags" v-if="userFaceInfo?.purpose || userFaceInfo?.question">
          <view class="card-tag" v-if="userFaceInfo.purpose">{{ userFaceInfo.purpose }}</view>
          <view class="card-tag" v-if="userFaceInfo.question">{{ userFaceInfo.question  }}</view>
        </view>

        <div class="custom-pic-info">
          <img class="pic-border" src="/static/imgs/pic-border.png" />

          <div class="real-pic">
            <!-- <img src="/static/imgs/temp.png" class="personal-pic" /> -->
            <img :src="userFaceInfo?.avatar_img_url" class="personal-pic" />

            <!-- <div class="text">优雅风</div> -->
            <div class="text">{{ userFaceInfo?.type }}</div>
          </div>

          <div class="tag tag1" :data-text="userFaceInfo?.feature">
            <img src="/static/imgs/1.png" />
          </div>

          <div class="tag tag2" :data-text="userFaceInfo?.eyebrows">
            <img src="/static/imgs/2.png" />
          </div>

          <div class="tag tag3" :data-text="userFaceInfo?.nasolabial_folds">
            <img src="/static/imgs/3.png" />
          </div>

          <div class="tag tag4" :data-text="userFaceInfo?.ocular_form">
            <img src="/static/imgs/4.png" />
          </div>

          <div class="tag tag5" :data-text="userFaceInfo?.three_courts_five_eyes">
            <img src="/static/imgs/2.png" />
          </div>

          <div class="tag tag6" :data-text="userFaceInfo?.neck_length">
            <img src="/static/imgs/6.png" />
          </div>

          <!-- <img src="/static/imgs/1.png" class="tag tag1" data-text="abc" />
          <img src="/static/imgs/2.png" class="tag tag2" />
          <img src="/static/imgs/3.png" class="tag tag3" />
          <img src="/static/imgs/4.png" class="tag tag4" />
          <img src="/static/imgs/2.png" class="tag tag5" />
          <img src="/static/imgs/6.png" class="tag tag6" /> -->
        </div>

        <div class="user-info">
          <div>{{userFaceInfo?.sex}}​｜{{ userFaceInfo?.birthday }}</div>
          <div>身高：{{ userFaceInfo.height || "-" }}cm 体重：{{ userFaceInfo.weight || "-" }}kg</div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  userFaceInfo: {
    type: Object,
    default: () => ({}),
  },
});

</script>

<style scoped lang="scss">
  .custom-header {
    .new-header {
      width: 100%;
      height: auto;
      display: block;
    }

    .card {
      background: rgba(239, 229, 219, 1);
      padding: 50rpx;

      .card-main {
        width: 100%;
        margin: 0 auto;
        height: 800rpx;
        background: #fff;
        display: block;
        border-radius: 20rpx;
        .card-title {
          width: 450rpx;
          display: block;
          margin: 0 auto;
          margin-top: 9rpx;
        }

        .card-tags {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;

          .card-tag {
            height: 50rpx;
            padding-left: 26rpx;
            padding-right: 26rpx;
            background: rgba(239, 229, 219, 1);
            color: rgba(78, 78, 78, 1);
            font-size: 20rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 16rpx;
            margin-right: 20rpx;
          }
        }

        .pic {
          width: 327rpx;
          height: 477rpx;
          // margin: 0 auto;
          margin-top: 35rpx;
          .pic-border {
            width: 100%;
            margin-left: 50rpx;
          }
        }
      }
    }

    .custom-pic-box {
      width: 100%;
      background: rgba(239, 229, 219, 1);

      .custom-pic-main {
        position: relative;

        .custom-pic-main-bg {
          width: 100%;
          display: block;
        }

        .card-tags {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-wrap: wrap;
          //   background-color: red;
          position: absolute;

          left: 0;
          top: 230rpx;
          width: 100%;

          .card-tag {
            height: 50rpx;
            padding-left: 26rpx;
            padding-right: 26rpx;
            background: rgba(239, 229, 219, 1);
            color: rgba(78, 78, 78, 1);
            font-size: 20rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 16rpx;
            margin-right: 20rpx;
          }
        }

        .custom-pic-info {
          position: absolute;
          top: 300rpx;
          left: 80rpx;

          // width: 330rpx;
          // height: 100rpx;
          //   background-color: red;

          .tag {
            position: absolute;
            right: 30rpx;
            width: 200rpx;
            transform: translateX(100%);

            > img {
              width: 100%;
              display: block;
            }

            &.tag1 {
              top: 20rpx;

              &::after {
                content: attr(data-text);
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                font-size: 30rpx;
                color: white;
                z-index: 9999;
                display: flex;
                align-items: center;
                justify-content: center;
                transform: rotate(-10deg);
              }
            }

            &.tag2 {
              top: 120rpx;

              &::after {
                content: attr(data-text);
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                font-size: 30rpx;
                color: white;
                z-index: 9999;
                display: flex;
                align-items: center;
                justify-content: center;
                transform: rotate(10deg);
              }
            }

            &.tag3 {
              top: 200rpx;

              &::after {
                content: attr(data-text);
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                font-size: 30rpx;
                color: white;
                z-index: 9999;
                display: flex;
                align-items: center;
                justify-content: center;
                transform: rotate(-10deg);
              }
            }

            &.tag4 {
              top: 280rpx;

              &::after {
                content: attr(data-text);
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                font-size: 30rpx;
                color: white;
                z-index: 9999;
                display: flex;
                align-items: center;
                justify-content: center;
                transform: rotate(-10deg);
              }
            }

            &.tag5 {
              top: 380rpx;

              &::after {
                content: attr(data-text);
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                font-size: 30rpx;
                color: white;
                z-index: 9999;
                display: flex;
                align-items: center;
                justify-content: center;
                transform: rotate(10deg);
              }
            }

            &.tag6 {
              top: 470rpx;

              &::after {
                content: attr(data-text);
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                font-size: 30rpx;
                color: white;
                z-index: 9999;
                display: flex;
                align-items: center;
                justify-content: center;
                transform: rotate(-10deg);
              }
            }
          }

          .pic-border {
            width: 427rpx;
            // background-color: red;
            z-index: 1;
          }

          .real-pic {
            position: absolute;
            top: 35rpx;
            left: 55rpx;
            width: 320rpx;
            height: 450rpx;
            // overflow: hidden;
            z-index: 2;

            .text {
              position: absolute;
              bottom: 0rpx;
              right: 0rpx;
              //   transform: translateX(-50%);
              font-size: 40rpx;
              color: #333;
              transform: translateY(100%);
            }

            .personal-pic {
              width: 100%;
              height: 450rpx;
              display: block;
              position: relative;
              object-fit: cover;
            }
          }
        }

        .user-info {
          position: absolute;
          bottom: 90rpx;
          left: 50%;
          transform: translateX(-50%);
          font-size: 22rpx;
          color: #333;
          text-align: center;
        }
      }
    }
  }
</style>
