<template>
    <div class="vistorRegister">
        <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 shList"
                    :key="index"
                >
                    <div class="itemBox">
                        <p class="workerName">访客姓名：{{ item.xm }}</p>
                        <p
                            :class="
                                item.zt == '0'
                                    ? 'type'
                                    : item.zt == '1'
                                    ? 'type2'
                                    : 'type3'
                            "
                        >
                            {{
                                item.zt == "0"
                                    ? "待审核"
                                    : item.zt == "1"
                                    ? "已通过"
                                    : "已退回"
                            }}
                        </p>
                    </div>
                    <div class="itemBox">
                        <p class="phone">拜访时间：{{ item.bfsj }}</p>
                    </div>

                    <div class="itemBox">
                        <p class="intTime">拜访对象：{{ item.qymc }}</p>
                        <p class="update" @click="toDetail(item)">详情</p>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>
<script>
import { listFromCompany } from "@/service/api_vistior.js";
import auth from "@/service/auth";
export default {
    data() {
        return {
            phone: "13771181183",
            commit: {
                pageNum: "1",
                qyid: auth.currUser().id,
                pageSize: "10",
                zt: ""
            },
            shList: []
        };
    },
    mounted() {
        console.log(auth.currUser());
        this.getList();
    },
    methods: {
        toDetail(item) {
            this.$router.push({
                name: "vistorDetail",
                query: { item: JSON.stringify(item) }
            });
        },
        async getList() {
            listFromCompany(this.commit).then(res => {
                if (res.rows.length) {
                    this.isDownLoading = false;
                    this.shList.push(...res.rows);
                    this.isUpLoading = false;
                    if (this.shList.length >= res.total) {
                        this.upFinished = true;
                    }
                } else {
                    this.shList = [];
                    this.isDownLoading = false;
                    this.isUpLoading = false;
                    this.upFinished = true;
                }
            });
        },
        onDownRefresh: function() {
            this.shList = [];
            this.commit.pageNum = 1;
            this.isUpLoading = true;
            this.upFinished = false;
            this.getList();
        },
        onLoadList() {
            this.commit.pageNum++;
            this.isDownLoading = false;
            this.getList();
        }
    }
};
</script>
<style lang="scss">
.vistorRegister {
    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;
            min-height: 5vw;
        }
        .workerName {
            font-size: 4vw;
        }
        .workerType {
            color: rgb(0, 47, 167);
        }
        .phone {
            color: rgb(153, 152, 152);
        }
        .position {
            color: rgb(153, 152, 152);
        }
        .intTime {
            color: rgb(0, 47, 167);
        }
        .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: 4vw;
        }
        .type {
            color: rgb(135, 222, 4);
        }
        .type2 {
            color: rgb(0, 47, 167);
        }
        .type3 {
            color: orangered;
        }
    }
}
</style>
