
<template>
    <div>
        <van-nav-bar class="nav-bar" title="Detail" >
            <template #left>
                <van-icon name="arrow-left" color="#fff" @click="back()" />
            </template>
        </van-nav-bar>
        <div class="detailContainer">
        <div  class="headerView" style="margin-top: 18px;">
            <div style="display: flex;flex-direction: column;">
                <span style="font-size: 24px; font-weight: bold;">{{personData?.xuanfei_name || 'No Name'}}</span>
                <span style="font-size: 14px;line-height: 20px;margin-top: 5px;">Height:{{personData?.height}}cm Bust:{{personData?.bust}}</span>
                <div class="tag" style="margin-top: 5px;font-size: 13px;">{{ personData?.introduce }}</div>
                <div style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
                    <span style="font-size: 14px;">Charge range:</span>
                    <img style="width: 100px;" :src="starImg" alt="">
                </div>
                <span style="font-size: 14px;margin-top: 5px;">Residence:{{personData?.address}}</span>
            </div>
            <div style="display: flex;flex-direction: column;align-items: end;justify-content: center;">
                <div style="display: flex;align-items: center;flex-direction: column;">
                    <img style="width: 50px;" :src="zanHeart" alt="">
                    <span>{{personData?.like}}</span>
                </div>

                <div @click="openDetailChat" style="padding: 10px;background-color: #000;
                color: #fff;font-size: 15px;margin-top: 25px;border-radius: 100px;">Reserve now</div>
            </div>
        </div>
        <!-- 111111 -->
        <div style="background-color: lightgray;height: 10px;width: 100%;
        margin-top: 15px;margin-bottom: 15px;border-radius: 3px;">
        </div>
        <div class="middleImg">
            <div @click="tapImg(index)" :style="{border:nowImgIndex == index ? '#000 5px solid':''  }" v-for="(value,index) in imgUrls" class="grid-item" :key="index">
                <img style="width: 200px; height: 200px;border-radius: 10px;" :src="fullImgUrl(value)" alt="">
                <!-- <div class="gridItemTag">
                    <span class="textTag">Yes</span>
                </div> -->
            </div>
        </div>
        <!-- 222222 -->
        <div style="margin-top: 15px;">
            <img @click="tapFullImg" :src="fullImgUrl(nowImgSrc)" style="width: 100%;" alt="">
        </div>
        <!-- 333333 -->
        <div style="margin-top: 15px;">
            <div style="font-size: 18px;font-weight: bold;">Personal profile</div>
            <div style="font-size: 15px;margin-top: 8px;line-height: 18px;">{{personData.introduce}}</div>
        </div>
    </div>
    </div>

</template>


<script>
import starImg from '@/assets/stars.jpg'
import zanHeart from '@/assets/zanheart.png'

import img1 from '@/assets/user/1.jpg'
import img2 from '@/assets/user/2.jpg'
import img3 from '@/assets/user/3.jpg'
import img4 from '@/assets/user/4.jpg'
import img5 from '@/assets/user/5.jpg'
import { xuanfeiDetail } from '@/api/contract'
import { nowLocationUrl } from '@/utils/tools'
import { openChat } from '@/utils/chat'

export default{
    data(){
        return {
            starImg: starImg,
            zanHeart: zanHeart,
            gridItems: [
                { src: img1 },
                { src: img2 },
                { src: img3 },
                { src: img4 },
                { src: img5 },
            ],
            nowImgSrc: '',
            nowImgIndex: 0,
            personData:{},
            imgUrls:[],
        }
    },

    mounted() {
        const id = this.$route.query.id
        this.getPersonDetail(id)
    },

    methods: {
        back(){
            this.$router.back()
        },
        tapImg(index){
            this.nowImgIndex = index
            this.nowImgSrc = this.imgUrls[index]
        },
        async getPersonDetail(id){
            const res = await xuanfeiDetail({id:id})
            if(res.code == 200){
                this.personData = res.data
                this.imgUrls = res.data.img_url || []
                this.nowImgSrc = res.data.img_url[0]
            }
            // console.log('个人详情：',res)
        },
        fullImgUrl(imgUrl){
            return nowLocationUrl + imgUrl
        },
        tapFullImg(){
            const payload = btoa(encodeURIComponent(JSON.stringify(this.imgUrls)));
            this.$router.push({path:'/imgShow',query:{nowIndex:this.nowImgIndex,data:payload}})
        },
        openDetailChat(){
            openChat()
        }
    }
}
</script>


<style scoped>
.detailContainer{
    padding:15px 25px 15px 25px;
}
.headerView{
    /* margin-top: 100px; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.tag{
    background-color: #000;
    border-radius: 8px;
    padding: 8px 15px 8px 15px;
    color: #fff;
    /* font-size: 26px; */
    max-width: 300px;
}


.middleImg{
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(1,200px);
    grid-auto-columns: 200px;
    gap: 20px;
    overflow-x: auto;
    padding: 10px;
}
.grid-item {
  background-color: #4ade80;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* X偏移 Y偏移 模糊 半透明黑色 */

}
</style>