<template>
    <!-- <scroll-uni-view scroll-y="true" class="pointsBox"> -->
    <div class="pointsBox">
        <div class="points-info-box">
            <div class="points-infos">
                <!-- <img :src='picUrl + pointSuccessImg'/> -->
                <img :src='successImgUrl' />
                <div class="bold">兑换成功</div>
                <div class="detailText">恭喜你，兑换成功，快去使用吧！</div>
            </div>
            <div class="points-btns">
                <div class="points-btn-item">
				    <button :class="{exchange: custTypeId === 0, 'blueExchange': custTypeId === 1, 'greenExchange': custTypeId === 2 }" type="default" @click="wallet">去使用</button>
                </div>
                <div class="points-btn-item">
                    <button :class="{wallet: custTypeId === 0, 'blueWallet': custTypeId === 1, 'greenWallet': custTypeId === 2}" type="default" @click="exchange">继续兑换</button>
                </div>
            </div>
        </div>
    <!-- </scroll-uni-view> -->
    <!-- 弹窗 -->
    <uni-popup ref="popup" type="dialog" class="uni-popup" :mask-click="false" >
		<div class="popup-like">
			<div class="popup-like-body">
				<div class="title">提示</div>
				<div class="img-text">
					<div class="text">正在发券中，是否前往卡包查看？</div>
				</div>
			</div>
			<div class="popup-unlike-footer">
				<div class="popup-unlike-footer-item" @click="close">返回等待</div>
				<div class="popup-unlike-footer-item"  @click="goWallet">去卡包</div>
			</div>
		</div>
	</uni-popup>
    </div>
</template>

<script>
    // var app = getApp();
 const app = {}
    const pointSuccessImg = `/20210908/ba38728b245049e0a539968cf8d08b1e.png`;
    import pointSuccess from '../parkingFee/static/images/hint.png';
    import pointSuccessBlue from '@/static/images/loggedOff/icon-success-blue.png';
    import pointSuccessGreen from '@/static/images/loggedOff/icon-success-green.png';
	import { mapState } from 'vuex'
    export default {
        name: 'points-success',
        data() {
            return {
                msg: '兑换成功',
                picUrl: this.$picUrl,
                pointSuccessImg: pointSuccessImg,
                pointSuccess: pointSuccess,
                couponCode: '',
                ticketKind: '',
                outtradeno: '',
            }
        },
		computed: {
			...mapState({
				custTypeId: state => state.custTypeId
			}),
            successImgUrl() {
                var imgUrl = ''
                const ary = [pointSuccess, pointSuccessBlue, pointSuccessGreen]
                imgUrl = ary[this.custTypeId]
                return imgUrl
            }
		},
        onLoad(options) {
            if (options.couponCode) this.couponCode = options.couponCode;
            if (options.ticketKind) this.ticketKind = options.ticketKind;
            if (options.outtradeno) this.outtradeno = options.outtradeno;
        },
        methods: {
            exchange() {
                const pages = getCurrentPages();
                const currentPage = pages.length - 1;
                let inorderPage = 0;
                pages.map((item, index) => { if (item.route === 'pages/pointsMall/pointsMall') inorderPage = currentPage - index; })
                if (inorderPage == 0) uni.redirectTo({ url: '/pages/pointsMall/pointsMall' });
                else uni.navigateBack ({ delta: inorderPage });
            },
            wallet() {
                if (this.ticketKind != '1') {
                    if (this.couponCode) {
                        // 判断是否是多张券
                        if (this.couponCode.indexOf('#') != -1) {
                            uni.redirectTo({ url: '/pages/ticket/cardCaseDetails?couponCode=' + this.couponCode.split('#')[0] });
                        } else uni.redirectTo({ url: '/pages/ticket/cardCaseDetails?couponCode=' + this.couponCode });
                    } else {
                        // this.outtradeno
                        // xcrm-api/api/1.0/ticket/getCouponByOrderNo  参数：mallid：商场id 、orderNo：订单号@唐笑丶 
                        uni.showLoading({
                            title: '电子券状态查询中'
                        });
                        const params = {
                            mallid: app.globalData.mallid,
                            orderNo: this.outtradeno
                        };
                        this.$md(params);
                        const url = this.$baseURL + 'api/1.0/ticket/getCouponByOrderNo';
                        uni.request({
                            url: url,
                            data: params,
                            method: 'POST',
                            header: JSON.parse(uni.getStorageSync('handleUser')),
                            success: (res) => {
                                uni.hideLoading();
                                if (res.data.code === 0 && res.data.data) {
                                    const datas = res.data.data;
                                    if (datas.indexOf('#') != -1) {
                                        uni.redirectTo({ url: '/pages/ticket/cardCaseDetails?couponCode=' + datas.split('#')[0] });
                                    } else uni.redirectTo({ url: '/pages/ticket/cardCaseDetails?couponCode=' + datas });
                                } else this.$refs.popup.open();
                            },
                            fail: (err) => {
                                this.$refs.popup.open();
            		        }
                        });
                    }
                }
                else uni.redirectTo({ url: '/pages/ticket/cardCaseList' });
            },
            goWallet() {
                uni.redirectTo({ url: '/pages/ticket/cardCaseList' });
            },
            close() {
                this.$refs.popup.close();
            },
        }
            
    }
</script>

<style lang="less" scoped>
	@import '../../styles/common.less';
    .pointsBox {
        height: 100%;
        position: relative;
        .points-info-box {
            width: 750px;
            padding: 0 32px;
            box-sizing: border-box;
            text-align: center;
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            .points-infos {
                margin-bottom: 72px;
                img {
                    width: 200px;
                    height: 200px;
                    margin-bottom: 72px;
                }
                .bold {
                    font-weight: bold;
                    color: #333333;
                    font-size: 36px;
                    margin-bottom: 22px;
                }
                .detailText {
                    color: #333333;
                    font-size: 26px;
                }
            }
            .points-btns {
                // display: flex;
                // margin-top: 50px;
                // padding: 0 32px;
                width: 100%;
                .points-btn-item {
                    // flex: 1;
                    // padding: 20px 0px;
                    margin-bottom: 22px;
                    button {
                        width: 686px;
                        height: 94px;
                        line-height: 94px;
                        font-size: 34px;
                        border-radius: 6px;
                    }
                    .wallet {
                        color: #594975;
                        border: 2px solid #594975;
                    }
					.blueWallet {
						.colorWallet('blue')
					}
					.greenWallet {
						.colorWallet('green')
					}
					.colorWallet(@value) {
						@color: 'color-@{value}';
                        border: 2px solid #594975;
						color: @@color;
                        border-radius: 41px;
					}
                    .exchange {
                        background-image: linear-gradient(to right, #824f9e, #453d7f);
                        color: #ffffff;
                    }
					.blueExchange {
                        .color-background-color('blue');
                        color: #C7B299;
                        border-radius: 41px;
					}
					.greenExchange {
                        .color-background-color('green');
                        color: #C7B299;
                        border-radius: 41px;
					}
                }
            }
        }
    }
    .popup-like {
        width: 80vw;
        border-radius: 20px;
        background-color: #ffffff;
        .popup-like-body {
            padding: 0 20px;
            .title {
                color: #000000;
                font-weight: 500;
                font-size: 34px;
                border-bottom: 1px sloid #FCFCFC;
                text-align: center;
                padding: 40px 0 20px;
            }
            .img-text {
                padding: 20px 0;
                text-align: center;
                .img {  width: 100px; }
                .text {
                    padding-top: 20px;
                    color: #666666;
                    font-size: 32px;
                }
            }
        }
        .popup-like-footer {
            border-top: 1px solid #FCFCFC;
            padding: 30px 0;
            text-align: center;
            font-size: 32px;
        }
        .popup-unlike-footer {
            display: flex;
            justify-content: space-between;
            border-top: 1px solid #FCFCFC;
            font-size: 32px;
            .popup-unlike-footer-item {
                flex: 1;
                text-align: center;
                padding: 30px 0;
            }
            .popup-unlike-footer-item:nth-of-type(1) {
                border-right: 1px solid #FCFCFC;
            }
        }
    }
</style>



