<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="page">{
	"layout": "tabbar",
	"style": {
		"navigationStyle": "custom"
	}
}</route>
<template>
	<view class="pb-180rpx">
        <!-- 费用明细 -->
        <wd-popup v-model="showCostPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" @close="showCostPopup = false" position="bottom">
            <view class='bg-[#FBFBFB] py-40rpx realtive'>
                <view class="absolute top-18rpx right-30rpx" @click="showCostPopup = false">
                    <wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
                </view>
                <view class="text-36rpx text-[#121212] leading-50rpx text-center">费用明细</view>
                <view class="mx-30rpx bg-white rounded-16rpx px-30rpx pt-40rpx mt-40rpx pb-30rpx">
                    <!-- 服务费 -->
                    <view>
                        <view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
                            <view>服务费</view>
                            <view>￥{{ bill.service.total }}</view>
                        </view>

                        <view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
                            <view>服务费（￥{{ bill.service.unitPrice }}元/小时）</view>
                            <view>x{{ bill.service.num }}</view>
                        </view>
                    </view>

                    <!-- 车马费 -->
                    <view>
                        <view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx mt-52rpx">
                            <view>车马费</view>
                            <view>￥{{ bill.travel.total }}</view>
                        </view>

                        <view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
                            <view>车马费（￥{{ bill.travel.unitPrice }}元/小时）</view>
                            <view>{{ bill.travel.num }}公里</view>
                        </view>
                    </view>

                    <!-- 茶艺服务 -->
                    <view>
                        <view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx  mt-52rpx">
                            <view>茶艺服务</view>
                            <view>￥{{ bill.teaService.total }}</view>
                        </view>

                        <view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
                            <view class='w-400rpx'>{{ selectedTeaTxt.join('/') }}</view>
                            <view>￥{{ bill.teaService.total }}</view>
                        </view>
                    </view>
 
                    <view class="mt-52rpx">
                        <view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
                            <view>优惠</view>
                            <view class="text-[#4C9F44]">-￥{{ bill.coupon }}</view>
                        </view>
                        <view class="flex justify-between items-center text-24rpx text-[#909399] leading-34rpx mt-16rpx">
                            <view>优惠券</view>
                            <view>-￥{{ bill.coupon }}</view>
                        </view>
                    </view>

                    <view class="my-30rpx">
                        <wd-gap height="2rpx" bgColor='#F6F7F9'></wd-gap>
                    </view>

                    <view class="flex justify-between items-center text-30rpx text-[#303133] leading-42rpx">
                        <view>实付金额</view>
                        <view>￥{{ bill.total }}</view>
                    </view>
                </view>
            </view>
        </wd-popup>

        <!-- 茶艺服务 -->
        <wd-popup v-model="showTeaServicePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
            <view class="relative">
                <view class="absolute top-18rpx right-30rpx" @click="showTeaServicePopup = false">
                    <wd-img width="60rpx" height='60rpx' :src="`${OSS}icon/icon_close.png`"></wd-img>
                </view>
                <view class="text-36rpx text-[#121212] leading-50rpx text-center pt-50rpx pb-40rpx">茶艺服务</view>
                <scroll-view scroll-y class="h-800rpx">
                    <view class="">
                        <!-- 服务人数 -->
                        <view class="mx-60rpx mb-56rpx">
                            <view class="text-32rpx leading-44rpx text-#303133">服务人数</view>
                            <view class="flex items-center justify-between mt-28rpx">
                                <view class="text-28rpx leading-40rpx text-#303133">服务人数</view>
                                <view class="">
                                    <wd-input-number v-model="servicePeople"/>
                                </view>
                            </view>
                        </view>

                        <!-- 预定茶叶 -->
                        <view class="mx-60rpx mb-50rpx">
                            <view class="text-32rpx leading-44rpx text-#303133">
                                <text class="mr-20rpx">预定茶叶</text>
                                <text class="text-26rpx leading-36rpx text-#909399">支持多选</text>
                            </view>
                            <view class="mt-28rpx">
                                <view class="grid grid-cols-3 gap-x-16rpx gap-y-16rpx">
                                    <view
                                        v-for="(item, index) in teaList" :key="index"
                                        class="text-28rpx leading-40rpx rounded-8rpx text-center py-14rpx"
                                        :class="selectedTea.includes(item.id) ? 'bg-#4C9F44 text-#fff' : 'bg-#F7F7F7 text-#606266'"
                                        @click="TeaRoom.handleToggleTea(item.id, item.name, item.tea_price)">
                                            <view>{{item.name}}</view>
                                            <view>￥{{item.tea_price}}</view>
                                    </view>
                                </view>
                            </view>
                        </view>

                        <!-- 茶具使用 -->
                        <view class="mx-60rpx mb-70rpx">
                            <view class="text-32rpx leading-44rpx text-#303133">茶具使用</view>
                            <view class="mt-28rpx flex items-center justify-between w-full">
                                <view class="flex items-center justify-between w-full">
                                    <view class="text-28rpx leading-40rpx text-#303133">茶具需求</view>
                                    <view>
                                        <wd-radio-group v-model="teaUsageValue" shape="dot" checked-color="#4C9F44" inline>
                                            <block v-for="(item, index) in teaUsageList" :key="index">
                                                <wd-radio :value="item.type">
                                                    <view class="text-[#303133] text-26rpx leading-36rpx mt-2rpx">{{item.name}}</view>
                                                </wd-radio>
                                            </block>
                                        </wd-radio-group>
                                    </view>
                                </view>
                            </view>
                        </view>

                        <view class="h-2rpx bg-#EFF0F2"></view>

                        <!-- 按钮 -->
                        <view class="mx-60rpx flex items-center justify-between py-40rpx">
                            <view class="">
                                <view class="text-24rpx leading-34rpx text-#303133">已选 {{selectedTea.length}} 项</view>
                                <view class="">
                                    <price-format color="#FF5951" :first-size="40" :second-size="40" :subscript-size="28" :price="totalSelectedTeaPrice"></price-format>
                                </view>
                            </view>
                            
                            <view class="flex items-center">
                                <view class="w-178rpx h-70rpx leading-70rpx text-center bg-#F6F7F8 text-#303133 rounded-8rpx mr-20rpx" @click="TeaRoom.handleResetTeaService">重置</view>
                                <view class="w-178rpx h-70rpx leading-70rpx text-center bg-#4C9F44 text-#fff rounded-8rpx" @click="TeaRoom.handleConfirmTeaService">确定</view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </wd-popup>

        <!-- 选择预定时间 -->
        <booking-time v-model="showBookTimePopup" :day="sevenDay" @selectedTime="TeaRoom.handleChooseReserveTime"></booking-time>

		<view>
			<navbar title="预约茶艺师" :leftArrow="false"></navbar>
		</view>

        <view>
            <!-- 茶艺师信息 -->
            <view class="flex items-center bg-white p-20rpx rounded-10rpx mb-20rpx mt-20rpx">
                <view class="mr-28rpx relative">
                    <wd-img width="200rpx" height="200rpx" :src="`${OSS}images/home/home_image5.png`"></wd-img>
                </view>
                <view class="">
                    <view class="font-bold text-[#303133] text-30rpx leading-42rpx mr-14rpx">
                        {{ info.name }}
                    </view>
                    <view class="flex items-center mt-18rpx">
                        <view class="mr-12rpx">
                            <view class="bg-#FEF1F0 text-#FF5951 w-144rpx h-40rpx rounded-6rpx text-center text-22rpx leading-40rpx">90后茶艺师</view>
                        </view>
                        <tea-specialist-level :level="TeaSpecialistLevelValue[info.teamasterLevel?.[0]?.level_name] || 'junior'"></tea-specialist-level>
                    </view>
                    <view class="font-400 text-22rpx leading-32rpx text-#6A6363 mt-30rpx">已预约 {{ info.reservation_num > 10 ? info.reservation_num + '+' : info.reservation_num }}</view>
                </view>
            </view>

            <!-- 服务方式 -->
            <view class="mt-20rpx bg-white px-30rpx py-34rpx">
                <view class="flex items-center justify-between">
                    <view class="font-bold text-32rpx leading-44rpx">服务方式</view>
                    <view class="bg-[#F0F6EF] h-60rpx rounded-20rpx flex items-center justify-between py-14rpx px-30rpx relative w-304rpx font-400 text-26rpx text-[#333]">
                        <view class="absolute left-30rpx top-1/2 -translate-y-1/2 z-2" :class="serviceTypeValue == 1 ? 'text-[#fff]' : ''"  @click="TeaRoom.handleChooseService(1)">到店服务</view>
                        <view class="absolute right-30rpx top-1/2 -translate-y-1/2 z-2" :class="serviceTypeValue == 2 ? 'text-[#fff]' : ''" @click="TeaRoom.handleChooseService(2)">上门服务</view>
                        <view class="swiper-service"></view>
                    </view>
                </view>

                <!-- 预定门店 -->
                <view class="flex items-center justify-between mt-48rpx" v-if="serviceTypeValue == 1"  @click="TeaRoom.handleToSChooseStore">
                    <view class="text-28rpx leading-40rpx">预定店</view>
                    <view class="flex items-center">
                        <view class="text-28rpx leading-40rpx text-#303133">{{ teaHouse.name || '请选择茶馆' }}</view>
                        <view>
                            <wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
                        </view>
                    </view>
                </view>

                <!-- 上门服务地址 -->
                <view class="flex items-center justify-between mt-48rpx" v-if="serviceTypeValue == 2" @click="TeaRoom.handleToAddress">
                    <view class="text-28rpx leading-40rpx">地址</view>
                    <view class="flex items-center">
                        <view class="text-28rpx leading-40rpx text-#303133 w-430rpx line-1 text-right">
                            <template v-if="address && address.id > 0">
                                {{address.contact}} {{ address.telephone }} {{ address.province }}{{ address.city }}{{ address.district }}{{ address.address }}
                            </template>
                            <template v-else>
                                请选择地址
                            </template>
                            </view>
                        <view>
                            <wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 预定时间 -->
            <view class="bg-white py-26rpx px-30rpx mt-20rpx" @click="showBookTimePopup = true">
                <view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">预定时间</view>
                <view class="flex items-center justify-between">
                    <view class="text-[26rpx] text-[#606266] leading-36rpx">{{ sevenDay.minimum_time }}小时起订</view>
                    <view class="flex items-center">
                        <view class="text-[28rpx] text-[#909399] leading-40rpx w-430rpx line-1 text-right">
                            <template v-if="reserveTime.length > 0">
                                {{ reserveTime[0] }} {{  reserveTime[1].join(',')  }}
                            </template>
                            <template v-else>
                                请选择
                            </template>
                        </view>
                        <view>
                            <wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 茶艺服务 -->
            <view class="bg-white py-26rpx px-30rpx mt-20rpx" @click="showTeaServicePopup = true">
                <view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">茶艺服务</view>
                <view class="flex items-center justify-between">
                    <view class="text-[26rpx] text-[#606266] leading-36rpx">茶艺服务</view>
                    <view class="flex items-center">
                        <view class="text-[28rpx] text-[#909399] leading-40rpx w-430rpx line-1 text-right">
                            <template v-if="selectedTea.length > 0">
                                {{ servicePeople }}人/{{  selectedTeaTxt.join(',')  }}
                            </template>
                            <template v-else>
                                请选择
                            </template>
                        </view>
                        <view>
                            <wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 订单备注 -->
            <view class="bg-white py-26rpx px-30rpx mt-20rpx">
                <view class="text-32rpx leading-44rpx text-#303133 mb-28rpx">
                    <text class="mr-20rpx">订单备注 </text>
                    <text class="text-26rpx leading-36rpx text-#909399">(选填)</text>
                </view>
                <wd-textarea placeholder="有想说的可以在这里写哦！" v-model="orderRemarks" custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA]' custom-textarea-class='!bg-[#F8F9FA]' />
            </view>

            <!-- 优惠券 -->
            <view class="bg-white py-26rpx px-30rpx mt-20rpx" @click="TeaRoom.handleToCoupon(CouponType.Discount)">
                <view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">优惠券</view>
                <view class="flex items-center justify-between">
                    <view class="text-[26rpx] text-[#606266] leading-36rpx">优惠券</view>
                    <view class="flex items-center">
                        <view class="text-[28rpx] text-[#909399] leading-40rpx w-430rpx line-1 text-right">
                            <template v-if="selectedCoupon?.id > 0">
                                {{ selectedCoupon.name  }}
                            </template>
                            <template v-else>
                                请选择
                            </template>
                        </view>
                        <view>
                            <wd-icon name="chevron-right" size="32rpx" color="#909399"></wd-icon>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 支付方式 -->
            <!-- <view class="bg-white py-26rpx px-30rpx mt-20rpx">
                <pay hide-store-balance @pay="TeaRoom.handleGetPayValue"></pay>
            </view> -->

            <view class="fixed left-0 right-0 bottom-0 z-2 bg-[#fff]"
                :style="{ height: '140rpx' }">
                <view class="mt-22rpx flex justify-between items-center">
                    <view class="flex items-center ml-60rpx"  @click="showCostPopup = true">
                        <view class="text-24rpx text-[#303133] leading-34rpx w-72rpx">合计：</view>
                        <view class="flex items-center h-56rpx mr-16rpx">
                            <price-format color="#FF5951" :first-size="40" :second-size="40" :subscript-size="28" :price="bill.total"></price-format>
                            <view class="ml-20rpx" v-if="isGroupBuying">
                                <price-format color="#909399" :first-size="26" :second-size="26" :subscript-size="26" :price="23.02" lineThrough></price-format>
                            </view>
                        </view>
                        <view class="flex items-center text-[#4C9F44]">
                            <view class="text-24rpx mr-10rpx">费用明细</view>
                            <wd-icon :name="showCostPopup ? 'arrow-up' : 'arrow-down'" size="24rpx" color="#4C9F44"></wd-icon>
                        </view>
                    </view>
                    <view class="mr-30rpx">
                        <wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx' @click="TeaRoom.handleSubmitOrder">立即预定</wd-button>
                    </view>
                </view>
            </view>
	    </view>
    </view>
</template>

<script lang="ts" setup>
    import { toast } from '@/utils/toast'
    import { router, toTimes, toPlus } from '@/utils/tools'
    import PriceFormat from '@/components/PriceFormat.vue'
    import { ReserveServiceCategory, OrderType } from '@/utils/order'
    import { PayList, PayCategory, PayValue } from '@/utils/pay'
    import Pay from '@/components/Pay.vue'
    import { getTeaSpecialistDetails, getNext7Days, getTeaTypeList, createTeaSpecialistOrder } from '@/api/tea'
    import type { ITeaSpecialistDetailsFields, ITeaSpecialistFuture7DaysResult, ITeaTypeListResult } from '@/api/types/tea'
	import { TeaSpecialistLevelValue } from '@/utils/teaSpecialist'
    import type { IUserAddressListResult } from '@/api/types/user'
    import BookingTime from '@/components/BookingTime.vue'
    import { CouponType } from '@/utils/coupon'

	const OSS = inject('OSS')

    // 服务方式
    const serviceType = ref<Array<any>>([
        {type: 1, name: '到店服务'},
        {type: 2, name: '上门服务'},
    ])
    const serviceTypeValue =  ref<number>(1) 

    // 选择茶馆
    const teaHouse = ref<{id: number, name: string}>({id: 0, name: ''})

    // 选择预定时间
    const showBookTimePopup = ref<boolean>(false)
    const sevenDay = reactive<ITeaSpecialistFuture7DaysResult>({
        minimum_time: 0,
        time: []
    })
    const reserveTime = ref<Array<any>>([])

    // 上门服务选择的地址
    const address = ref<IUserAddressListResult>({
        id: 0,
        contact: '',
        telephone: '',
        province: '',
        province_id: 0,
        city: '',
        city_id: 0,
        district: '',
        district_id: 0,
        address: '',
        is_default: 0,
    })

    // 茶艺服务
    const teaService = ref<{id: number, name: string}>({id: 0, name: ''})
    const showTeaServicePopup = ref<boolean>(false) // 显示门店列表弹窗
    const servicePeople = ref<number>(1) // 服务人数
    const teaList = ref<ITeaTypeListResult[]>([]) // 茶叶列表
    const selectedTea = ref<Array<any>>([]) // 选择的茶叶
    const selectedTeaTxt = ref<Array<any>>([]) // 选择的茶叶文本
    const selectedTeaPrice = ref<Array<any>>([]) // 选择的茶叶价格
    const totalSelectedTeaPrice = ref<string>('') // 选择的茶叶总价

    // 茶具使用
    const teaUsageList = ref<Array<any>>([
        {type: 1, name: '客户自备'},
        {type: 2, name: '茶艺师提供'},
    ])
    const teaUsageValue =  ref<number>(1) 
    
    // 订单备注
    const orderRemarks = ref<string>('')

    // 支付方式
    const pay = ref<number>(0)

    const html: string = '<p>这里是富文本内容，需要后台传递</p>'
    const isGroupBuying: boolean = false // 是否是团购套餐

    // 费用明细相关
    const showCostPopup = ref<boolean>(false) // 费用明细popup

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

    // 选择的优惠券
    const selectedCoupon = ref<{id: number, name: string}>({id: 0, name: ''})
    const selectCouponId = ref<number>(0)

    // 计算费用明细 service(服务费) travel(车马费) teaServiceFee(茶艺服务) coupon(优惠券)
    const bill = ref<{service: any, travel: any, teaService: any, coupon: number, total: number}>({
        service: {
            total: 0,
            unitPrice: 0,
            num: 0,
            startTime: 0,
            endTime: 0
        },
        travel: {
            total: 0,
            unitPrice: 0,
            num: 0
        },
        teaService: {
            total: 0,
            tea: '',
            teaTotal: 0,
            cup: 0,
            peopleNum: 0
        },
        coupon: 0,
        total: 0
    })

	onLoad(async (args) => {
        if (args.id) {
            teaSpecialistId.value = Number(args.id)

            const res = await getTeaSpecialistDetails({
                id: args.id,
                longitude: 0,
                latitude: 0,
                user_id: 0
            })
            // 将返回的数据合并到 reactive 对象中
            Object.assign(info, res.teamaster || {})
            if (info.teamasterlabel) {
                info.teamasterlabel.map(item => {
                    if (item.label_name == '90后茶艺师') {
                        is90.value = true
                    }
                })

                bill.value.travel = {
                    total: toTimes(info.fare_price, info.distance),
                    unitPrice: info.fare_price,
                    num: info.distance
                }
            }
        }

        // 初始化数据
        TeaRoom.handleInit()
	})

    const TeaRoom = {   
        handleInit: async () => {
            // 获取未来7天时间段
            const next7 = await getNext7Days()
            Object.assign(sevenDay, next7)

            const tea = await getTeaTypeList()
            teaList.value = tea as ITeaTypeListResult[]
            console.log("🚀 ~ teaList.value:", teaList.value)
        },

        /**
         * 选择服务方式
         */
        handleChooseService: (type: number) => {
            serviceTypeValue.value = type
            const swiperService = document.querySelector('.swiper-service') as HTMLElement
            if (type == 1) {
                swiperService.style.transform = 'translateY(-50%) translateX(0)'
            } else if (type == 2) {
                swiperService.style.transform = 'translateY(-50%) translateX(76px)'
            }
        },

        /**
         * 切换预定茶叶选择
         */
        handleToggleTea: (id: number, name: string, price: number) => {
            const index = selectedTea.value.indexOf(id)
            if (index > -1) {
                // 已选择，取消选择
                selectedTea.value.splice(index, 1)
                selectedTeaTxt.value.splice(index, 1)
                selectedTeaPrice.value.splice(index, 1)
            } else {
                // 未选择，添加选择
                selectedTea.value.push(id)
                selectedTeaTxt.value.push(name)
                selectedTeaPrice.value.push(price)
            }

            totalSelectedTeaPrice.value = toPlus(selectedTeaPrice.value)
            bill.value.teaService.total = Number(totalSelectedTeaPrice.value) // 更新茶艺服务费用
        },

        /**
         * 选择门店
         */
        handleToSChooseStore: () => {
            uni.$on('chooseTeaHouse', params => {
                uni.$off('chooseTeaHouse')
                teaHouse.value = params
            })
            router.navigateTo('/bundle_b/pages/tea-specialist/store?from=reserve')
        }, 

        /**
         * 选择地址
         */
        handleToAddress: () => {
            uni.$on('chooseAddress', params => {
                uni.$off('chooseAddress')
                address.value = params
            })
            router.navigateTo('/bundle_b/pages/tea-specialist/address/list?from=reserve')
        },
        
        /**
         * 选中预定时间
         */
        handleChooseReserveTime: (params: any) => {
            reserveTime.value = params

            bill.value.service = {
                total: toTimes(info.price, params[3]),
                unitPrice: info.price,
                num: params[3],
                startTime: params[2][0],
                endTime: params[2][params[2].length - 1],
            },

            console.log("🚀 ~ bill.value:", bill.value)
        },
        
        /**
         * 跳转优惠券页面
         */
        handleToCoupon(type) {
            if (reserveTime.value.length == 0) {
                toast.info('请选择预定时间')
                return
            }

            uni.$off('chooseCoupon');
            uni.$on('chooseCoupon', params => {
                uni.$off('chooseCoupon')
                // console.log("🚀 ~ params:", params)
                // selectedCoupon.value = {id: params.coupon.user_coupon_id, name: `${params.coupon.name}减${params.coupon.coupon_price}` }
                // bill.value.coupon = params.coupon.coupon_price
                selectedCoupon.value = {id: params.coupon.id, name: `${params.coupon.name}减${params.coupon.coupon_price}` }
                bill.value.coupon = params.coupon.coupon_price
                selectCouponId.value = params.coupon.id // 这里的ID是在数据表自增的ID，保存下来是为了回显列表的,没有其他作用
            })

            // 获取预定了几个小时
            const count = bill.value.service.num
            uni.navigateTo({ url: `/bundle/coupon/coupon?id=${teaSpecialistId.value}&numbers=${count}&type=${type}` })
            // router.navigateTo(`/bundle/coupon/coupon?id=${id.value}&numbers=${count}&type=${type}&storeId=${storeId.value}&couponId=${selectCouponId.value}&groupCouponId=${selectGroupCouponId.value}`)
        },

        /**
         * 重置差茶艺服务
         */
        handleResetTeaService: () => {
            servicePeople.value = 1
            selectedTea.value = []
            teaUsageValue.value = 1
        },

        /**
         * 确认茶艺服务
         */
        handleConfirmTeaService: () => {
            if (selectedTea.value.length == 0) {
                toast.info('请选择预定茶叶')
                return
            }
            teaService.value = { id: 1, name: '茶艺服务' }
            showTeaServicePopup.value = false
        },

        /**
         * 提交订单数据
         */
        handleSubmitOrder: async () => {
            if (serviceTypeValue.value == 1 && teaHouse.value.id == 0) {
                toast.info('请选择门店地址')
                return
            }

            if (serviceTypeValue.value == 2 && address.value.id == 0) {
                toast.info('请选择上门服务地址')
                return
            }

            if (bill.value.service.num == 0) {
                toast.info('请选择预定时间')
                return
            }

            if (selectedTea.value.length == 0) {
                toast.info('请选择茶艺时服务')
                return
            }

            const params = {
                teamaster_id: info.id,
                address_id: address.value.id,
                start_time: bill.value.service.startTime,
                end_time: bill.value.service.endTime,
                nums: servicePeople.value,
                tea_id: selectedTea.value.join(','),
                service_type: serviceTypeValue.value,
                store_id: teaHouse.value.id,
                latitude: uni.getStorageSync('latitude') || 0,
                longitude: uni.getStorageSync('longitude') || 0,
                remark: orderRemarks.value,
                coupon_id: selectedCoupon.value.id || 0,
                hours:  bill.value.service.num
            }

            try {
                const res = await createTeaSpecialistOrder(params)

                uni.$on('payment', params => {
                    console.log("🚀 ~ params:", params)
                    setTimeout(() => {
                        uni.$off("payment")
                        if (params.result) {
                            uni.redirectTo({
                                url: `/pages/notice/reserve?type=teaSpecialist&orderId=${params.orderId}`
                            })
                        } else {
                            uni.redirectTo({
                                url: '/bundle/order/tea-specialist/order-list'
                            })
                        }
                    }, 1000)
                })

                setTimeout(() => {
                    router.navigateTo(`/pages/cashier/cashier?from=${OrderType.TeaSpecialist}&orderId=${res.id}&teaSpecialistId=${info.id}&teaSpecialistName=${info.name}`)
                }, 800)
            } catch (error) {
                toast.info('订单提交失败，请稍后重试')
                return
            }
        }
    }

    const billTotal = computed(() => {
        const s = Number(bill.value.service.total) || 0
        const t = Number(bill.value.travel.total) || 0
        const ts = Number(bill.value.teaService.total) || 0

        let total = Number(toPlus(s, t, ts))
        if (bill.value.coupon > 0 ) {
            total + bill.value.coupon
            return total - bill.value.coupon
        }
        return total
    })

    watch(billTotal, (val) => {
        bill.value.total = val
    })
</script>

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

    .swiper {
        :deep() {
            .wd-swiper-nav__item--dots-bar {
                width: 56rpx !important;
                height: 6rpx !important;
                border-radius: 3rpx !important;
            }

            .is-active {
                background-color: #2B9F93 !important;
            }
        }
    }

    .pay {
        :deep() {
            .wd-radio {
                margin-top: 0 !important;
            }
        }
    }

    .swiper-service {
        content: " ";
        display: block;
        background-color: #4C9F44;
        width: 152rpx;
        height: 56rpx;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 20rpx;
        transition: all 0.3s ease;
        z-index: 0;
    }
</style>