<template>
    <div class="grDetail">
        <div class="top-content" ref="test">
            <div class="title">
                <img src="./img/detail_icon.png" alt="">
                <div class="subTitle">镇江通行码</div>
            </div>
            <div class="info">
                <div class="img">
                    <img :src="this.info.picture" alt="">
                </div>
                <div class="name">{{ this.info.name }}</div>
            </div>
            <div class="card-content">
                <div class="haoma">
                    <div class="value">
                        手机号码：
                    </div>
                    <div class="num">
                        {{ this.info.mobile }}
                    </div>
                </div>
                <div class="haoma">
                    <div class="value">
                        证件号码：
                    </div>
                    <div class="num">
                        {{ this.idCard1 }}
                    </div>
                </div>
            </div>
            <div class="qrCode">
                <vue-qr style="display: block; margin: auto" :text="downloadData.url" :size="180">
                </vue-qr>
            </div>
        </div>
        <div class="bottom-content">
            <van-button class="button button1" @click="savePic">保存打印</van-button>
            <div class="geren" v-if="this.type == 0">
                <van-button class="button button2" @click="editUser()">维护信息</van-button>
            </div>
            <div class="jiaren" v-if="this.type == 1">
                <van-button class="button3" @click="editUser()">维护信息</van-button>
                <van-button class="button3" @click="delUser()">删除人员</van-button>
            </div>
        </div>
    </div>
</template>

<script>
import vueQr from "vue-qr";
import html2canvas from 'html2canvas'
import { config } from "@/utils/request";
// import { decryptByDES } from "@/utils/utils";
import { encryptByDES, decryptByDES } from "@/utils/utils";
import { delUserPermitCode, getOwn } from "@/api/reverse.js";
import Vue from 'vue';
import { Button, ImagePreview } from "vant";
Vue.use(Button)
Vue.use(ImagePreview)
export default {
    components: {
        vueQr,
    },
    data() {
        return {
            type: '',
            downloadData: {
                url: "",
            },
            info: {},
            idCard: '',
            idCard1: '',
            userInfo: {},
            code: ''
        }
    },
    methods: {
        init() {
            getOwn({
                // uid: this.userInfo.userId,
                uid: encryptByDES(this.userInfo.userId.toString(), "MnuYbhGv"),
                userType: 0
            }).then((res) => {
                console.log(res)
                // alert(JSON.stringify(res))
                if (res.code == 200) {
                    this.info = res.data
                    this.idCard = decryptByDES(res.data.idCard, "MnuYbhGv");
                    this.idCard1 = this.idCard.replace(/^(.{3})(?:\d+)(.{4})/, '$1***********$2')
                    this.code = res.data.code;
                    sessionStorage.setItem('form', JSON.stringify(res.data))
                    let address = {
                        lat: res.data.lat,
                        lng: res.data.lng
                    }
                    sessionStorage.setItem("address", JSON.stringify(address))
                    console.log(this.code)
                    this.reload();
                }

            })
        },
        reload() {
            if (process.env.NODE_ENV === "production") {

                this.downloadData.url = encodeURI(
                    `${config.baseH5}reverse/register?code=${this.code}`
                );
            } else {
                // this.downloadData.url = encodeURI(
                //     `http://192.168.3.113:8080/#/reverse/register?code=${this.code}`
                this.downloadData.url = encodeURI(
                    `http://81.69.44.115/zjh/html/pages/#/reverse/register?code=${this.code}`
                );
            }
        },
        savePic() {
            // 截图下载
            html2canvas(this.$refs.test, { allowTaint: true, useCORS: true }).then(function (canvas) {

                // let link = document.createElement("a");
                // link.href = canvas.toDataURL();//下载链接
                // link.setAttribute("download", `download.png`);
                // link.style.display = "none";//a标签隐藏
                // document.body.appendChild(link);
                // link.click()
                ImagePreview([canvas.toDataURL()]);
            }).catch(err => {
                console.log(err)
            })
        },
        delUser() {
            this.$dialog.confirm({
                message: "确认删除该人员信息吗？",
            }).then(() => {
                delUserPermitCode({ code: this.info.code }).then((res) => {
                    // alert(JSON.stringify(res))
                    if (res.code == 200) {
                        this.$router.replace({ name: 'ReverseJrList' })
                    } else {
                        this.$toast.fail("删除失败");
                    }
                    console.log(res)
                })
            })
            console.log(this.info.code)
        },
        editUser() {
            sessionStorage.setItem('code', JSON.stringify(this.info.code))
            this.$router.replace({ name: 'ReverseSubmit', query: { code: this.info.code } })
        },
        // 初始化获取userInfo
        JSBgetUserInfo() {
            if (window.android !== undefined) {
                const res = window.android.getUserInfo(); // 这是一个json字符串
                sessionStorage.setItem("ZJCD-UserInfo", res);
                this.userInfo = JSON.parse(res);
            } 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);
        },
    },
    created() {
        this.type = JSON.parse(sessionStorage.getItem("type"))
        console.log(this.type)
        if (this.type == 0) {
            this.JSBgetUserInfo();
            this.init()
        } else {
            // alert(JSON.stringify(this.$route.query))
            let address = {
                lat: this.$route.query.info.lat,
                lng: this.$route.query.info.lng
            }
            sessionStorage.setItem("address", JSON.stringify(address))
            console.log(this.$route.query)
            this.info = this.$route.query.info
            this.idCard = decryptByDES(this.$route.query.info.idCard, "MnuYbhGv");
            this.idCard1 = this.idCard.replace(/^(.{3})(?:\d+)(.{4})/, '$1***********$2')
            this.code = this.$route.query.info.code
        }
        this.reload();
    },
    mounted() {
        window.getUserInfo = this.getUserInfo;
    },
}
</script>

<style lang="stylus" scoped>
.grDetail{
    display: flex;
    flex-direction: column;
    align-items: center;
    width 100%;
    height 100%;
    background: #EB4E3F;
    .top-content{
        margin-top: 20px;
        background: url('https://www.smart-zj.cn:55901/image/appBanner/c2a3e7ea-be9f-40bf-8225-d22844d62cef.png');
		background-size: 100% 100%;
		width: 95%;
		height: 1078px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        box-sizing: border-box;
        .title{
            width 95%;
            display: flex;
            align-items: center;
            img{
                width 120px;
                height 120px;
            }
            .subTitle{
                font-size: 40px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.25);
            }
        }
        .info{
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 20px;
            .img{
                margin: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 180px;
                height: 180px;
                background: #FF8138;
                box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.25);
                border-radius: 50%;
                img{
                    width: 165px;
                    height: 165px;
                    border-radius: 50%;
                }    
            }
            .name{
                font-size: 36px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 600;
                color: #333333;
                text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.25);
            }
        }
        .card-content{
            width 90%;
            display: flex;
            align-items: center;
            margin: 40px 0;
            .haoma{
                width 50%;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                .value{
                    font-size: 28px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 500;
                    color: #333333;
                    line-height: 1.5;
                    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.25);
                }
                .num{
                    font-size: 28px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    line-height: 1.5;
                    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.25);
                }
            }
        }
    }
    .bottom-content{
        display: flex;
        flex-direction: column;
        width 80%;
        margin-top: 40px;
        .button{
            height: 88px;
            background: linear-gradient(326deg, #FFDEDB 0%, #FFFFFF 100%);
            box-shadow: 0px 15px 18px -2px rgba(255, 255, 255, 0.2);
            border-radius: 49px;
            color: #EB4E3F;
        }
        .geren{
            .button2{
                width 100%;
                margin: 30px  0;
                height: 88px;
                border-radius: 49px;
                background #EB4E3F
                border: 1px solid #FFFFFF;
                color: #FFFFFF;
            }
        }
        .jiaren{
            margin: 30px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .button3{
            width 45%;
            height: 88px;
            border-radius: 49px;
            background #EB4E3F
            border: 1px solid #FFFFFF;
            color: #FFFFFF;
        }
    }
    .save{
        width 0;
        height 0;
        overflow: hidden;
    }
}
</style>