<!--
 * @Date: 2022-04-15 10:22:36
 * @LastEditors: JinxChen
 * @LastEditTime: 2023-10-30 14:58:43
 * @FilePath: \TelpoH5FrontendWeb\src\views\card-info\index.vue
 * @description:
-->
<template>
    <div class="card-info-container" v-show="isShowPage">
        <van-nav-bar title="话费查询" :left-arrow="false" :border="true">
        </van-nav-bar>
        <div class="check-container">
            <!-- header -->
            <div class="header">
                <!-- banner -->
                <div class="banner">
                    <van-image :src="logo" round>
                    </van-image>
                    <div class="right-message">
                        <p>{{ setMeal.msisdn }}</p>
                    </div>
                </div>
                <p class="padding-left">ICCID：{{ setMeal.iccid || '--' }}</p>
                <p class="padding-left">语音通话接听免费，免漫游费。禁止手机使用</p>
                <div class="action">
                    <div class="action-item">
                        <p>{{ setMeal.realname || '--' }}</p>
                    </div> <span> | </span>
                    <div class="action-item">
                        <p>{{ setMeal.cardState || '--' }}</p>
                    </div> <span> | </span>
                    <div class="btn">
                        <p @click="onRefresh">刷新</p>
                    </div>
                </div>
            </div>
            <!-- 套餐详情 -->
            <div class="card-details">
                <div class="set-meal">
                    <p class="font-orange">{{ setMeal.expireTime || '--' }}</p>
                    <p>套餐到期时间</p>
                </div>
                <div class="set-meal">
                    <p class="font-orange">{{ setMeal.residueVoiceData || '--' }}</p>
                    <p>剩余语音(分钟)</p>
                </div>
                <div class="set-meal" v-show="false">
                    <p class="font-orange">{{ setMeal || '--' }}</p>
                    <p>套餐流量(M)</p>
                </div>
                <div class="set-meal">
                    <p class="font-orange">{{ setMeal.residueFlow || '--' }}</p>
                    <p>剩余流量(M)</p>
                </div>
            </div>
            <!-- 套餐操作 -->
            <div class="card-details-menu">
                <div class="meal-item" @click="onMealBuy">
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAADgUlEQVRYR+2XTWhUVxTH/+cl5IPQUhG0ASlWWoRaF22hSDeCRUT6gV+LUnEkQt+5b9GAUdRu2odupGDEQOa9+1IKRgUZLZUq1I1SF10VFdSNFqGKdBZtJ0UYTWi5R26ZFJmMvnvnRVDJ3QzDPR+/9z9zzpxHeMoPPeV8mAMsWqFnT8Esyz43xmxoevJTSqlDRdVox3+Ggs2ARPQaAGHmV9pJUNQnt8Ra6whA2RjzahRFvxVN6OvvArgcwBUR2aKUOuqboKh9LqCIUJZlfwI4wcyqaEJf/1xAGzBN09NEtISZl/kmKGrvBKi13gVgv4icICIpmrSVPxGdDsPwWPOdE2CWZe+JyM8AqgD+nmXAAMBSAEeYudQWYKVS6ZqYmLBgZWbeOZuASZKsCoLgnJ29URR93xagddJa/wSgh5lXzCZgmqYJEW3u6upaMDAwMNk2YJZl+0RkN4CXmPleA/pTAB94At9m5i+sT6VS6ajVar8DOKeUsrFmHKffoPXKsmyNiJw1xrwfRdH5BuBXAFoGfgy0BVxt7/PKa22cAUdGRl7s7u6uEdHeMAz3eqrW0ny6vPV6feHQ0ND9Qgo2FLsIoDatQBFIl/J6KdgAtBvNtmq1Oi+O43+TJFkcBEEsIp15sEQ0NTU1tWdwcPAP1/J6A46NjW0yxthh/W4Yhr+Uy+V3Ojo6jgDIBQRgO3Q9M9+0iV3K6w04Ojr6cmdnp+26Hcx8ME+1R927ltcbsFHmX0XkqlKqeal15nXp3ulgzl087aC1/haAhTvrTDTT8A0Aix/XvW0Dpmk6QEQW8haA/wZ2m+ckM3+Z5+utYJqmrxPRDQCfMfM3eQmK3vsC2uV1nTGmQkR2/bdz0eX0AvirsVKdsu84Lk5eTRLHcdDf32/3tU9EZIKI7Gh5oZHseouk9uHtGkUichfAP0Q0H8DxarW6OY5j4wLprGCapiUiOiwie5j560ZH7yIiu8huVUqNP5zQ1/5RsD6A3xHRm8xsVfn/aK2vi8g1pdTGJkAv+9kAtO8li5j5rSbAyyJyRyn1UROgl31hQK31dgAHjDEfR1F0xgZMkuTDIAh+aPXP4mtfGHB4eLi3r6/vAoC3RcR+gohWArhUr9dXNq9LvvaFAW2A8fHxvsnJyR3GmLX2exAEP/b09BwolUr1Vgl87VvFcG4Sl5HwJGzmAIuqOqfgc6/gA38wwThLucAeAAAAAElFTkSuQmCC"
                        alt="" />
                    <p>套餐订购</p>
                </div>
                <div class="meal-item" @click="onRecordCheck">
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAD6UlEQVRYR+2YXWgcVRiG3+9sshtSiUaKmFAvSlEReiFuKSKWoNbUm17401DFH0KTOWdCDLheCHrhoCBi1MhKMnMmCaEJuZFaGhRrTVFaQW8MXigiFmqVyipYwRKM7GTOJyfsStimmbS72QbN3C3n7JyH9/t5vzOEDf7QBufDJmC1EdpUsFLBfD7fkk6n3wVwVCk1k6RwooJa605mlgBuTHpZ5ToRMRGNO44zbde01lsBfAwgCyBi5oNKqaOrvXdVQAsH4DiA88x8thrA8fHx9sXFxU8AbGfmZwAMENHdSZCrAgZB8D4R7Uqn07d3d3f/faWA5f2jo6Pb4zg+SUS3MPNepdTp4eHh61Kp1EclyAOXC3cS4Gf2EKXUfVXA3WGMmWXmrUSUATAkpcyVQn4AwHvMPKmUsqpe8qwr4MjISLahoeE4MxejKNrX2Nh4CMBzFjKVSh2L49iufVcsFh8YGBi4WFdArfW9AD4EcCGO4wf7+vqWclhr/XYJMgLwQxRFHf39/RcuF6F1UTAMw33MbKvznDGm03XdX8oAvu/vFEJ8ZQsPwB4pZeGqqzgIgivOQd/3HxVCTBPRt8z8kJTy9zKA1noHgM8BxMaYPa7rnkvK7ZoqqLW2iT7GzF8S0X4p5Z/LKnmbMcbCNQPokFJ+nwRn12sGGATBs0T0DjPPEtEjUsq/loX1JiHEKQA3G2Pud13367XA1QxQa/0SgFetfRUKhSc8zyuWAYaGhm5obm7+FMBtRNTpOM4XYRiOGWNsazmdBFq1gkEQ5IjoLQCHW1tbD3V1dcXlQwcHB7e0tLRY97jLhtxxnJM2alprw8wvK6VeWVdAz/NEW1vbTwC2WY8tFAoPe5635Dj5fD6TyWRsm+kA0CWlPFaCqR9gGIZ7bc4xs63agwBmLSSAxfb29iPGmP1CiKfLw8K1ADxsIYrFYltTU9PjzDxmIQH8AcD+7lNKBRVhrI+Ck5OTWxYWFn4FMC2lVBMTE01RFE3Y6aQE9IKU8o2V7LUuORgEwZNENMXMLwohdjDzYwCuB/AzM7+plLJD6Yr2WhdArfUJAHZeBDNfJKIjQoipnp6eU3ZQXaU66xNirfUMETUAmJqfn5/J5XILSS2j7kWyRqDKbfVR8CrhltyrLjm4YQCJ6B4A/04lSWC2sh3HeV5rbW+C1sqW22lhbm5uVzabLdbM6ojoVgBlm0risxV9Qin1ge/7u4UQT1UCSilf+1+FuCbXzuWyl0b+bwD0SymHk0Kyrhf3S/oLkT3vTvtVQQixs7e397eqAO2fq/n0sQKgdZgfmfl1pdSZJLilnrSWTddyzyZgtepvKvifV/Af4cRYRyl1cksAAAAASUVORK5CYII="
                        alt="" />
                    <p>订购记录</p>
                </div>
            </div>
            <div class="tips-container">
                <p>注：</p>
                <p>通话结束后，剩余语音时长需1小时后才更新。</p>
            </div>
        </div>
    </div>
</template>

<script>
import APIWx from "@/api/wx";
import { APIPay } from "@/api/pay";
import { isNotNull } from "@/utils/index";
import APICore from "@/api/core";
import AppId from "@/config/appId";
export default {
    name: 'cardInfo',
    inject: ["reload"],
    data() {
        return {
            //套餐信息
            setMeal: {
                expireTime: '', //套餐过期时间
                residueVoiceData: '', //剩余语音
                availableData: '', //流量套餐
                residueFlow: '', //剩余流量
                iccid: this.$route.query.iccid, //iccid
                cardState: '', //卡激活状态
                realname: '', //是否已实名 1是 0 否
                msisdn: '', //msisdn
                isUnicom: null, //是否是联通
            },
            isShowMenu: this.$route.query.isShowMenu,
            params: {},
            isShowPage: false, //是否显示整个页面
            code: '', //微信授权code
        }
    },
    computed: {
        //   顶部图标
        logo() {
            if (this.setMeal.isUnicom !== null) {
                return this.setMeal.isUnicom ? require('@/assets/img/unicom.png') : require('@/assets/img/yidong_logo.png')
            } else {
                return null
            }
        },
        isWeChat() {
            const ua = window.navigator.userAgent.toLowerCase();
            return /micromessenger/.test(ua);
        }
    },
    async mounted() {
        await this.getAuth();
        await this.getToken();
        await this.getParams();
        await this.getCardInfo();
    },
    methods: {
        //   获取core token
        getAuth() {
            let manufactorId = "5bf13062-a41e-4d00-ba14-1101aad12650";
            return new Promise((resolve) => {
                APICore.getAuth({ manufactorId: manufactorId }).then(res => {
                    this.$store.commit("gatewayToken", res.data.data);
                });
                resolve(true)
            })
        },
        // 获取token
        getToken() {
            let manufacturerNo = '9f166b07-ff83-4991-84dc-ca6ad4a6b95b';
            return new Promise((resolve) => {
                APIPay.getToken(manufacturerNo).then(res => {
                    let data = res.data;
                    if (data.code === 20000) {
                        this.$store.commit("token", data.token);

                    }
                });
                resolve(true);
            })
        },
        // 获取url传过来的参数
        getParams() {
            let params = this.$route.query;
            return new Promise(resolve => {
                if (params) {
                    this.params = { ...params };
                    let url = window.location.href.split("?code=")[1];
                    if (isNotNull(url) && window.location.href.indexOf("code") > -1 && this.isWeChat) {
                        let timeStamp = new Date().getTime();
                        let code = url.split("&")[0];
                        this.code = code;
                        if (isNotNull(code)) {
                            this.isShowPage = true;
                            if (!params.isHasCode) {
                                this.getOpenId(code);
                            }
                        } else {
                            this.$dialog({
                                message: '系统繁忙，请重新进入'
                            })
                        }
                    } else {
                        if (this.isWeChat) {
                            this.getWxCode();
                        } else {
                            this.isShowPage = true;
                        }

                    }
                }
                resolve(true);
            })

        },
        getWxCode() {
            let params = this.params;
            let commonUrl = process.env.NODE_ENV === "production" ? process.env.VUE_APP_BASE_API : 'https://id.gdssjl.com';
            let redUrl = encodeURIComponent(`${commonUrl}/h5-frontendweb/#/cardInfo?imei=${params.imei}&iccid=${params.iccid}`);
            let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${AppId}&redirect_uri=${redUrl}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
            window.location.href = url;
        },
        // 根据code获取openId
        getOpenId(code) {
            let openId = this.$store.getters.openId;
            APIPay.getOpenId(code).then(async res => {
                let data = res.data;
                if (data.code === 20000) {
                    this.$store.commit("openId", data.data.openId);
                } else if (data.state === false) {
                    console.log("token过期");
                    let hasToken = await this.getToken();
                    if (hasToken) {
                        /* this.getOpenId(this.code); */
                        this.getWxCode();
                    } else {
                        this.$dialog({
                            message: '系统繁忙，请重新进入'
                        })
                    }
                } else {
                    this.getWxCode();
                }
            })
        },
        //获取小台风物联网卡信息
        getCardInfo() {
            if (!this.isShowPage) { return }
            return new Promise((resolve) => {
                this.$toast.loading({ message: '查询中...' });
                let reqBody = {
                    imei: this.$route.query.imei,
                    iccid: this.$route.query.iccid || ''
                }
                APIWx.GetCardInfo(reqBody)
                    .then(res => {
                        let data = res.data;
                        if (data.stateCode === 1) {
                            let item = data.data;
                            this.setMeal.expireTime = item.expireTime == '' ? "" : this.$dayjs(item.expireTime).format("YYYY-MM-DD");
                            this.setMeal.residueVoiceData = item.availableVoiceData;
                            this.setMeal.residueFlow = item.availableData;
                            this.setMeal.cardState = item.cardState;
                            this.setMeal.realname = Number(item.realname) === 1 ? '已实名' : '未实名';
                            this.setMeal.msisdn = item.msisdn;
                            // 截取msisdn 前三位， 148 是移动，其它都是联通
                            this.setMeal.isUnicom = item.msisdn.slice(0, 3) === '148' ? false : true;
                            this.$toast.success({
                                message: "查询成功",
                                duration: 1500
                            });
                        } else {
                            this.$toast.success({
                                message: `${data.message}`,
                                duration: 1500
                            });
                        }
                    })
                    .catch(error => {
                        console.log("接口报错了", error);
                    }).finally(() => {
                        setTimeout(() => {
                            this.$toast.clear();
                        }, 1500);

                    })
                resolve(true)
            })

        },
        //   返回
        onNavBack() {
            /* this.$router.push({ name: 'device'}); */
        },
        //   onRefresh 刷新
        onRefresh() {
            this.reload();
        },
        // 购买套餐
        onMealBuy() {
            this.$router.replace({
                name: 'packageBuy',
                query: { imei: this.$route.query.imei, iccid: this.$route.query.iccid, isShowMenu: this.isShowMenu }
            })
        },
        // 订购记录
        onRecordCheck() {
            this.$router.replace({
                name: 'buyRecord',
                query: { imei: this.$route.query.imei, iccid: this.$route.query.iccid, isShowMenu: this.isShowMenu }
            })
        }

    }
}
</script>

<style scoped lang="scss">
.card-info-container {
    max-height: 100vh;
    width: 100%;
    position: relative;
    background-color: #fff;

    p {
        font-size: 16px;
        color: #9B9B9B;
    }

    .check-container {
        height: calc(100vh - 88px);
        padding: 8px 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;

        .header {
            height: 200px;
            width: 100%;
            display: flex;
            justify-content: space-around;
            flex-direction: column;
            align-items: flex-start;
            border: 1px solid #fff;
            box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;

            .padding-left {
                padding-left: 10px;
            }

            .banner {
                height: 75px;
                margin: 10px 0;
                padding-left: 5px;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .van-image {
                    height: 75px;
                    width: 75px;
                    border: 5px solid #E0EEFF;
                }

                .right-message {
                    text-align: center;
                    margin-left: 10px;

                    p {
                        font-size: 18px;
                        color: #64A9FF;
                    }
                }
            }

            .action {
                height: 35px;
                text-align: center;
                padding-left: 10px;
                width: 100%;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                p {
                    font-size: 16px;
                    color: #64A9FF;
                }

                span {
                    display: block;
                    color: #9B9B9B;
                    font-size: 16px;
                    padding: 0 8px;
                }

                .btn {
                    height: 25px;
                    width: 75px;
                    line-height: 25px;
                    text-align: center;
                    background-color: #64A9FF;
                    border-radius: 10px;

                    p {
                        color: #fff;
                    }
                }
            }
        }

        .card-details {
            height: 75px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            border: 1px solid #fff;
            box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;

            .set-meal {
                flex: 1;
                height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;

                p {
                    font-size: 16px;
                    padding: 5px 0;
                }

                .font-orange {
                    color: orange;
                }
            }

            .set-meal:nth-of-type(2) {
                border-left: 1px solid #DDDDDD;
                border-right: 1px solid #DDDDDD;
            }
        }

        .card-details-menu {
            height: 75px;
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: 20px;
            border: 1px solid #fff;
            box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;

            .meal-item {
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                padding-left: 10px;

                img {
                    height: 45px;
                    width: 40px
                }

                p {
                    font-size: 14px;
                    padding: 5px 0;
                }
            }
        }

        .tips-container {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-direction: column;

            p {
                margin: 10px;
                color: red;
            }
        }
    }
}
</style>
