<template>
    <view>
        <!-- 改价弹窗 -->
		<wd-popup v-model="showChangePricePopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;background-color: #F8F9FA;" position="bottom">
            <view class="relative pb-56rpx">
                <view class="absolute top-18rpx right-30rpx" @click="showChangePricePopup = 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="bg-white mx-30rpx rounded-10rpx px-30rpx py-32rpx">
                    <view class="flex items-center">
                        <view class="mr-28rpx">
                            <wd-img width="152rpx" height="152rpx" :src="order.main_image"></wd-img>
                        </view>
                        <view class="flex-1" @click="ComboCard.handleToOrderDetail">
                            <view class="flex items-center relative">
                                <view class="w-400rpx line-1 font-bold text-[#303133] text-30rpx leading-42rpx mr-14rpx">
                                   {{ order.title }}
                                </view>      
                            </view>

                            <view class="flex items-center mt-16rpx">
                                <view class="font-400 text-[#606266] text-26rpx leading-36rpx mr-8rpx">ID:{{order.code}}</view>
                                <wd-icon name="file-copy" size="32rpx" color='#707070' @click="copy(order.code)"></wd-icon>
                            </view>
                    
                            <view class="flex items-center">
                                <price-format color="#FF5951" :first-size="36" :second-size="36" :subscript-size="24" :price="order.discount_price"></price-format>
                                <view class="rounded-4rpx w-60rpx text-center  text-[#FF5951] border-2rpx border-solid border-[#FF5951] text-22rpx pb-4rpx mx-14rpx">{{ order.discount }}折</view>
                                <price-format color="#BFC2CC" :first-size="22" :second-size="22" :subscript-size="22" :price="order.price" lineThrough></price-format>
                            </view>
                        </view>
                    </view>
                </view>

                <view class="bg-white mx-30rpx mt-20rpx rounded-10rpx px-30rpx py-32rpx">
                    <view class="flex items-center">
                        <view class="font-400 text-28rpx leading-40rpx text-[#303133] mr-26rpx w-100rpx whitespace-nowrap">
                            团购价
                        </view>
                        <wd-input
                            clearable
                            type="text" 
                            placeholder="请输入" 
                            v-model="changePrice" 
                            no-border
                            custom-class="!rounded-16rpx !text-30rpx !leading-48rpx !border-2rpx !border-solid !border-[#F0F0F0] !w-[100%]" 
                            custom-input-class="!h-96rpx !px-20rpx">
                            <template #prefix>
                                <text class="p-28rpx">￥</text>
                            </template>
                        </wd-input>
                    </view>

                    <view class="flex items-center mt-24rpx">
                        <view class="font-400 text-28rpx leading-40rpx text-[#303133] mr-26rpx w-100rpx whitespace-nowrap">门市价</view>
                        <view class="">
                            <price-format color="#303133" :first-size="30" :second-size="30" :subscript-size="30" :price="order.price"></price-format>
                        </view>
                    </view>
                </view>

				<view class="font-400 mx-48rpx h-90rpx leading-90rpx rounded-8rpx text-center mt-80rpx text-[#fff] bg-[#4C9F44] text-30rpx font-400" @click="ComboCard.handleConfirmChangePrice">确定</view>
            </view>
        </wd-popup>

        <!-- 茶室管理端-套餐管理 -->
        <view v-if="type === OrderSource.SetMeal" class="bg-white rounded-10rpx p-28rpx">
            <view class="">
                <view class="flex items-center">
                    <view class="mr-28rpx">
                        <wd-img width="200rpx" height="200rpx" :src="order.main_image" radius="10rpx"></wd-img>
                    </view>
                    <view class="flex-1" @click="router.navigateTo(`/bundle/setmeal/detail?id=${order.id}`)">
                        <view class="flex items-center relative">
                            <view class="w-400rpx flex items-center">
                                <view class="font-bold text-[#303133] text-30rpx leading-42rpx mr-14rpx">{{ order.title }}</view>
                            </view>
                        </view>

                        <view class="flex items-center mt-16rpx">
                            <view class="font-400 text-[#606266] text-26rpx leading-36rpx mr-8rpx">ID:{{ order.code }}</view>
                            <wd-icon name="file-copy" size="32rpx" color='#707070' @click="copy(order.code)"></wd-icon>
                        </view>
                
                        <view class="flex items-center">
                            <price-format color="#FF5951" :first-size="36" :second-size="36" :subscript-size="24" :price="order.discount_price"></price-format>
                            <view class="rounded-4rpx w-60rpx text-center  text-[#FF5951] border-2rpx border-solid border-[#FF5951] text-22rpx pb-4rpx mx-14rpx">{{ order.discount }}折</view>
                            <price-format color="#BFC2CC" :first-size="22" :second-size="22" :subscript-size="22" :price="order.price" lineThrough></price-format>
                        </view>
                    </view>
                </view>
                <view class="font-400 text-[#606266] text-26rpx leading-36rpx mt-42rpx flex items-center justify-between">
                    <view class="">
                        <text class="font-400 text-26rpx text-[#606266] leading-36rpx mr-10rpx">年售</text>
                        <text class="font-bold text-26rpx text-[#606266] leading-36rpx ">{{ order.sold }}</text>
                    </view>
                    <template v-if="order.status == 1">
                        <view class="flex items-center">
                            <!-- 上架 -->
                            <!-- <view class="font-500 text-28rpx text-[#303133] leading-40rpx mr-18rpx" @click='ComboCard.handleMore'>更多</view> -->
                            <!-- <view class="font-500 text-28rpx text-[#303133] leading-40rpx border-2rpx border-solid border-[#ECECEC] rounded-8rpx text-center py-4rpx px-28rpx mr-12rpx"
                                @click="ComboCard.handleOpenChangePricePopup()">改价</view> -->
                            <view class="font-500 text-28rpx text-[#303133] leading-40rpx border-2rpx border-solid border-[#ECECEC] rounded-8rpx text-center py-4rpx px-28rpx mr-12rpx"
                                @click="ComboCard.handleDelisted()"> 下架</view>
                            <view class="font-500 text-28rpx text-[#303133] leading-40rpx border-2rpx border-solid border-[#ECECEC] rounded-8rpx text-center py-4rpx px-28rpx"
                                @click="router.navigateTo(`/bundle/setmeal/add?type=edit&id=${order.id}`)">编辑</view>
                        </view>
                    </template>

                    <template v-if="order.status == 0">
                        <view class="flex items-center">
                            <!-- 下架 -->
                            <view class="font-500 text-28rpx text-[#303133] leading-40rpx border-2rpx border-solid border-[#ECECEC] rounded-8rpx text-center py-4rpx px-28rpx mr-12rpx"
                                @click="ComboCard.handleDelteSetmealOrder()">删除</view>
                            <view class="font-500 text-28rpx text-[#303133] leading-40rpx border-2rpx border-solid border-[#ECECEC] rounded-8rpx text-center py-4rpx px-28rpx mr-12rpx"
                                @click="ComboCard.handleAdd()"> 上架</view>
                            <view class="font-500 text-28rpx text-[#303133] leading-40rpx border-2rpx border-solid border-[#ECECEC] rounded-8rpx text-center py-4rpx px-28rpx"
                                @click="router.navigateTo(`/bundle/setmeal/add?type=edit&id=${order.id}`)">编辑</view>
                        </view>
                    </template>
                </view>
            </view>
        </view>

        <!-- 茶室管理端-订单管理 -->
        <view v-if="type === OrderSource.Admin" class="bg-white rounded-10rpx p-30rpx">
            <view class="flex justify-between items-center">
                <view class="flex items-center">
                    <view class="mr-10rpx flex items-center">
                        <wd-img width="40rpx" height="40rpx" :src="`${OSS}icon/icon_tea_room.png`"></wd-img>
                    </view>
                    <view class="flex items-center w-400rpx">
                        <view class="font-bold text-30rpx leading-42rpx text-[#303133] mr-10rpx  line-1">{{ order.store_name }}</view>
                    </view>
                </view>

                <view class="font-400 text-28rpx leading-40rpx mt-12rpx text-[#4C9F44]">
                    <text v-if="order.order_status === AdminOrderStatus.ToUse" class="text-[#FF5951]" >待使用</text>
                    <text v-if="order.order_status === AdminOrderStatus.Consuming">使用中</text>
                    <text v-if="order.order_status === AdminOrderStatus.Finished" class="text-[#606266]">完成</text>
                    <text v-if="order.order_status === AdminOrderStatus.Cancelled" class="text-[#C9C9C9]">取消订单</text>
                </view>
            </view>
            <view class="mt-22rpx">
                <view class="flex items-center">
                    <view class="mr-28rpx">
                        <wd-img width="200rpx" height="200rpx" :src="order.img" radius="10rpx"></wd-img>
                    </view>
                    <view class="flex-1">
                        <view @click="ComboCard.handleToOrderDetail(order.id)">
                            <view class="font-500 text-30rpx text-[#303133] leading-42rpx line-1 w-400rpx">{{ order.room_name }}</view>
                            <view class="font-400 leading-36rpx text-26rpx text-[#606266] mt-34rpx">
                                <view>预约时间：{{ order.day_title }}  {{ order.start_time }}-{{ order.end_time }}</view>
                                <view class="mt-18rpx">预约时长：{{ order.hours }}小时</view>
                                <view class="mt-18rpx">用户手机号：{{ order.user_mobile }}</view>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 操作按钮 -->
                <template v-if="order.order_status === AdminOrderStatus.ToUse || order.order_status === AdminOrderStatus.Consuming">
                    <view class="text-center flex items-center text-28rpx mt-28rpx justify-end">
                        <view v-if="order.order_status === AdminOrderStatus.Consuming" class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] mr-28rpx flex items-center justify-center"
                            @click="ComboCard.handleReleaseOrder(order.id)">释放时间</view>
                        <view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#4C9F44] text-[#4C9F44] flex items-center justify-center"
                            @click="ComboCard.handleCancelOrder(order.id)">取消订单</view>
                    </view>
                </template>
             
                <template v-if="order.order_status === AdminOrderStatus.Finished || order.order_status === AdminOrderStatus.Cancelled">
                    <view class="text-center flex items-center text-28rpx mt-28rpx justify-end">
                        <view class="w-178rpx h-70rpx rounded-8rpx border-[2rpx] border-[#9CA3AF] text-[#303133] flex items-center justify-center"
                            @click="ComboCard.handleDeleteOrder(order.id)">删除</view>
                    </view>
                </template>
            </view>
        </view>

        <!-- 取消订单, 删除订单 -->
        <wd-message-box selector="wd-message-box-slot"></wd-message-box>
    </view>
</template>

<script lang="ts" setup name="ComboCard">
    import { OrderSource, AdminOrderStatus } from '@/utils/order'
    import { useMessage } from 'wot-design-uni'
    import { toast } from '@/utils/toast'
    import { handleReleaseTeaRoomOrderHookds, handleCancelOrderHooks, handleDeleteOrderHooks } from '@/hooks/useOrder'
    import { router, copy } from '@/utils/tools'
    import { toggleTeaSpecialistOrderPackageStatus, deleteTeaSpecialistOrderPackage } from '@/api/order'

    // 改价弹窗
    const showChangePricePopup = ref<boolean>(false)
    const changePrice = ref<string>('')

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

	/**
	 * ComboCard 套餐卡片组件
	 * @description 展示订单列表套餐卡片信息
     */

	const OSS = inject('OSS')

	const props = defineProps({
        /**
         * 类型: 
        */
        type: {
            type: String,
            default: OrderSource.Combo
        },

        order: {
            type: Object,
            default: {}
        }
    })


    const emit = defineEmits(['refresh'])

    const ComboCard = {
        /**
         * 详情页
         */
        handleToOrderDetail: (id: number) => {
            if (props.type == OrderSource.Admin) {
                router.navigateTo(`/pages/order/order-detail?id=${id}`)
            }
        },

        /**
         * 设置不可用日期
         */
        handleMore: () => {
            toast.info('功能开发中')
        },

        /**
         * 改价弹窗
         */
        handleOpenChangePricePopup: () => {
            showChangePricePopup.value = true
        },
        
        /**
         * 确认改价
         */
        handleConfirmChangePrice: () => {
            ComboCard.handleOpenChangePricePopup()
        },

        /**
         * 下架商品
         */
        handleDelisted: () => {
            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') {
                    await toggleTeaSpecialistOrderPackageStatus(props.order.id, 0)
                    emit('refresh')
                    toast.info('下架成功')
                }
                // 点击确认按钮回调事件
            }).catch(() => {
                // 点击取消按钮回调事件
            })
        },

        /**
         * 上架商品
         */
        handleAdd: () => {
            message.confirm({
                title: '您确认要上架该商品吗？',
                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') {
                    await toggleTeaSpecialistOrderPackageStatus(props.order.id, 1)
                    emit('refresh')
                    toast.info('上架成功')
                }
                // 点击确认按钮回调事件
            }).catch(() => {
                // 点击取消按钮回调事件
            })
        },

        /**
         * 删除套餐
         */
        handleDelteSetmealOrder: () => {
            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') {
                    await deleteTeaSpecialistOrderPackage(props.order.id)
                    emit('refresh')
                    toast.info('删除成功')
                }
                // 点击确认按钮回调事件
            }).catch(() => {
                // 点击取消按钮回调事件
            })
        },

        /**
         * 编辑商品
         */
        handleEdit: () => {

        },

        /**
         * 跳转到对对应室的详情页
         */
        handleToStore: () => {
            handleToTRStoreHooks(props.order.store_id, props.order.operation_type)
        },

        /**
         * 删除订单
         */
        handleDeleteOrder: (orderId: number) => {
            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((res) => {
                    if (res.action == 'confirm') {
                    uni.$on('refreshOrderList', () => {
                        emit('refresh')
                        uni.$off('refreshOrderList')
                    })
                    handleDeleteOrderHooks(orderId)
                }
            }).catch(() => {
                // 点击取消按钮回调事件
            })
        },

        /**
         * 取消订单
         */
        handleCancelOrder: (orderId: number) => {
            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((res) => {
                if (res.action == 'confirm') {
                    uni.$on('refreshOrderList', () => {
                        emit('refresh')
                        uni.$off('refreshOrderList')
                    })
                    handleCancelOrderHooks(orderId)
                }
            }).catch(() => {
                // 点击取消按钮回调事件
            })
        },

        /**
         * 释放时间
         */
        handleReleaseOrder: (orderId: number) => {
            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((res) => {
                if (res.action == 'confirm') {
                    uni.$on('refreshOrderList', () => {
                        emit('refresh')
                        uni.$off('refreshOrderList')
                    })
                    handleReleaseTeaRoomOrderHookds(orderId)
                }
            }).catch(() => { })
        },
    }
</script>

<script lang="ts">
    export default {}
</script>
