<template>
    <div class="jrList">
        <div class="card" v-for="(item, index) in mockData" :key="index" @click="jump(item)">
            <div class="top">
                <div class="left">
                    <div class="icon"></div>
                    <div class="name">{{item.name}}</div>
                </div>
                <div class="right">
                    <img src="./img/next_icon.png" alt="">
                </div>
            </div>
            <div class="title">证件号码：<span class="value">{{item.idCard1}}</span></div>
            <div class="title">手机号码：<span class="value">{{item.mobile}}</span></div>
        </div>
        <van-button class="bottom" @click="addUser" v-if="this.count<5">+ 新增 ({{ this.count }}/5)</van-button>
    </div>
</template>

<script>
import Vue from 'vue';
import { Button } from 'vant';
Vue.use(Button);

import { getFamily } from "@/api/reverse.js";
// import { decryptByDES } from "@/utils/utils";
import { encryptByDES, decryptByDES } from "@/utils/utils";

export default {
    data() {
        return {
            mockData: [],
            count: 0,
            userInfo: {},
            type: ''
        }
    },
    methods: {
        init() {
            getFamily({
                // uid: this.userInfo.userId,
                uid: encryptByDES(this.userInfo.userId.toString(), "MnuYbhGv"),
                userType: 1
            }).then((res) => {
                // alert(JSON.stringify(res))
                if (res.code == 200) {
                    this.mockData = res.data
                    this.mockData.map((item) => {
                        item.idCard1 = decryptByDES(item.idCard, "MnuYbhGv");
                    })
                    this.count = res.data.length;    
                }
                
            })
        },
        jump(item) {
            sessionStorage.setItem('form', JSON.stringify(item))

            // alert(JSON.stringify(item))
            this.$router.replace({ name: 'ReverseGrDetail', query: { info:item }  });                 
        },
        addUser() {
            sessionStorage.removeItem('form')
            sessionStorage.removeItem('code')
            sessionStorage.removeItem('location')
            sessionStorage.removeItem('address')
            this.$router.replace({ name: 'ReverseSubmit' });
        },
        // 初始化获取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"))

        // alert(this.$route.query.type)
        // alert(JSON.stringify(this.$route.query.userInfo))
        // this.userInfo = this.$route.query.userInfo
        this.JSBgetUserInfo();
        this.init()
    },
    mounted() {
        window.getUserInfo = this.getUserInfo;
    },
}
</script>

<style lang="stylus" scoped>
.jrList{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: scroll;
    height 100%;
    .card{
        display: flex;
        flex-direction: column;
        width: 95%;
        box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
        padding: 0 20px;
        box-sizing: border-box;
        background #fff;
        border-radius: 10px;
        margin-bottom: 20px;
        .top{
            display: flex;
            align-items: center;
            justify-content: space-between;
            height 80px;
            .left{
                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;
                }
                .name{
                    margin-left: 15px;
                    font-size: 30px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #333333;
                    text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06);
                }
            }
            .right{
                width 60px;
                height 60px;
                line-height: 60px;
                img{
                    width 100%;
                    height 100%;
                }
            }
        }
        .title{
            display: flex;
            align-items: center;
            height 80px;
            font-size: 28px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.06);
        }
    }
    .bottom{
        margin: 30px 0;
        width: 608px;
        height: 88px;
        background: linear-gradient(311deg, #EB4E3F 0%, #FF8138 100%);
        box-shadow: 0px 15px 18px -2px rgba(235, 78, 63, 0.2);
        border-radius: 49px;
        color: #fff;
    }
}
</style>