<!--pages/taocan/index.wxml-->
<wxs src="../../utils/util.wxs" module="util" />
<nav hasHome>套餐详情</nav>
<swiper
        display-multiple-items="3"
        class="view margin-left-lg header"
        bindchange="swiperChange"
        current="{{current}}"
        style="height: 80rpx;">
    <block wx:for="{{packs}}" wx:key="*this">
        <swiper-item
                bindtap="touchTab" data-id="{{item.id}}" data-index="{{index}}"
                class="swiper-item {{activityId==item.id?'active':''}} flex align-center">
            <view class="txt-28-h text-cut" style="width: 220rpx;height: 50rpx;">
                <text class="swiper-item-txt">{{item.name}}</text>
            </view>
        </swiper-item>
    </block>
</swiper>
<view class="view" style="padding-bottom: 150rpx;padding-top: 80rpx;">
    <view class="view box margin-lr margin-top-lg margin-bottom-sm padding">
        <view class="view txt-40-h text-bold">{{packs[activityId].name}}</view>
        <view class="view flex align-end">
            <view class="text-orange txt-28-h" style="margin-bottom: 4rpx;">¥</view>
            <view class="text-orange txt-44-h margin-right-sm text-bold">{{packs[activityId].sale_price}}</view>
            <view class="huaxian flex align-end">
                <view class="txt-20-h" style="margin-bottom: 8rpx;">¥</view>
                <view class="txt-28-h" style="margin-bottom: 4rpx;">{{packs[activityId].market_price}}</view>
            </view>
            <view class="view flex text-orange align-end margin-left-sm" wx:if="{{packs[activityId].discount>0}}" >
                <view class="view tag" style="margin-bottom: 16rpx;"></view>
                <view class="view margin-left-xs txt-24-h" style="margin-bottom: 10rpx;">{{packs[activityId].discount*10}}折</view>
            </view>
        </view>
        <view class="view flex align-center txt-28-h margin-bottom labels" style="margin-top: 10rpx;">
            <view class="view margin-right flex align-center" wx:if="{{packs[activityId]['包间可用']}}">
                <view class="view icon icon1"></view>
                <view class="view txt-28-h bg-white">包间可用</view>
            </view>
            <view class="view margin-right flex align-center" wx:if="{{packs[activityId]['免预约']}}">
                <view class="view icon icon2"></view>
                <view class="view txt-28-h bg-white">免预约</view>
            </view>
            <view class="view margin-right flex align-center" wx:if="{{packs[activityId]['随时退']}}">
                <view class="view icon icon3"></view>
                <view class="view txt-28-h bg-white">随时退</view>
            </view>
        </view>
        <image src="{{packs[activityId].main_url}}" style="width:100%;background-color: #cccccc;border-radius: 10rpx;" mode="widthFix"></image>
    </view>
    <view class="view box margin-lr margin-top-sm margin-bottom-sm">
        <view class="txt-30-h padding solid-bottom">购买须知</view>
        <view class="view padding block">
            <view class="flex align-center margin-bottom-sm">
                <view class="dot"></view>
                <view class="txt-30-h text-bold">有效期</view>
            </view>
            <view class="text-df">{{util.unixtoTime(packs[activityId].eff_time_start,'YYYY.MM.DD')}}-{{util.unixtoTime(packs[activityId].eff_time_end,'YYYY.MM.DD HH:II')}}</view>
        </view>
        <view class="view padding block">
            <view class="flex align-center margin-bottom-sm">
                <view class="dot"></view>
                <view class="txt-30-h text-bold">使用时间</view>
            </view>
            <view class="text-df">{{packs[activityId].use_time}}</view>
        </view>
        <view class="view padding block padding-bottom-sm">
            <view class="flex align-center margin-bottom-sm">
                <view class="dot"></view>
                <view class="txt-30-h text-bold">使用规则</view>
            </view>
            <view class="text-df" wx:if="{{hasShowRule}}">
                <text style="line-height: 40rpx;">{{packs[activityId].use_notice}}</text>
            </view>
            <view class="flex justify-center align-center rule margin-top-sm margin-bottom-sm" bindtap="toggleRule">
                <view class="txt-28-h">{{hasShowRule?'收起':'展开更多'}}</view>
                <view class="view icon {{hasShowRule?'show':''}}"></view>
            </view>
        </view>
    </view>
</view>
<view class="view bottom flex align-center justify-between padding-right">
    <view class="view flex justify-center align-center flex-treble ">
        <view class="view flex align-end">
            <view class="text-orange txt-40-h" style="margin-bottom: 4rpx;">¥</view>
            <view class="text-orange txt-52-h margin-right-sm text-bold">{{packs[activityId].sale_price}}</view>
        </view>
        <view class="view flex flex-direction justify-center align-start">
            <view class="view flex text-orange align-center" wx:if="{{packs[activityId].discount>0}}">
                <view class="view tag"></view>
                <view class="view margin-left-xs txt-24-h">{{packs[activityId].discount*10}}折</view>
            </view>
            <view class="huaxian flex align-end">
                <view class="txt-24-h" style="margin-bottom: 2rpx;">¥</view>
                <view class="txt-32-h">{{packs[activityId].market_price}}</view>
            </view>
        </view>
    </view>
    <view class="flex justify-end" bindtap="createSale">
        <view class="buyButton txt-36-h text-bold flex align-center justify-center bg-blue-blue">立即抢购</view>
    </view>
</view>