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

<template>
    <view class="pb-254rpx">
        <!-- 一键续订 -->
        <wd-popup v-model="showRenewPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
            <view class="relative pb-26rpx">
                <view class="absolute top-18rpx right-30rpx" @click="showRenewPopup = 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>
                <view>
                    <scroll-view scroll-y class="h-[660rpx] pb-20rpx">
                        <view class="mx-60rpx">
                            <view class="text-[#01000D] text-32rpx leading-44rpx">续订时间</view>
                            <view class="grid grid-cols-4 gap-x-20rpx gap-y-20rpx mt-28rpx">
                                <view v-for="item in timeList" :key="item.id"
                                    class="h-72rpx rounded-16rpx flex items-center justify-center text-28rpx leading-40rpx"
                                    :class="[item.id == selectedRenewTime ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F7F7F7] text-[#606266]']"
                                    @click="OrderDetail.handleRenewTime(item.id)">
                                    {{ item.time }}
                                </view>
                            </view>
                        </view>

                        <view class="mx-60rpx mt-50rpx">
                            <view class="text-[#01000D] text-32rpx leading-44rpx">续订茶叶
                                <text class="text-26rpx leading-36rpx text-[#909399] ml-20rpx">支持多选</text>
                            </view>
                            <view class="grid grid-cols-3 gap-x-20rpx gap-y-20rpx mt-28rpx">
                                <view v-for="item in teaList" :key="item.id"
                                    class="h-110rpx rounded-16rpx flex flex-col items-center justify-center text-28rpx leading-40rpx"
                                    :class="selectedRenewTea.includes(item.id) ? 'bg-[#4C9F44] text-[#fff]' : 'bg-[#F7F7F7] text-[#606266]'"
                                    @click="OrderDetail.handleToggleRenewTea(item.id)">
                                    <view>{{ item.name }}</view>
                                    <view>{{ item.price }}</view>
                                </view>
                            </view>
                        </view>
                    </scroll-view>

                    <view>
                        <wd-gap height="2rpx" bg-color="#EFF0F2"></wd-gap>
                    </view>

                    <view class="flex justify-between items-center mt-50rpx mx-60rpx">
                        <view class="flex items-center">
                            <view class="text-24rpx text-[#303133] leading-34rpx">合计：</view>
                            <view class="flex items-center h-56rpx mr-16rpx">
                                <price-format color="#FF5951" :first-size="40" :second-size="40" :subscript-size="28" :price="renewCostPrice"></price-format>
                            </view>
                        </view>
                        <view>
                            <wd-button custom-class='!bg-[#4C9F44] !rounded-8rpx !h-70rpx' @click="OrderDetail.handleNowRenew">立即预定</wd-button>
                        </view>
                    </view>
                </view>
            </view>
        </wd-popup>

        <!-- 续订成功 -->
        <wd-popup v-model="showRenewSuccessPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
            <view class="relative pt-64rpx pb-74rpx">
                <view class="flex justify-center items-center">
                    <view class="bg-[#4C9F44] w-280rpx rounded-280rpx">
                        <wd-img width="280rpx" height="280rpx" :src="`${OSS}images/reserve_room/reserve_room_image7.png`"/>
                    </view>
                </view>
                <view class="text-[#303133] text-36rpx leading-46rpx text-center mt-48rpx">茶艺师续订成功</view>
                <view class="text-[#9CA3AF] text-28rpx leading-44rpx mt-16rpx text-center">可以刷新页面查看预约时间</view>
                <view class="w-630rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] rounded-8rpx text-[#fff] mt-174rpx mx-auto" @click="showRenewSuccessPopup = false">好的</view>
            </view>
        </wd-popup>

        <!-- 退款规则 -->
        <wd-popup v-model="showRefundRulePopup" custom-class="rounded-16rpx" lock-scroll>
            <view class="w-592rpx py-52rpx">
                <view class="text-36rpx text-[#303133] leading-50rpx text-center">确定申请退款吗？</view>
                <view class="font-400 text-32rpx text-[#303133] leading-44rpx text-center mt-40rpx">退款按照如下规则，请谨慎操作。</view>
                <view class="font-400 text-32rpx text-[#303133] leading-44rpx px-54rpx mt-18rpx">
                    <view>1）茶艺师未出发，100%退款；</view>
                    <view>2）茶艺师已出发未到达目的地，不退车马费,并且支付茶艺师30%服务费。</view>
                </view>

                <view class="mt-54rpx text-32rpx leading-44rpx flex items-center justify-center leading-80rpx text-center">
                    <view class="w-240rpx h-80rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx" @click="showRefundRulePopup = false">取消</view>
                    <view class="w-240rpx h-80rpx bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="OrderDetail.handleConfirmRefund">确定退款</view>
                </view>
            </view>
        </wd-popup>

        <!-- 取消订单 -->
        <wd-message-box selector="wd-message-box-slot"></wd-message-box>

        <!-- TODO 费用详情-暂时不要 -->
        <!-- <wd-popup v-model="showCostPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
            <view class="relative pb-30rpx">
                <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 pt-50rpx pb-40rpx">费用明细</view>
                <view>
                    <view class="px-30rpx">
                        <view class="flex justify-between items-center">
                            <view class="font-bold text-30rpx leading-42rpx text-[#303133]">服务费</view>
                            <view class="font-bold text-30rpx leading-42rpx text-[#303133] flex items-center">
                                ￥640.00
                            </view>
                        </view>
                        <view class="rounded-16rpx py-20rpx">
                            <view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
                                <view>服务费（￥160元/小时）</view>
                                <view>x4</view>
                            </view>
                        </view>
                    </view>

                    <view class="px-30rpx">
                        <view class="flex justify-between items-center">
                            <view class="font-bold text-30rpx leading-42rpx text-[#303133]">车马费</view>
                            <view class="font-bold text-30rpx leading-42rpx text-[#303133] flex items-center">
                                ￥640.00
                            </view>
                        </view>
                        <view class="rounded-16rpx py-20rpx">
                            <view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
                                <view>车马费（￥3.00元/公里）</view>
                                <view>x4</view>
                            </view>
                        </view>
                    </view>

                    <view class="px-30rpx mb-20rpx">
                        <view class="flex justify-between items-center">
                            <view class="font-bold text-30rpx leading-42rpx text-[#303133]">茶艺服务</view>
                            <view class="font-bold text-30rpx leading-42rpx text-[#303133] flex items-center">
                                ￥640.00
                            </view>
                        </view>
                        <view class="rounded-16rpx py-20rpx">
                            <view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
                                <view>红茶/绿茶/福鼎白茶/铁观音</view>
                                <view>￥158</view>
                            </view>
                            <view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
                                <view>茶具使用</view>
                                <view>￥158</view>
                            </view>
                        </view>
                    </view>

                    <view class="px-30rpx">
                        <view class="flex justify-between items-center">
                            <view class="font-bold text-30rpx leading-42rpx text-[#303133]">优惠</view>
                            <view class="font-bold text-30rpx leading-42rpx text-[#303133] flex items-center text-[#4C9F44]">
                                -￥148.00
                            </view>
                        </view>
                        <view class="rounded-16rpx pt-20rpx">
                            <view class="font-400 text-28rpx leading-40rpx text-[#303133] flex items-center justify-between mb-16rpx">
                                <view>优惠券</view>
                                <view>-￥20</view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="mx-60rpx mt-30rpx">
                    <wd-gap height="2rpx" bg-color="#F6F7F9"></wd-gap>
                </view>
                <view class="mx-60rpx text-30rpx text-[#303133] leading-42rpx flex items-center justify-between mt-30rpx">
                    <view>实付金额</view>
                    <view>￥698.90</view>
                </view>
            </view>
        </wd-popup> -->

        <!-- 用户订单备注内容 -->
		<wd-popup v-model="showOrderMarksPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
            <view class="relative pb-26rpx">
                <view class="absolute top-18rpx right-30rpx" @click="showOrderMarksPopup = 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>
                <view class="px-32rpx">
                    <wd-textarea v-model="order.remark" readonly
                    custom-class='!rounded-18rpx !border-2rpx !border-[#EFF0EF] !bg-[#F8F9FA] !mt-20rpx'
                    custom-textarea-class='!bg-[#F8F9FA] !h-500rpx'  />
                </view>
            </view>
        </wd-popup>

        <!-- 导航栏 -->
        <navbar :title="title" custom-class='!bg-[#F6F7F8]' :leftArrow="false"></navbar>

        <view class="text-[#909399] text-26rpx leading-36rpx mb-40rpx">
            <view class="flex items-center justify-center" v-if="(orderStatus == TeaSpecialistOrderStatus.Unpaid || orderStatus == TeaSpecialistOrderStatus.Pending) && order.timekeeping > 0">
                <view class="flex items-center mr-6rpx">
                    <wd-img width="36rpx" height="36rpx" :src="`${OSS}icon/icon_time.png`"/>
                </view>
                <view class="flex items-center text-26rpx leading-36rpx text-[#909399]">
                    <view>还剩</view>
                    <view class="mx-6rpx">
                        <wd-count-down :time="order.timekeeping" custom-class="!text-[#FF5951]"	/>
                    </view>
                    <view>订单自动取消</view>
                </view>
            </view>
            <view class="ml-80rpx" v-if="orderStatus == TeaSpecialistOrderStatus.Completed">感谢您的选择，期待再续茶香！</view>
            <view v-if="orderStatus >= TeaSpecialistOrderStatus.SpecialistRefund" class="text-center mt-14rpx">
                <view class="text-40rpx text-[#303133] leading-56rpx">
                    <view>退款成功￥{{ order.refund_price }}</view>
                </view>
                <view class="text-28rpx text-[#606266] leading-54rpx mt-20rpx">谢谢您的信任，我们一定会做的更好</view>
                <view class="text-24rpx text-[#606266] leading-34rpx mt-12rpx">{{ order.refund_time }}</view>
            </view>
        </view>

        <!-- 信息模块 -->
        <view class="mx-30rpx coupon-bg" v-if="orderStatus < TeaSpecialistOrderStatus.SpecialistRefund">
            <view class="flex items-center px-30rpx pt-30rpx">
                <view class="mr-30rpx">
                    <wd-img width="190rpx" height="190rpx" :src="order.image" mode="scaleToFill" @click="OrderDetail.handlePreviewImage(order.image, order.image_arr)"></wd-img>
                </view>
                <view class="flex-1">
                    <view class="flex flex-col items-end shrink-0 text-[#FF5951]">
                        <text v-if="orderStatus === TeaSpecialistOrderStatus.Unpaid" class="text-28rpx mb-12rpx">待付款</text>
                        <text v-else-if="orderStatus === TeaSpecialistOrderStatus.Pending" class="text-28rpx mb-12rpx">待接单</text>
                        <text v-else-if="orderStatus >= TeaSpecialistOrderStatus.SpecialistRefund && orderStatus <= TeaSpecialistOrderStatus.CustomerRefundAfterArrive" class="text-28rpx mb-12rpx text-[#606266]">已退款</text>
                        <text v-else-if="orderStatus === TeaSpecialistOrderStatus.Accepted" class="text-28rpx mb-12rpx">已预约</text>
                        <text v-else-if="orderStatus === TeaSpecialistOrderStatus.Departed" class="text-28rpx mb-12rpx">已出发</text>
                        <text v-else-if="orderStatus === TeaSpecialistOrderStatus.Arrived" class="text-28rpx mb-12rpx">服务中</text>
                        <text v-else-if="orderStatus === TeaSpecialistOrderStatus.Completed" class="text-28rpx mb-12rpx">完成</text>
                        <text v-else-if="orderStatus === TeaSpecialistOrderStatus.Cancelled" class="text-28rpx mb-12rpx">订单取消</text>
                    </view>
                    <view class="flex justify-between items-center">
                        <view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx line-1 w-280rpx">
                            {{ order.title }}
                        </view>
                        <view class="text-26rpx leading-36rpx text-[#909399]">￥{{ order.server_all_price }}</view>
                    </view>
                    <view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
                        <view>￥{{ order.server_price }}/小时</view>
                        <view>x{{ order.hours }}</view>
                    </view>
                    <view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
                        <view class="w-300rpx line-1">车马费（￥{{ order.mileage_price }}元/公里）</view>
                        <view>￥{{ order.mileage_server_price }}</view>
                    </view>
                    <view class="text-[#606266] text-right mt-26rpx" v-if="orderStatus !== TeaSpecialistOrderStatus.Pending">
                        <text class="text-24rpx leading-34rpx mr-12rpx">实付</text>
                        <text class="tetx-32rpx leading-36rpx">￥{{ order.order_amount }}</text>
                    </view>
                </view>
            </view>

            <view class="mt-70rpx relative">
                <view class="flex items-center absolute right-0 top-10rpx right-44rpx" v-if="order.is_renewal">
                    <wd-img :src="`${OSS}icon/icon_renew.png`" width="40rpx" height="40rpx"></wd-img>
                    <view class="font-bold text-28rpx leading-40rpx text-[#4C9F44] ml-8px">订单已续订</view>
                </view>
                <view
                    v-if="orderStatus === TeaSpecialistOrderStatus.Arrived"
                    class="renewOrder absolute right-0 bottom-36rpx w-170rpx h-56rpx text-center leading-56rpx font-bold text-28rpx text-[#fff] bg-[#4C9F44]"
                    @click="showRenewPopup = true">一键续订</view>

                <view class="text-30rpx leading-42rpx text-[#303133] px-30rpx">预约信息</view>
                <view class="font-500 text-26rpx leading-48rpx text-[#606266] mt-20rpx pb-28rpx">
                    <view class="mb-20rpx px-30rpx">预约时间：{{ order.day_time }} {{ order.start_time }} - {{ order.end_time }}</view>
                    <view class="flex justify-between items-center pl-30rpx">
                        <view>预约时长：{{ order.hours }}小时</view>
                    </view>
                </view>

                <view class="font-500 text-26rpx leading-48rpx text-[#606266] mt-20rpx pb-28rpx" v-if="orderStatus == TeaSpecialistOrderStatus.Completed">
                    <view class="mb-20rpx px-30rpx">服务时间：{{ order.start_time }} - {{ order.end_time }}</view>
                    <view class="flex justify-between items-center pl-30rpx">
                        <view>服务时长：{{ order.hours }}小时</view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 退款下单独处理一个信息模块 -->
        <view class="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-20rpx" v-if="orderStatus >= TeaSpecialistOrderStatus.SpecialistRefund">
            <view class="flex items-center pt-30rpx">
                <view class="mr-30rpx">
                    <wd-img width="190rpx" height="190rpx" :src="order.image" mode="scaleToFill"></wd-img>
                </view>
                <view class="flex-1">
                    <view class="flex justify-between items-center">
                        <view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx line-1 w-280rpx">
                            {{ order.title }}
                        </view>
                        <view class="text-26rpx leading-36rpx text-[#909399]">￥{{ order.server_all_price }}</view>
                    </view>
                    <view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
                        <view>￥{{ order.server_price }}/小时</view>
                        <view>x{{ order.hours }}</view>
                    </view>
                    <view class="flex justify-between items-center text-26rpx leading-36rpx text-[#909399] mt-18rpx">
                        <view class="w-300rpx line-1">车马费（￥{{ order.mileage_price }}元/公里）</view>
                        <view>￥{{ order.mileage_server_price }}</view>
                    </view>
                    <view class="text-[#606266] text-right mt-26rpx" v-if="orderStatus !== TeaSpecialistOrderStatus.Pending">
                        <text class="text-24rpx leading-34rpx mr-12rpx">实付</text>
                        <text class="tetx-32rpx leading-36rpx">￥{{ order.order_amount }}</text>
                        <!-- <wd-icon name="chevron-right" size="32rpx"></wd-icon> -->
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 联系官方客服 -->
        <view class="px-30rpx mx-30rpx mt-20rpx rounded-16rpx h-90rpx flex justify-between items-center border-[2rpx] border-[#4C9F44] bg-[#F2FAF4]" @click="OrderDetail.handleContactService">
            <view class="font-bold text-26rpx leading-48rpx text-[#4C9F44]">服务遇到问题或需要帮助？</view>
            <view class="flex items-center bg-[#4C9F44] rounded-8rpx px-18rpx py-8rpx">
                <view class="text-24rpx leading-34rpx text-[#fff] ml-6rpx">联系客服</view>
            </view>
        </view>

        <!-- 茶艺服务 -->
        <view class="bg-white rounded-16rpx px-30rpx pb-32rpx mx-30rpx mt-20rpx" v-if="orderStatus < TeaSpecialistOrderStatus.SpecialistRefund">
            <view class="pt-32rpx text-[#303133] text-32rpx leading-44rpx">茶艺服务</view>
            <view>
                <view class="text-28rpx leading-40rpx flex items-center mt-22rpx">
                    <view class="text-[#606266] mr-54rpx w-120rpx whitespace-nowrap">服务人数</view>
                    <view class="text-[#303133]">{{ order.server_number }}人</view>
                </view>

                <view class="text-28rpx leading-40rpx flex items-center mt-22rpx">
                    <view class="text-[#606266] mr-54rpx w-120rpx whitespace-nowrap">预定茶叶</view>
                    <view class="text-[#303133]">{{ order.leaf_name }}</view>
                </view>

                <view class="text-28rpx leading-40rpx flex items-center mt-22rpx">
                    <view class="text-[#606266] mr-54rpx w-120rpx whitespace-nowrap">茶叶费</view>
                    <view class="text-[#303133]">{{ order.tea_price }}</view>
                </view>

                <view class="text-28rpx leading-40rpx flex items-center mt-22rpx">
                    <view class="text-[#606266] mr-54rpx w-120rpx whitespace-nowrap">茶具使用</view>
                    <view class="text-[#303133]">{{ order.is_teacup == 1 ? '茶艺师提供' : '客户自备' }}</view>
                </view>

                <view class="text-28rpx leading-40rpx flex items-center mt-22rpx">
                    <view class="text-[#606266] mr-54rpx w-120rpx whitespace-nowrap">茶具费</view>
                    <view class="text-[#303133]">{{ order.teacup_price }}</view>
                </view>
            </view>
            <view class="mt-32rpx" v-if="order.is_renewal">
                <view class="renew-border"></view>
                <view class="mt-22rpx">
                    <view class="font-bold text-28rpx leading-40rpx text-[#4C9F44]">续订信息</view>
                    <view class="mt-16rpx">
                        <view class="text-28rpx leading-40rpx text-[#606266] flex items-center">
                            <view class="mr-50rpx">续订时长</view>
                            <view>{{ order.renew_hour }}小时</view>
                        </view>

                        <view class="text-28rpx leading-40rpx text-[#606266] flex items-center mt-18rpx">
                            <view class="mr-50rpx">续订金额</view>
                            <view>{{ order.renew_price }}</view>
                        </view>

                        <view class="text-28rpx leading-40rpx text-[#606266] flex items-center mt-18rpx">
                            <view class="mr-50rpx">续订茶叶金额</view>
                            <view>{{ order.renew_tea_price }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="bg-white px-30rpx mx-30rpx mt-20rpx rounded-16rpx h-80rpx flex justify-between items-center" v-if="(orderStatus === TeaSpecialistOrderStatus.Accepted || orderStatus === TeaSpecialistOrderStatus.Arrived) && orderStatus < TeaSpecialistOrderStatus.SpecialistRefund">
            <view class="font-500 text-24rpx leading-48rpx text-[#909399]">想问问茶艺师到哪里了？</view>
            <view class="flex items-center" @click="OrderDetail.handleCall">
                <wd-img :src="`${OSS}icon/icon_phone2.png`" width="34rpx" height="34rpx"></wd-img>
                <view class="text-26rpx leading-36rpx text-[#4C9F44] ml-6rpx">联系茶艺师</view>
            </view>
        </view>

        <!-- TODO 订单备注有内容在显示 -->
        <view class="bg-[#FFFDF7] px-30rpx py-20rpx rounded-16rpx mt-20rpx mx-30rpx" @click="showOrderMarksPopup = true" v-if="order.remark && orderStatus < TeaSpecialistOrderStatus.SpecialistRefund">
            <view class="flex items-center">
                <wd-img :src="`${OSS}icon/icon_tips2.png`" width="40rpx" height="40rpx"></wd-img>
                <view class="ml-12rpx">订单备注</view>
            </view>
            <view class="flex items-start mt-22rpx">
                <text class="text-28rpx leading-40rpx text-[#606266]">备注信息</text>
                <text class="text-28rpx text-[#303133] ml-50rpx line-2 w-450rpx">{{ order.remark }}</text>
            </view>
        </view>

        <!-- 服务方式 -->
        <view class="bg-white rounded-16rpx px-30rpx pb-32rpx mx-30rpx mt-20rpx" v-if="orderStatus < TeaSpecialistOrderStatus.SpecialistRefund">
            <view class="pt-32rpx text-[#303133] text-32rpx leading-44rpx">服务方式</view>
            <view>
                <view class="flex justify-between items-center relative">
                    <view>
                        <view class="text-28rpx leading-40rpx flex items-center mt-22rpx">
                            <view class="text-[#606266] mr-54rpx">服务方式</view>
                            <view class="text-[#303133]">{{ order.server_type == 1 ? '到店服务' : '上门服务'}}</view>
                        </view>
                        <view class="text-28rpx leading-40rpx flex items-center mt-22rpx">
                            <view class="text-[#606266] mr-54rpx">{{ order.server_type == 1 ? '服务门店' : '服务地址'}}</view>
                            <view class="text-[#303133] line-1 w-300rpx">{{ order.address }}</view>
                        </view>
                    </view>
                    <view class="flex absolute top-1/2 right-0 -translate-y-1/2">
                        <view class="text-center mr-20rpx" @click="OrderDetail.handleOpenMap">
                            <wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_nav.png`"/>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 订单信息 -->
        <view class="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-20rpx" v-if="orderStatus < TeaSpecialistOrderStatus.SpecialistRefund">
            <view class="text-[#303133] text-32rpx leading-44rpx">订单信息</view>
            <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
                <view>订单编号</view>
                <view>
                    <text>{{ order.order_sn }}</text>
                    <wd-divider vertical />
                    <text class="text-[#4C9F44]" @click="copy(order.order_sn)">复制</text>
                </view>
            </view>
            <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx" v-if="orderStatus != TeaSpecialistOrderStatus.Unpaid && order.pay_way">
                <view>交易方式</view>
                <view>{{ order.pay_way_title }}</view>
            </view>
            <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
                <view>创建时间</view>
                <view>{{ order.dtime }}</view>
            </view>
            <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx" v-if="orderStatus != TeaSpecialistOrderStatus.Unpaid">
                <view>付款时间</view>
                <view>{{ order.pay_time }}</view>
            </view>
        </view>

        <!-- 退款订单 -->
        <view class="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-20rpx" v-if="orderStatus >= TeaSpecialistOrderStatus.SpecialistRefund">
            <view class="text-[#303133] text-32rpx leading-44rpx">退款信息</view>

            <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
                <view>退款时间</view>
                <view>{{ order.refund_time }}</view>
            </view>

            <view class="text-28rpx leading-40rpx text-[#606266] flex items-center justify-between mt-22rpx">
                <view>订单编号</view>
                <view>
                    <text>{{ order.order_sn }}</text>
                    <wd-divider vertical />
                    <text class="text-[#4C9F44]" @click="copy(order.order_sn)">复制</text>
                </view>
            </view>
        </view>

        <!-- 操作按钮 -->
        <view class="w-full fixed bottom-0 left-0 right-0 bg-white h-152rpx"
            v-if="orderStatus === TeaSpecialistOrderStatus.Unpaid ||
                orderStatus === TeaSpecialistOrderStatus.Arrived ||
                orderStatus === TeaSpecialistOrderStatus.Accepted ||
                orderStatus === TeaSpecialistOrderStatus.Completed ||
                orderStatus === TeaSpecialistOrderStatus.Pending ||
                orderStatus === TeaSpecialistOrderStatus.Departed">
            <view class="mt-34rpx">
                <!-- 待付款 -->
                <view class="flex items-center justify-between mx-58rpx mt-34rpx" v-if="orderStatus == TeaSpecialistOrderStatus.Unpaid">
                    <view class="flex items-center">
                        <view class="text-28rpx leading-40rpx text-[#606266] mr-16rpx" @click="OrderDetail.handleCancelOrder">取消订单</view>
                    </view>
                    <view class="w-360rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="OrderDetail.handleToPay">立即支付￥{{ order.order_amount }}</view>
                </view>

                <!-- 服务中 -->
                <view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center mt-34rpx" v-if="orderStatus === TeaSpecialistOrderStatus.Arrived">
                    <view class="w-630rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx" @click="OrderDetail.handleAgainReserve">再次预定</view>
                </view>

                <!-- 已预约 -->
                <view 
                    class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center" 
                    v-if="orderStatus === TeaSpecialistOrderStatus.Pending || orderStatus === TeaSpecialistOrderStatus.Accepted ||  orderStatus === TeaSpecialistOrderStatus.Departed ">
                    <view class="w-630rpx h-90rpx bg-[#F6F7F8] rounded-8rpx text-[#303133] mr-30rpx" @click="showRefundRulePopup = true">申请退款</view>
                </view>

                <!-- 交易完成 -->
                <view class="text-32rpx leading-44rpx flex items-center justify-center leading-90rpx text-center mt-34rpx"
                    v-if="orderStatus == TeaSpecialistOrderStatus.Completed">
                        <view class="w-630rpx h-90rpx bg-[#4C9F44] rounded-8rpx text-[#fff]" @click="OrderDetail.handleAgainReserve">再次预定</view>
                </view>
            </view>
        </view>

    </view>
</template>

<script lang="ts" setup>
    import { getTeaSpecialistOrderDetails } from '@/api/teaSpecialist-order'
    import { useMessage, useToast } from 'wot-design-uni'
	import { TeaSpecialistManageOrderStatusText, TeaSpecialistManageStatusTextValue, TeaSpecialistOrderStatus} from '@/utils/teaSpecialistOrder'
    import { handleCancelOrderHooks, handleRefundTeaSpecialistOrderHooks } from '@/hooks/useTeaSpecialistOrder'
    import { router, copy, toPlus, previewImage } from '@/utils/tools'
    import { OrderType } from '@/utils/order'
    import { getTeaTypeList } from '@/api/tea'
    import { getTeaSpecialistFeeDetails, createTeaSpecialistRenewOrder } from '@/api/tea-specialist'
    import type { ITeaTypeListResult } from '@/api/types/tea'
    import { callVirtualNumber } from '@/api/user'

	const OSS = inject('OSS')
	const toast = useToast()
    const title = ref<string>('')
    const orderStatus = ref<number>(0) // 订单状态：待使用、退款等
    const showRefundRulePopup = ref<boolean>(false) // 退款规则弹窗

    // 取消订单弹窗
    const message = useMessage('wd-message-box-slot')

    // 费用明细
    const showCostPopup = ref<boolean>(false) // 是否显示退款详情弹出框
    const renewCostPrice = ref<number>(0)

    /** 续订 **/
    const showRenewPopup = ref<boolean>(false)
    const timeList = [
        {id: 1, time: '1小时'},
        {id: 2, time: '2小时'},
        {id: 3, time: '3小时'},
        {id: 4, time: '4小时'},
        {id: 5, time: '5小时'},
        {id: 6, time: '6小时'},
    ]
    const selectedRenewTime = ref<number>(0) // 选择的续订时间
    const pay = ref<number>(1) // 支付方式
    const payList = ref<Array<any>>([
        {
            id: 1,
            name: '平台余额',
            icon: `${OSS}icon/icon_platform_balance.png`,
            balance: 0,
            value: 1
        },
        {
            id: 3,
            name: '微信支付',
            icon: `${OSS}icon/icon_weichat.png`,
            balance: 0,
            value: 3
        }
    ])

    const teaList = ref<ITeaTypeListResult[]>([]) // 茶叶列表
    const selectedRenewTea = ref<Array<any>>([]) // 选择的续订时间
    const showRenewSuccessPopup = ref<boolean>(false)

	// 订单备注
	const showOrderMarksPopup = ref<boolean>(false)

    // 订单
    const orderId = ref<number>(0)
    const order = ref({
        id: 0, // 订单ID
        order_status: 0, // 订单状态
        order_sn: '', // 订单编号
        timekeeping: 0, // 倒计时
        order_amount: 0, // 订单金额
        refund_time: '', // 退款时间
        image: '', // 茶艺师图片
        title: '', // 茶艺师标题
        hours: 0, // 预定小时
        server_all_price: 0, // 服务费
        server_price: 0, // 服务费单价
        mileage_price: 0, // 车马费
        mileage_server_price: 0, // 车马费总价
        day_time: '', // 预约日期
        start_time: '', // 开始日期
        end_time: '', // 结束日期0
        server_type: 1, // 服务方式 1到店服务 2上门服务
        address: '', // 服务地址
        longitude: 0, // 经度
        latitude: 0, // 纬度
        server_number: 0, // 服务人数
        leaf_name: '', // 预定茶叶
        is_teacup: 0, // 是否使用茶具
        remark: '', // 订单备注
        pay_way: '', // 支付方式
        pay_way_title: '', // 支付方式标题
        dtime: '', // 创建时间
        pay_time: '', // 付款时间
        team_mobile: '', // 茶艺师电话
        is_renewal: 0, // 是否有一键续订
        team_user_id: 0, // 茶艺师ID
        refund_price: 0, // 退款金额
        renew_hour: 0, // 续订小时
        renew_price: 0, // 续订金额
        renew_tea_price: 0, // 续订茶叶金额
        tea_price: 0, // 茶叶费
        teacup_price: 0, // 茶具费
        is_mileage: 0, // 是否免费出行
        both: 0, // 年龄
        sex: 0, // 性别
        image_arr: [] // 订单相关图片数组
    })

    onLoad(async (args) => {
        orderId.value = args.orderId
        // 获取订单详情
        OrderDetail.handleInit()
    })

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

    const OrderDetail = {
        /**
         * 获取订单详情和茶叶列表
         */
        handleInit: async () => {
            const res = await getTeaSpecialistOrderDetails({id: orderId.value})
            order.value = res
            title.value = TeaSpecialistManageStatusTextValue[res.order_status].pageTitle || '订单详情'
            orderStatus.value = res.order_status

            // 获取茶叶列表
            const tea = await getTeaTypeList({
                team_user_id: order.value.team_user_id,
                type: 0
            })
            teaList.value = tea
        },

        // 续订茶艺师
        handleToggleRenewTea: (id: number ) => {
            const idx = selectedRenewTea.value.indexOf(id)
            if (idx > -1) {
                selectedRenewTea.value.splice(idx, 1) // 已选中则移除
            } else {
                selectedRenewTea.value.push(id) // 未选中则添加
            }

            OrderDetail.handleTotalCostPrice()
        },

        // 申请退款
        handleConfirmRefund: async () => {
            showRefundRulePopup.value = false
            toast.loading('加载中...')
            const res = await handleRefundTeaSpecialistOrderHooks(order.value.id, 10) // 固定传10
            console.log("🚀 ~ res:", res)
            toast.close()

            if (res) {
                OrderDetail.handleInit()
                toast.show('订单退款成功')
            }
        },

        /**
         * 取消订单
         */
        handleCancelOrder: () => {
            message.confirm({
                title: '确定取消订单？',
                msg: '取消订单后无法恢复，优惠券可退回',
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                cancelButtonProps: {
                    customClass: '!bg-[#F6F7F8] !text-[#303133] !text-32rpx !leading-44rpx !rounded-8rpx',
                },
                confirmButtonProps: {
                    customClass: '!bg-[#4C9F44] !text-[#fff] !text-32rpx !leading-44rpx !rounded-8rpx',
                }
            }).then(async (res) => {
                if (res.action == 'confirm') {
                    toast.loading('加载中...')
                    const res = await handleCancelOrderHooks(orderId.value)
                    toast.close()

                    if (res) {
                        OrderDetail.handleInit()
                        toast.show('订单取消成功')
                    }
                }
            }).catch(() => { })
        },

        /**
         * 续订时间
         */
        handleRenewTime: (id) => {
            if (selectedRenewTime.value == id) {
                selectedRenewTime.value = 0
            } else {
                selectedRenewTime.value = id
            }

            OrderDetail.handleTotalCostPrice()
        },
        
        /**
         * 一键续订的金额
         */
        handleTotalCostPrice: async () => {
            let params = {
                hours: 0,
                tea_id: '',
                longitude: uni.getStorageSync('longitude') || import.meta.env.VITE_DEFAULT_LONGITUDE,
                latitude: uni.getStorageSync('latitude') || import.meta.env.VITE_DEFAULT_LATITUDE, 
                user_coupon_id: 0,
                is_teacup: 0,
                team_user_id: order.value.team_user_id
            }

            if (selectedRenewTime.value > 0) {
                // 选定了时间
                params.hours = selectedRenewTime.value
            }

            if (selectedRenewTea.value.length > 0) {
                // 选定了茶叶
                params.tea_id = selectedRenewTea.value.join(',')
            }

            const res = await getTeaSpecialistFeeDetails(params)
            renewCostPrice.value = Number(toPlus(res.server_all_price, res.leaf_amount))
        },

        /**
         * 去支付
         */
        handleToPay: () => {
            uni.$off("payment")
            uni.$on('payment', params => {
                setTimeout(() => {
                    uni.$off("payment")
                    if (params.result) {
                        toast.show('支付成功')
                        setTimeout(() => {
                            OrderDetail.handleInit()
                        }, 500)
                    } else {
                        toast.show('支付失败')
                    }
                }, 1000)
            })
            router.navigateTo(`/pages/cashier/cashier?from=${OrderType.TeaSpecialist}&orderId=${order.value.id}&teaSpecialistName=${order.value.title}&renewPrice=1`)
        },

        /**
         * 提交续单订单
         */
        handleNowRenew: async () => {
            if (selectedRenewTime.value == 0 && selectedRenewTea.value.length == 0) {
                toast.show('请选择续单内容')
                return false
            }

            toast.loading('创建订单中')
            let params = {
                id: order.value.id,
                type: 0,
                hours: 0,
                tea_id: ''
            }

            if (selectedRenewTime.value > 0 && selectedRenewTea.value.length > 0) {
                // 选择了茶叶和时间，定义类型为3
                params.type = 3
                params.hours = selectedRenewTime.value
                params.tea_id = selectedRenewTea.value.join(',')
            } else if (selectedRenewTime.value > 0) {
                // 选择了时间但是没有选择茶叶，定义类型为1
                params.type = 1
                params.hours = selectedRenewTime.value
            } else if (selectedRenewTea.value.length > 0) {
                // 选择了茶叶但是没有选择时间，定义类型为2
                params.type = 2
                params.tea_id = selectedRenewTea.value.join(',')
            }
            const res = await createTeaSpecialistRenewOrder(params)
            console.log("🚀 ~ res:", res)
            toast.close()
            if (res.order_id) {
                uni.$off("payment")
                uni.$on('payment', params => {
                    setTimeout(() => {
                        uni.$off("payment")
                        if (params.result) {
                            showRenewSuccessPopup.value = true
                            setTimeout(() => {
                                OrderDetail.handleInit()
                            }, 500)
                        } else {
                            toast.show('支付失败')
                        }
                    }, 1000)
                })

                showRenewPopup.value = false
                router.navigateTo(`/pages/cashier/cashier?from=${OrderType.TeaSpecialist}&orderId=${order.value.id}&renewOrderId=${res.order_id}&teaSpecialistName=${order.value.title}&teaSpecialistOrderAmount=${res.price}`)
            }
        },

        /**
         * 导航
         */
        handleOpenMap: () => {
            uni.openLocation({
                latitude: Number(order.value.latitude),
                longitude: Number(order.value.longitude),
                address: order.value.address,
            })
        },

        /**
         * 茶艺师-再次预定
         */             
        handleAgainReserve: () => {
            router.navigateTo(`/bundle_b/pages/tea-specialist/list`)
        },

        /**
         * 拨打电话
         */
        handleCall: async () => {
            const res = await callVirtualNumber(order.value.order_sn)
            console.log("🚀 ~ res:", res)
            uni.makePhoneCall({
                phoneNumber: res.mobile
            })
        },

        /**
         * 联系企业微信客服
         */
        handleContactService: () => {
            // @ts-ignore
			wx.openCustomerServiceChat({
				extInfo: {
					url: 'https://work.weixin.qq.com/kfid/kfc723bd879ef30a161' //客服ID
				},
				corpId: 'wwe8c5c7cf7d2010e6',
				success(res) {},
				fail(res) {
                    toast.show('调起客服失败')
                }
			})
        },

        handlePreviewImage: (img: any, imageList: any) => {
            previewImage(img, imageList)
        }
    }
</script>


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

    .coupon-bg {
        background-image: url(#{$OSS}images/order/order_image2.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .renewOrder {
        border-radius: 100rpx  0rpx  0rpx  100rpx;
    }

    .renew-border {
        border-top: 2rpx dashed #E5E7EB;
    }
</style>