<template>
    <div class="reverse">
        <div class="address">
            <img src="https://www.smart-zj.cn:55901/imagems/7f7612f4-4ca5-47b5-8c11-1074203af38d.png"
                style="width:100%;height:180px" />
        </div>
        <div class="content">
            <div class="content1" @click="scan">
                <img src="./img/scanqr.png" style="width:110px;height:110px" alt="">
                <div class="text" v-if="active == 0">
                    <p class="text1">个人出行登记</p>
                    <p class="text2">请扫描场所通行码</p>
                </div>
                <div v-else class="text">
                    <p class="text1">扫描个人通行码</p>
                </div>
            </div>
            <div v-if="active == 0" class="content2">
                <div class="card">
                    <div class="top">
                        <div class="icon"></div>
                        <div class="title">个人通行码</div>
                    </div>
                    <div class="bottom">
                        <div class="smallCard" @click="jump(0)">
                            <img src="./img/mytxm.png" alt="">
                            <div class="name">我的通行码</div>
                        </div>
                        <div class="smallCard" @click="jump(1)">
                            <img src="./img/jrtxm.png" alt="">
                            <div class="name">家人通行码</div>
                        </div>
                    </div>
                </div>
                <div class="img">
                    <img src=" https://smart-zj.cn:55901/image/appBanner/2c3eb855-116f-4a04-86f8-5c5b2ec6d310.png" alt="">
                </div>
            </div>
            <div v-else class="content2">
                <div class="card">
                    <div class="top">
                        <div class="icon"></div>
                        <div class="title">扫码查验权限</div>
                    </div>
                    <div class="bottom">
                        <div class="smallCard" @click="jump(2)">
                            <img src="./img/ygsq.png" alt="">
                            <div class="name">员工授权</div>
                        </div>
                        <div class="smallCard" @click="jump(3)">
                            <img src="./img/qxsq.png" alt="">
                            <div class="name">权限申请</div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="top">
                        <div class="icon"></div>
                        <div class="title">场所通行码</div>
                    </div>
                    <div class="bottom">
                        <div class="smallCard" @click="jump(4)">
                            <img src="./img/cktxm.png" alt="">
                            <div class="name">查看场所通行码</div>
                        </div>
                        <div class="smallCard" @click="jump(5)">
                            <img src="./img/sctxm.png" alt="">
                            <div class="name">生成场所通行码</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <van-tabbar v-model="active" active-color="#EB4E3F" inactive-color="#999999">
            <van-tabbar-item @click="act(0)">
                <span>个人出行</span>
                <template #icon="props">
                    <img :src="props.active ? icon.active : icon.inactive" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item @click="act(1)">
                <span>经营场所</span>
                <template #icon="props">
                    <img :src="props.active ? icon.active1 : icon.inactive1" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
        
    </div>
</template>

<script>
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';
import { getOwn, getFamily } from "@/api/reverse.js";
import { encryptByDES } from "@/utils/utils";
Vue.use(Tabbar).use(TabbarItem);
export default {
    data() {
        return {
            active: 0,
            icon: {
                active: require('./img/grcx1.png'),
                inactive: require('./img/grcx2.png'),
                active1: require('./img/jycs1.png'),
                inactive1: require('./img/jycs2.png'),
            },
            userInfo: {},
        }
    },
    methods: {
        scan() {
            if (window.android !== window.androidundefined) {
                const res = window.android.scan(); // 这是一个json字符串  android端
                sessionStorage.setItem("ZJCD-UserInfo", res);
                this.userInfo = JSON.parse(res);
            } else if (window.webkit) {
                window.webkit && window.webkit.messageHandlers.startScan.postMessage('startScan'); // ios端
            }
        },
        act(val) {
            sessionStorage.setItem('act', JSON.stringify(val))
        },
        jump(type) {
            sessionStorage.setItem('type', JSON.stringify(type))
            switch (type) {
                case 0:
                    if (this.userInfo.realName) {
                        getOwn({
                            // uid: this.userInfo.userId,
                            uid: encryptByDES(this.userInfo.userId.toString(), "MnuYbhGv"),
                            userType: 0
                        }).then((res) => {
                            console.log(res)
                            // alert(JSON.stringify(this.userInfo))
                            if (res.code == 200) {
                                if (res.data) {
                                    this.$router.push({ name: 'ReverseGrDetail', query: { ...res.data, type } });
                                } else {
                                    sessionStorage.removeItem('form')
                                    sessionStorage.removeItem('location')
                                    sessionStorage.removeItem('code')
                                    sessionStorage.removeItem('address')
                                    this.$router.push({ name: 'ReverseSubmit', query: { type: type } });    
                                }
                            }
                        })
                    } else {
                        this.back()
                    }
                    break;
                case 1:
                    getFamily({
                        // uid: this.userInfo.userId,
                        uid: encryptByDES(this.userInfo.userId.toString(), "MnuYbhGv"),
                        userType: 1
                    }).then((res) => {
                        if (res.data && res.data.length > 0) {
                            sessionStorage.removeItem('location')
                            this.$router.push({ name: 'ReverseJrList', query: { userInfo: this.userInfo, type: type } });
                        } else {
                            sessionStorage.removeItem('form')
                            sessionStorage.removeItem('location')
                            sessionStorage.removeItem('code')
                            sessionStorage.removeItem('address')
                            this.$router.push({ name: 'ReverseSubmit', query: { userInfo: this.userInfo, type: type } });
                        }
                    })
                    break;
                case 2:
                    console.log(3)
                    this.$router.push({ name: 'ReverseStaff' });
                    break;
                case 3:
                    console.log(4)
                    if (this.userInfo.realName) {
                        this.$router.push({ name: 'ReverseApply' });
                    } else {
                        this.back()
                    }
                    break;
                case 4:
                    console.log(5)
                    this.$router.push({ name: 'CurrentHistory' });
                    break;
                case 5:
                    console.log(6)
                    this.$router.push({ name: 'CurrentIndex' });
                    break;
                default:
                    break;
            }
        },
        // 返回首页
        back() {
            this.$dialog
                .confirm({
                    message: "请进入“我的”完成实名认证！",
                    showCancelButton: false,
                })
                .then(() => {
                    if (window.android !== undefined) {
                        window.android.backHome();
                    } else {
                        window.webkit && window.webkit.messageHandlers.backHome.postMessage("");
                    }
                });
        },
        // 初始化获取userInfo
        JSBgetUserInfo() {
            if (window.android !== undefined) {
                const res = window.android.getUserInfo(); // 这是一个json字符串
                sessionStorage.setItem("ZJCD-UserInfo", res);
                this.userInfo = JSON.parse(res);
                sessionStorage.setItem('token', this.userInfo.token);
            } else if (window.webkit) {
                window.webkit &&
                    window.webkit.messageHandlers.getUserInfo.postMessage("getUserInfo");
            } else {
                window.receiveLocation(
                    JSON.stringify({ code: 0, data: { lat: 39.983744, lng: 116.276063 } })
                );
                this.$toast("请先登录镇合意app");
            }
        },
        getUserInfo(res) {
            sessionStorage.setItem("ZJCD-UserInfo", res);
            this.userInfo = JSON.parse(res);
            sessionStorage.setItem('token', this.userInfo.token);
        },
    },
    created() {
        this.JSBgetUserInfo();
        if (JSON.parse(sessionStorage.getItem("act"))) {
            console.log(JSON.parse(sessionStorage.getItem("act")))
            let a = JSON.parse(sessionStorage.getItem("act"))
            if (a == 0) {
                this.active = 0
            } else {
                this.active = 1
            }
        }
    },
    mounted() {
        window.getUserInfo = this.getUserInfo;
    },
}
</script>

<style lang="stylus" scoped>
.reverse{
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: scroll;
    .address {
        display: flex;
        align-items: flex-start;
        width: 100%;
    }
    .content {
        width: 95%;
        position: absolute;
        display: flex;
        flex-direction: column;
        margin-top: 100px;
        
        .content1{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width 100%;
            height: 400px;
            background: #FFFFFF;
            box-shadow: 0px 4px 30px 0px rgba(255, 44, 44, 0.2);
            border-radius: 10px;
            .text{
                text-align: center;
                font-family: PingFangSC-Medium, PingFang SC;
                .text1{
                    margin-top: 20px;
                    font-size: 28px;
                    font-weight: 600;
                    color: #333333;
                    line-height: 1.5;
                }
                .text2{
                    font-size: 24px;
                    font-weight: 500;
                    color: #666666;
                    line-height: 2;
                }
            }
        }
        .content2{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width 100%; 
            .card{
                width: 100%;
                height: 251px;
                background: #FFFFFF;
                box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
                border-radius: 8px;
                margin-top: 24px;
                display: flex;
                flex-direction: column;
                padding: 20px;
                box-sizing: border-box;
                .top{
                    display: flex;
                    align-items: center;
                    .icon{
                        width: 4px;
                        height: 24px;
                        background: #EB4E3F;
                        box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
                        border-radius: 2px;
                    }
                    .title{
                        font-size: 28px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 600;
                        color: #333333;
                        text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06);
                        margin-left: 15px;
                    }
                }
                .bottom{
                    height 100%;
                    display: flex;
                    justify-content: space-around;
                    .smallCard{
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        img{
                            width 120px;
                            height 120px;
                        }
                        .name{
                            font-size: 26px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #333333;
                            text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06);
                        }
                    }
                }
            }
            .img{
                margin-top: 24px;
                width 100%;
                height 200px;
                img{
                    width 100%;
                    height 100%;
                }
            }
        }
    }
}
</style>