<template>
    <div class="personList">
        <div class="firstPage">
            <div>
                尊敬的&nbsp;<span class="cjcol">{{ company.qymc }}</span
                >&nbsp;企业用户，你好！
            </div>
            <br />
            <div>
                贵公司目前有在职员工
                <span class="cjcol">{{ company.total }}</span> 人，本月入职
                <span class="cjcol">{{ company.totalIn }}</span> 人，离职
                <span class="cjcol">{{ company.totalOut }}</span> 人。
            </div>
        </div>
        <div class="searchPage">
            <van-field
                left-icon="search"
                placeholder="姓名/手机号模糊搜索"
                v-model="requestParam.xmOrSjhm"
            />
            <div class="addWorker" @click="addStaff">新增员工</div>
        </div>
        <div class="listBox">
            <van-pull-refresh
                v-model="isDownLoading"
                @refresh="onDownRefresh"
                success-text="加载成功"
            >
                <van-list
                    ref="vanList"
                    v-model="isUpLoading"
                    :finished="upFinished"
                    :immediate-check="false"
                    :offset="10"
                    finished-text="加载完成"
                    @load="onLoadList"
                >
                    <div
                        class="secendPage"
                        v-for="(item, index) in List"
                        :key="index"
                    >
                        <div class="itemBox">
                            <p class="workerName">{{ item.xm }}</p>
                            <p
                                :class="
                                    item.zt == '在职' ? 'workerType' : 'offWork'
                                "
                            >
                                {{ item.zt }}
                            </p>
                        </div>
                        <div class="itemBox">
                            <p class="phone">
                                {{
                                    item.sjhm
                                        ? item.sjhm.replace(
                                              /(\d{3})\d{4}(\d{4})/,
                                              "$1****$2"
                                          )
                                        : ""
                                }}
                            </p>
                            <van-icon name="phone-o" @click="call(item)" />
                        </div>
                        <div class="itemBox position">职位：{{ item.zw }}</div>
                        <div class="itemBox">
                            <p class="intTime">入职日期：{{ item.rzrq }}</p>
                            <p
                                class="update"
                                @click="upDate(item.id)"
                                v-show="item.zt == '在职'"
                            >
                                更新
                            </p>
                        </div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>
<script>
import { workerInfo, stat, workerList } from '@/service/api_worker.js'
import auth from '@/service/auth'
import { Toast } from 'vant'
export default {
    data() {
        return {
            phone: '',
            isDownLoading: false,
            isUpLoading: false,
            upFinished: false,
            List: [],
            total: 0,
            company: {},
            requestParam: { pageNum: '1', pageSize: '10', xmOrSjhm: '' }
        }
    },
    watch: {
        'requestParam.xmOrSjhm'(newVal, oldVal) {
            this.requestParam.pageNum = '1'
            this.List = []
            this.getList()
            // if (this.requestParam.pageNum != "1") {
            //     this.requestParam.pageNum = "1";
            // } else {
            //     this.onDownRefresh();
            // }
        }
    },
    beforeCreate() {
        window.scrollTo({
            top: 0,
            left: 0
        })
    },
    created() {},
    mounted() {
        // 员工信息
        // workerInfo({id:auth.currUser().id}).then(res=>{
        //    console.log(123)
        // }),
        // 获取员工统计数据
        // this.List = [];
        stat().then(res => {
            if (res.errno == 426) {
                Toast(res.errmsg)
                this.$router.push('/login')
            }
            this.company = res.data
            this.total = res.data.total || 0
            this.getList()
        })
    },
    methods: {
        call(item) {
            window.location.href = 'tel:' + item.sjhm
        },

        // 员工列表
        async getList() {
            // console.log(this.$refs.vanList.check());
            workerList(this.requestParam).then(res => {
                if (res.data.length) {
                    this.isDownLoading = false
                    this.List.push(...res.data)
                    // res.data.forEach((item) => {
                    //     console.log(res.data)
                    //     if (this.List.indexOf(item) == -1) {
                    //         this.List.push(item)
                    //     }
                    // })
                    this.isUpLoading = false
                    if (this.List.length >= this.total) {
                        this.upFinished = true
                    }
                } else if (res.errno == 426) {
                    Toast(res.errmsg)
                    this.$router.push('/login')
                } else {
                    Toast(res.errmsg)
                    this.List = []
                    this.isDownLoading = false
                    this.isUpLoading = false
                    this.upFinished = true
                }
            })
        },
        addStaff() {
            this.$router.push('/addStaff')
        },
        // 更新
        upDate(e) {
            this.$router.push({
                name: 'addStaff',
                query: { id: e }
            })
        },
        onDownRefresh: function() {
            this.List = []
            this.requestParam.pageNum = 1
            this.isUpLoading = true
            this.upFinished = false
            this.getList()
        },
        onLoadList() {
            this.requestParam.pageNum++
            this.isDownLoading = true
            this.getList()
        }
    }
}
</script>
<style lang="scss">
.personList {
    font-size: 4vw;
    margin: 5vw 2vw;
    .firstPage {
        background: white;
        padding: 6vw 3vw;
        margin-top: 5vw;
        margin-bottom: 5vw;
        border-radius: 15px;
    }
    .searchPage {
        display: flex;
        justify-content: space-between;

        .van-cell {
            width: 76% !important;
            border-radius: 2vw !important;
        }
        .addWorker {
            background: rgb(0, 47, 167);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 2vw;
            border-radius: 2vw;
        }
    }
    .secendPage {
        background: white;
        padding: 3vw 3vw 3vw 3vw;
        margin-top: 5vw;
        border-radius: 15px;
        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
        min-height: 29vw;
        .itemBox {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 2vw 0;
        }
        .workerName {
            font-size: 5vw;
        }
        .workerType {
            color: rgb(0, 47, 167);
        }
        .offWork {
            color: rgb(153, 152, 152);
        }
        .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;
        }
        .van-pull-refresh__track {
            min-height: 100vh !important;
        }
    }
    .listBox {
        height: 75vh;
        overflow: hidden;
        overflow-y: scroll;
        margin-top: 3vw;
    }
    .cjcol {
        color: #002fa7;

    }
}
</style>
