<route lang="jsonc" type="page">
    {
        "layout": "default",
        "style": {
            "navigationStyle": "custom"
        }
    }
</route>

<template>
    <view :class="isReserve ? 'pb-28rpx' : ''">
        <wd-message-box selector="wd-message-box-slot"></wd-message-box>

        <!-- 打赏茶艺师 -->
        <wd-popup v-model="showTipTeaSpecialistPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" @close="showTipTeaSpecialistPopup = false" position="bottom">
            <view class='bg-[#fff] py-40rpx realtive'>
                <view class="absolute top-18rpx right-30rpx" @click="showTipTeaSpecialistPopup = false">
                    <wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
                </view>
                <view class="">
                    <view class="text-36rpx text-[#121212] leading-50rpx text-center" v-if="!isOtherTip">打赏一下</view>
                    <view class="flex items-center mx-16rpx" v-if="isOtherTip">
                        <view class="flex items-center" @click="isOtherTip = false">
                            <wd-icon name="thin-arrow-left" size="32rpx"></wd-icon>
                        </view>
                        <view class="flex-1 text-36rpx text-[#121212] leading-50rpx text-center">其它打赏金额</view>
                    </view>
                </view>
                <view class="mt-48rpx font-400 text-30rpx leading-42rpx text-#303133 text-center">很喜欢这个茶艺师，快打个赏吧</view>
                <!-- 打赏金额 -->
                <view class="mt-62rpx flex justify-between items-center mx-30rpx" v-if="!isOtherTip">
                    <view class="bg-#F0F6EF flex flex-col items-center justify-center h-240rpx px-20rpx py-24rpx w-[22%] rounded-4rpx text-center" 
                        v-for="(item, index) in tipList" :key="index" @click="Detail.handleTipTeaSpecialist(item)">
                            <wd-img width="64rpx" height='64rpx' :src="item.image"></wd-img>
                            <view class="font-bold text-#006C2D text-40rpx leading-30rpx mt-20rpx">
                                <price-format color="#006C2D" :first-size="40" :subscript-size="22" :show-decimal="false" :price="item.amount" v-if="item.amount > 0"></price-format>
                                <view class="font-400 text-26rpx leading-36rpx text-#006C2D" v-if="item.amount == 0">其他金额</view>
                            </view>
                            <view class="bg-#4C9F44 rounded-8rpx w-120rpx h-48rpx leading-48rpx text-#fff text-28rpx mt-16rpx">打赏</view>
                    </view>
                </view>
                <!-- 自定义打赏金额 -->
                <view class="mx-30rpx mt-46rpx" v-if="isOtherTip">
                    <wd-input
						clearable
						type="text" 
						placeholder="请输入1~50元的金额" 
						:v-model="tipMoney" 
						no-border
						custom-class="!bg-[#F6F7F8] !rounded-16rpx !text-30rpx !leading-48rpx" 
						custom-input-class="!h-104rpx !pl-60rpx">
							<template #prefix>
								<view class="ml-30rpx font-bold text-30rpx leading-48rpx text-[#303133]">
									￥
								</view>
							</template>
					</wd-input>
                </view>

                <view class="font-400 text-24rpx leading-34rpx text-#909399 mt-34rpx mx-30rpx">打赏金额将给到茶艺师，是您自愿对于茶艺师的赠与</view>
            
                <view class="text-32rpx leading-44rpx text-center flex items-center justify-center mt-136rpx" v-if="isOtherTip">
                    <view class="w-330rpx h-90rpx leading-90rpx bg-#F6F7F8 text-#303133 rounded-8rpx mr-30rpx">在想想</view>
                    <view class="w-330rpx h-90rpx leading-90rpx bg-#4C9F44 text-#fff rounded-8rpx">打赏</view>
                </view>
                
            </view>
        </wd-popup>

        <view>
            <navbar :title="isReserve ? '预约茶艺师' : '茶艺师详情'" fixed :left-arrow="false">
                <template #right>
					<view class="flex items-center ml-114rpx">
                        <view class="mr-16rpx flex items-center" @click="Detail.handleCollect">
                            <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_sc.png`"></wd-img>
                            <!-- <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_sc_s.png`"></wd-img> -->
                        </view>
                        <view @click="Detail.handleShare" class="flex items-center">
						    <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_share.png`"></wd-img>
                        </view>
					</view>
				</template>
            </navbar>
        </view>

        <view class="pb-30rpx bg-white">
            <!-- 轮播图 -->
            <view class="mx-30rpx">
				<wd-swiper value-key="image" height="400rpx" 
					:indicator="{ type: 'dots-bar' }" :list="swiperList" v-model:current="current" mode="aspectFit"></wd-swiper>
			</view>

            <!-- 昵称显示 -->
            <view class="bg-white rounded-t-16rpx px-30rpx">
                <view class="font-bold text-34rpx leading-48rpx text-#303133 pt-36rpx">{{ info.name }}</view>
                <view class="flex items-center justify-between mt-4rpx">
                    <view class="flex items-center">
                        <wd-rate v-model="rate" readonly active-color="#FF5951" allow-half active-icon="star-filled" icon="star"  space="4rpx"/>
                        <view class="font-400 text-26rpx text-#606266 ml-8rpx">{{ info.star }} 推荐</view>
                    </view>
                    <view class="font-400 text-22rpx leading-32rpx text-#6A6363">已预约 {{ info.reservation_num > 10 ? info.reservation_num + '+' : info.reservation_num }}</view>
                </view>
                
                <view class="flex items-center justify-between mt-24rpx">
                    <view class="flex items-center">
                        <view class="mr-20rpx" v-if="is90">
                            <wd-tag color="#FF5951" bg-color="#FEF1F0" custom-class="!rounded-6rpx !px-16rpx !py-4rpx !h-40rpx">90后茶艺师</wd-tag>
                        </view>
                        <view class="w-160rpx h-40rpx relative mr-44rpx top-6rpx">
                            <view class="absolute left-0 top-0 h-36rpx flex items-start">
                                <wd-img :src="`${OSS}icon/icon_gold_medal.png`" width="36rpx" height="36rpx"></wd-img>
                            </view>
                            <view>
                                <tea-specialist-level :level="TeaSpecialistLevelValue[info.teamasterLevel[0].level_name]"></tea-specialist-level>
                            </view>
                        </view>
                    </view>
                    <view class="font-400 text-24rpx leading-34rpx text-#818CA9">距离您{{ info.distance }}km 预计{{ info.speed }}分钟</view>
                </view>
            </view>

            <view class="h-2rpx bg-#F6F7F9 mx-30rpx mt-28rpx"></view>

            <!-- 个人信息 -->
            <view class="flex justify-between items-center mx-88rpx text-center mt-30rpx">
                <view>
                    <view class="font-400 text-28rpx leading-40rpx text-#606266">性别</view>
                    <view class="font-bold text-30rpx leading-42rpx text-#303133 mt-12rpx">{{ info.real.gender == 1 ? '男' : '女' }}</view>
                </view>
                <view class="w-4rpx h-66rpx bg-#F6F7F9"></view>
                <view>
                    <view class="font-400 text-28rpx leading-40rpx text-#606266">年龄</view>
                    <view class="font-bold text-30rpx leading-42rpx text-#303133 mt-12rpx">{{ info.real.both }}</view>
                </view>
                <view class="w-4rpx h-66rpx bg-#F6F7F9"></view>
                <view>
                    <view class="font-400 text-28rpx leading-40rpx text-#606266">身高</view>
                    <view class="font-bold text-30rpx leading-42rpx text-#303133 mt-12rpx">{{ info.real.height }}cm</view>
                </view>
                <view class="w-4rpx h-66rpx bg-#F6F7F9"></view>
                <view>
                    <view class="font-400 text-28rpx leading-40rpx text-#606266">体重</view>
                    <view class="font-bold text-30rpx leading-42rpx text-#303133 mt-12rpx">{{ info.real.weight }}kg</view>
                </view>
            </view>

            <!-- 兴趣爱好 -->
            <view class="mx-30rpx mt-44rpx">
                <view class="font-bold text-32rpx leading-44rpx text-#303133">
                    兴趣爱好
                </view>

                <view class="bg-#FBFBFB rounded-8rpx px-28rpx py-20rpx mt-22rpx">
                    <view class="flex items-center">
                        <view class="mr-12rpx">
                            <wd-img :src="`${OSS}icon/icon_tea2.png`" width="32rpx" height="32rpx"></wd-img>
                        </view>
                        <view class="font-400 text-26rpx leading-36rpx text-#606266">兴趣爱好</view>
                    </view>
                    <view class="mt-20rpx font-400 text-28rpx leading-40rpx text-#303133">
                        “{{ info.real.interests }}”
                    </view>
                </view>
            </view>

            <view class="h-20rpx bg-#F6F7F9 mt-42rpx mb-40rpx"></view>
            
            <!-- 费用说明 -->
            <view class="mx-30rpx mt-44rpx">
                <view >
                    <view class="font-bold text-32rpx leading-44rpx text-#303133">
                        费用说明
                    </view>

                    <view class="">
                        <view class="flex items-center mt-24rpx">
                            <view class="mr-12rpx flex items-center">
                                <wd-img :src="`${OSS}icon/icon_billing.png`" width="32rpx" height="32rpx"></wd-img>
                            </view>
                            <view class="font-400 text-26rpx leading-36rpx text-#606266">计费标准</view>
                        </view>
                        
                        <view class="mt-22rpx">
                            <view class="flex items-center justify-between">
                                <view class="w-8rpx h-8rpx rounded-8rpx bg-#6A6363 mr-14rpx"></view>
                                <view class="flex-1 flex items-center justify-between font-500 text-26rpx leading-48rpx text-#303133">
                                    <view>服务费</view>
                                    <view>￥{{ info.price }}/小时</view>
                                </view>
                            </view>
                            <view class="flex items-center justify-between mt-20rpx">
                                <view class="w-8rpx h-8rpx rounded-8rpx bg-#6A6363 mr-14rpx"></view>
                                <view class="flex-1 flex items-center justify-between font-500 text-26rpx leading-48rpx text-#303133">
                                    <view>车马费</view>
                                    <view>￥{{ info.fare_price }}/公里</view>
                                </view>
                            </view>
                        </view>
                    </view>

                    <view>
                        <view class="flex items-center mt-24rpx">
                            <view class="mr-12rpx flex items-center">
                                <wd-img :src="`${OSS}icon/icon_info.png`" width="36rpx" height="36rpx"></wd-img>
                            </view>
                            <view class="font-400 text-26rpx leading-36rpx text-#606266">其它说明</view>
                        </view>
                        
                        <view class="mt-50rpx flex items-center justify-around">
                            <view class="flex items-center">
                                <view class="mr-20rpx flex items-center">
                                    <wd-img :src="`${OSS}icon/icon_safe3.png`" width="36rpx" height="36rpx"></wd-img>
                                </view>
                                <view class="font-bold text-30rpx leading-48rpx text-#303133">
                                    爽约包退
                                </view>
                            </view>
                           <view class="flex items-center">
                                <view class="flex items-center mr-20rpx">
                                    <wd-img :src="`${OSS}icon/icon_card.png`" width="36rpx" height="36rpx"></wd-img>
                                </view>
                                <view class="font-bold text-30rpx leading-48rpx text-#303133">
                                    实名认证
                                </view>
                            </view>
                        </view>

                        <view class="h-4rpx bg-#F6F7F9 mt-40rpx mb-26rpx"></view>

                        <!-- 温馨提示 -->
                        <view>
                            <view class="flex items-center">
                                <view class="mr-14rpx">
                                    <wd-icon name="info-circle" size="36rpx" color="#707070"></wd-icon>
                                </view>
                                <view class="font-bold text-28rpx leading-48rpx text-#303133">温馨提示</view>
                            </view>

                            <view class="flex items-center mt-24rpx">
                                <view class="w-8rpx h-8rpx rounded-8rpx bg-#6A6363 mr-12rpx"></view>
                                <view class="font-500 text-26rpx leading-48rpx text-#F29747">茶艺师需提前一小时预约，两小时起订</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 操作按钮 -->
        <view>
            <!-- 邀约状态下的按钮 -->
            <view v-if="isReserve" class="mx-60rpx rounded-8rpx h-90rpx leading-90rpx text-center mt-52rpx bg-#4C9F44 text-#fff text-30rpx leading-42rpx font-bold"
                @click="Detail.handleReserve">
                立即邀约
            </view>

            <view v-if="!isReserve" class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center text-[#303133] bg-white mt-24rpx pt-36rpx pb-28rpx">
                <view class="w-330rpx h-90rpx bg-[#F0F6EF] rounded-8rpx mr-30rpx text-#4C9F44 flex items-center justify-center" @click="showTipTeaSpecialistPopup = true">
                    <view class="flex items-center mr-16rpx">
                        <wd-img :src="`${OSS}icon/icon_flower.png`" width="40rpx" height="40rpx"></wd-img>
                    </view>
                    打赏
                </view>
                <view class="w-330rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-#fff" @click="Detail.handleReserveTeaRoom">立即预定</view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
	import TeaSpecialistLevel from '@/components/TeaSpecialistLevel.vue'
    import { useMessage } from 'wot-design-uni'
    import { getTeaSpecialistDetails } from '@/api/tea'
    import { ITeaSpecialistDetailsFields } from '@/api/types/tea'
    import {toast} from '@/utils/toast'
	import {TeaSpecialistLevelValue} from '@/utils/teaSpecialist'

	const OSS = inject('OSS')

    // 茶艺师
    const id = ref<number>(0)
    const info = reactive<ITeaSpecialistDetailsFields>({ 
        name: '',
        star: 0,
        reservation_num: 0,
        distance: 0,
        speed: 0,
        real: { gender: 1, both: 18, height: 165, weight: 53, interests: '爱好茶艺，喜欢旅游，把爱好当工作' },
        teamasterlabel: [],
        teamasterLevel: [],
        price: 0,
        fare_price: 0,
    })
	const latitude = ref<number>(0) // 纬度
	const longitude = ref<number>(0) // 经度
    const is90 = ref<boolean>(false)

    // 是否是预约茶艺师页面
    const isReserve = ref<boolean>(false)

    // 弹窗
    const message = useMessage('wd-message-box-slot')

    // 轮播图
	const swiperList = ref<string[]>([
        `${OSS}images/banner1.png`,
        `${OSS}images/banner1.png`,
        `${OSS}images/banner1.png`
    ])
	const current = ref<number>(0)

    // 评分
    const rate = ref<number>(1)

    // 打赏主茶艺师
    const showTipTeaSpecialistPopup = ref<boolean>(false)
    const tipList = ref<Array<any>>([
        {id: 1, image: `${OSS}images/h5/tip/tip_image1.png`, amount: 5},
        {id: 2, image: `${OSS}images/h5/tip/tip_image2.png`, amount: 10},
        {id: 3, image: `${OSS}images/h5/tip/tip_image3.png`, amount: 20},
        {id: 4, image: `${OSS}images/h5/tip/tip_image4.png`, amount: 0},
    ])
    const isOtherTip = ref<boolean>(false) // 是否是其他打赏金额
    const tipMoney = ref<Number>(0) // 其他打赏金额

    onLoad(async (args) => {
        id.value = args.id || 0
        latitude.value = args.lat || 0
        longitude.value = args.lng || 0

        // 获取茶艺师详情
        const res = await getTeaSpecialistDetails({
            id: args.id,
            latitude: latitude.value,
            longitude: longitude.value
        })
        // 将返回的数据合并到 reactive 对象中
        Object.assign(info, res.teamaster || {})
        rate.value = info.star

        if (info.teamasterlabel) {
            info.teamasterlabel.map(item => {
                if (item.label_name == '90后茶艺师') {
                    is90.value = true
                }
            })
        }
    })

    const Detail = {
        // 处理收藏
        handleCollect: () => {
            console.log('收藏')
        },

        // 处理分享
        handleShare: () => {
            console.log('处理分享')
        },

        // 预约茶室
        handleReserveTeaRoom: () => {
            uni.navigateTo({
                url: '/pages/reserve/tea-room'
            })
        },

        // 立即邀约
        handleReserve: () => {
            message.alert({
                title: '邀约茶艺师',
                msg: '尊敬的客户我们即将向[茶艺师姓名]发出服务邀约，请过十分钟后刷新页面，谢谢您的支持！',
                confirmButtonText: '好的',
                confirmButtonProps: {
                    customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
                }
            }).then((res) => {
                // 点击确认按钮回调事件
            }).catch(() => {
                // 点击取消按钮回调事件
            })
        },

        // 打赏茶艺师
        handleTipTeaSpecialist: (item: any) => {
            if (item.amount == 0) {
                isOtherTip.value = true
            } else {
                showTipTeaSpecialistPopup.value = false
            }
        }
    }
</script>

<style lang="scss">
    page {
        background: $cz-page-background;
    }
</style>
