<template>
    <div class="abnormal">
        <van-tabs type="card" color="rgb(0,47,167)">
            <van-tab title="全部">
                <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 workerList"
                            :key="index"
                        >
                            <div class="itemBox">
                                <p class="workerName">{{ item.xm }}</p>
                                <p class="abnormalType">{{ item.yclx }}</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.rylx }}</p>
                                <p class="update" @click="toDetail(item)">
                                    详情
                                </p>
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </van-tab>
            <van-tab title="健康码">内容 2</van-tab>
            <van-tab title="核酸">内容 3</van-tab>
            <van-tab title="体温">内容 3</van-tab>
            <van-tab title="行程码">内容 3</van-tab>
        </van-tabs>
    </div>
</template>
<script>
import { getRecordList } from "@/service/api_company.js";
import auth from "@/service/auth";
export default {
    data() {
        return {
            phone: "13771181183",
            company: {
                pageNum: "1",
                pageSize: "10"
            },
            workerList: []
        };
    },
    mounted() {
        console.log(auth.currUser());
        this.getList();
    },
    methods: {
        call() {
            window.location.href = "tel:" + this.phone;
        },
        toDetail(item) {
            this.$router.push({
                name: "abnormalDetail",
                query: { item: JSON.stringify(item) }
            });
        },
        async getList() {
            getRecordList(this.company).then(res => {
                if (res.rows.length) {
                    this.isDownLoading = false;
                    this.workerList.push(...res.rows);
                    this.isUpLoading = false;
                    if (this.workerList.length >= res.total) {
                        this.upFinished = true;
                    }
                } else {
                    this.workerList = [];
                    this.isDownLoading = false;
                    this.isUpLoading = false;
                    this.upFinished = true;
                }
            });
        },
        onDownRefresh: function() {
            this.workerList = [];
            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">
.abnormal {
    font-size: 4vw;
    margin: 5vw 2vw;
    .van-tabs__nav--card {
        border: none !important;
    }
    .van-tabs__nav--card .van-tab {
        border: 1px solid rgba(153, 153, 153, 1);
        border-radius: 15px;
        width: 15vw;
    }
    .numb {
        position: relative;
        bottom: 1.1px;
        color: red;
    }
    .van-tab {
        display: flex;
        padding: 1vw 2vw !important;
        flex: none !important;
        justify-content: space-around !important;
        font-size: 2vw !important;
    }
    .van-tabs__nav {
        justify-content: space-around !important;
        background: rgba(245, 245, 245, 1) !important;
    }
    .van-tabs__wrap {
        margin-top: 2vw;
    }
    .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;
        }
        .abnormalType {
            color: orangered;
            font-size: 4vw;
        }
    }
}
</style>
