<template>
    <div class="cinemaTicket">
        <template v-if="order.status != 0">
            <div class="head">
                <div class="head_tit">{{ ticket.cinemaName }}</div>
                <div class="head_con flex_r flex_jb">
                    <div class="info flex_c flex_jb">
                        <div class="cb">
                            <p class="pt">{{ ticket.movieName }}</p>
                            <p>{{ticket.showVersionType}} {{ ticket.amount }}张</p>
                        </div>
                        <div class="cb">
                            <p>{{ ticket.showTime }} 时长{{ ticket.duration }}分钟</p>
                            <p class="p">{{ ticket.hallName }} {{ ticket.seatInfos }}</p>
                        </div>
                    </div>
                    <image class="poster" mode="aspectFill" :src="order.posterUrl" />
                </div>
            </div>
            <div class="card qupiao">
                <div class="tit">取电影票</div>
                <div class="codebar" v-if="ticket.orderStatus=='GENERATE_SUCCESS'">
                    <swiper class="swiper" circular>
                        <swiper-item v-for="(i,s) in ticket.ticketCode" :key="s">
                            <block v-for="(a,b) in i.code" :key="b" v-show="a.text=='取票码'">
                                <Uqrcode ref="uqcode" :code="a.value" :size="150" :class="['code-img',HaveBeenShown?'opacity':'']" />
                                <div class="ticketCode">取票码：<span class="dinB">{{ a.value }}</span></div>
                            </block>
                        </swiper-item>
                    </swiper>
                    <span class="ico" v-show="HaveBeenShown">已放映</span>
                </div>
                <div class="await" v-else-if="ticket.orderStatus=='DEALING'">
                    <img class="await_img" src="http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/416c89124df9a69bb1cbfb55b1007b086031a57fpng" alt="">
                    <div class="txt">待出票</div>
                </div>
                <div class="await" v-else-if="ticket.orderStatus=='CLOSE'">
                    <img class="await_img" src="http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/7e29ee15fa2aff20d026cf86023c2ae97238ffcbpng" alt="">
                    <div class="txt">出票失败</div>
                </div>
            </div>
            <div class="card detail">
                <div class="tit">订单详情</div>
                <view class="label">
                    <view class="title">实付金额：</view>
                    <view class="nums">￥{{ order.pay_amount }}</view>
                </view>
                <view class="label">
                    <view class="title">订单编号：</view>
                    <view class="nums">{{ ticket.tradeNo }}</view>
                </view>
                <view class="label">
                    <view class="title">购买时间：</view>
                    <view class="nums">{{ ticket.orderTime }}</view>
                </view>
                <view class="label">
                    <view class="title">手机号码：</view>
                    <view class="nums">{{ ticket.phoneNumber }}</view>
                </view>
            </div>
        </template>
        <template v-else>
            <div class="head">
                <div class="head_tit">{{ order.cinemaName }}</div>
                <div class="head_con flex_r flex_jb">
                    <div class="info flex_c flex_jb">
                        <p class="pt">{{ order.movieName }}</p>
                        <p class="p">{{ order.amount }}张</p>
                        <p class="p">原价 ￥{{ order.order_amount }}</p>
                        <p class="p">{{ order.seatInfos }}</p>
                    </div>
                    <image class="poster" mode="aspectFill" :src="order.posterUrl" />
                </div>
            </div>
            <div class="phone card flex_r flex_jb">
                <span>联系方式</span>
                <span>{{ userinfo.mobile }}</span>
            </div>
            <div class="money card">
                <div class="li flex_r flex_jb">
                    <span>消费金额</span>
                    <span>￥{{ order.order_amount || 0 }}</span>
                </div>
                <div class="li flex_r flex_jb">
                    <span>消费金抵扣<span class="corg">{{Integral}}%</span></span>
                    <span class="corg">-￥{{ deduction || 0 }}</span>
                </div>
                <div class="li flex_r flex_jb">
                    <span>实付金额</span>
                    <span>￥{{ order.pay_amount || 0 }}</span>
                </div>
            </div>
            <div class="btnbar" v-if="ispay" @click="pay">立即支付
                <div class="msg">请在 {{ $day(order.create_time).add(15, 'm').format("YYYY-MM-DD HH:mm") }} 前完成支付</div>
            </div>
        </template>
    </div>
</template>
<script>
import { ToPayOpre } from "@/utils/reqTools.js";
let toPayOpre = new ToPayOpre();
import Uqrcode from '@/components/uqrcode/uqrcode'
import { post } from "@/request/api.js";
export default {
    name: "cinemaTicket",
    props: {},
    components: { Uqrcode },
    data() {
        return {
            pda: {},
            ticket: {},
            order: {},
            Integral: 0,
            deduction: 0,
            userinfo: uni.getStorageSync("userinfo"),

            ispay: false,
            HaveBeenShown: false, //是否放映
        };
    },
    methods: {
        getTicket(da) {
            post("local/orderMovie", da).then(res => {
                if (res.code == 0) {
                    if (res.data.detail.code == 200) {
                        this.ticket = res.data.detail.data;
                        let bo = this.$day().unix() > this.$day(this.ticket.showTime).add(2, 'h').unix();
                        this.$set(this,"HaveBeenShown",bo);
                    }
                    let da = res.data.order;
                    if (da) {
                        let arr = JSON.parse(da.product_detail)
                        let obj = {
                            trade_no: da.trade_no,
                            cinemaName: da.restaurant_name,
                            movieName: da.orderGoods[0].product_name,
                            amount: da.orderGoods[0].number,
                            posterUrl: da.orderGoods[0].product_img,
                            seatInfos: arr.map(item => item.seatName).join("，"),
                            pay_amount: da.pay_amount,
                            order_amount: da.order_amount,
                            create_time: da.create_time,
                            status: da.status
                        }
                        this.order = obj;
                        this.getIntegral();
                        this.ispay = this.$day().unix() < this.$day(this.order.create_time).add(15, 'm').unix()
                    }
                }
            })
        },
        getIntegral() {
            post("local/getIntegral", { type: 2 }).then(res => {
                if (res.code == 0) {
                    let i1 = res.data.integral;
                    this.Integral = this.$h.Mul(i1, 100);
                    this.deduction = this.$h.Mul(this.order.order_amount, i1).toFixed(2);
                }
            })
        },
        pay() {
            post("local/goOrderPay", { trade_no: this.order.trade_no }).then(res => {
                if (res.code == 0 && res.data.data.prepayid) {
                    toPayOpre.toPay(res.data.data, (rea) => {
                        if (!rea) {
                            // 支付成功
                            this.getTicket(this.pda);
                        } else {
                            // 支付失败
                        }
                    });
                }
            })
        },
    },
    onLoad(da) {
        this.pda = da;
        this.getTicket(da)
    },
    onShow() {},
    mounted() {},
};
</script>
<style scoped lang='scss'>
.cinemaTicket {
    padding: 28rpx 30rpx;
}

.head {
    border-radius: 20rpx;
    background-color: #fff;
    box-shadow: 4rpx 4rpx 16rpx 10rpx rgba($color: #000, $alpha: 0.15);

    .head_tit {
        font-size: 28rpx;
        padding: 25rpx 28rpx;
    }

    .head_con {
        padding: 25rpx 28rpx;
    }

    .info,
    .poster {
        vertical-align: text-top;
    }

    .info {
        width: calc(100% - 150rpx);
        padding-right: 30rpx;
        min-height: 220rpx;

        p {
            font-size: 26rpx;
            color: #666;
            margin-bottom: 8rpx;
        }

        .pt {
            font-weight: bold;
            color: #000;
            font-size: 30rpx;
            margin-bottom: 8rpx;
        }

        .p {
            color: #000;
        }
    }

    .poster {
        width: 150rpx;
        height: 220rpx;
        border-radius: 12rpx;
    }
}

.qupiao {
    position: relative;
    .code-img {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin: 0 auto;
    }

    .opacity {
        opacity: 0.25;
    }
    .ico{
        padding: 5rpx 16rpx;
        color: #EB5A5F;
        border: 4rpx solid #EB5A5F;
        border-radius: 12rpx;
        font-size: 30rpx;
        font-weight: bold;
        position: absolute;
        left: calc(50% - 65rpx);
        top: 210rpx;
    }
    .await{
        text-align: center;
        .await_img{
            width: 280rpx;
            height: 280rpx;
        }
        .txt{
            font-size: 28rpx;
            color: #666;
        }
    }
}

.detail {
    .label {
        margin-top: 15rpx;
    }

    .title,
    .nums {
        display: inline-block;
        font-size: 26rpx;
    }

    .title {
        color: #888;
        width: 160rpx;
    }
}

.money {
    .li {
        margin-bottom: 16rpx;

        &:last-child {
            margin-bottom: 0;
        }

        span {
            font-size: 30rpx;
        }
    }

    .corg {
        color: #EB5A5F;
        margin-left: 5rpx;
    }
}

.btnbar {
    width: calc(100% - 60rpx);
    height: 80rpx;
    background: #EB5A5F;
    border-radius: 45rpx;
    position: fixed;
    bottom: 50rpx;
    left: 30rpx;
    color: #fff;
    font-size: 36rpx;
    text-align: center;
    line-height: 80rpx;

    .msg {
        position: absolute;
        top: -80rpx;
        left: 0;
        font-size: 25rpx;
        color: #666;
        width: 100%;
        text-align: center;
    }
}

.card {
    background-color: #fff;
    border-radius: 16rpx;
    margin-top: 30rpx;
    padding: 28rpx 30rpx;
    font-size: 32rpx;

    .tit {
        height: 30rpx;
        line-height: 30rpx;
        font-size: 30rpx;
        margin-bottom: 30rpx;
        padding-left: 12rpx;
        border-left: 6rpx solid #EB5A5F;
    }
}

.swiper {
    height: 360rpx;

    .ticketCode {
        font-size: 25rpx;
        margin-top: 30rpx;
        text-align: center;

        .dinB {
            font-size: 28rpx;
        }
    }
}
</style>