<template>
    <div class="suspected">
        <van-pull-refresh
            v-model="isDownLoading"
            @refresh="onDownRefresh"
            success-text="加载成功"
        >
            <van-list
                v-model="isUpLoading"
                :finished="upFinished"
                :immediate-check="false"
                :offset="10"
                finished-text="加载完成"
                @load="onLoadList"
            >
                <div
                    class="secendPage"
                    v-for="(item, index) in suspected"
                    :key="index"
                >
                    <div class="itemBox">
                        <p class="workerName">{{ item.xm }}</p>
                    </div>
                    <div class="itemBox">
                        <p class="phone">
                            {{
                                item.sjhm.replace(
                                    /(\d{3})\d{4}(\d{4})/,
                                    "$1****$2"
                                )
                            }}
                        </p>
                        <van-icon name="phone-o" @click="call" />
                    </div>
                    <div class="itemBox">
                        <p class="intTime">{{ item.ycyy }}</p>
                        <p class="update" @click="toDetail(item)">详情</p>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>
<script>
import { getWarnList } from "@/service/api_company.js";
export default {
    data() {
        return {
            phone: "13771181183",
            company: {
                pageNum: "1",
                pageSize: "10",
                qysfqr: "0"
            },
            suspected: []
        };
    },
    mounted() {
        // getWarnList(this.company).then(res => {
        //     console.log(res);
        //     this.suspected = res.rows;
        // });
        this.getList();
    },
    methods: {
        call() {
            window.location.href = "tel:" + this.phone;
        },
        toDetail(item) {
            this.$router.push({
                name: "suspectedDetail",
                query: { item: JSON.stringify(item) }
            });
        },
        async getList() {
            getWarnList(this.company).then(res => {
                if (res.rows.length) {
                    this.isDownLoading = false;
                    this.suspected.push(...res.rows);
                    this.isUpLoading = false;
                    if (this.suspected.length >= res.total) {
                        this.upFinished = true;
                    }
                } else {
                    this.suspected = [];
                    this.isDownLoading = false;
                    this.isUpLoading = false;
                    this.upFinished = true;
                }
            });
        },
        onDownRefresh: function() {
            this.suspected = [];
            this.company.pageNum = 1;
            this.isUpLoading = true;
            this.upFinished = false;
            this.getList();
        },
        onLoadList() {
            this.company.pageNum++;
            this.isDownLoading = false;
            this.getList();
        }
    }
};
</script>
<style lang="scss">
.suspected {
    font-size: 4vw;
    margin: 5vw 2vw;
    overflow: auto;
    .secendPage {
        background: white;
        padding: 3vw 3vw 3vw 3vw;
        margin-top: 5vw;
        border-radius: 15px;
        .itemBox {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 2vw 0;
        }
        .workerName {
            font-size: 5vw;
        }
        .workerType {
            color: rgb(0, 47, 167);
        }
        .phone {
            color: rgb(153, 152, 152);
        }
        .position {
            color: rgb(153, 152, 152);
        }
        .intTime {
            color: rgb(153, 152, 152);
        }
        .update {
            width: 20vw;
            height: 7vw;
            background: rgb(0, 47, 167);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            border-radius: 2vw;
            font-size: 3.5vw;
        }
    }
}
</style>
