<template>
    <view class="waper" :style="'padding-bottom: ' + safeAreaBottom + 'px'">
        <u-navbar :autoBack="true" :placeholder="true" bgColor="#03AE80" left-icon-color="#fff">
        	<view slot='center' class="navbar_title">订单详情</view>
        </u-navbar>
        <view class="banner" v-if="detail">
            <view>{{getStatusName()}}</view>
            <view v-if="detail.paymentType == '0'">
                <text>剩余支付时间</text>
                <text>{{secondsToTime(timeNum)}}</text>
            </view>
            <view v-if="detail.paymentType > 0" style="position: relative; z-index: 2;">{{getStatusMsg()}}</view>
            <image src="https://common/unpaid_bg.png" mode="" v-if="detail.paymentType < 200"></image>
            <image src="https://common/unpaid_bg1.png" mode="" v-if="detail.paymentType == '200'"></image>
        </view>
        <view class="waper_box" v-if="detail" :style="((detail.paymentType == '1' || detail.paymentType == '2') || detail.paymentType == '0' || (detail.paymentType == '200' && detail.verificationType == '0' && (detail.refundStatus == '0' || detail.refundStatus == '100') && showRefundBtn)) ? '' : 'padding-bottom: 32rpx;'">
            <navigator hover-class="none" :url="'/pages/my/refundList?orderId=' + detail.orderItemList[0].orderId" class="refund_msg" v-if="detail.showRefundList">
                <view class="left">
                    <view>查看退款进度</view>
                    <!-- <view>退款完成</view> -->
                </view>
                <view class="right">
                    <view class="text">查看详情</view>
                    <view class="icon">
                        <u-icon name="arrow-right" color="#999" size="26rpx" top="2rpx"></u-icon>
                    </view>
                </view>
            </navigator>
            <view class="info" v-if="detail.paymentType < 200">
                <view class="title">
                    <view>应付金额</view>
                    <view>{{detail.orderItemList[0].totalPrice}}</view>
                </view>
                <view class="cont">
                    <view class="shop">
                        <view>{{detail.orderItemList[0].ticketName}}</view>
                        <view>
                            <text>￥{{detail.orderItemList[0].ticketOrderDetailList[0].ticketPrice}}</text>
                            <text>x{{detail.orderItemList[0].buyQuantity}}</text>
                        </view>
                    </view>
                    <!-- <view class="time">
                        <text>使用日期：</text>
                        <text>{{detail.orderItemList[0].ticketOrderDetailList[0].availableStartTime}}</text>
                    </view> -->
                    <view class="time" v-if="detail.orderItemList[0].ticketOrderDetailList[0].availableStartTime.split(' ')[0] == detail.orderItemList[0].ticketOrderDetailList[0].availableEndTime.split(' ')[0]">
                        <text>有效期：</text>
                        <text style="color: #01BE69;">{{detail.orderItemList[0].ticketOrderDetailList[0].availableStartTime.split(' ')[0]}}</text>
                        当日有效
                    </view>
                    <view class="time" v-else>
                        <text>有效期：</text>
                        <text style="color: #01BE69;">{{detail.orderItemList[0].ticketOrderDetailList[0].availableStartTime.split(' ')[0]}}</text>
                        至
                        <text>{{detail.orderItemList[0].ticketOrderDetailList[0].availableEndTime.split(' ')[0]}}</text>
                        有效
                    </view>
                    <view class="time">
                        <text>场次</text>
                        <text></text>
                    </view>
                    <view class="classify" v-if="detail.orderItemList[0].classify == '2'">
                        <view class="left">包含子票：</view>
                        <view class="right">
                            <text v-for="(i, index) in detail.orderItemList[0].ticketChildList" :key="index">{{i.childTicketName}}-1张；</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="ticket" v-if="detail.paymentType == 200">
                <view class="title">
                    <view>{{detail.orderItemList[0].ticketName}}}}</view>
                    <view>{{detail.orderItemList[0].totalPrice}}</view>
                </view>
                <view class="cont">
                    <view class="list" v-if="detail.orderItemList[0].classify != '4'">
                        <view class="left">订单数量：</view>
                        <view class="right">
                            <view>￥{{detail.orderItemList[0].ticketOrderDetailList[0].ticketPrice}} x{{detail.orderItemList[0].ticketOrderDetailList[0].buyQuantity}}</view>
                        </view>
                    </view>
                    <view class="list" v-if="detail.orderItemList[0].ticketOrderDetailList[0].availableStartTime.split(' ')[0] == detail.orderItemList[0].ticketOrderDetailList[0].availableEndTime.split(' ')[0]">
                        <view class="left">有效期：</view>
                        <view class="right">
                            <view><text>{{detail.orderItemList[0].ticketOrderDetailList[0].availableStartTime.split(' ')[0]}}</text>当日有效</view>
                            <view v-if="detail.orderItemList[0].applicablePeriod">({{getWeekMsg(detail.orderItemList[0]) + (detail.orderItemList[0].classify == '4' && getWeekMsg(detail.orderItemList[0]) ? '不可用' : '')}})</view>
                        </view>
                    </view>
                    <view class="list" v-else>
                        <view class="left">有效期：</view>
                        <view class="right">
                            <view><text>{{detail.orderItemList[0].ticketOrderDetailList[0].availableStartTime.split(' ')[0]}}</text>至<text>{{detail.orderItemList[0].ticketOrderDetailList[0].availableEndTime.split(' ')[0]}}</text>有效</view>
                            <view v-if="detail.orderItemList[0].applicablePeriod">({{getWeekMsg(detail.orderItemList[0]) + (detail.orderItemList[0].classify == '4' && getWeekMsg(detail.orderItemList[0]) ? '不可用' : '')}})</view>
                        </view>
                    </view>
                    <view class="list">
                        <view class="left">入园时间：</view>
                        <view class="right">
                            <view>{{detail.orderItemList[0].admissionTime ? detail.orderItemList[0].admissionTime.split(',').join('-') : '以景区入园时间为准'}}</view>
                        </view>
                    </view>
                    <view class="list" v-if="detail.orderItemList[0].classify == '2'">
                        <view class="left">包含子票：</view>
                        <view class="right">
                            <view>
                                <text v-for="(i, index) in detail.orderItemList[0].ticketChildList" :key="index" style="color: #666;">{{i.childTicketName}}-1张；</text>
                            </view>
                        </view>
                    </view>
					<view class="equity" v-if="detail.orderItemList[0].classify == '4'" @click="showEquity = true;">
						<view class="text">包含{{detail.orderItemList[0].ticketChildList.length}}项权益</view>
						<view class="icon">
							<u-icon name="arrow-right" color="#3F79FF" size="26rpx" top="2rpx"></u-icon>
						</view>
					</view>
                </view>
            </view>
            <view class="code_box" v-if="detail.orderItemList[0].classify != '4' && detail.paymentType == 200">
                <view class="title">凭【二维码】直接入园</view>
                <view class="title">实名制:{{detail.orderItemList[0].authenticationType == '1' ? '不实名' : detail.orderItemList[0].authenticationType == '2' ? '需提供一位身份证信息' : detail.orderItemList[0].authenticationType == '3' ? '所有出行人需要提供身份信息' : ''}}</view>
                <view class="title">二维码规则：{{detail.orderItemList[0].qrcodeRule == '1' ? '一票一码' : '多票一码'}}</view>
                <view class="num">
                    <view class="line"></view>
                    <!-- <view class="text">可用{{detail.orderItemList[0].ticketOrderDetailList.length}}张</view> -->
                </view>
                <!-- 一票一码 -->
                <view class="code_list" v-if="detail.orderItemList[0].qrcodeRule == '1'">
                    <view class="list" v-for="(i, index) in detail.orderItemList[0].ticketOrderDetailList" :key="index" v-show="showAll || index == 0">
                        <!-- 所有人都有身份证 -->
                        <view class="code_info" v-if="detail.orderItemList[0].authenticationType == '3'">
                            <view >
                                <text>出行人</text>
                                <text>{{i.userName}}</text>
                                <text class="active" v-if="i.verificationType == '200'">已核销</text>
                                <text class="default" v-if="i.refundStatus == '1'">退款中</text>
                                <text class="default" v-if="i.refundStatus == '100'">退款已驳回</text>
                                <text class="active" v-if="i.refundStatus == '2' || i.refundStatus == '200'">{{i.refundStatusName}}</text>
                            </view>
                            <view>
                                <text>身份证</text>
                                <text>{{i.identityCard}}</text>
                            </view>
                        </view>
                        <!-- 只有一个身份证 -->
                        <view class="code_info" v-if="detail.orderItemList[0].authenticationType < 3">
                            <view v-if="index == 0">
                                <text>出行人</text>
                                <text>{{i.userName}}</text>
                                <text class="active" v-if="i.verificationType == '200'">已核销</text>
                                <text class="default" v-if="i.refundStatus == '1'">退款中</text>
                                <text class="default" v-if="i.verificationType != '200' && i.refundStatus == '100'">退款已驳回</text>
                                <text class="active" v-if="i.refundStatus == '2' || i.refundStatus == '200'">{{i.refundStatusName}}</text>
                            </view>
                            <view v-if="index == 0">
                                <text>身份证</text>
                                <text>{{i.identityCard}}</text>
                            </view>
                            <view v-if="index > 0 && i.verificationType == '200'">
                                <text>订单号</text>
                                <text>{{i.verificationCode}}</text>
                                <text class="active">已核销</text>
                            </view>
                            <view v-if="index > 0 && (i.refundStatus == '2' || i.refundStatus == '200')">
                                <text>订单号</text>
                                <text>{{i.verificationCode}}</text>
                                <text class="active">{{i.refundStatusName}}</text>
                            </view>
                            <view v-if="index > 0 && (i.refundStatus == '1' || i.refundStatus == '100')">
                                <text>订单号</text>
                                <text>{{i.verificationCode}}</text>
                                <text class="default">{{i.refundStatus == '1' ? '退款中' : '退款已驳回'}}</text>
                            </view>
                        </view>
                        <view class="code_img" @click="showListCode(i, index)" v-if="i.verificationType != '200' && (i.refundStatus == '0' || i.refundStatus == '100' || i.refundStatus == '3')">
                            <uqrcode :ref="'uqrcode' + index" :canvas-id="'qrcode' + index" :value="i.verificationCode" :size="size" :options="{ margin: 4, backgroundColor: '#fff' }" class="qrcode_box"></uqrcode>
                        </view>
                        <view class="code_num" v-if="i.verificationType != '200' && (i.refundStatus == '0' || i.refundStatus == '100' || i.refundStatus == '3') && detail.orderItemList[0].classify == '1'">
                            <view>可核销次数：<text>{{i.canVerificationMun - i.verificationMun}}</text></view>
                            <view>总核销次数：<text>{{i.canVerificationMun}}</text></view>
                        </view>
                        <view class="code_text" v-if="i.verificationType != '200' && (i.refundStatus == '0' || i.refundStatus == '100' || i.refundStatus == '3')">
                            <view>{{i.verificationCode}}</view>
                            <view @click="copyCode(i.verificationCode)">复制</view>
                        </view>
                    </view>
                </view>
                <view class="showAll" v-if="detail.orderItemList[0].ticketOrderDetailList.length > 1 && detail.orderItemList[0].qrcodeRule == '1'">
                    <view class="show_waper" @click="tabShowAll">
                        <view class="text">{{showAll ? '收起' : '展开全部'}}</view>
                        <view class="icon">
                            <u-icon :name="showAll ? 'arrow-up' : 'arrow-down'" color="#999" size="26rpx" top="2rpx"></u-icon>
                        </view>
                    </view>
                </view>
                <!-- 多票一码 只会出现一张身份证 -->
                <view class="code_list" v-if="detail.orderItemList[0].qrcodeRule == '2'">
                    <view class="list">
                        <view class="code_info">
                            <view>
                                <text>出行人</text>
                                <text>{{detail.orderItemList[0].userName}}</text>
                                <text class="active" v-if="detail.verificationType == '200'">已核销</text>
                                <text class="default" v-if="detail.refundStatus == '1'">退款中</text>
                                <text class="default" v-if="detail.verificationType != '200' && detail.refundStatus == '100'">退款已驳回</text>
                                <text class="active" v-if="detail.refundStatus == '2' || detail.refundStatus == '200'">{{detail.refundStatusName}}</text>
                            </view>
                            <view>
                                <text>身份证</text>
                                <text>{{detail.orderItemList[0].identityCard}}</text>
                            </view>
                            <view v-if="detail.verificationType == '200' || detail.refundStatus > 0">
                                <text>订单号</text>
                                <text>{{detail.orderCode}}</text>
                            </view>
                        </view>
                        <view class="code_img" v-if="detail.orderItemList[0].verificationMunTotal > 0 && (detail.refundStatus == '0' || detail.refundStatus == '100')" @click="showCode">
                            <uqrcode ref="uqrcode" canvas-id="qrcode" :value="detail.orderCode" :size="size" :options="{ margin: 4, backgroundColor: '#fff' }" class="qrcode_box"></uqrcode>
                        </view>
                        <view class="code_num" v-if="detail.orderItemList[0].verificationMunTotal > 0 && (detail.refundStatus == '0' || detail.refundStatus == '100')">
                            <view>可核销张数：<text>{{detail.orderItemList[0].verificationMunTotal}}</text></view>
                            <view>总核销张数：<text>{{detail.orderItemList[0].ticketOrderDetailList.length}}</text></view>
                        </view>
                        <view class="code_text" v-if="detail.orderItemList[0].verificationMunTotal > 0 && (detail.refundStatus == '0' || detail.refundStatus == '100')">
                            <view>{{detail.orderCode}}</view>
                            <view @click="copyCode(detail.orderCode)">复制</view>
                        </view>
                    </view>
                </view>
            </view>
			<view class="tourist" v-if="detail.orderItemList[0].classify == '4'">
                <view class="title">游客信息</view>
				<view class="tourist_card" v-for="(i, index) in detail.orderItemList[0].ticketOrderDetailList" :key="index">
					<view class="card_info">
						<view>
							<text>出行人</text>
							<text>{{i.userName}}</text>
						</view>
						<view>
							<text>身份证</text>
							<text>{{i.identityCard}}</text>
						</view>
					</view>
					<view class="activate_btn" v-if="i.paymentType == 200 && (i.refundStatus == '0' || i.refundStatus == '100') && i.activationStatus == '0'" @click="showActivate = true;">去激活</view>
				</view>
			</view>
            <view class="order">
                <view class="title">订单信息</view>
                <view class="cont">
                    <view class="list">
                        <view v-if="detail.orderItemList[0].classify == '4'">联系人</view>
                        <view v-else>购票人</view>
                        <view>{{detail.userName}}</view>
                    </view>
                    <view class="list">
                        <view v-if="detail.orderItemList[0].classify == '4'">联系电话</view>
                        <view v-else>手机号</view>
                        <view>{{detail.mobilePhone}}</view>
                    </view>
                    <view class="list">
                        <view v-if="detail.orderItemList[0].classify == '4'">身份证号码</view>
                        <view v-else>证件号</view>
                        <view>{{detail.identityCard}}</view>
                    </view>
                    <view class="list">
                        <view>订单编号</view>
                        <view>
                            <text>{{detail.orderCode}}</text>
                            <text @click="copyCode(detail.orderCode)">复制</text>
                        </view>
                    </view>
                    <view class="list">
                        <view v-if="detail.orderItemList[0].classify == '4'">创建时间</view>
                        <view v-else>下单时间</view>
                        <view>{{$utils.formatDate('Y-M-D h:m:s', detail.createTime)}}</view>
                    </view>
                </view>
            </view>
            <view class="refund">
                <view class="title">退改规则</view>
                <view class="cont">
                    <view>{{detail.orderItemList[0].refundRuleName}}</view>
                    <view v-if="detail.orderItemList[0].refundRule == '0'">{{detail.orderItemList[0].refundRemark || '门票一经售出，不可退款'}}</view>
                    <view v-if="detail.orderItemList[0].refundRule == '3'">门票有效期内可退</view>
                    <view v-if="detail.orderItemList[0].refundRule == '4'">订单生成后{{detail.orderItemList[0].refundDay}}天内可退</view>
                    <view v-if="detail.orderItemList[0].refundRule == '5'">未激活可退</view>
                </view>
                <view class="fee" v-if="detail.orderItemList[0].refundRule > 0">
                    <view class="fee_title">退款手续费</view>
                    <view class="fee_cont">
                        <view v-if="detail.orderItemList[0].isFee == 0">无需手续费</view>
                        <view v-if="detail.orderItemList[0].isFee == 1 && detail.orderItemList[0].feeType == '1'">退款需扣除手续费{{(detail.orderItemList[0].deductionFees) + (detail.orderItemList[0].deductionFeesUnit == '1' ? '%' : '元')}}</view>
                        <view v-if="detail.orderItemList[0].isFee == 1 && detail.orderItemList[0].feeType == '2'" v-for="(i, index) in JSON.parse(detail.orderItemList[0].deductionJson)" :key="index">游玩前{{i.day}}天内退票，需扣除手续费{{i.deductionFees}}{{i.deductionFeesUnit == '1' ? '%' : '元'}}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="bottom_waper" v-if="detail && ((detail.paymentType == '1' || detail.paymentType == '2') || detail.paymentType == '0' || (detail.paymentType == '200' && detail.verificationType == '0' && (detail.refundStatus == '0' || detail.refundStatus == '100') && showRefundBtn))">
            <view class="btns">
                <view v-if="detail.paymentType == '1' || detail.paymentType == '2'" @click="deleteTicketOrder">删除订单</view>
                <view v-if="detail.paymentType == '0'" @click="cancelOrder">取消订单</view>
                <view v-if="detail.paymentType == '0'" class="active" @click="goPay">继续支付</view>
                <view v-if="detail.paymentType == '200' && detail.verificationType == '0' && (detail.refundStatus == '0' || detail.refundStatus == '100') && showRefundBtn" @click="goRefund">申请退款</view>
            </view>
        </view>
        <!-- 年卡权益 -->
        <u-popup :show="showEquity" bgColor="transparent" mode="bottom">
            <view class="equity_waper">
                <view class="title">年卡权益
                    <view class="icon" @click="showEquity = false;">
                        <u-icon name="close" color="#333" size="24rpx"></u-icon>
                    </view>
				</view>
                <view class="content">
					<view class="item" v-for="(i, index) in detail.orderItemList[0].ticketChildList" :key="index">
						<view class="name">{{i.childTicketName}}</view>
						<view class="frequency">{{i.isUnlimited == '1' ? '不限次数' : ('限' + i.canVerificationNum + '次，每月最多' + i.monthVerificationNum + '次，每日最多' + i.dayVerificationNum + '次')}}</view>
					</view>
				</view>
            </view>
        </u-popup>
        <!-- 确认激活弹框 -->
        <u-popup :show="showActivate" bgColor="transparent" mode="center">
            <view class="popup_waper">
                <image src="https://common/refundPopup.png" mode=""></image>
                <div class="refund_box">
                    <view class="title">温馨提示</view>
                    <view class="content">确认激活该年卡吗？</view>
                    <view class="btns">
                        <view @click="closePopup">取消</view>
                        <view @click="submitPopup">确认</view>
                    </view>
                </div>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    data () {
        return {
            safeAreaBottom: 0,
            size: 0,
            timeNum: 0,
            timer: null,
            configData: null,
            detail: null,
            showAll: false,
            showRefundBtn: false,
			showEquity: false,
			showActivate: false
        }
    },
    onLoad (options) {
        this.showRefundBtn = false;
        this.safeAreaBottom = this.$safeAreaBottom;
        this.size = uni.upx2px(262);
        this.getDetail(options.id)
    },
    onUnload () {
        console.log('页面关闭')
        clearInterval(this.timer);
        this.timer = null;
    },
    methods: {
        async deleteTicketOrder () {
            let info = await this.$http.deleteTicketOrder(this.detail.id);
            if (info.code == 200) {
                uni.showToast({ mask:true, title: '操作成功', icon: 'success' });
                setTimeout(() => {
                    uni.navigateBack();
                }, 1500)
            } else uni.showToast({ mask:true, title: info.msg, icon: 'none' });
        },
        async cancelOrder() {
        	let info = await this.$http.cancelTicketOrderPrepay(this.detail.orderCode);
        	if (info.code == 200) {
        		uni.showToast({ mask: true, title: '操作成功', icon: 'success' })
        	    this.getDetail(this.detail.id)
        	} else  uni.showToast({ mask: true, title: info.msg, icon: 'none' })
        },
        async getDetail (id) {
            this.configData = uni.getStorageSync('configData');
            let info = await this.$http.getTicketOrderDetailPrepay(id);
            this.detail = info.data;
            if (this.detail.paymentType == '0') {
                let creaetdTime = parseInt(new Date(info.data.createTime).getTime() / 1000);
                let nowtime = parseInt(new Date().getTime() / 1000);
                console.log(nowtime, creaetdTime)
                if ((creaetdTime + this.configData.expirationTime * 60) >= nowtime) {
                	this.timeNum = (creaetdTime + this.configData.expirationTime * 60) - nowtime;
                    this.setIntervalFn()
                }
            }
            let showRefundList = false;
            this.detail.orderItemList[0].ticketOrderDetailList.forEach((item) => {
                if (item.refundStatus > 0) showRefundList = true;
            })
            this.detail.showRefundList = showRefundList;
            // 判断是否可退款
            let refundNum = this.getRefundList(info.data);
            if (refundNum.length == 0) return false;
            let creaetd = parseInt(new Date(this.$utils.formatDate('Y-M-D', this.detail.createTime) + ' 00:00:00').getTime() / 1000);
            switch (this.detail.orderItemList[0].refundRule) {
                case '3':// 有效期可退
                    // let startTime = parseInt(new Date(this.$utils.formatDate('Y-M-D', this.detail.orderItemList[0].ticketOrderDetailList[0].availableStartTime) + ' 00:00:00').getTime() / 1000);
                    let endTime = parseInt(new Date(this.$utils.formatDate('Y-M-D', this.detail.orderItemList[0].ticketOrderDetailList[0].availableEndTime) + ' 23:59:59').getTime() / 1000);
                    let nowtime = parseInt(new Date().getTime() / 1000);
                    // 当前日期大于等于开始时间并且当前日期小于等于结束时间，门票可退
                    if (nowtime <= endTime) {
                        this.showRefundBtn = true;
                    } else this.showRefundBtn = false;
                    break;
                case '4':// 几天内可退
                    let nowdata = parseInt(new Date().getTime() / 1000);
                    // 当前时间减下单时间如果大于后台设定天数。门票不可退
                    if (((nowdata - creaetd) / 60 / 60 / 24) > this.detail.orderItemList[0].refundDay) {
                        this.showRefundBtn = false;
                    } else this.showRefundBtn = true;
                    break;
                case '5':// 未激活可退
                    if (this.detail.orderItemList[0].ticketOrderDetailList[0].activationStatus == '0') {
                        this.showRefundBtn = true;
                    } else this.showRefundBtn = false;
                    break;
            }
        },
        setIntervalFn () {
            clearInterval(this.timer);
            this.timer = setInterval(() => {
                if (this.timeNum <= 0) {
                    clearInterval(this.timer)
                    uni.navigateBack()
                }
                this.timeNum --;
            }, 1000)
        },
        secondsToTime(seconds) {
            const minutes = Math.floor((seconds % 3600) / 60);
            const remainingSeconds = seconds % 60;
            return (minutes >= 10 ? minutes : '0' + minutes) + ":" + (remainingSeconds >= 10 ? remainingSeconds : '0' + remainingSeconds);
        },
        goPay() {
        	uni.showLoading({ mask: true });
            const prepayId = JSON.parse(this.detail.tradeSession);
        	uni.requestPayment({
        		provider: 'wxpay',
        		timeStamp: prepayId.timeStamp,
        		nonceStr: prepayId.nonceStr,
        		package: prepayId.packageValue,
        		signType: prepayId.signType,
        		paySign: prepayId.paySign,
        		success: (res) => {
        			uni.hideLoading();
        			this.getDetail(this.detail.id)
        		},
        		fail: (err) => {
        			uni.hideLoading();
        			uni.showToast({ mask: true, title: '支付取消', icon: 'none' })
        		}
        	});
        },
        getWeekMsg (info) {
            let list = info.applicablePeriod.split(',');
            let time = [];
            list.forEach((item) => {
                time.push(Number(item));
            })
            let weekLabel = '';
            if (info.classify == '4') {
                let arr = [];
                time.forEach((item) => {
                    if (item > 0) arr.push(this.getDay(item))
                })
                weekLabel = arr.join(',');
            } else {
                if (this.isContinuous(time)) {// 数组连续
                    weekLabel = this.getWeek(time[0]) + '至' + this.getWeek(time[time.length - 1]);
                } else {
                    let arr = [];
                    time.forEach((item) => {
                        arr.push(this.getWeek(item))
                    })
                    weekLabel = arr.join(',');
                }
            }
            
            return weekLabel;
        },
        isContinuous (nums) {
            nums.sort((a, b) => a - b);
            for (let i = 1; i < nums.length; i++) {
                if (nums[i] !== nums[i - 1] + 1) {
                    return false;
                }
            }
            return true;
        },
        getDay (key) {
            let str = '';
            switch (key) {
                case 1:
                    str = '周末';
                    break;
                case 2:
                    str = '元旦';
                    break;
                case 3:
                    str = '春节';
                    break;
                case 4:
                    str = '清明';
                    break;
                case 5:
                    str = '劳动';
                    break;
                case 6:
                    str = '端午';
                    break;
                case 7:
                    str = '中秋';
                    break;
                case 8:
                    str = '国庆';
                    break;
            }
            return str;
        },
        getWeek (key) {
            let str = '';
            switch (key) {
                case 1:
                    str = '周一';
                    break;
                case 2:
                    str = '周二';
                    break;
                case 3:
                    str = '周三';
                    break;
                case 4:
                    str = '周四';
                    break;
                case 5:
                    str = '周五';
                    break;
                case 6:
                    str = '周六';
                    break;
                case 7:
                    str = '周日';
                    break;
            }
            return str;
        },
        getStatusName () {
            let str = '';
            if (this.detail.paymentType <= '2') {// 状态大于2代表已支付
                str = this.detail.paymentTypeName;
            } else {
                if (this.detail.refundStatus == 0) {
					if (this.detail.orderItemList[0].classify == '4') {
						// 0未激活   1已激活/启用  2禁用
						if (this.detail.orderItemList[0].ticketOrderDetailList[0].activationStatus == '0') {
							str = '待激活';
						} else if (this.detail.orderItemList[0].ticketOrderDetailList[0].activationStatus == '1') {
							str = '已激活';
						} else if (this.detail.orderItemList[0].ticketOrderDetailList[0].activationStatus == '2') {
							str = '禁用';
						}
					} else {
						str = this.detail.verificationTypeName;
					}
                } else {
                    str = this.detail.refundStatusName;
                }
            }
            return str;
        },
        getStatusMsg () {
            const item = this.detail;
            let str = '';
            switch (item.paymentType) {
                case '1':
                    str = '订单已取消';
                    break;
                case '2':
                    str = '订单已关闭';
                    break;
                case '200':
                    if (item.refundStatus == '0') {
						if (this.detail.orderItemList[0].classify == '4') {
							// 0未激活   1已激活/启用  2禁用
							if (this.detail.orderItemList[0].ticketOrderDetailList[0].activationStatus == '0') str = '您已付款，请使用';
							if (this.detail.orderItemList[0].ticketOrderDetailList[0].activationStatus == '1') str = '年卡已激活';
							if (this.detail.orderItemList[0].ticketOrderDetailList[0].activationStatus == '2') str = '年卡已禁用';
						} else {
							if (item.verificationType == '0') str = '您已付款，请使用';
							if (item.verificationType == '200') str = '订单已使用';
							if (item.verificationType == '1') str = '订单已过期';
						}
                    } else {
                        if (item.refundStatus == '1') str = '退款申请中，请等待审核';
                        if (item.refundStatus == '2' || item.refundStatus == '200') str = '退款金额将在1-3个工作日原路返还到支付账户中';
                        // if (item.refundStatus == '100') str = '您已付款，请使用';
                        if (item.refundStatus == '100') str = '退款申请已驳回';
                    }
                    break;
            }
            return str;
        },
        goRefund (info) {
        	uni.navigateTo({ url: `/pages/my/refund?id=${this.detail.id}` })
        },
        showCode () {
            if (this.detail.paymentType == '200' && (this.detail.refundStatus == '0' || this.detail.refundStatus == '100') && this.detail.verificationType == '0') {
                this.$refs.uqrcode && this.$refs.uqrcode.toTempFilePath({
                    success: res => {
                        uni.previewImage({
                            urls: [res.tempFilePath],
                        });
                    }
                });
            }
        },
        showListCode (info, index) {
            if (info.paymentType == '200' && (info.refundStatus == '0' || info.refundStatus == '100') && info.verificationType == '0') {
                this.$refs['uqrcode' + index][0] && this.$refs['uqrcode' + index][0].toTempFilePath({
                    success: res => {
                        uni.previewImage({
                            urls: [res.tempFilePath],
                        });
                    }
                });
            }
        },
        copyCode (code) {
        	uni.setClipboardData({
        		data: code,
        		success: () => {
        			uni.showToast({ mask: true, title: '内容已复制到剪切板', icon: 'none' })
        		}
        	})
        },
        tabShowAll () {
            this.showAll = !this.showAll;
            this.$nextTick(() => {
                if (this.showAll) {
                    this.detail.orderItemList[0].ticketOrderDetailList.forEach((item, index) => {
                        this.$refs['uqrcode' + index][0] && this.$refs['uqrcode' + index][0].make();
                    })
                }
            })
            
        },
        // 获取可退款门票是否大于0
        getRefundList (info) {
            let list = [];
            if (info.orderItemList[0].totalPrice > 0) {
                info.orderItemList[0].ticketOrderDetailList.forEach((item) => {
                    // 判断是否可退款
                    if (info.orderItemList[0].refundRule != '0' && item.paymentType == '200' && item.verificationType == '0' && (item.refundStatus == '0' || item.refundStatus == '100')) {
                        if (item.verificationMun == 0) {
                            let creaetd = parseInt(new Date(this.$utils.formatDate('Y-M-D', item.orderTime) + ' 00:00:00').getTime() / 1000);
                            if (info.orderItemList[0].classify == '1') {// 普通票
                                // 判断是否再有效期
                                switch (info.orderItemList[0].refundRule) {
                                    case '3':// 有效期可退
                                        // let startTime = parseInt(new Date(this.$utils.formatDate('Y-M-D', info.orderItemList[0].validityStartTime) + ' 00:00:00').getTime() / 1000);
                                        let endTime = parseInt(new Date(this.$utils.formatDate('Y-M-D', info.orderItemList[0].validityEndTime) + ' 23:59:59').getTime() / 1000);
                                        let nowtime = parseInt(new Date().getTime() / 1000);
                                        // 当前日期大于等于开始时间并且当前日期小于等于结束时间，门票可退
                                        if (nowtime <= endTime) list.push(item);
                                        break;
                                    case '4':// 几天内可退
                                        let nowdata = parseInt(new Date().getTime() / 1000);
                                        // 当前时间减下单时间如果小于等于后台设定天数。门票可退
                                        if (((nowdata - creaetd) / 60 / 60 / 24) <= info.orderItemList[0].refundDay) list.push(item);
                                        break;
                                }
                            } else if (info.orderItemList[0].classify == '2') {// 套票
                                let num = 0;// 大于0代表已经使用过
                                switch (info.orderItemList[0].refundRule) {
                                    case '3':// 有效期可退
                                        item.orderDetailChildList.forEach((child, childIndex) => {
                                            if (child.verificationNum > 0) num ++;
                                        })
                                        if (num == 0) {
                                            // let startTime = parseInt(new Date(this.$utils.formatDate('Y-M-D', info.orderItemList[0].validityStartTime) + ' 00:00:00').getTime() / 1000);
                                            let endTime = parseInt(new Date(this.$utils.formatDate('Y-M-D', info.orderItemList[0].validityEndTime) + ' 23:59:59').getTime() / 1000);
                                            let nowtime = parseInt(new Date().getTime() / 1000);
                                            // 当前日期大于等于开始时间并且当前日期小于等于结束时间，门票可退
                                            if (nowtime <= endTime) list.push(item);
                                        }
                                        break;
                                    case '4':// 几天内可退
                                        item.orderDetailChildList.forEach((child, childIndex) => {
                                            if (child.verificationNum > 0) num ++;
                                        })
                                        if (num == 0) {
                                            let nowtime = parseInt(new Date().getTime() / 1000);
                                            console.log(nowtime - creaetd)
                                            // 当前时间减下单时间如果小于等于后台设定天数。门票可退
                                            if (((nowtime - creaetd) / 60 / 60 / 24) <= info.orderItemList[0].refundDay) list.push(item);
                                        }
                                        break;
                                }
                            } else if (info.orderItemList[0].classify == '4') {// 年卡
								if (item.activationStatus == '0') {
									list.push(item)
								}
                            }
                        }
                    }
                })
            }
            return list;
        },
		closePopup() {
            this.showActivate = false;
		},
		async submitPopup() {
			let obj = { id: this.detail.orderItemList[0].ticketOrderDetailList[0].id, activationStatus: 1 };
            let info = await this.$http.orderActivation(obj);
            if (info.code == 200) {
                uni.showToast({ mask:true, title: '激活成功', icon: 'success' });
				this.closePopup();
                this.getDetail(this.detail.id);
            } else uni.showToast({ mask:true, title: info.msg, icon: 'none' });
		}
		
    }
}
</script>

<style lang="scss">
page{ background: #F6F6F6; }
.navbar_title{ color: #fff; }
.banner{
    width: 100%; background: #03AE80; height: 218rpx; box-sizing: border-box; padding: 32rpx 0 0 62rpx; position: relative;
    view{
        color: #fff;
        &:nth-child(1){ line-height: 68rpx; font-size: 48rpx; font-weight: 500; }
        &:nth-child(2){
            margin-top: 6rpx; display: flex; align-items: center; font-size: 28rpx;
            text:last-child{ margin-left: 16rpx; line-height: 46rpx; font-size: 32rpx; font-weight: 500; }
        }
    }
    image{ width: 245rpx; height: 245rpx; position: absolute; right: 32rpx; bottom: -39rpx; }
}
.waper_box{
    width: 100%; box-sizing: border-box; padding: 0 32rpx 148rpx; margin-top: -46rpx; position: relative; z-index: 3;
    .refund_msg{
        width: 100%; height: 104rpx; box-sizing: border-box; padding: 0 24rpx; background: #fff; border-radius: 10rpx; margin-bottom: 24rpx; display: flex; align-items: center; justify-content: space-between;
        .left{
            display: flex; align-items: center; color: #666; font-size: 28rpx;
            view:last-child{ color: #333; }
        }
        .right{
            display: flex; justify-content: center; align-items: center;
            .text{ color: #999; font-size: 28rpx; margin-right: 8rpx; }
        }
    }
    .info{
        width: 100%; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 29rpx 24rpx 32rpx;
        .title{
            display: flex; justify-content: space-between; align-items: center; margin-bottom: 32rpx;
            view{
                &:nth-child(1){ color: #333; font-size: 32rpx; font-weight: 500; }
                &:nth-child(2){
                    padding-left: 24rpx; position: relative; line-height: 51rpx; color: #FF5833; font-size: 42rpx; font-weight: bold;
                    &::after{ content: "￥"; color: #FF5833; font-size: 24rpx; line-height: 34rpx; position: absolute; left: 0; bottom: 2rpx; }
                }
            }
        }
        .cont{
            width: 100%;
            .shop{
                min-height: 40rpx; margin-bottom: 12rpx; position: relative; box-sizing: border-box; padding-right: 160rpx;
                view{
                    &:nth-child(1){ color: #333; font-size: 28rpx; font-weight: 500; width: 100%; line-height: 40rpx; }
                    &:nth-child(2){
                        display: flex; align-items: center; color: #999; font-size: 28rpx; position: absolute; right: 0; top: 0; height: 40rpx;
                        text:last-child{ margin-left: 10rpx; }
                    }
                }
            }
            .time{
                height: 40rpx; display: flex; align-items: center; color: #666; font-size: 28rpx;
                text:last-child{ color: #01BE69; }
            }
            .classify{
                width: 100%; box-sizing: border-box; padding-left: 140rpx; position: relative; margin-top: 16rpx;
                .left{ color: #000; font-size: 28rpx; position: absolute; left: 0; top: 0; line-height: 40rpx; }
                .right{ min-height: 40rpx; color: #666; font-size: 28rpx; margin-bottom: 4rpx; line-height: 40rpx; }
            }
        }
    }
    .ticket{
        width: 100%; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 29rpx 24rpx 32rpx; margin-top: 24rpx;
        .title{
            margin-bottom: 32rpx; width: 100%; box-sizing: border-box; padding-right: 180rpx; position: relative;
            view{
                &:nth-child(1){ color: #333; font-size: 32rpx; font-weight: 500; line-height: 51rpx; }
                &:nth-child(2){
                    padding-left: 24rpx; position: absolute; line-height: 50rpx; color: #FF5833; font-size: 42rpx; font-weight: bold; right: 0; top: 0;
                    &::after{ content: "￥"; color: #FF5833; font-size: 24rpx; line-height: 34rpx; position: absolute; left: 0; bottom: 2rpx; }
                }
            }
        }
        .cont{
            width: 100%;
            .list{
                width: 100%; box-sizing: border-box; padding-left: 140rpx; position: relative; margin-bottom: 16rpx;
                .left{ color: #666; font-size: 28rpx; position: absolute; left: 0; top: 0; line-height: 40rpx; }
                .right{
                    min-height: 40rpx;
                    view{
                        color: #666; font-size: 28rpx; margin-bottom: 4rpx; line-height: 40rpx;
                        &:last-child{ margin-bottom: 0; }
                        text{ color: #03AE80; }
                    }
                }
            }
			.equity {
				display: flex; align-items: center;
				.text {
					font-size: 28rpx; color: #3F79FF; margin-right: 8rpx;
				}
			}
        }
    }
    .order{
        width: 100%; box-sizing: border-box; padding: 32rpx 24rpx; border-radius: 10rpx; background: #fff; margin-top: 24rpx;
        .title{ line-height: 44rpx; color: #333; font-size: 32rpx; font-weight: 500; }
        .cont{
            width: 100%; margin-top: 32rpx;
            .list{
                width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 30rpx;
                &:last-child{ margin-bottom: 0; }
                view{ color: #666; font-size: 28rpx; }
                &:nth-child(4) view:nth-child(2), &:nth-child(5) view:nth-child(2){ color: #333; }
                &:nth-child(4) view:nth-child(2){
                    display: flex; align-items: center;
                    text:last-child{
                        color: #3F79FF; position: relative; margin-left: 48rpx;
                        &::after{ content: ""; width: 2rpx; height: 20rpx; background: #A2A2A4; position: absolute; left: -23rpx; top: 50%; transform: translateY(-50%); }
                    }
                }
            }
        }
    }
    .refund{
        width: 100%; box-sizing: border-box; padding: 32rpx 24rpx; border-radius: 10rpx; background: #fff; margin-top: 24rpx;
        .title{ line-height: 44rpx; color: #333; font-size: 32rpx; font-weight: 500; }
        .cont{
            width: 100%; margin-top: 32rpx;
            view{
                &:nth-child(1){ display: inline-block; padding: 0 32rpx; background: rgba(3,174,128,0.1); border-radius: 2rpx; line-height: 40rpx; vertical-align: top; color: #03AE80; font-size: 20rpx; }
                &:nth-child(2){ margin-top: 12rpx; color: #666; line-height: 40rpx; font-size: 28rpx; }
            }
        }
        .fee{
            width: 100%; margin-top: 12rpx;
            .fee_title{ display: inline-block; padding: 0 32rpx; background: rgba(255,88,51,0.1); border-radius: 2rpx; line-height: 40rpx; vertical-align: top; color: #FF5833; font-size: 20rpx; }
            .fee_cont{
                color: #666; line-height: 40rpx; font-size: 28rpx;
                view{ margin-top: 12rpx; }
            }
        }
    }
    .code_box{
        width: 100%; border-radius: 10rpx; box-sizing: border-box; padding: 32rpx 24rpx; background: #fff; margin-top: 24rpx;
        .title{ line-height: 44rpx; color: #333; font-size: 32rpx; font-weight: 500; }
        .num{
            width: 100%; height: 40rpx; display: flex; justify-content: center; align-items: center; position: relative; margin-top: 32rpx;
            .line{ width: 100%; height: 0; border-top: 2rpx dashed rgba(0, 0, 0, 0.2); }
            .text{ line-height: 40rpx; position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; background: #fff; color: #666; font-size: 28rpx; padding: 0 18rpx; }
            &::after{ content: ""; width: 32rpx; height: 32rpx; background: #F6F6F6; position: absolute; left: -40rpx; top: 50%; transform: translateY(-50%); border-radius: 50%; }
            &::before{ content: ""; width: 32rpx; height: 32rpx; background: #F6F6F6; position: absolute; right: -40rpx; top: 50%; transform: translateY(-50%); border-radius: 50%; }
        }
        .code_list{
            width: 100%; margin-top: 32rpx;
            .list{
                width: 100%; margin-bottom: 32rpx;
                &:last-child{ margin-bottom: 0; }
                .code_info{
                    width: 100%; background: #FBFBFB; border-radius: 10rpx; box-sizing: border-box; padding: 0 24rpx;
                    view{
                        width: 100%; display: flex; align-items: center; height: 40rpx; margin-bottom: 16rpx; position: relative;
                        &:first-child{ padding-top: 28rpx; }
                        &:last-child{ margin-bottom: 0; padding-bottom: 28rpx; }
                        text{
                            font-size: 28rpx;
                            &:nth-child(1){ color: #999; }
                            &:nth-child(2){ color: #333; margin-left: 20rpx; }
                            &.active{ color: #03AE80; line-height: 40rpx; position: absolute; right: 0; }
                            &.default{ color: #FF5833; line-height: 40rpx; position: absolute; right: 0; }
                        }
                    }
                }
                .code_img{
                    width: 262rpx; height: 262rpx; margin: 24rpx auto 20rpx; position: relative;
                    .qrcode_box{ width: 100%; height: 100%; }
                }
                .code_num{
                    width: 100%; display: flex; align-items: center; justify-content: center;
                    view{
                        color: #666; font-size: 28rpx; margin-right: 24rpx;
                        &:last-child{ margin-right: 0; }
                        text{ color: #03AE80; }
                    }
                }
                .code_text{
                    width: 100%; margin-top: 8rpx; display: flex; justify-content: center; align-items: center;
                    view{
                        color: #666; font-size: 28rpx; margin-right: 20rpx;
                        &:last-child{ margin-right: 0; color: #3F79FF; }
                    }
                }
            }
        }
        .showAll{
            width: 100%; margin-top: 32rpx; height: 40rpx; display: flex; justify-content: center; align-items: center;
            .show_waper{
                display: flex; justify-content: center; align-items: center;
                .text{ color: #999; font-size: 28rpx; margin-right: 12rpx; }
            }
        }
    }
	.tourist {
        width: 100%; border-radius: 10rpx; box-sizing: border-box; padding: 32rpx 24rpx; background: #fff; margin-top: 24rpx;
        .title{ line-height: 44rpx; color: #333; font-size: 32rpx; font-weight: 500; }
		.tourist_card {
			margin-top: 32rpx; width: 100%; background: #FBFBFB; border-radius: 10rpx; box-sizing: border-box; padding: 0 24rpx; position: relative;
			.card_info {
				view{
				    width: 100%; display: flex; align-items: center; height: 40rpx; margin-bottom: 16rpx; position: relative;
				    &:first-child{ padding-top: 28rpx; }
				    &:last-child{ margin-bottom: 0; padding-bottom: 28rpx; }
				    text{
				        font-size: 28rpx;
				        &:nth-child(1){ color: #999; }
				        &:nth-child(2){ color: #333; margin-left: 20rpx; }
				    }
				}
			}
			.activate_btn {
				position: absolute; top: 36rpx; right: 24rpx; padding: 18rpx 33rpx; background: #03AE80; border-radius: 10rpx 10rpx 10rpx 10rpx; font-size: 24rpx; color: #FFFFFF;
			}
		}
	}
}
.bottom_waper{
    width: 100%; background: #fff; position: fixed; left: 0; bottom: 0; z-index: 10; box-shadow: 0 -1rpx 6rpx 0 rgba(0,0,0,0.05);
    .btns{
        width: 100%; height: 120rpx; box-sizing: border-box; padding: 0 32rpx; display: flex; justify-content: flex-end; align-items: center;
        view{
            width: 228rpx; height: 80rpx; border-radius: 66rpx; margin-right: 20rpx; box-sizing: border-box; border: 2rpx solid #A2A2A4; text-align: center; line-height: 76rpx; font-size: 30rpx; color: #999;
            &:last-child{ margin-right: 0; }
            &.active{ background: linear-gradient( 141deg, #54C76E 0%, #03AE80 100%); border: none; line-height: 80rpx; color: #fff; }
        }
    }
}
.equity_waper{
    width: 100%; background: #fff; border-radius: 10rpx 10rpx 0 0; box-sizing: border-box; padding: 32rpx;
    .title{
        height: 46rpx; text-align: center; line-height: 46rpx; position: relative; color: #333; font-size: 32rpx; font-weight: 500;
        .icon{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
    }
    .content{
		padding: 20rpx 24rpx 48rpx;
		.item {
			padding-top: 20rpx; font-size: 28rpx; color: #666666; display: flex;
			.name { margin-right: 32rpx; max-width: 220rpx; }
			.frequency {
				flex: 1;
				.num { color: #03AE80; }
			}
		}
	}
}
.popup_waper{
    width: 596rpx; height: 398rpx; position: relative;
    .refund_box{
        width: 100%; box-sizing: border-box; padding: 64rpx 46rpx 0; position: absolute; left: 0; top: 0;
        .title{ line-height: 56rpx; text-align: center; color: #000; font-size: 40rpx; font-weight: 500; }
        .content{ margin-top: 28rpx; color: #333; font-size: 30rpx; font-weight: 500; line-height: 42rpx; text-align: center; }
        .btns{
            margin-top: 62rpx; display: flex; justify-content: space-between; align-items: center;
            view{
                width: 240rpx; height: 80rpx; border-radius: 10rpx; text-align: center; box-sizing: border-box; line-height: 76rpx; color: #666; font-size: 30rpx; border: 2rpx solid #EBECEE;
                &:last-child{ background: #01BE69; border-color: #01BE69; color: #fff; }
            }
        }
    }
}
</style>