<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { userStore } from '@/stores'
import { useRouter } from 'vue-router'
import PayDia from './PayDia.vue'

const emits = defineEmits(['editUser'])

const router = useRouter()
const { userInfo } = storeToRefs(userStore())
const oss_url = `${import.meta.env.VITE_OSS_URL}`

const figureBoy = `url(${oss_url}/urm/ip_boy.png) 100%/contain no-repeat`
const figureGirl = `url(${oss_url}/urm/ip_girl.png) 100%/contain no-repeat`

const showDia = ref(false)
function onBuy() {
  showDia.value = true
}
function go() {
  router.push('/system/user/orderRecord')
}
</script>
<template>
  <div class="info_box">
    <user-profile-card
      :user-info="userInfo"
      :self="true"
      @buy="onBuy"
      @record="go"
      @click="emits('editUser')"
    />
    <div
      class="figure_img"
      :style="{ background: userInfo.sex === 1 ? figureBoy : figureGirl }"
    ></div>
    <Icon name="modify" size="120" class="modify" @click="emits('editUser')" />
    <PayDia v-model="showDia" />
  </div>
</template>
<style lang="scss" scoped>
.pt {
  padding-top: 4.17vh;
}

.info_box {
  width: fit-content;
  position: relative;
  display: flex;
  // margin: $space-1_h 0 0 $space-3;
  padding-left: 80px;
  font-family: $font-text;
  // width: 1536px;

  .figure_img {
    // position: absolute;
    transform: scale(0.9) translateX(-80px);
    // right: 0;
    width: 66.67vh;
    height: 83.33vh;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }

  .modify {
    position: absolute;
    right: 8vh;
    top: 2.33vh;
    cursor: pointer;
  }
}
</style>
