<template>
    <view>
        <view class="_container" :style="order_info.order_status !== 2 && order_info.order_status !== 1 ? 'padding-top:20rpx;' : ''">
            <view v-if="order_info.order_status == 2" class="pay_status">
                <view class="warn">
                    <view class="text1">待支付</view>
                    <view class="text2">若超时未支付，订单将自动取消</view>
                </view>
                <view class="cut_down">剩余 {{ countDownNum }}</view>
            </view>
            <view class="_succ" v-else-if="order_info.order_status == 1">
                <view class="text1">支付成功！</view>
                <view class="text2">请注意节目开始时间，提前进场。</view>
            </view>
            <view class="play_info">
                <view class="_top">
                    <image class="img" :src="order_info.order_pic" />
                    <view class="info">
                        <view class="title">{{ show_info.show_name }}</view>
                        <view>
                            <view class="line">{{ show_info.show_date }}</view>
                            <view class="line">{{ show_info.city_name }}｜{{ show_info.theater_name }}</view>
                        </view>
                        <view class="line" style="font-weight: normal">
                            <image src="/static/images/ui/passed.png" />
                            <text>不支持退票</text>
                            <block v-if="show_info.is_invoice == 0">
                                <image src="/static/images/ui/closeRed.png" />
                                <text>不可开发票</text>
                            </block>
                            <block v-else-if="show_info.is_invoice == 1">
                                <image src="/static/images/ui/passedGreen.png" />
                                <text>可开发票</text>
                            </block>
                        </view>
                    </view>
                </view>

                <view class="split-line"></view>

                <view class="_bottom">
                    <view class="_ticket" v-for="(ticket_list, index) in ticket_info" :key="index">
                        <view class="sit_info">¥{{ ticket_list.price }}*{{ ticket_list.tkt_num }}张</view>

                        <view style="display: flex; flex-wrap: wrap">
                            <view class="sit_info1" v-for="(item, index1) in ticket_list.list" :key="index1">{{ item.seat_info }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 订票人信息 -->
        <view class="cellgroup">
            <view class="cell" style="border-bottom: 1px dashed #dddddd">
                <view class="title">取票手机</view>
                <view class="value">{{ order_info.mobile }}</view>
            </view>
            <view class="cell" style="padding: 20rpx 0 0 0">
                <view class="title">观演人</view>
                <view class="value">
                    <view style="padding-bottom: 20rpx" v-for="(item, index) in viewer_info" :key="index">{{ item.name }} {{ item.id_card }}</view>
                </view>
            </view>
        </view>
        <!-- 地址信息 -->
        <view class="cellgroup">
            <view class="cell cell1">
                <view class="title" style="width: 70%">
                    <view class="t">{{ show_info.city_name }}｜{{ show_info.theater_name }}</view>
                    <view class="b">地址：{{ show_info.traffic_info }}</view>
                </view>
                <image src="/static/images/ui/location.png" :data-longitude="show_info.longitude" :data-latitude="show_info.latitude" @tap="loc" />
            </view>
        </view>
        <!-- 订单信息 -->
        <view class="cellgroup">
            <view class="cell" style="padding: 30rpx 0 0 0">
                <view class="title">订单信息</view>
                <view class="value"></view>
            </view>
            <view class="cell cell1" style="border-bottom: 1px solid #ebedf0">
                <view class="title">支付金额</view>
                <view class="value">
                    ¥{{ order_info.order_price }}
                    <image src="/static/images/ui/arrow_right.png" style="width: 40rpx; height: 40rpx" />
                </view>
            </view>
            <view class="cell cell1" style="border-bottom: 1px solid #ebedf0">
                <view class="title">订单号</view>
                <view class="value">{{ order_info.order_no }}</view>
            </view>
            <view class="cell cell1" style="margin-bottom: 10rpx">
                <view class="title">下单时间</view>
                <view class="value">{{ order_info.create_time }}</view>
            </view>
        </view>
        <view style="height: 500rpx; width: 100%"></view>
        <!-- 底栏 -->
        <view class="bottom_selector" v-if="order_info.order_status == 2">
            <view class="_sel">
                <button class="_cancel" @tap="cancel">取消订单</button>
                <button class="_confirm" @tap="pay">订单无误，立即支付</button>
            </view>
        </view>
        <view class="bottom_selector" v-else-if="order_info.order_status == 1 || order_info.order_status == 6 || order_info.order_status == 12">
            <view class="statement_inf">
                <view class="shaky">换票券码：{{ order_info.electronic_code }}（凭此码在取票机兑换票据）</view>
            </view>
            <view class="_b">
                <button @tap="show=true" class="selector_dsn">查看电子票码</button>
            </view>
        </view>

        <!-- 底部弹出层 -->
			<u-popup :round="10" :show="show" @close="show=false">
            <view v-for="(item, index) in a" :key="index" class="popup_dsn">
                <view v-if="index == a_id" class="sit_info1">
                    <view class="code_preview">
                        <image src="/static/images/ui/arrow_left.png" style="width: 40px; height: 40px" :data-a_id="index" @tap="sub" />
                        <image :src="item.qr_code" style="width: 128px; height: 128px" />
                        <image src="/static/images/ui/arrow_right.png" style="width: 40px; height: 40px" :data-a_id="index" @tap="plus" />
                    </view>
                    <view>{{ item.seat_info }}</view>
                    <view>{{ item.price }}元</view>
                    <view>识别码：{{ item.ticket_code }}</view>
                    <button @tap="show=false" class="selector_dsn" style="margin: 40rpx auto">知道了</button>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
// pages/order_detail/order_detail.js
import { http ,orderNoPay} from '../../../utils/util';
export default {
    data() {
        return {
            // checked: false,
            show: false,

            a_id: 0,
            order_no: '',
            clone_type: '',

            order_info: {
                order_status: 0,
                order_pic: '',
                mobile: '',
                order_no: '',
                create_time: '',
                electronic_code: ''
            },

            show_info: {
                show_name: '',
                show_date: '',
                city_name: '',
                theater_name: '',
                is_invoice: 0,
                traffic_info: '',
                longitude: '',
                latitude: ''
            },

            ticket_info: '',
            viewer_info: '',
            a: '',
            countDownNum: '',
            timer: '',

            ticket_list: {
                price: '',
                tkt_num: '',
                list: []
            }
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        let order_no = options.order_no;
        let _type = options._type;
        this.setData({
            order_no,
            clone_type: _type
        });
        if (order_no && _type) {
            http('/api/v1/order-detail', 'get', {
                order_no,
                type: _type
            }).then((res) => {
                this.countDown(res.order_info.timeout);
                this.setData({
                    order_info: res.order_info,
                    show_info: res.show_info,
                    ticket_info: res.ticket_info,
                    viewer_info: res.viewer_info
                });
                let arr = res.ticket_info;
                let a = [];

                for (let x in arr) {
                    for (let i in arr[x].list) {
                        arr[x].list[i].price = arr[x].price;
                        a.push(arr[x].list[i]);
                    }
                }

                this.setData({
                    a
                });
            });
        } else {
            uni.showToast({
                title: '未正常传入订单号',
                icon: 'fail',
                duration: 2000
            });
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        sub(e) {
            let a_id = e.currentTarget.dataset.a_id;
            console.log(a_id);

            if (a_id == 0) {
                a_id = this.a.length - 1;
            } else {
                a_id = a_id - 1;
            }

            this.setData({
                a_id
            });
        },

        plus(e) {
            let a_id = e.currentTarget.dataset.a_id;
            console.log(a_id);

            if (a_id == this.a.length - 1) {
                a_id = 0;
            } else {
                a_id = a_id + 1;
            }

            this.setData({
                a_id
            });
        },

        /*   check(event) {
        this.setData({
          checked: event.detail,
        });
      },
      agreement() {
        this.setData({
          show1: true
        })
      }, */
        loc(e) {
            if (e.currentTarget.dataset.longitude && e.currentTarget.dataset.latitude) {
                uni.openLocation({
                    latitude: e.currentTarget.dataset.latitude,
                    longitude: e.currentTarget.dataset.longitude,
                    name: this.show_info.theater_name,
                    address: this.show_info.traffic_info
                });
            } else {
                uni.showToast({
                    title: '地址信息错误',
                    icon: 'fail',
                    duration: 2000
                });
            }
        },
        cancel(e) {
            let that = this;
            uni.showModal({
                content: '是否取消订单',

                success(res) {
                    if (res.confirm) {
                        http('/api/v1/order-cancel', 'post', {
                            order_no: that.order_no
                        }).then((res) => {
                            uni.showToast({
                                title: '取消订单成功！',
                                duration: 2000
                            });
							if(getCurrentPages().length === 1){
								uni.reLaunch({
									url: '/pages/user/my_order/my_order'
								})
								return
							}
							uni.$emit('initData');
                            uni.navigateBack();
                        });
                    }
                }
            });
        },

        pay() {
         orderNoPay(this.order_no)
        },

        //定时器
        countDown: function (timeout) {
            let that = this;
            let countDownNum = timeout; //获取倒计时初始值

            let formatTime = that.getFormat(countDownNum);
            let countDown = `${formatTime.hh}:${formatTime.mm}:${formatTime.ss}`;
            that.setData({
                countDownNum: countDown
            }); //如果将定时器设置在外面，那么用户就看不到countDownNum的数值动态变化，所以要把定时器存进data里面

            that.setData({
                timer: setInterval(function () {
                    //这里把setInterval赋值给变量名为timer的变量
                    //每隔一秒countDownNum就减一，实现同步
                    countDownNum--;
                    let formatTime = that.getFormat(countDownNum);
                    let countDown = `${formatTime.hh}:${formatTime.mm}:${formatTime.ss}`; //然后把countDownNum存进data，好让用户知道时间在倒计着

                    that.setData({
                        countDownNum: countDown
                    }); //在倒计时还未到0时，这中间可以做其他的事情，按项目需求来

                    if (countDownNum == 0) {
                        //这里特别要注意，计时器是始终一直在走的，如果你的时间为0，那么就要关掉定时器！不然相当耗性能
                        //因为timer是存在data里面的，所以在关掉时，也要在data里取出后再关闭
                        clearInterval(that.timer);
                        typeNum = 1;
                        cardOption.answers = 0;
                        cardOption.success = false;
                        cardOption.answer = '';
                        that.save(cardOption); //关闭定时器之后，可作其他处理codes go here
                    }
                }, 1000)
            });
        },

        /**
         * 格式化时间
         */
        getFormat: function (ss) {
            let mm = 0;
            let hh = 0;

            if (ss > 60) {
                mm = parseInt(ss / 60);
                ss = parseInt(ss % 60);

                if (mm > 60) {
                    hh = parseInt(mm / 60);
                    mm = parseInt(mm % 60);
                }
            }

            if (ss > 9) {
                ss = ss;
            } else {
                ss = `0${ss}`;
            }

            if (mm > 9) {
                mm = mm;
            } else {
                mm = `0${mm}`;
            }

            if (hh > 9) {
                hh = hh;
            } else {
                hh = `0${hh}`;
            }

            return {
                ss,
                mm,
                hh
            };
        }
    },
    watch: {
        _type: {
            handler: function (newVal, oldVal) {
                this.clone_type = newVal;
            },

            immediate: true
        }
    }
};
</script>
<style>
@import '/utils/shaky.css';
._container {
    background-color: #ff446b;
    padding: 0 30rpx 20rpx 30rpx;
}

/* 顶部支付提示区域 */
.pay_status {
    background-color: #ff446b;
    display: flex;
    padding: 20rpx 10rpx;
}
.pay_status .warn {
    color: #ffffff;
    line-height: 48rpx;
}

.pay_status .cut_down {
    margin: 0 10rpx 0 auto;
    display: flex;
    align-items: center;
    color: #ffffff;
    font-size: 28rpx;
}
._succ {
    text-align: center;
    padding: 20rpx;
    color: #fff;
    line-height: 24px;
}

.text1 {
    font-size: 36rpx;
    font-weight: bold;
}
.text2 {
    font-size: 24rpx;
}

.play_info {
    background-color: #ffffff;
    border-radius: 20rpx;
}

._top {
    display: flex;
    padding: 20rpx;
}

._top .img {
    background: #d8d8d8;
    border-radius: 16rpx;
    width: 168rpx;
    height: 252rpx;
}

._top .info {
    padding-left: 20rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

._top .info .title {
    font-size: 32rpx;
    font-weight: bold;
    line-height: 48rpx;
}

._top .info .line {
    font-size: 24rpx;
    line-height: 48rpx;
    display: flex;
    align-items: center;
}
._top .info .line image {
    width: 28rpx;
    height: 28rpx;
}
._top .info .line text {
    margin: 0 20rpx 0 10rpx;
}
._bottom {
    padding: 20rpx 30rpx;
}

._bottom ._ticket {
    font-size: 28rpx;
    margin-bottom: 20rpx;
}
._bottom ._ticket .sit_info {
    font-weight: bold;
}

._bottom ._ticket .sit_info1 {
    font-size: 24rpx;
    color: #7b7b7b;
    width: 33%;
}
.split-line {
    position: relative;
    flex: 0 0 0;
    border-top: 2rpx dashed #eee;
}
.split-line:before,
.split-line:after {
    content: '';
    position: absolute;
    width: 16rpx;
    height: 32rpx;
    background: #ff446b;
    top: -18rpx;
    z-index: 1;
}
.split-line:before {
    border-radius: 0 32rpx 32rpx 0;
    left: 0;
}
.split-line::after {
    border-radius: 32rpx 0 0 32rpx;
    right: 0;
}

.cellgroup {
    background: #fff;
    margin-bottom: 20rpx;
}
.cell {
    display: flex;
    margin: 0 30px;
    padding: 10px 0;
    color: #181818;
}
.cell .title {
    font-size: 14px;
    font-weight: bold;
    width: 30%;
}
.cell .value {
    font-size: 12px;
    display: flex;
    align-items: center;
}
.cell1 {
    justify-content: space-between;
    align-items: center;
}
.cell .title .t {
}
.cell .title .b {
    font-size: 12px;
    color: #7b7b7b;
}
.cell image {
    width: 60rpx;
    height: 60rpx;
}
.bottom_selector {
    position: fixed;
    bottom: 0;
    width: 100%;
}
.statement_inf {
    font-size: 24rpx;
    color: #ff446b;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff0f5;
}
._b {
    background: #fff;
    padding: 30rpx 0;
}
.selector_dsn {
    width: 400rpx;
	margin:auto;
    background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
    border-radius: 44rpx;
    color: #ffffff;
    font-size: 28rpx;
}
.popup_dsn {
    text-align: center;
}
.code_preview {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 60%;
    margin: 40rpx auto;
}
._sel {
    width: 100%;
    background-color: #ffffff;
    padding: 30rpx 0;
    display: flex;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
	/* #ifdef MP-ALIPAY */
	justify-content: space-between;
	/* #endif */
}
._cancel {
    color: #acacac;
    font-size: 28rpx;
    border-radius: 44rpx;
    background: #ffffff;
    border: 2rpx solid #acacac;
    width: 27%;
    margin-left: 4%;
	/* #ifdef MP-ALIPAY */
	height: 90rpx;
	line-height: 90rpx;
	/* #endif */
}
._confirm {
    background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
    border-radius: 44rpx;
    font-size: 28rpx;
    width: 54%;
    color: #ffffff;
    margin-right: 4%;
	/* #ifdef MP-ALIPAY */
	height: 90rpx;
	line-height: 90rpx;
	/* #endif */
}
</style>
