<template>
    <view>
        <view class="movie-position flex_r flex_jb">
            <view class="position-item">
                <view class="position-text">{{cinemaInfo.restaurant_name}}</view>
                <view class="item-texts">{{cinemaInfo.restaurant_address}}</view>
            </view>
            <view class="item-img-list">
                <span @click="openm" class="iconfont collion">&#xe634;</span>
            </view>
        </view>
        <!-- 轮播盒子 start -->
        <view class="swiper_main">
            <image class="background-img-vague" :src="chooseMovice.posterUrl" mode=""></image>
            <view class="wrap">
                <swipers :list="movieList" height="260" mode="none" name="posterUrl" :autoplay="false" img-mode="scaleToFill" class="swiper_bg" :effect3d="true" bg-color="none" :circular="false" effect3d-previous-margin="280" @change="setBackground" @click="setBackground" :current="swiperCurrent"></swipers>
            </view>
            <div class="box"></div>
        </view>
        <!-- 轮播盒子 end -->
        <template v-if="chooseMovice.movieName">
            <view class="moive-name">{{chooseMovice.movieName}}</view>
            <view class="moive-info">{{chooseMovice.duration}}分钟{{chooseMovice.movieType}}{{chooseMovice.cast}}</view>
        </template>
        <view class="moive-tab-list">
            <view class="tabs-list-item" :class="{'tab-sel':index==tabIndexs}" v-for="(value,index) in tabLists" :key="index" @click="getTimeTab(value,index)">
                {{value.time}}
                <view class="bottoms" v-if="index==tabIndexs"></view>
            </view>
        </view>
        <view class="ticket-list" v-for="(value,index) in timeList" :key="index">
            <view style="width: 79%;">
                <view class="ticet-left">
                    <view style="display: flex;align-items: center;">
                        <text class="left-time">{{tim(value.showTime)}}</text>
                        <text class="left-type">{{value.showVersionType}}</text>
                    </view>
                    <view style="display: flex;align-items: center;">
                        <view class="ret-price">{{value.showPrice}}</view>
                        <!-- <view class="ret-yuans">¥{{value.showPrice}}</view> -->
                    </view>
                </view>
                <view class="ticet-left" style="margin-top: 20rpx;">
                    <view class="ticet-booms">
                        <text>时长:{{value.duration}}分钟</text>
                        <text style="margin-left: 25rpx;">{{value.hallName}}</text>
                    </view>
                    <!-- <view class="ticet-boom-ret">
                        <view class="sheng-text">省</view>
                        <view class="sheng-pirce">¥{{province(value.showPrice,value.userPrice)}}</view>
                    </view> -->
                </view>
            </view>
            <view class="buy-btns" @click="getGou(value)">购票</view>
        </view>
        <view v-if="isLoad&&timeList.length==0" style="text-align: center;padding-top: 30rpx;font-size: 28rpx;">暂无排片！</view>
    </view>
</template>
<script>
import swipers from '@/pagesB/components/u-swiper.vue'
import { Desc, Asc } from "@/utils/myfun.js"
import { post } from "@/request/api.js";
export default {
    components: { swipers },
    data() {
        return {
            movieList: [], //选中的电影
            chooseMovice: {}, //swiper默认选中
            swiperCurrent: 0,

            tabIndexs: 0,
            cinemaInfo: {}, //影院信息
            tabLists: {},
            timeList: [], //排期数据
            isLoad: false,
            allPreferential: {}, //当前影院所有场次
        }
    },
    onLoad(da) {
        this.cinemaInfo = uni.getStorageSync("cinemaItem");
        this.getlists(da)
    },
    methods: {
        // 获取场次
        getlists(da) {
            post("local/getPreferential", da).then(res => {
                if (res.code == 0) {
                    let da = res.data.data
                    let arr = [],
                        obj = {};
                    for (let it of da.showInfor) {
                        if (!arr.includes(it.movieId)) {
                            arr.push(it.movieId)
                            obj[it.movieId] = [];
                        }
                        obj[it.movieId].push(it);
                    }
                    for (let i in obj) {
                        let ar = [],
                            ob = {};
                        for (let b of obj[i]) {
                            let tim = b.showTime.slice(5, 10);
                            if (!ar.includes(tim)) {
                                ar.push(tim)
                                ob[tim] = [];
                            }
                            ob[tim].push(b);
                        }
                        let ar2 = []
                        for (let c in ob) {
                            ar2.push({ time: c, list: ob[c] })
                        }
                        obj[i] = ar2
                    }
                    let movies = uni.getStorageSync("movies")
                    let MS = []
                    for (let m of movies) {
                        if (arr.includes(m.movieId)) MS.unshift(m)
                    }
                    this.movieList = MS;
                    this.chooseMovice = this.movieList[0];
                    this.tabLists = Asc(obj[this.chooseMovice.movieId], "time");
                    this.timeList = Asc(this.tabLists[0].list, "showTime");
                    this.allPreferential = obj;
                }
            })
        },
        openm() {
            let latitude = parseFloat(this.cinemaInfo.latitude);
            let longitude = parseFloat(this.cinemaInfo.longitude);
            let name = this.cinemaInfo.restaurant_name;
            let address = this.cinemaInfo.restaurant_address;
            uni.openLocation({
                latitude,
                longitude,
                scale: 18,
                name,
                address,
                success: function() {
                    console.log('success');
                }
            });
        },

        // 切换轮播改变背景
        setBackground(index) {
            this.swiperCurrent = index;
            this.chooseMovice = this.movieList[index];
            this.tabLists = Asc(this.allPreferential[this.chooseMovice.movieId], "time");
            this.timeList = Asc(this.tabLists[0].list, "showTime");
            this.tabIndexs = 0;
        },
        getTimeTab(data, index) {
            if (this.tabIndexs != index) {
                this.tabIndexs = index
                this.timeList = Asc(data.list, "showTime")
            }
        },
        getGou(data) {
            uni.setStorageSync("SeatInfo", data);
            uni.setStorageSync("chooseMovice", this.chooseMovice);
            this.goto("/pagesB/cinema/selectSeat", { showId: data.showId })
        },
        province(original, price) {
            let val = original - price
            return Math.floor(val * 100) / 100
        },

        tim(str) {
            return this.$day(str).format("HH:mm")
        }
    }
}
</script>
<style lang="scss">
page {
    min-height: 100vh;
    background-color: #fff;
}

// 轮播图中间
.swiper_main {
    position: relative;
    height: 324rpx;
    overflow: hidden;

    .background-img-vague {
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        // transform: translateX(-50%);
        filter: blur(15px);
        -webkit-filter: blur(15px);
    }

    ::v-deep.u-swiper-item {
        width: 193rpx !important;
        height: 260rpx !important;
    }

    // 影院背景图
    .moviebg {
        width: 100%;
        height: 100%;
        filter: blur(10rpx);
    }

    .wrap {
        position: absolute;
        left: 0;
        top: 26rpx;
        right: 0;
        margin: 0 auto;
    }

    .box {
        width: 0;
        height: 0;
        border: 10rpx solid;
        border-color: transparent transparent #fff #fff;
        transform: rotate(135deg);
        position: absolute;
        bottom: -10rpx;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

}

.movie-position {
    padding: 30rpx 32rpx;

    .position-item {
        width: calc(100% - 80rpx);
    }

    .position-text {
        color: #2D3039;
        font-size: 32rpx;
        font-weight: bold;
    }

    .item-texts {
        color: #636775;
        font-size: 24rpx;
    }

    .item-img-list {
        width: 80rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: right;

        .collion {
            font-size: 50rpx;
        }
    }
}

.moive-name {
    text-align: center;
    margin-top: 30rpx;
    color: #2D3039;
    font-size: 36rpx;
    font-weight: 600;
}

.moive-info {
    text-align: center;
    margin-top: 14rpx;
    color: #636775;
    font-size: 24rpx;
}

.moive-tab-list {
    margin-top: 40rpx;
    padding: 24rpx 12rpx;
    border-bottom: 2rpx solid #DFE0E2;
    overflow-x: auto;
    white-space: nowrap;
    width: auto;
    overflow-y: hidden;

    .tabs-list-item {
        padding: 0rpx 20rpx;
        display: inline-block;
        position: relative;
        color: #636775;
        font-size: 28rpx;
    }

    .tab-sel {
        color: #EB5A5F !important;
        font-size: 28rpx;
        font-weight: 550;
    }

    .bottoms {
        position: absolute;
        bottom: -30rpx;
        right: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 52rpx;
        height: 8rpx;
        background-color: #EB5A5F;
        // border-radius: 5rpx 5rpx 0px 0px;
    }
}

.ticket-list {
    margin: 0rpx 32rpx;
    padding: 38rpx 0rpx;
    border-bottom: 2rpx solid #E0E1E3;
    display: flex;
    align-items: center;

    .ticet-left {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left-time {
            color: #2D3039;
            font-size: 42rpx;
        }

        .left-type {
            color: #2D3039;
            font-size: 28rpx;
            margin-left: 32rpx;
        }
    }

    .ret-price {
        color: #EB5A5F;
        font-size: 38rpx;
        font-weight: bold;

        &::before {
            content: "￥";
            font-size: 28rpx;
        }

        text {
            color: #666;
            font-size: 24rpx;
            font-weight: 400;
            margin-left: 12rpx;
        }
    }

    .ret-yuans {
        color: #A6A8AE;
        font-size: 28rpx;
        margin-left: 13rpx;
        text-decoration: line-through;
    }
}

.ticet-booms {
    color: #A6A8AE;
    font-size: 24rpx;
}

.ticet-boom-ret {
    display: flex;
    align-items: center;

    .sheng-text {
        padding: 0rpx 8rpx;
        height: 30rpx;
        line-height: 30rpx;
        background-color: #3DB97C;
        border-radius: 4rpx;
        color: #FFFFFF;
        font-size: 20rpx;
        text-align: center;
        margin-right: 12rpx;
    }

    .sheng-pirce {
        color: #A6A8AE;
        font-size: 24rpx;
    }
}

.buy-btns {
    width: 110rpx;
    height: 58rpx;
    text-align: center;
    line-height: 58rpx;
    background: linear-gradient(207deg, #EA525F 0%, #EB5A5F 100%);
    border-radius: 30rpx;
    color: #FFFFFF;
    font-size: 24rpx;
    font-weight: 550;
    margin-left: auto;
}
</style>