<route lang="jsonc" type="page">{
    "needLogin": true,
    "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="`${OSS}images/h5/tip/tip_image${index + 1}.png`"></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.tip_price" v-if="item.tip_price > 0"></price-format>
                            <view class="font-400 text-26rpx leading-36rpx text-#006C2D" v-if="item.tip_price == 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 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"
                        @click="isOtherTip = false">在想想</view>
                    <view class="w-330rpx h-90rpx leading-90rpx bg-#4C9F44 text-#fff rounded-8rpx"
                        @click="Detail.handleTipTeaSpecialistOtherMoney">打赏</view>
                </view>

            </view>
        </wd-popup>

        <view>
            <navbar fixed layoutLeft hideLeftIcon>
                <template #left>
                    <view class="h-48rpx flex items-center" @click="Detail.handleBack">
                        <view class="mt-4rpx">
                            <wd-icon name="thin-arrow-left" size="30rpx" color="#121212"></wd-icon>
                        </view>
                        <view class="text-[#303133] text-36rpx ml-24rpx leading-48rpx">{{ isReserve ? '预约茶艺师' : '茶艺师详情' }}
                        </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="info.image_arr"
                    mode="aspectFit" @click="Detail.handlePreviewImage"></wd-swiper>
            </view>

            <!-- 昵称显示 -->
            <view class="bg-white rounded-t-16rpx px-30rpx">
                <view class="flex items-center pt-36rpx">
                    <view class="flex items-center">
                        <view class="font-bold text-34rpx leading-48rpx text-#303133 mr-30rpx">{{ info.name }}</view>
                        <view class="mt-8rpx">
                            <tea-specialist-level :level="info.level"></tea-specialist-level>
                        </view>
                    </view>
                    <!-- <view class="font-400 text-22rpx leading-32rpx text-#6A6363">已预约 {{ Number(info.sold) > 10 ? Number(info.sold) + '+' : Number(info.sold) }}</view> -->
                </view>
                <view class="flex items-center justify-between mt-4rpx">
                    <view class="flex items-center">
                        <wd-rate v-model="info.star" 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>

                <view class="flex items-center  mt-24rpx">
                    <view class="flex items-center">
                        <wd-img :src="`${OSS}icon/icon_store_cert.png`" width="36rpx" height="36rpx"></wd-img>
                    </view>
                    <text class="ml-8rpx font-400 text-24rpx leading-4rpx text-#303133">商家认证</text>
                </view>

                <view class="bg-[#EBFBF7] w-692rpx h-64rpx rounded-12rpx p-14rpx flex items-center mt-22rpx text-[#35C1A0]">
                    <wd-img :src="`${OSS}icon/icon_heart.png`" width="36rpx" height="36rpx"></wd-img>
                    <text class="font-bold text-24rpx leading-34rpx ml-16rpx">服务方式</text>
                    <text class="ml-20rpx font-400 text-24rpx leading-34rpx" v-if="info.server_type == 1 || info.server_type == 3">到店服务</text>
                    <text class="ml-20rpx font-400 text-24rpx leading-34rpx" v-if="info.server_type == 2 || info.server_type == 3">上门服务</text>
                </view>

                <view class="font-400 text-24rpx leading-34rpx text-#818CA9 mt-20rpx">距离您{{ info.distance }}km {{ info.is_time }}
                </view>

                <!-- <view class="flex items-center justify-between mt-24rpx">
                    <view class="flex items-center">
                        <view class="mr-20rpx">
                            <wd-tag color="#FF5951" bg-color="#FEF1F0"
                                custom-class="!rounded-6rpx !px-16rpx !py-4rpx !h-40rpx !w-144rpx">{{ info.age_range
                                }}后茶艺师</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>
                    </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.sex == 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.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.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.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 pt-20rpx pb-42rpx 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="flex flex-wrap items-center mt-16rpx">
                        <view class="mr-8rpx bg-[#4C9F44] text-[#fff] px-10rpx leading-34rpx font-400 text-24rpx rounded-4rpx"  
                        v-for="(label, index) in info.label" :key="index">{{ label.label_name }}</view>
                    </view>
                </view>
            </view>

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

            <view class="mx-30rpx mt-40rpx">
                <!-- 费用说明 -->
                <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.mileage_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>

                    <view class="h-1rpx bg-[#F6F7F9] mt-40rpx mb-24rpx"></view>

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

        <!-- 操作按钮 -->
        <view>
            <view v-if="!isReserve"
                class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center text-[#303133] mt-24rpx pt-36rpx pb-28rpx">
                <view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-#fff"
                    @click="Detail.handleReserveTeaspecialist">
                    立即预定</view>
            </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-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-#fff" @click="Detail.handleReserveTeaspecialist">立即预定</view> -->
            <!-- </view> -->
        </view>
    </view>
</template>

<script lang="ts" setup>
import TeaSpecialistLevel from '@/components/TeaSpecialistLevel.vue'
import { useMessage } from 'wot-design-uni'
import { getTeaSpecialistDetail } from '@/api/tea-specialist'
import { ITeaSpecialistDetailsFields } from '@/api/types/tea'
import type { ITeaSpecialistRewardAmountsResult } from '@/api/types/tea'
import { toast } from '@/utils/toast'
import { TeaSpecialistLevelValue } from '@/utils/teaSpecialist'
import { router, previewImage } from '@/utils/tools'
import { useUserStore } from '@/store'
import type { IUserInfoVo } from '@/api/types/login'

const OSS = inject('OSS')

// tab
const tab = ref<number>(0)

// 用户信息
const userInfo = ref<IUserInfoVo>(null)

// 茶艺师
const id = ref<number>(0)
const info = ref({
    id: 0,
    image_arr: [], // 轮播图
    name: '', // 茶艺师名字
    star: 0, // 茶艺师评分
    sold: 0, // 已预约
    age_range: '00', // 茶艺师年龄段 
    level: 1, // 茶艺师等级
    distance: 0, // 距离
    is_time: '', // 预计到达
    sex: 0, // 性别
    both: 0, // 年龄
    weight: 0, // 体重
    height: 0, // 身高
    hobby_introduce: '', // 兴趣爱好介绍
    price: 0, // 服务费
    mileage_price: 0, // 车马费
    server_type: 0, // 服务方式 1到店 2上门 3两者都有
    label: [], // 专属圈子标签
})
const latitude = ref<number>(0) // 纬度
const longitude = ref<number>(0) // 经度

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

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

// 打赏茶艺师
const showTipTeaSpecialistPopup = ref<boolean>(false)
const tipList = ref<Array<ITeaSpecialistRewardAmountsResult>>([])

const isOtherTip = ref<boolean>(false) // 是否是其他打赏金额
const tipMoney = ref<string>('') // 其他打赏金额

onLoad(async (args) => {
    console.log("🚀 ~ args:", args)
    const userStore = useUserStore()
    userInfo.value = userStore.userInfo

    id.value = args.id || 0
    Detail.handleGetTeaSpecialistDetail()

    // 如果是从分享进入的未登录的情况下
    uni.$on('refreshTeaSpecialistDetails', (params) => {
        // 处理未登录的情况下
        id.value = id.value
        uni.$off('refreshTeaSpecialistDetails')

        Detail.handleGetTeaSpecialistDetail()
    })
    // rate.value = info.value.star
    // tabList.value = info.value.textarea
    // console.log("🚀 ~ tabList:", res)

    // // 茶艺师是否上线
    // // if (info.up_status == 0) {
    // //     isReserve.value = true
    // // }

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

    // 获取打赏金额
    // getTeaSpecialistRewardAmounts().then((res: Array<ITeaSpecialistRewardAmountsResult>) => {
    //     tipList.value = res
    // })
})

onUnload(() => {
    uni.$off('refreshTeaSpecialistDetails')
})

// 茶艺师分享
onShareAppMessage(() => {
    return {
        title: info.value.name || '预约茶艺师',
        path: `/bundle_b/pages/tea-specialist/detail?id=${id.value}`,
    }
})


const Detail = {
    /**
     * 获取茶艺师详情
     */
    handleGetTeaSpecialistDetail: async () => {
        const res = await getTeaSpecialistDetail({
            team_user_id: id.value,
            latitude: uni.getStorageSync('latitude') || import.meta.env.VITE_DEFAULT_LATITUDE,
            longitude: uni.getStorageSync('longitude') || import.meta.env.VITE_DEFAULT_LONGITUDE,
        })
        info.value = res.teamaster
    },

    /**
     * TODO 处理收藏-暂时不要
     */
    handleCollect: async () => {
        // let status = info.collect == 0 ? 1 : 0
        // await collectTeaSpecialist({
        //     id: id.value,
        //     status
        // })

        // info.collect = info.collect == 0 ? 1 : 0
    },

    /**
     * TODO 处理分享-暂时不要
     */
    handleShare: () => {
        // const url = window.location.href
        // const { name, real, image} = info
        // const params = {
        //     title: name,
        //     desc: real?.interests,
        //     imgUrl: image,
        //     link: url
        // }
    },

    /**
     * 原来的立即邀约
     */
    // handleReserve: () => {
    //     message.alert({
    //         title: '邀约茶艺师',
    //         msg: `尊敬的客户我们即将向[${info.name}]发出服务邀约，请过十分钟后刷新页面，谢谢您的支持！`,
    //         confirmButtonText: '好的',
    //         confirmButtonProps: {
    //             customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
    //         }
    //     }).then(async res => {
    //         await teaSpecialistInvite({
    //             id: info.id,
    //         })
    //     })
    // },

    /**
     * TODO 打赏茶艺师-暂时不要
     */
    handleTipTeaSpecialist: (item: ITeaSpecialistRewardAmountsResult) => {
        if (!userInfo.value.token) {
            toast.info('请先登录')
            router.switchTab('/pages/my/my', 500)
            return
        }

        if (item.tip_price == 0) {
            isOtherTip.value = true
        } else {
            showTipTeaSpecialistPopup.value = false
            router.navigateTo(`/pages/cashier/cashier?id=${id.value}&lat=${latitude.value}&lng=${longitude.value}&money=${item.tip_price}`)
        }
    },

    /**
     * TODO 打赏茶艺师其它金额-暂时不要
     */
    handleTipTeaSpecialistOtherMoney: () => {
        if (Number(tipMoney.value) < 1 || Number(tipMoney.value) > 50) {
            toast.info('请输入1~50元的金额')
            return
        }
        showTipTeaSpecialistPopup.value = false
        router.navigateTo(`/pages/cashier/cashier?from=tip&teaSpecialistId=${id.value}&money=${tipMoney.value}`)
    },

    /**
     * 立即邀约
     */
    handleReserveTeaspecialist: () => {
        // id.value - 茶艺师的ID
        router.navigateTo(`/bundle_b/pages/tea-specialist/reserve?id=${id.value}`)
    },

    /**
     * 分享的页面没有栈，所以需要switch方法跳转
     */
    handleBack: () => {
        router.navigateBack().catch(err => {
            router.switchTab('/pages/index/index')
        })
    },

    /**
     * 预览图片
     */
    handlePreviewImage: (e: { index: number, item: any }) => {
        previewImage(info.value.image_arr[e.index], info.value.image_arr)
    }
}
</script>

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

.content-tab {
    :deep() {
        .wd-tabs__line {
            background-color: #006C2D !important;
        }

        .wd-tabs__nav-item {
            color: #303133 !important;
        }

        .wd-tabs__nav-item.is-active {
            color: #006C2D !important;
        }
    }
}
</style>
