<script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import rankingApi from '@/api/ranking'

const emits = defineEmits(['editUser'])
const route = useRoute()
const id = ref('')
const userInfo = ref<anyObj>({})

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 `

function handleThumbs() {
  // 点赞
  rankingApi
    .operateLikeOrUnLike({
      operateFlag: userInfo.value.likeStatus ? 0 : 1,
      targetUserId: id.value,
    })
    .then(res => {
      console.log(res)
      init()
    })
}
function init() {
  rankingApi.queryTargetUserIdInfo(id.value).then(res => {
    userInfo.value = res as any
  })
}
onMounted(() => {
  //

  id.value = route.params.id as string
  init()
})

defineOptions({
  name: 'RankingOtherDetail',
})
</script>
<template>
  <div class="g-container">
    <BackBar leftText="查看信息"></BackBar>
    <div class="info_box">
      <user-profile-card :user-info="userInfo" />
      <div class="figure">
        <div
          :style="{ background: userInfo.sex === 1 ? figureBoy : figureGirl }"
          class="figure_img"
        ></div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.g-container {
  width: 100%;
  height: 100%;
  @include main_bg;
  padding: 2.67vh 0 0 $space-6;
}
.info_box {
  position: relative;
  display: flex;
  font-family: $font-special;
  width: 100%;
  height: 100%;
  padding-left: 264px;

  .figure {
    width: calc(100% - 789px);
    padding-left: 48px;
    &_img {
      width: 600px;
      height: 83.33vh;
    }
  }
}
</style>
