<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="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;'">
            <view class="banner">
                <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="detail_waper">
                <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="detail_money">
                    <view>
                        <text>总金额：</text>
                        <text>{{detail.totalPrice}}</text>
                    </view>
                    <view>{{detail.buyQuantity}}张</view>
                </view>
                <view class="detail_list" v-for="(ticket, ticketIndex) in detail.orderItemList" :key="ticketIndex">
                    <view class="top">
                        <view class="title">
                            <view>{{ticket.ticketName}}</view>
                            <view>{{ticket.totalPrice}}</view>
                        </view>
                        <view class="content">
                            <view class="list">
                                <view>订单数量：</view>
                                <view>{{ticket.price}} x{{ticket.buyQuantity}}</view>
                            </view>
                            <view class="list" style="margin-bottom: 4rpx;">
                                <view>有效期：</view>
                                <view v-if="ticket.ticketOrderDetailList[0].availableStartTime && ticket.ticketOrderDetailList[0].availableEndTime">
                                    <template v-if="ticket.ticketOrderDetailList[0].availableStartTime.split(' ')[0] == ticket.ticketOrderDetailList[0].availableEndTime.split(' ')[0]">
                                        <text>{{ticket.ticketOrderDetailList[0].availableStartTime.split(' ')[0]}}</text>
                                        当日有效
                                    </template>
                                    <template v-else>
                                        <text>{{ticket.ticketOrderDetailList[0].availableStartTime.split(' ')[0]}}</text>
                                        至
                                        <text>{{ticket.ticketOrderDetailList[0].availableEndTime.split(' ')[0]}}</text>
                                        有效
                                    </template>
                                </view>
                                <view v-else>
                                    {{ticket.ticketValidityPeriod == '2' ? '购买后' : '激活后'}}<text>{{ticket.buyPeriodDay}}</text>天有效
                                </view>
                            </view>
                            <view class="list" v-if="getWeekMsg(ticket)">
                                <view></view>
                                <view>({{getWeekMsg(ticket) + ((ticket.classify == '4' || ticket.classify == '5') && getWeekMsg(ticket) ? '不可用' : '')}})</view>
                            </view>
                            <view class="list" v-if="ticket.timeQuantum">
                                <view>场次：</view>
                                <view>{{ticket.timeQuantum}}</view>
                            </view>
                            <view class="list" v-if="ticket.timeQuantum">
                                <view>入园时间：</view>
                                <view>{{ticket.admissionTime ? ticket.admissionTime.split(',').join('-') : '以景区入园时间为准'}}</view>
                            </view>
                            <view class="list" v-if="ticket.classify == '2'">
                                <view>包含子票：</view>
                                <view>
                                    <text v-for="(i, index) in ticket.ticketChildList" :key="index" style="color: #666;">{{i.childTicketName}}-1张；</text>
                                </view>
                            </view>
                        </view>
                        <view class="refund">
                            <view class="equity" v-if="ticket.classify == '4' || ticket.classify == '5'" @click="showEquity = true;">
                            	<view class="text">包含{{ticket.ticketChildList.length}}项权益</view>
                            	<view class="icon">
                            		<u-icon name="arrow-right" color="#3F79FF" size="26rpx" top="2rpx"></u-icon>
                            	</view>
                            </view>
                            <view class="refund_rule" @click="setRefund(ticket)">退改规则</view>
                        </view>
                    </view>
                    <view class="bottom" v-if="ticket.paymentType == 200">
                        <!-- 年卡 -->
                        <template v-if="ticket.classify == '4' || ticket.classify == '5'">
                            <view class="code_list">
                                <view class="list" v-for="(item, itemIndex) in ticket.ticketOrderDetailList" :key="itemIndex">
                                    <view class="code_info">
                                        <view>
                                            <text>出行人</text>
                                            <text>{{item.userName}}</text>
                                        </view>
                                        <view style="padding-bottom: 28rpx;">
                                            <text>身份证</text>
                                            <text>{{item.identityCard}}</text>
                                        </view>
                                        <view class="active_btn" v-if="item.paymentType == 200 && (item.refundStatus == '0' || item.refundStatus == '100') && item.activationStatus == '0'" @click="showActivate = true;">去激活</view>
                                    </view>
                                </view>
                            </view>
                        </template>
                        <!-- 其他票 -->
                        <template v-else>
                            <!-- 一票一码 -->
                            <view class="code_list" v-if="ticket.qrcodeRule == '1'">
                                <view class="list" v-for="(item, itemIndex) in ticket.ticketOrderDetailList" :key="itemIndex" v-show="ticket.showAll || itemIndex == 0">
                                    <!-- 用户信息 -->
                                    <template>
                                        <!-- 所有人都有身份证 -->
                                        <view class="code_info" v-if="ticket.authenticationType == '3'">
                                            <view >
                                                <text>出行人</text>
                                                <text>{{item.userName}}</text>
                                                <template v-if="item.refundStatus > 0">
                                                    <text class="default" v-if="item.refundStatus == '1'">退款中</text>
                                                    <text class="default" v-if="item.refundStatus == '100'">退款已驳回</text>
                                                    <text class="default" v-if="item.refundStatus == '4'">退款失败</text>
                                                    <text class="active" v-if="item.refundStatus == '2' || item.refundStatus == '200'">{{item.refundStatusName}}</text>
                                                </template>
                                                <template v-else>
                                                    <text class="active" v-if="item.verificationType == '200'">已核销</text>
                                                </template>
                                            </view>
                                            <view>
                                                <text>身份证</text>
                                                <text>{{item.identityCard}}</text>
                                            </view>
                                        </view>
                                        <!-- 只有一个身份证 -->
                                        <view class="code_info" v-else>
                                            <template v-if="itemIndex == 0">
                                                <view>
                                                    <text>出行人</text>
                                                    <text>{{item.userName}}</text>
                                                    <template v-if="item.refundStatus > 0">
                                                        <text class="default" v-if="item.refundStatus == '1'">退款中</text>
                                                        <text class="default" v-if="item.verificationType != '200' && item.refundStatus == '100'">退款已驳回</text>
                                                        <text class="default" v-if="item.refundStatus == '4'">退款失败</text>
                                                        <text class="active" v-if="item.refundStatus == '2' || item.refundStatus == '200'">{{item.refundStatusName}}</text>
                                                    </template>
                                                    <template v-else>
                                                        <text class="active" v-if="item.verificationType == '200'">已核销</text>
                                                    </template>
                                                </view>
                                                <view>
                                                    <text>身份证</text>
                                                    <text>{{item.identityCard}}</text>
                                                </view>
                                            </template>
                                            <template v-else>
                                                <view>
                                                    <text>订单号</text>
                                                    <text>{{item.verificationCode}}</text>
                                                    <text v-if="item.verificationType == '200'" class="active">已核销</text>
                                                    <text v-if="item.refundStatus == '2' || item.refundStatus == '200'" class="active">{{item.refundStatusName}}</text>
                                                    <text v-if="item.refundStatus == '1' || item.refundStatus == '100'" class="default">{{item.refundStatus == '1' ? '退款中' : '退款已驳回'}}</text>
                                                </view>
                                            </template>
                                        </view>
                                    </template>
                                    <!-- 二维码 -->
                                    <template>
                                        <view class="code_img" @click="showListCode(item, itemIndex)" v-if="item.verificationType != '200' && (item.refundStatus == '0' || item.refundStatus == '100' || item.refundStatus == '3')">
                                            <uqrcode :ref="'uqrcode' + itemIndex" :canvas-id="'qrcode' + itemIndex" :value="item.verificationCode" :size="size" :options="{ margin: 4, backgroundColor: '#fff' }" class="qrcode_box"></uqrcode>
                                        </view>
                                        <view class="code_num" v-if="item.verificationType != '200' && (item.refundStatus == '0' || item.refundStatus == '100' || item.refundStatus == '3') && ticket.classify == '1'">
                                            <view>可核销次数：<text>{{item.canVerificationMun - item.verificationMun}}</text></view>
                                            <view>总核销次数：<text>{{item.canVerificationMun}}</text></view>
                                        </view>
                                        <view class="code_text" v-if="item.verificationType != '200' && (item.refundStatus == '0' || item.refundStatus == '100' || item.refundStatus == '3')">
                                            <view>{{item.verificationCode}}</view>
                                            <view @click="copyCode(item.verificationCode)">复制</view>
                                        </view>
                                    </template>
                                </view>
                            </view>
                            <view class="showAll" v-if="ticket.ticketOrderDetailList.length > 1 && ticket.qrcodeRule == '1'">
                                <view class="show_waper" @click="tabShowAll(ticketIndex)">
                                    <view class="text">{{ticket.showAll ? '收起' : '展开全部'}}</view>
                                    <view class="icon">
                                        <u-icon :name="ticket.showAll ? 'arrow-up' : 'arrow-down'" color="#999" size="26rpx" top="2rpx"></u-icon>
                                    </view>
                                </view>
                            </view>
                            <!-- 多票一码 只会出现一张身份证 -->
                            <view class="code_list" v-if="ticket.qrcodeRule == '2'">
                                <view class="list">
                                    <view class="code_info">
                                        <view>
                                            <text>出行人</text>
                                            <text>{{ticket.userName}}</text>
                                            <text class="active" v-if="ticket.verificationType == '200'">已核销</text>
                                            <text class="default" v-if="ticket.refundStatus == '1'">退款中</text>
                                            <text class="default" v-if="ticket.verificationType != '200' && ticket.refundStatus == '100'">退款已驳回</text>
                                            <text class="active" v-if="ticket.refundStatus == '2' || ticket.refundStatus == '200'">{{ticket.refundStatusName}}</text>
                                        </view>
                                        <view>
                                            <text>身份证</text>
                                            <text>{{ticket.identityCard}}</text>
                                        </view>
                                        <view v-if="ticket.verificationType == '200' || ticket.refundStatus > 0">
                                            <text>订单号</text>
                                            <text>{{ticket.orderCode}}</text>
                                        </view>
                                    </view>
                                    <view class="code_img" v-if="ticket.verificationMunTotal > 0 && (ticket.refundStatus == '0' || ticket.refundStatus == '100')" @click="showCode(ticket)">
                                        <uqrcode ref="uqrcode" canvas-id="qrcode" :value="ticket.orderCode" :size="size" :options="{ margin: 4, backgroundColor: '#fff' }" class="qrcode_box"></uqrcode>
                                    </view>
                                    <view class="code_num" v-if="ticket.verificationMunTotal > 0 && (ticket.refundStatus == '0' || ticket.refundStatus == '100')">
                                        <view>可核销张数：<text>{{ticket.verificationMunTotal}}</text></view>
                                        <view>总核销张数：<text>{{ticket.ticketOrderDetailList.length}}</text></view>
                                    </view>
                                    <view class="code_text" v-if="ticket.verificationMunTotal > 0 && (ticket.refundStatus == '0' || ticket.refundStatus == '100')">
                                        <view>{{ticket.orderCode}}</view>
                                        <view @click="copyCode(ticket.orderCode)">复制</view>
                                    </view>
                                </view>
                            </view>
                        </template>
                    </view>
                </view>
                <view class="order">
                    <view class="title">订单信息</view>
                    <view class="cont">
                        <view class="list">
                            <view v-if="detail.orderItemList[0].classify == '4' || detail.orderItemList[0].classify == '5'">联系人</view>
                            <view v-else>购票人</view>
                            <view>{{detail.userName}}</view>
                        </view>
                        <view class="list">
                            <view v-if="detail.orderItemList[0].classify == '4' || detail.orderItemList[0].classify == '5'">联系电话</view>
                            <view v-else>手机号</view>
                            <view>{{detail.mobilePhone}}</view>
                        </view>
                        <view class="list">
                            <view v-if="detail.orderItemList[0].classify == '4' || detail.orderItemList[0].classify == '5'">身份证号码</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' || detail.orderItemList[0].classify == '5'">创建时间</view>
                            <view v-else>下单时间</view>
                            <view>{{$utils.formatDate('Y-M-D h:m:s', detail.createTime)}}</view>
                        </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="showRefund" bgColor="transparent" closeOnClickOverlay mode="center" @close="closeRefund">
            <view class="refund_popup">
                <view class="title">退改规则
                    <view class="icon" @click="closeRefund">
                        <u-icon name="close" color="#333" size="28rpx"></u-icon>
                    </view>
                </view>
                <view class="refund_cont" v-if="refundInfo">
                    <view class="cont">
                        <view>{{refundInfo.refundRuleName}}</view>
                        <view v-if="refundInfo.refundRule == '0'">{{refundInfo.refundRemark || '门票一经售出，不可退款'}}
                        </view>
                        <view v-if="refundInfo.refundRule == '3'">门票有效期内可退</view>
                        <view v-if="refundInfo.refundRule == '4'">订单生成后{{refundInfo.refundDay}}天内可退</view>
                        <view v-if="refundInfo.refundRule == '5'">未激活可退</view>
                    </view>
                    <view class="fee" v-if="refundInfo.refundRule > 0">
                        <view class="fee_title">退款手续费</view>
                        <view class="fee_cont">
                            <view v-if="refundInfo.isFee == 0">无需手续费</view>
                            <view v-if="refundInfo.isFee == 1 && refundInfo.feeType == '1'">
                                退款需扣除手续费{{(refundInfo.deductionFees) + (refundInfo.deductionFeesUnit == '1' ? '%' : '元')}}
                            </view>
                            <view v-if="refundInfo.isFee == 1 && refundInfo.feeType == '2'"
                                v-for="(i, index) in JSON.parse(refundInfo.deductionJson)" :key="index">
                                游玩前{{i.day}}天内退票，需扣除手续费{{i.deductionFees}}{{i.deductionFeesUnit == '1' ? '%' : '元'}}</view>
                        </view>
                    </view>
                </view>
            </view>
        </u-popup>
        <!-- 年卡权益 -->
        <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 {
			id: null,
            showActivate: false,
            showRefund: false,
            refundInfo: null,
            safeAreaBottom: 0,
            size: 0,
            timeNum: 0,
            timer: null,
            configData: null,
            detail: null,
            showRefundBtn: false,
            showEquity: false
        }
    },
    onLoad (options) {
        this.safeAreaBottom = this.$safeAreaBottom;
        this.size = uni.upx2px(262);
		this.id = options.id;
        this.getDetail(options.id)
    },
	onShow() {
		this.getDetail(this.id)
	},
    onUnload () {
        clearInterval(this.timer);
        this.timer = null;
    },
    methods: {
        setRefund (info) {
            this.refundInfo = info;
            this.showRefund = true;
        },
        closeRefund () {
            this.showRefund = false;
            this.refundInfo = null;
        },
        async getDetail (id) {
            this.showRefundBtn = false;
            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);
                if ((creaetdTime + this.configData.expirationTime * 60) >= nowtime) {
                	this.timeNum = (creaetdTime + this.configData.expirationTime * 60) - nowtime;
                    this.setIntervalFn()
                }
            }
            
            for (var i = 0; i < this.detail.orderItemList.length; i ++) {
                this.detail.orderItemList[i].showAll = false;
            }
            
            let showRefundList = false;
            this.detail.orderItemList[0].ticketOrderDetailList.forEach((item) => {
                if (item.refundStatus > 0 && item.refundStatus != 3) showRefundList = true;
            })
            this.detail.showRefundList = showRefundList;
            // 判断是否可退款
            let refundNum = this.getRefundList(info.data);
            console.log(refundNum)
            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)
        },
        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' || this.detail.orderItemList[0].classify == '5') {
        				// 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;
        },
        secondsToTime(seconds) {
            const minutes = Math.floor((seconds % 3600) / 60);
            const remainingSeconds = seconds % 60;
            return (minutes >= 10 ? minutes : '0' + minutes) + ":" + (remainingSeconds >= 10 ? remainingSeconds : '0' + remainingSeconds);
        },
        getWeekMsg (info) {
            let list = info.applicablePeriod ? info.applicablePeriod.split(',') : [];
            if (list.length == 0) {
                return false;
            }
            let time = [];
            list.forEach((item) => {
                time.push(Number(item));
            })
            let weekLabel = '';
            if (info.classify == '4' || info.classify == '5') {
                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;
        },
        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' || this.detail.orderItemList[0].classify == '5') {
        					// 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;
        },
        copyCode (code) {
        	uni.setClipboardData({
        		data: code,
        		success: () => {
        			uni.showToast({ mask: true, title: '内容已复制到剪切板', icon: 'none' })
        		}
        	})
        },
        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' })
        },
        goRefund (info) {
        	uni.navigateTo({ url: `/pages/my/refund?id=${this.detail.id}` })
        },
        async goPay() {
            let parmas = {
				orderItemList: [{
					ticketName: this.detail.orderItemList[0].ticketName,
					totalPrice: this.detail.orderItemList[0].totalPrice
				}],
				id: this.detail.id
			};
			uni.navigateTo({
			    url: `/pages/my/payment?parmas=${JSON.stringify(parmas)}`
			})
            // if (this.detail.paymentMethod == '7') {
            //     let info = await this.$http.continuePayment(this.detail.id);
            //     if (info.code == 200) {
            //         uni.showToast({ mask: true, title: '支付成功', icon: 'success' });
            //         this.getDetail(this.detail.id)
            //     }
            // } else {
            //     let info = await this.$http.getTicketOrderSession({ orderId: this.detail.id });
            //     uni.showLoading({ mask: true });
            //     const prepayId = JSON.parse(info.msg);
            //     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' })
            //     	}
            //     });
            // }
        },
        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],
                        });
                    }
                });
            }
        },
        showCode (info) {
            if (info.paymentType == '200' && (info.refundStatus == '0' || info.refundStatus == '100') && info.verificationType == '0') {
                this.$refs.uqrcode && this.$refs.uqrcode.toTempFilePath({
                    success: res => {
                        uni.previewImage({
                            urls: [res.tempFilePath],
                        });
                    }
                });
            }
        },
        tabShowAll (ticketIndex) {
            let bol = this.detail.orderItemList[ticketIndex].showAll;
            this.$set(this.detail.orderItemList[ticketIndex], 'showAll', !bol);
            this.$forceUpdate();
            this.$nextTick(() => {
                if (this.detail.orderItemList[ticketIndex].showAll) {
                    this.detail.orderItemList[ticketIndex].ticketOrderDetailList.forEach((item, index) => {
                        this.$refs['uqrcode' + index][0] && this.$refs['uqrcode' + index][0].make();
                    })
                }
            })
        },
        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' });
        },
        // 获取可退款门票是否大于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' || info.orderItemList[0].classify == '5') {// 年卡
        						if (item.activationStatus == '0') {
        							list.push(item)
        						}
                            }
                        }
                    }
                })
            }
            return list;
        }
    }
}
</script>

<style lang="scss">
page{ background: #F6F6F6; }
.navbar_title{ color: #fff; }
.waper_box{ padding-bottom: 168rpx; }
.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; }
}
.detail_waper{
    width: 100%; box-sizing: border-box; padding: 0 32rpx; margin-top: -46rpx; position: relative;
    .refund_msg{
        width: 100%; height: 104rpx; box-sizing: border-box; padding: 0 24rpx; background: #fff; border-radius: 10rpx; margin-bottom: 20rpx; 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; }
        }
    }
    .detail_money{
        width: 100%; margin-bottom: 20rpx; box-sizing: border-box; padding: 32rpx 24rpx; display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 10rpx;
        view{
            height: 40rpx; display: flex; align-items: center; color: #666; font-size: 28rpx;
            text{
                &:last-child{ color: #FF5833; font-size: 42rpx; font-weight: 600; }
            }
        }
    }
    .detail_list{
        width: 100%; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 32rpx 24rpx; margin-bottom: 20rpx;
        &:last-child{ margin-bottom: 0; }
        .top{
            width: 100%;
            .title{
                width: 100%; height: 46rpx; box-sizing: border-box; padding-right: 200rpx; position: relative;
                view{
                    &:nth-child(1){ color: #333; line-height: 46rpx; font-size: 32rpx; font-weight: 500; }
                    &:nth-child(2){
                        position: absolute; right: 0; top: 0; line-height: 46rpx;  color: #FF5833; font-size: 42rpx; font-weight: 600; padding-left: 24rpx;
                        &::after{ content: "￥"; color: #FF5833; font-size: 24rpx; font-weight: 400; position: absolute; left: 0; bottom: 0; line-height: 36rpx; }
                    }
                }
            }
            .content{
                width: 100%; margin-top: 32rpx;
                .list{
                    width: 100%; margin-bottom: 16rpx; min-height: 40rpx; box-sizing: border-box; padding-left: 140rpx; color: #666; font-size: 28rpx; position: relative;
                    &:last-child{ margin-bottom: 0; }
                    view:first-child{ position: absolute; left: 0; top: 0; width: 140rpx; text-align: justify; text-align-last: justify; }
                    text{ color: #03AE80; }
                }
            }
            .refund{
                width: 100%; margin-top: 32rpx; height: 34rpx; position: relative;
                .equity {
                	display: flex; align-items: center; height: 34rpx; position: absolute; left: 0; top: 0;
                	.text { font-size: 28rpx; color: #3F79FF; margin-right: 8rpx; }
                }
                .refund_rule{ color: #3F79FF; line-height: 34rpx; font-size: 28rpx; position: absolute; right: 0; top: 0; }
            }
        }
        .bottom{
            width: 100%; margin-top: 46rpx; border-top: 2rpx dashed rgba(0, 0, 0, 0.2); position: relative; padding-top: 46rpx;
            &::after{ content: ""; width: 32rpx; height: 32rpx; background: #F6F6F6; border-radius: 50%; position: absolute; left: -40rpx; top: -16rpx; }
            &::before{ content: ""; width: 32rpx; height: 32rpx; background: #F6F6F6; border-radius: 50%; position: absolute; right: -40rpx; top: -16rpx; }
            .code_list{
                width: 100%;
                .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; position: relative;
                        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; }
                            }
                            &.active_btn{ position: absolute; right: 24rpx; top: 50%; transform: translateY(-50%); width: 138rpx; height: 72rpx; padding: 0; color: #fff; font-size: 24rpx; justify-content: center; background: #03AE80; border-radius: 10rpx; }
                        }
                    }
                    .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; }
                }
            }
        }
    }
    .order{
        width: 100%; box-sizing: border-box; padding: 32rpx 24rpx; border-radius: 10rpx; background: #fff; margin-top: 20rpx;
        .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%); }
                    }
                }
            }
        }
    }
}
.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; }
        }
    }
}
.refund_popup{
    width: 638rpx; box-sizing: border-box; padding: 32rpx 32rpx 36rpx; background: #fff; border-radius: 10rpx;
    .title{
        width: 100%; height: 46rpx; color: #333; font-size: 32rpx; font-weight: 500; position: relative; text-align: center;
        .icon{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
    }
    .refund_cont{
        width: 100%; border-top: 2rpx solid rgba(0, 0, 0, 0.1); margin-top: 28rpx; box-sizing: border-box; padding: 28rpx 8rpx 0;
        .cont{
            width: 100%;
            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: 30rpx;
            .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; }
            }
        }
    }
}
.equity_waper{
    width: 100%; background: #fff; border-radius: 10rpx 10rpx 0 0; box-sizing: border-box; padding: 40rpx 56rpx;
    .title{
        height: 50rpx; text-align: center; line-height: 50rpx; position: relative; color: #333; font-size: 36rpx; font-weight: 500;
        .icon{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
    }
    .content{
		padding: 40rpx 0 48rpx;
		.item {
			margin-bottom: 20rpx; font-size: 28rpx; color: #666666; display: flex; line-height: 40rpx;
            &:last-child{ margin-bottom: 0; }
			.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>