<template>
    <view class="waper" :style="'padding-bottom: ' + windowBottom + 'px;'">
        <u-navbar left-icon-size="0" :placeholder="true" bgColor="#fff">
        	<view slot='center' class="navbar_title">购票</view>
        </u-navbar>
        <view class="waper_box">
            <view class="list_waper" v-for="(i, index) in list" :key="index" v-if="i.children.length > 0">
                <view class="title">{{i.name}}</view>
                <view class="content">
                    <navigator hover-class="none" :url="(item.classify == '3' ? '/pages/scenic/otherTick?id=' : '/pages/scenic/ticket?id=') + item.id" class="list" v-for="(item, itemIndex) in i.children" :key="itemIndex">
                        <view class="img">
                            <image :src="$utils.setImgUrl(item.image11)" mode=""></image>
                        </view>
                        <view class="info">
                            <view class="name">{{item.name}}</view>
                            <view class="tag">
                                <text v-if="item.refundRule == '0'">不可退</text>
                                <text v-if="item.refundRule == '3'">有效期可退</text>
                                <text v-if="item.refundRule == '4'">{{item.refundDay}}天内可退</text>
                                <text v-if="item.refundRule == '5'">未激活可退</text>
                            </view>
							<view class="price-box">
								<view :class="'discounts' + (item.salesRice > 0 ? '' : ' free')">{{item.salesRice > 0 ? item.salesRice.toFixed('2') : '免费'}}</view>
								<view class="lineation" v-if="item.price && item.price > 0">￥{{item.price}}</view>
							</view>
                            <view class="btn">购票</view>
                        </view>
                    </navigator>
                </view>
            </view>
        </view>
        <tabbar name="ticketing"></tabbar>
    </view>
</template>

<script>
import tabbar from '@/components/tabbar/index.vue'
export default {
    components: { tabbar },
    data () {
        return {
            windowBottom: 0,
            list: []
        }
    },
    async onLoad () {
        let info = uni.getSystemInfoSync();
        this.windowBottom = info.windowBottom;
        let group = await this.$http.groupList();
        for (var i = 0; i < group.data.length; i ++) {
            group.data[i].children = [];
        }
        this.list = group.data;
        let scenicId = this.$scenicId;
        if (!scenicId) {
            let config = await this.$http.getConfigData()
            scenicId = config.data.scenic.id || '1';
        }
        
        let ticket = await this.$http.ticketList({scenicId: scenicId});
        var f;
        ticket.data.forEach((e, i) => {
        	f = this.list.find(m => m.id == e.groupId);
        	if (f) {
        		f.children.push(e)
        	}
        })
    }
}
</script>

<style lang="scss">
.waper_box{
    width: 100%; box-sizing: border-box; padding: 24rpx 24rpx;
    .list_waper{
        width: 100%; margin-bottom: 40rpx;
        &:last-child{ margin-bottom: 0; }
        .title{
            height: 46rpx; box-sizing: border-box; padding-left: 16rpx; position: relative; font-size: 32rpx; color: #333; font-weight: 500; line-height: 46rpx;
            &::after{ content: ""; width: 6rpx; height: 28rpx; background: linear-gradient( 141deg, #54C76E 0%, #03AE80 100%); border-radius: 2rpx; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
        }
        .content{
            width: 100%; margin-top: 24rpx;
            .list{
                width: 100%; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 24rpx 24rpx 24rpx 252rpx; position: relative; margin-bottom: 20rpx;
                &:last-child{ margin-bottom: 0; }
                .img{
                    width: 208rpx; height: 208rpx; position: absolute; left: 24rpx; top: 24rpx;
                    image{ border-radius: 10rpx; }
                }
                .info{
                    width: 100%; height: 208rpx; position: relative; box-sizing: border-box; padding-top: 16rpx;
                    .name{ line-height: 48rpx; color: #333; font-size: 32rpx; font-weight: 500; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
                    .tag{
                        width: 100%; margin-top: 14rpx; display: flex; align-items: center; height: 36rpx;
                        text{
                            color: #FFA944; font-size: 24rpx; margin-right: 32rpx; position: relative;
                            &::after{ content: ""; width: 2rpx; height: 16rpx; background: #FFA944; position: absolute; right: -17rpx; top: 50%; transform: translateY(-50%); }
                            &:last-child{
                                margin-right: 0;
                                &::after{ width: 0; }
                            }
                        }
                    }
					.price-box {
						display: flex; align-items: baseline;
						.discounts {
							margin-top: 36rpx; line-height: 46rpx; color: #FF3333; font-size: 40rpx; font-weight: bold; box-sizing: border-box; padding-left: 24rpx; position: relative;
							&::after{ content: "￥"; color: #FF3333; line-height: 34rpx; font-size: 24rpx; font-weight: 500; position: absolute; left: 0; bottom: 0; }
                            &.free{
                                padding-left: 0; font-size: 28rpx; margin-right: 10rpx;
                                &::after{ font-size: 0; }
                            }
						}
						.lineation {
							font-weight: 400;
							font-size: 24rpx;
							color: #C8C8C8;
							margin-left: 14rpx;
							text-decoration: line-through;
						}
					}
                    .btn { position: absolute; right: 0; bottom: 0; width: 178rpx; height: 64rpx; line-height: 64rpx; background: linear-gradient( 141deg, #54C76E 0%, #03AE80 100%); border-radius: 32rpx; text-align: center; font-size: 28rpx; color: #fff;
                    }
                }
            }
        }
    }
}
</style>