<template>
    <div class="history">
        <div v-if="this.historyList && this.historyList.length == 0 && this.finished == true" class="history">
            <img src="../../assets/common/nodata.png" alt="">
            <div class="nodata" style="margin-top: 20px; font-size: 20px; color: #999;">暂无数据</div>
        </div>
        <van-list :finished="finished" finished-text="没有更多了">
            <div class="card" v-for="(item, index) in historyList" :key="index" @click="next(item)">
                <div class="top">
                    <div class="label area"><img src="../report/img/date.png" alt="">{{ item.detailAddress }}({{
                            item.placeName
                    }})
                    </div>
                </div>
                <div class="bottom">
                    <div class="left">
                        <div class="label scanNum">近14天总扫码次数：<span>{{ item.scanNum }}</span></div>
                        <div class="label mobile">联系方式：<span>{{ item.mobile }}</span></div>
                        <div class="label creatTime">创建时间：<span>{{ item.createTime }}</span></div>
                    </div>
                    <div class="right">
                        <img src="../../assets/common/enter_icon.png" alt="">
                    </div>
                </div>
            </div>
        </van-list>
    </div>
</template>

<script>
import Vue from "vue";
import {List} from 'vant'
Vue.use(List)
import { queryOldListPermitCode } from '@/api/epidemic'
export default {
    data() {
        return {
            finished: false,
            userInfo: {},
            historyList: []
        }
    },
    methods: {
        init() {
            this.$toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
                message: "加载中...",
            });
            queryOldListPermitCode({ }).then((res) => {
                this.$toast.clear();
                this.finished = true;
                this.historyList = res.data
            })
        },
        next(item) {
            this.$router.replace({
                name: "CurrentDetails",
                query: {
                    area: item.areaName,
                    street: item.street,
                    address: item.address,
                    place: item.placeType,
                    placeName: item.placeName,
                    createTime: item.createTime,
                    permitCode: item.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.JSBgetUserInfo();
        this.init()
    },
    mounted() {
        window.getUserInfo = this.getUserInfo;

    },
}
</script>
<style>
    .van-list{
        width: 95%;
    }
</style>
<style lang="stylus" scoped>
.history{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    height: 100vh;
    overflow-y: scroll;
    .card:last-child{ 
        margin-bottom: 30px;
    }
    .card{
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width 95%;
        background #fff;
        box-shadow: 0rem 0.03rem 0.09rem 0rem rgba(0, 0, 0, 0.06);
        padding: 20px;
        border-radius: 10px;
        font-size: 30px;
        .bottom{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .label{
            line-height: 2;
            span{
                color: #999;
            }
        }
        .area{
            display: flex;
            // align-items: center;
            font-weight: 500;
            line-height: 1.5
            img{
                width 30px;
                height 30px;
                margin: 5px 10px 0 0;
            }
        }
    }
}
</style>