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

<template>
    <view class="pb-160rpx min-h-100vh bg-[#fff]">
        <navbar title="选择茶艺师" custom-class='!bg-[#fff]'></navbar>

        <!-- 茶艺师列表部分 -->
        <view class="bg-[#fff] px-30rpx pt-20rpx pb-40rpx">
            <view class="text-30rpx font-bold text-[#303133]">茶艺师</view>
            <view class="text-24rpx text-[#818CA9] mt-12rpx mb-32rpx font-500">匹配心动茶艺师</view>

            <view class="grid grid-cols-3 gap-y-20rpx gap-x-20rpx justify-items-center">
                <view class="w-216rpx relative" v-for="(item, index) in list" :key="index"
                    @click="TeaSpecialist.handleSelect(index)">
                    <view class="relative w-216rpx h-216rpx rounded-16rpx overflow-hidden">
                        <wd-img :src="item.image" width="216rpx" height="216rpx" mode="aspectFill"></wd-img>
                        <view class="absolute bottom-0 left-0 z-10">
                            <!-- 选中的样式 -->
                            <view
                                class="w-40rpx h-40rpx rounded-full bg-[#4C9F44] flex items-center justify-center border-2rpx border-solid border-[#4C9F44]"
                                v-if="selectedIndex === index">
                                <wd-icon name="check-bold" size="24rpx" color="#fff"></wd-icon>
                            </view>
                            <!-- 未选中的样式 -->
                            <view
                                class="w-40rpx h-40rpx rounded-full bg-[rgba(255,255,255,0.9)] border-2rpx border-solid border-[#d4d4d4]"
                                v-else></view>
                        </view>
                    </view>
                    <view class="text-28rpx text-[#2A3B56] mt-12rpx line-1">{{ item.name }}</view>
                    <view class="text-24rpx text-[#F55B02] mt-6rpx">
                        <tea-specialist-level :level="item.level"></tea-specialist-level>
                    </view>
                </view>
            </view>

            <view class="flex justify-center mt-40rpx">
                <view class="flex items-center justify-center bg-[#F6F7F8] rounded-34rpx h-100rpx w-320rpx"
                    @click="TeaSpecialist.handleMore">
                    <wd-img :src="`${OSS}icon/icon_more.png`" width="36rpx" height="36rpx"></wd-img>
                    <text
                        class="text-26rpx text-[#606266] ml-24rpx mr-8rpx font-400 text-28rpx leading-40rpx">查看更多</text>
                    <wd-icon name="arrow-down" size="28rpx" color="#606266"></wd-icon>
                </view>
            </view>
        </view>

        <!-- 茶艺师详细信息模块 -->
        <view class="mx-28rpx mt-20rpx mb-30rpx relative border-2rpx border-solid border-[#F6F4F4]" v-if="info">
            <view class="flex justify-between items-start bg-[#F5F7FF] rounded-t-16rpx p-30rpx">
                <view>
                    <view class="text-36rpx font-bold text-[#303133] mb-12rpx">{{ info.name }}</view>
                    <view class="text-28rpx text-[#120D26] mb-12rpx">
                        <tea-specialist-level :level="info.level"></tea-specialist-level>
                    </view>
                    <view class="flex items-center text-24rpx text-[#909399] mb-16rpx">
                        <wd-img :src="`${OSS}icon/icon_store_cert.png`" width="36rpx" height="36rpx"
                            class="mr-8rpx"></wd-img>
                        <text @click="TeaSpecialist.handlePreviewInfo">{{ info.company_abv }}</text>
                    </view>
                    <view class="flex items-center">
                        <wd-rate v-model="info.sold" readonly active-color="#FF5951" allow-half
                            active-icon="star-filled" icon="star" space="4rpx" />
                        <text class="text-24rpx text-[#606266] ml-10rpx">{{ info.sold }} 推荐</text>
                    </view>
                </view>
                <view class="w-120rpx h-120rpx">
                    <wd-img :src="`${OSS}icon/icon_msg.png`" width="120rpx" height="120rpx" placeholder="icon"></wd-img>
                </view>
            </view>

            <view class="bg-[#FCFCFE] rounded-b-16rpx p-30rpx">
                <!-- 服务方式 -->
      
                <view class="bg-[#EBFBF7] 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">到店服务</text>
                    <text class="ml-20rpx font-400 text-24rpx leading-34rpx" v-if="info.server_type == 2">上门服务</text>
                </view>

                <!-- 基本属性 -->
                <view class="mt-36rpx grid grid-cols-2 gap-y-24rpx px-10rpx">
                    <view class="flex items-center text-28rpx text-[#606266]">
                        <wd-img width="40rpx" height="40rpx" :src="`${OSS}icon/icon_gender.png`"
                            class="mr-16rpx"></wd-img>
                        <text class="mr-16rpx">性别:</text>
                        <text class="text-[#303133]">{{ info.sex }}</text>
                    </view>
                    <view class="flex items-center text-28rpx text-[#606266]">
                        <wd-img width="40rpx" height="40rpx" :src="`${OSS}icon/icon_born.png`"
                            class="mr-16rpx"></wd-img>
                        <text class="mr-16rpx">年龄:</text>
                        <text class="text-[#303133]">{{ info.both }}岁</text>
                    </view>
                    <view class="flex items-center text-28rpx text-[#606266]">
                        <wd-img width="40rpx" height="40rpx" :src="`${OSS}icon/icon_height.png`"
                            class="mr-16rpx"></wd-img>
                        <text class="mr-16rpx">身高:</text>
                        <text class="text-[#303133]">{{ info.height }}cm</text>
                    </view>
                    <view class="flex items-center text-28rpx text-[#606266]">
                        <wd-img width="40rpx" height="40rpx" :src="`${OSS}icon/icon_weight.png`"
                            class="mr-16rpx"></wd-img>
                        <text class="mr-16rpx">体重:</text>
                        <text class="text-[#303133]">{{ info.weight }}kg</text>
                    </view>
                </view>

                <!-- 标签 -->
                <view class="mt-36rpx border border-solid border-[#F0F2F5] rounded-14rpx p-24rpx pb-8rpx bg-[#FFFFFF]">
                    <view class="flex flex-wrap">
                        <view class="flex flex-wrap items-center">
                            <view class="mr-8rpx bg-[#4C9F44] text-[#fff] px-10rpx leading-34rpx font-400 text-24rpx rounded-4rpx"
                                v-for="label in info.label" :key="label.id">{{ label.label_name }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 底部按钮 -->
        <view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff] flex items-center justify-center"
            :style="{ height: '140rpx' }">
            <view class="text-32rpx flex items-center justify-center leading-90rpx text-center w-full px-60rpx">
                <view class="flex-1 w-full h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="TeaSpecialist.handleNext">下一步</view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { inject, ref, computed } from 'vue'
import { router, previewImage } from '@/utils/tools'
import { getTeaSpecialist, getTeaSpecialistDetail } from '@/api/tea-specialist'
import type { ITeaSpecialistResult } from '@/api/types/tea-specialist'
import { toast } from '@/utils/toast'

const OSS = inject('OSS')

// 茶艺师列表及分页参数
const list = ref<any[]>([])
const page = ref(1)
const size = 6
const hasMore = ref(true)
const selectedIndex = ref(0)
const selectedSpecialist = computed(() => list.value[selectedIndex.value])

const info = ref({
    team_user_id: 0,
    name: '', // 茶艺师名字
    star: 0, // 茶艺师评分
    level: 1, // 茶艺师等级
    sold: 0, // 推荐
    sex: 0, // 性别
    both: 0, // 年龄
    weight: 0, // 体重
    height: 0, // 身高
    mileage_price: 0, // 车马费
    server_type: 0, // 服务方式 1到店 2上门 3两者都有
    label: [], // 专属圈子标签
    company_abv: '', // 公司简称
    company_url: '', // 图片链接
    company_status: 0, // 是否有公司信息
})

const serviceType = ref<number>(1) // 服务方式，默认为到店服务

onLoad((args) => {
    serviceType.value = args.serviceType || 1 // 默认到店服务

    TeaSpecialist.handleGetTeaSpecialistList()
})

const TeaSpecialist = {
    /**
     * 获取茶艺师列表，分页加载
     */
    handleGetTeaSpecialistList: async () => {
        if (!hasMore.value) return
            console.log("🚀 ~ uni.getStorageSync('teaPackageType'):", uni.getStorageSync('teaPackageType'))

        const storage = uni.getStorageSync('selectedPackageService')
        const filter = {
            page: page.value,
            size,
            latitude: storage.latitude || import.meta.env.VITE_DEFAULT_LATITUDE,
            longitude: storage.longitude || import.meta.env.VITE_DEFAULT_LONGITUDE,
            level: uni.getStorageSync('teaPackageType'),
            server_type: serviceType.value, // 1到店服务 2上门服务
        }
        try {
            const res = await getTeaSpecialist(filter)
            const curPageData = res.list || []
            if (page.value === 1) {
                list.value = curPageData
                if (curPageData.length > 0) {
                    selectedIndex.value = 0
                    TeaSpecialist.handleGetTeaSpecialistDetail(curPageData[0].team_user_id)
                }
            } else {
                list.value = list.value.concat(curPageData)
            }
            hasMore.value = curPageData.length === size
            if (hasMore.value) page.value += 1
        } catch (e) {
            uni.showToast({ title: '加载失败', icon: 'none' })
        }
    },
    /**
     * 选中某个茶艺师
     */
    handleSelect: (index: number) => {
        selectedIndex.value = index
        const item = list.value[index]
        if (item && item.team_user_id) {
            TeaSpecialist.handleGetTeaSpecialistDetail(item.team_user_id)
        }
    },

    /**
     * 加载更多茶艺师
     */
    handleMore: () => {
        TeaSpecialist.handleGetTeaSpecialistList()
    },

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

    /**
     * 下一步
     */
    handleNext: () => {
        console.log("🚀 ~ info.value:", info.value)
        router.navigateTo(`/bundle/package/reserve?id=${info.value.team_user_id}`)
    },

    /**
     * 查看商家信息
     */
    handlePreviewInfo: () => {
        if (info.value.company_status) {
            previewImage(info.value.company_url, [info.value.company_url])
        } else {
            toast.info('暂无商家信息')
        }
    }
}


</script>

<style lang="scss" scoped>
page {
    background-color: #fff;
}
</style>
