<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="page">{
    "needLogin": true,
	"layout": "tabbar",
	"style": {
		"navigationStyle": "custom"
	}
}</route>
<template>
	<view class="pb-180rpx">
		<view>
			<navbar title="包间详情" custom-class='!bg-[#F6F7F8]'></navbar>
		</view>

        <view>
            <view class="mt-20rpx mx-30rpx swiper">
                <wd-swiper value-key="image" height="320rpx"
                    :indicator="{ type: 'dots-bar' }" :list="swiperList" mode="aspectFit">
                </wd-swiper>
            </view>

            <view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
                <view class="flex items-center justify-between">
                    <price-format color="#FF5951" :first-size="36" :second-size="36" :subscript-size="24" :price="teaRoom.room.price"></price-format>
                    <view class="font-400 text-22rpx text-[#6A6363] leading-32rpx">已售 {{ teaRoom.room.sold > 10 ?  teaRoom.room.sold + '+':  teaRoom.room.sold }} </view>
                </view>
                <view class="font-bold text-36rpx text-[#303133] leading-50rpx mt-20rpx">{{ teaRoom.room.title }}</view>
                <view class="mt-14rpx flex">
                    <template v-for="(label, labelIndex) in teaRoom.label" :key="labelIndex">
                        <view class="mr-20rpx flex items-start">
                            <wd-tag
                                :color="Detail.handleRandomColor(labelIndex)"
                                :bg-color="Detail.handleRandomColor(labelIndex)"
                                plain
                                custom-class="!rounded-4rpx"
                            >{{ label.label_name }}</wd-tag>
                        </view>
                    </template>
                </view>
            </view>

            <view >
                <!-- 使用说明 -->
                <view class="bg-white rounded-16rpx py-26rpx px-30rpx mt-24rpx mx-30rpx">
                    <view class="text-[#303133] text-32rpx leading-44rpx font-bold mb-24rpx">使用说明</view>
                    <view class="">
                        <rich-text :nodes="teaRoom.textarea1"></rich-text>
                    </view>
                </view>
            </view>
	    </view>
    </view>
</template>

<script lang="ts" setup>
	import { getStoreOrderDetails } from '@/api/store'
    import PriceFormat from '@/components/PriceFormat.vue'

    const swiperList = ref<string[]>([])
    const html: string = '<p>这里是富文本内容，需要后台传递</p>'

    // 包间内容
    const roomId = ref<number>(0) // 门店ID 
    const teaRoom = ref<any>({})

    // 随机颜色列表
    const tagColors = ['#40AE36', '#F55726']

	onLoad((args) => {
        roomId.value = Number(args.id)
        Detail.handleInitReserveRoom()
	})

    const Detail = {
        /**
         *  初始包间详情
         */
        handleInitReserveRoom: async () => {
            const res = await getStoreOrderDetails(roomId.value)
            console.log("🚀 ~ res:", res)
            teaRoom.value = res.details
            swiperList.value = teaRoom.value.img_arr
        },

        /**
         * 根据索引返回伪随机颜色
         * @param index 索引
         * @returns 颜色值
         */
        handleRandomColor: (index: number) => {
            // 可根据index做伪随机，保证每次渲染一致
            return tagColors[index % tagColors.length]
        }
    }
</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;
            }
        }
    }
</style>
