<template>
    <view class="waper" :style="'padding-bottom: ' + windowBottom + 'px;'">
        <u-navbar :autoBack="true" :bgColor="scrollTop > 20 ? 'white' : 'transparent'"
            :leftIconColor="scrollTop > 20 ? '#303133' : '#fff'">
            <view slot='center' class="navbar_title" :style="{color: scrollTop > 20 ? '#303133' : '#fff'}">确认订单</view>
        </u-navbar>
        <view class="banner"></view>
        <view class="waper_box" v-if="pageData">
            <view class="header-box">
                <view class="header-title">{{pageData.ticketName}}</view>
                <view class="text-box">
                    <view class="label">观影日期</view>
                    <view class="text-content">{{pageData.hallTime}}</view>
                </view>
                <view class="text-box">
                    <view class="label">已选座位</view>
                    <view class="text-content">
                        <view v-for="item in pageData.chooseTicket" :key="item.id">
                            {{pageData.hallName || ''}} {{pageData.itemName || ''}} {{item.zoneName || ''}} {{item.rowNum}}排{{item.seatNum}}座
                        </view>
                    </view>
                </view>
                <view class="text-box">
                    <view class="label">包含门票</view>
                    <view class="text-content">{{getTicketName()}}</view>
                </view>
            </view>
            <view class="info-box">
                <view class="info-tit">游客信息</view>
                <view class="info-sub-tit">需填{{pageData.authenticationType == 2 ? 1 : pageData.authenticationType == 3 ? pageData.chooseTicket.length : 1}}位，请按座位的顺序填写</view>
                <view class="box" v-if="touristList.length > 0">
                    <view class="border-box" :class="[item.active ? 'active' : '']" v-for="(item, index) in touristList"
                        :key="item.id" @click="selectTourist(index)">
                        <view class="border-box-tit">{{item.name}}</view>
                        <image src="https://common/date_active.png" mode="scaleToFill" />
                    </view>
                    <view class="border-more" @click="addTourist">
                        <view class="left">
                            新增游客
                        </view>
                        <view class="right">
                            <u-icon name="arrow-right" color="rgba(0,0,0,0.45)" size="32rpx"></u-icon>
                        </view>
                    </view>
                </view>
                <view class="add_menu" v-else @click="addTourist">
                    <u-icon name="plus" color="#03AE80" size="28rpx"></u-icon>
                    <view class="text">点击新增游客</view>
                </view>
                <view class="info-list" v-for="(item, index) in touristList" :key="index" v-if="item.active">
                    <view class="info-list-left">
                        <view>{{item.name}}</view>
                        <view>手机号 {{item.mobile}}</view>
                        <view>身份证号 {{item.idCard}}</view>
                    </view>
                    <view class="info-list-right" @click="editTourist(item)">编辑</view>
                </view>
            </view>
        </view>
        <view class="bottom-box" v-if="pageData">
            <view class="bottom-left">
                <view>总金额：</view>
                <view>￥</view>
                <view>{{pageData.totalPrice && pageData.totalPrice.toFixed(2)}}</view>
            </view>
            <view class="bottom-right" @click="confirmFun">确认支付</view>
        </view>
        <!-- 添加修改游客 -->
        <view class="tourist_waper" v-if="showTourist">
            <view class="tourist_box" :style="'padding-bottom: ' + keyboardHeight + 'px;'">
                <view class="popup-tourist">
                    <view class="title">
                        {{popupTitle}}
                        <view class="close" @click="closeTourist">
                            <u-icon name="close" color="#000" size="30rpx"></u-icon>
                        </view>
                    </view>
                    <view class="form">
                        <view class="name-box">
                            <view class="list">
                                <view class="label">姓名</view>
                                <input type="text" :adjust-position="false" @keyboardheightchange="handleKeyboardChange"
                                    v-model="touristForm.name" placeholder="请输入联系人姓名" />
                            </view>
                        </view>
                        <view class="num-box">
                            <view class="list">
                                <view class="label">联系电话</view>
                                <input type="number" :adjust-position="false"
                                    @keyboardheightchange="handleKeyboardChange" v-model="touristForm.mobile"
                                    placeholder="请输入联系号码" @blur="keyboardHeight = 0;" />
                            </view>
                            <view class="list">
                                <view class="label">身份证号码</view>
                                <input type="idcard" :adjust-position="false"
                                    @keyboardheightchange="handleKeyboardChange" v-model="touristForm.idCard"
                                    placeholder="请输入证件号码" @blur="keyboardHeight = 0;" />
                            </view>
                        </view>
                    </view>
                    <view class="btn" @click="saveTourist">保存</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                windowBottom: 0,
                scrollTop: 0,
                safeAreaBottom: 0,
                touristList: [],
                showTourist: false,
                keyboardHeight: 0,
                popupTitle: '',
                activeTourist: [],
                touristForm: {
                    name: '',
                    mobile: '',
                    idCard: '',
                },
                pageData: null
            }
        },
        async onLoad(options) {
            this.windowBottom = this.$safeAreaBottom + uni.upx2px(152);
            this.safeAreaBottom = this.$safeAreaBottom;
            this.pageData = JSON.parse(decodeURIComponent(options.pageData));

            this.getTouristList('init')
        },
        methods: {
            async getTouristList(type) {
                let info = await this.$http.touristList();
                if (type == 'init') {
                    let data = info.rows.find((item) => {
                        return item.status == '1'
                    })
                    if (data) this.activeTourist = [data.id];
                }

                for (var i = 0; i < info.rows.length; i++) {
                    info.rows[i].active = false;
                    if (this.activeTourist.indexOf(info.rows[i].id) > -1) info.rows[i].active = true;
                }
                this.touristList = info.rows;
            },
            selectTourist(index) {
                console.log(this.pageData.authenticationType)
                // authenticationType 1不实名2需提供一位身份证信息3所有出行人需要提供身份信息
                if (this.pageData.authenticationType == '1' || this.pageData.authenticationType == '2') {
                    for (var i = 0; i < this.touristList.length; i ++) {
                        this.$set(this.touristList[i], 'active', false);
                    }
                    this.$set(this.touristList[index], 'active', true);
                } else {
                    const info = this.touristList[index];
                    let num = this.touristList.filter((item) => {
                        return item.active
                    }).length;
                    if (!this.touristList[index].active) {
                        if (num >= this.pageData.chooseTicket.length) {
                            uni.showToast({
                                mask: true,
                                title: '游客人数不得大于购票数量',
                                icon: 'none'
                            });
                            return false;
                        }
                    }
                    this.touristList[index].active = !this.touristList[index].active;
                }
            },
            handleKeyboardChange(e) {
                this.$nextTick(() => {
                    this.keyboardHeight = e.detail.height
                })
            },
            closeTourist() {
                this.showTourist = false;
            },
            async saveTourist() {
                if (!this.touristForm.name) {
                    uni.showToast({
                        mask: true,
                        title: '请输入姓名',
                        icon: 'none'
                    })
                    return false;
                }
                if (!this.$utils.checkStr(this.touristForm.idCard, 'card')) {
                    uni.showToast({
                        mask: true,
                        title: '请输入正确的证件号',
                        icon: 'none'
                    })
                    return false;
                }
                if (!this.$utils.checkStr(this.touristForm.mobile, 'mobile')) {
                    uni.showToast({
                        mask: true,
                        title: '请输入正确的手机号',
                        icon: 'none'
                    })
                    return false;
                }
                let info = null;
                if (this.touristForm.id) {
                    info = await this.$http.updateTourist(this.touristForm);
                } else {
                    info = await this.$http.addTourist(this.touristForm);
                }
                if (info.code == 200) {
                    uni.showToast({
                        mask: true,
                        title: '操作成功',
                        icon: 'success'
                    });
                    this.closeTourist();
                    this.getTouristList('get');
                }
            },
            addTourist() {
                let arr = [];
                for (var i = 0; i < this.touristList.length; i++) {
                    if (this.touristList[i].active) arr.push(this.touristList[i].id);
                }
                this.activeTourist = arr;

                this.touristForm.name = ''
                this.touristForm.mobile = ''
                this.touristForm.idCard = ''

                this.popupTitle = '新增游客'
                this.showTourist = true;
            },
            editTourist(info) {
                this.touristForm.name = info.name
                this.touristForm.mobile = info.mobile
                this.touristForm.idCard = info.idCard
                this.touristForm.id = info.id

                this.popupTitle = '编辑游客'
                this.showTourist = true;
                let arr = [];
                for (var i = 0; i < this.touristList.length; i++) {
                    if (this.touristList[i].active) arr.push(this.touristList[i].id);
                }
                this.activeTourist = arr;
            },
            async confirmFun() {
                const arr = this.touristList.filter((item) => {
                    return item.active;
                });
                if (this.pageData.authenticationType == 3) {
                    if (arr.length != this.pageData.chooseTicket.length) {
                        uni.showToast({ mask: true, title: '购票数量和游客信息人数不匹配', icon: 'none' })
                        return false;
                    }
                } else {
                    if (!arr.length) {
                        uni.showToast({ mask: true, title: '请选择游客信息', icon: 'none'
                        })
                        return false;
                    }
                }
                let userList = []
                let ids = []
                // authenticationType 1不实名2需提供一位身份证信息3所有出行人需要提供身份信息
                if (this.pageData.authenticationType == '1' || this.pageData.authenticationType == '2') {
                    this.pageData.chooseTicket.forEach((item, index) => {
                        ids.push(item.id)
                        userList.push({
                            name: arr[0].name,
                            idCard: arr[0].idCard,
                            userId: arr[0].userId,
                            id: arr[0].id,
                            rowNum: item.rowNum,
                            seatNum: item.seatNum,
                            priceId: item.priceId,
                            price: item.sumPrice,
                            zoneId: item.zoneId,
                            zoneName: item.zoneName,
                        })
                    })
                } else {
                    this.pageData.chooseTicket.forEach((item, index) => {
                        ids.push(item.id)
                        userList.push({
                            name: arr[index].name,
                            idCard: arr[index].idCard,
                            userId: arr[index].userId,
                            id: arr[index].id,
                            rowNum: item.rowNum,
                            seatNum: item.seatNum,
                            priceId: item.priceId,
                            price: item.sumPrice,
                            zoneId: item.zoneId,
                            zoneName: item.zoneName,
                        })
                    })
                }
                let data = {
                    "buyQuantity": this.pageData.chooseTicket.length,
                    "totalPrice": this.pageData.totalPrice,
                    "cinemaOrderItemList": [{
                        "buyQuantity": this.pageData.chooseTicket.length,
                        "ticketId": this.pageData.ticketId,
                        "qrcodeRule": this.pageData.qrcodeRule,
                        "totalPrice": this.pageData.totalPrice,
                        "movieId": this.pageData.movieId,
                        "movieName": this.pageData.movieName,
                        "itemId": this.pageData.itemId,
                        "userList": userList,
                        "saleTime": this.pageData.saleTime + ' 00:00:00'
                    }],
                    "ids": ids
                }
                
                let info = await this.$http.buyOtherTicket(data)
                uni.showLoading({ mask: true });
                if(info.code == 200) {
                    if (data.totalPrice > 0) {
                        const prepayId = JSON.parse(info.data.tradeSession);
                        uni.requestPayment({
                        	provider: 'wxpay',
                        	timeStamp: prepayId.timeStamp,
                        	nonceStr: prepayId.nonceStr,
                        	package: prepayId.packageValue,
                        	signType: prepayId.signType,
                        	paySign: prepayId.paySign,
                        	success: (res) => {
                                uni.showToast({ mask: true, title: '支付成功', icon: 'success' })
                        		uni.redirectTo({
                        		    url: '/pages/my/unpaid?id=' + info.data.id
                        		})
                        	},
                        	fail: (err) => {
                        		uni.showToast({ mask: true, title: '支付取消', icon: 'none' })
                                uni.redirectTo({
                                    url: '/pages/my/unpaid?id=' + info.data.id
                                })
                        	}
                        });
                    } else {
                        uni.showToast({ mask: true, title: '购买成功', icon: 'success' })
                        setTimeout(() => {
                            uni.redirectTo({
                                url: '/pages/my/unpaid?id=' + info.data.id
                            })
                        }, 1500)
                    }
                } else {
                    uni.hideLoading();
                }

            },
            getTicketName() {
                let str = `${this.pageData.movieName}${this.pageData.chooseTicket.length}张      `
                this.pageData.ticketChildren && this.pageData.ticketChildren.forEach(item => {
                    str += `${item.childTicketName}${this.pageData.chooseTicket.length}张   `
                })
                return str
            }
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop;
        }
    }
</script>

<style lang="scss">
    page {
        background: #FBFBFB;
    }
</style>
<style lang="scss" scoped>
    .navbar_title {
        color: white;
    }

    .banner {
        width: 100%;
        height: 394rpx;
        background: #03AE80;
    }

    .waper_box {
        width: 100%;
        margin-top: -187rpx;
        padding: 0 32rpx;
        box-sizing: border-box;

        .header-box {
            width: 100%;
            background: #FFFFFF;
            border-radius: 10rpx;
            box-sizing: border-box;
            padding: 32rpx 24rpx 15rpx;
            margin-bottom: 20rpx;

            .header-title {
                padding-bottom: 24rpx;
                border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
                font-weight: 600;
                font-size: 40rpx;
                color: #333333;
                height: 56rpx;
                line-height: 47rpx;
                margin-bottom: 24rpx;
            }

            .text-box {
                display: flex;
                align-items: flex-start;
                margin-top: 20rpx;

                .label {
                    width: 112rpx;
                    min-width: 112rpx;
                    margin-right: 48rpx;
                    height: 39rpx;
                    font-size: 28rpx;
                    color: rgba(0, 0, 0, 0.65);
                }

                .text-content {
                    font-size: 28rpx;
                    color: rgba(0, 0, 0, 0.85);
                    min-height: 40rpx;
                    flex: 1;
                    view {
                        // height: 40rpx;
                        line-height: 40rpx;
                    }

                    &>view:not(:first-child) {
                        margin-top: 12rpx;
                    }
                }
            }
        }

        .info-box {
            background: #FFFFFF;
            border-radius: 10rpx;
            box-sizing: border-box;
            padding: 32rpx 24rpx;

            .info-tit {
                height: 45rpx;
                font-weight: 500;
                font-size: 32rpx;
                color: rgba(0, 0, 0, 0.85);
                line-height: 38rpx;
                margin-bottom: 8rpx;
            }

            .info-sub-tit {
                height: 34rpx;
                font-size: 24rpx;
                color: rgba(0, 0, 0, 0.45);
                line-height: 28rpx;
            }

            .box {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                margin-bottom: 24rpx;

                .border-box {
                    width: 166rpx;
                    height: 106rpx;
                    border-radius: 10rpx 10rpx 10rpx 10rpx;
                    border: 1rpx solid rgba(0, 0, 0, 0.1);
                    margin-right: 20rpx;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    overflow: hidden;
                    margin-top: 20rpx;
                    box-sizing: border-box;

                    .border-box-tit {
                        font-size: 28rpx;
                        color: rgba(0, 0, 0, 0.85);
                        line-height: 33rpx;
                    }

                    image {
                        width: 40rpx;
                        height: 40rpx;
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        z-index: -1;
                    }
                }

                .time-border-box {
                    width: 215rpx;
                    height: 104rpx;
                    border-radius: 10rpx 10rpx 10rpx 10rpx;
                    border: 1rpx solid rgba(0, 0, 0, 0.1);
                    margin-right: 20rpx;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: center;
                    position: relative;
                    overflow: hidden;
                    margin-top: 20rpx;
                    box-sizing: border-box;
                    padding: 16rpx 12rpx;

                    .time-border-box-tit {
                        height: 34rpx;
                        font-size: 24rpx;
                        color: rgba(0, 0, 0, 0.65);
                        line-height: 28rpx;
                    }

                    .time-border-box-sub-tit {
                        height: 34rpx;
                        font-size: 24rpx;
                        color: rgba(0, 0, 0, 0.45);
                        line-height: 28rpx;
                        margin-top: 4px;
                    }

                    image {
                        width: 40rpx;
                        height: 40rpx;
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        z-index: -1;
                    }
                }

                .time-border-box:nth-child(3n) {
                    margin-right: 0;
                }

                .active {
                    border: 1rpx solid #03AE80;

                    image {
                        z-index: 1;
                    }
                }

                .border-more {
                    width: 80rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .left {
                        width: 48rpx;
                        font-size: 24rpx;
                        color: rgba(0, 0, 0, 0.45);
                        line-height: 28rpx;
                    }
                }
            }

            .add_menu {
                width: 100%;
                margin-top: 32rpx;
                height: 90rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgba(#03AE80, 0.1);
                border-radius: 10rpx;
                margin-bottom: 24rpx;

                .text {
                    margin-left: 8rpx;
                    color: #03AE80;
                    font-size: 28rpx;
                    font-weight: 500;
                }
            }

            .info-list {
                display: flex;
                align-items: center;
                justify-content: space-between;
                box-sizing: border-box;
                padding: 12rpx 0px 24rpx 0rpx;
                border-top: 1rpx solid rgba(0, 0, 0, 0.1);

                .info-list-left {
                    &>view {
                        margin-top: 12rpx;
                        height: 39rpx;
                        font-size: 28rpx;
                        color: rgba(0, 0, 0, 0.85);
                        line-height: 33rpx;
                    }
                }

                .info-list-right {
                    height: 39rpx;
                    font-size: 28rpx;
                    color: #03AE80;
                    line-height: 33rpx;
                }
            }
        }
    }

    .bottom-box {
        width: 100%;
        height: 120rpx;
        position: fixed;
        left: 0;
        bottom: 0;
        background: #fff;
        z-index: 10;
        box-sizing: border-box;
        padding: 0 32rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .bottom-left {
            display: flex;
            align-items: flex-end;

            view {
                &:nth-child(1) {
                    font-size: 24rpx;
                    color: #999999;
                    line-height: 1;
                    margin-bottom: 4rpx;
                }

                &:nth-child(2) {
                    font-weight: 500;
                    font-size: 36rpx;
                    color: #FF5833;
                    line-height: 1;
                    margin-bottom: 1rpx;
                }

                &:nth-child(3) {
                    font-family: DIN, DIN;
                    font-weight: bold;
                    font-size: 64rpx;
                    color: #FF5833;
                    line-height: 1;

                }
            }
        }

        .bottom-right {
            width: 228rpx;
            height: 80rpx;
            border-radius: 40rpx;
            background: #03AE80;
            text-align: center;
            line-height: 80rpx;
            color: #fff;
            font-size: 30rpx;
            font-weight: 500;
        }
    }

    .tourist_waper {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 100;
        display: flex;
        align-items: flex-end;

        .tourist_box {
            width: 100%;

            .popup-tourist {
                width: 100%;
            }
        }
    }
</style>