<template>
    <div>
        <van-row type="flex" justify="center" align="center" style=" height: 94px;border-bottom: 2px solid #EEEEEE">
            <van-col span="8" class="dk-info">
                <div style="color: #666666">{{countStaffNum}}</div>
                <div>员工人数</div>
            </van-col>
            <van-col span="8" class="dk-info">
                <div style="color: #000">{{countIsRegisterNum}}</div>
                <div>已登记人数</div>
            </van-col>
            <van-col span="8" class="dk-info">
                <div style="color: #000">{{countLeavingNum}}</div>
                <div>离市人数</div>
            </van-col>
        </van-row>
        <div v-if="leaveList.length">
            <van-row class="dk-title" type="flex" align="center">
                <img src="@/assets/temperature_randis.png" alt="">
                <span>离市</span>
                <span style="color: #999">（{{leaveList.length}}人）</span>
            </van-row>
            <van-row>
                <van-col span="24">
                    <van-row
                            class='dk-cell'
                            type="flex"
                            align="center"
                            justify="space-between"
                            v-for="(item,index) in leaveList"
                            :key="index">
                        <van-col span="20">
                            <van-row type="flex" align="center">
                                <van-col>
                                    <span>{{item.dkStaff.name}}</span>
                                    <!--                                    <span style="color: #999999">（18118379209）</span>-->
                                    <span style="margin-left: 15px;margin-right: 8px">预计 <span
                                            style="font-weight: bold">{{item.estimateBackDate | formatDate}}</span> 返程</span>

                                </van-col>
                                <van-col
                                        span="5"
                                        class="dk-warn"
                                        v-if="item.isHubeiTravel || item.isHubeiTouch||item.isCovTouch">
                                    <img
                                            src="@/assets/journey_warn.png"
                                            alt=""
                                            style="height: 12px;width: 12px;margin-right: 5px">
                                    <span>预警</span>
                                </van-col>
                            </van-row>
                        </van-col>

                        <van-col span="4" @click="toDetail(item.id)">
                            <van-row class="dk-fever" type="flex" align="center" justify="end">
                                <span class="dk-fever-link">详情>></span>
                            </van-row>
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>
        </div>
        <div v-if="notLeaveList.length">
            <van-row class="dk-title" type="flex" align="center">
                <img src="@/assets/temperature_randis.png" alt="">
                <span>未离市</span>
                <span style="color: #999">（{{notLeaveList.length}}人）</span>
            </van-row>
            <van-row>
                <van-col span="24">
                    <van-row
                            class='dk-cell'
                            type="flex"
                            align="center"
                            justify="space-between"
                            v-for="(item,index) in notLeaveList"
                            :key="index">
                        <van-col span="20">
                            <van-row type="flex" align="center">
                                <van-col>
                                    <span>{{item.dkStaff.name}}</span>
                                    <span style="color: #999999">（{{item.dkStaff.phone}}）</span>
                                </van-col>
                                <van-col
                                        span="5"
                                        class="dk-warn"
                                        v-if="item.isHubeiTravel || item.isHubeiTouch||item.isCovTouch">
                                    <img
                                            src="@/assets/journey_warn.png"
                                            alt=""
                                            style="height: 12px;width: 12px;margin-right: 5px">
                                    <span>预警</span>
                                </van-col>
                            </van-row>
                        </van-col>
                        <van-col span="4" @click="toDetail(item.id)">
                            <van-row class="dk-fever" type="flex" align="center" justify="end">
                                <span class="dk-fever-link">详情>></span>
                            </van-row>
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>
        </div>
        <div v-if="notList.length">
            <van-row class="dk-title" type="flex" align="center">
                <img src="@/assets/temperature_randis.png" alt="">
                <span>未登记</span>
                <span style="color: #999">（{{notList.length}}人）</span>
            </van-row>
            <van-row>
                <van-col span="24">
                    <van-row
                            class='dk-cell'
                            type="flex"
                            align="center"
                            v-for="(item,index) in notList"
                            :key="index">
                        <van-col>
                            <span>{{item.name}}</span>
                            <span style="color: #999999">（{{item.phone}}）</span>
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>
        </div>
        <van-row
                class="dk-nolist"
                v-if="!leaveList.length&&!notLeaveList.length&&!notList.length"
                type="flex"
                justify="center"
                align="center">
            <van-col>
                <span>暂无员工数据</span>
            </van-col>
        </van-row>
    </div>
</template>

<script>
    import {Button, Col, Row, Calendar} from 'vant';
    import {backtrackingInfo} from '@/api/index'
    import {getAction} from '@/api/manage'
    import {getStore} from "@/utils/storage";
    import {dk_formatDate} from '@/utils/util'


    export default {
        name: "return_journey",
        components: {
            [Button.name]: Button,
            [Col.name]: Col,
            [Row.name]: Row,
            [Calendar.name]: Calendar,
        },
        data() {
            return {
                countStaffNum: 0,
                countIsRegisterNum: 0,
                countLeavingNum: 0,
                leaveList: [],
                notLeaveList: [],
                notList: []
            }
        },
        filters: {
            formatDate(date) {
                return dk_formatDate(new Date(date), '年')
            }
        },
        mounted() {
            getAction(backtrackingInfo, {enterprise_id: getStore(getStore('role')).id}).then(data => {
                if (data.errcode === 0) {
                    console.log(data);
                    const {
                        countStaffNum, countIsRegisterNum, countLeavingNum, notList, leaveList, notLeaveList
                    } = data.data;
                    this.countIsRegisterNum = countIsRegisterNum;
                    this.countLeavingNum = countLeavingNum;
                    this.countStaffNum = countStaffNum;
                    this.leaveList = leaveList;
                    this.notLeaveList = notLeaveList;
                    this.notList = notList;

                }
            })
        },
        methods: {
            toDetail(id) {
                this.$router.push({name: 'journey_detail_business', params: {id}})
            }
        }
    }
</script>

<style scoped>
    .dk-info {
        text-align: center;
    }

    .dk-info div:first-child {
        font-size: 32px;
    }

    .dk-info div:last-child {
        color: #999999;
        font-size: 14px;
    }

    .dk-title {
        height: 49px;
        font-size: 16px;
        color: #333;
        background: #EEEEEE;
        padding: 0 15px;
    }

    .dk-title img {
        width: 4px;
        height: 16px;
        margin-right: 10px;
    }

    .dk-cell {
        height: 55px;
        color: #333;
        font-size: 14px;
        padding: 0 15px;
        display: flex;
        align-items: center;
    }

    .dk-fever-link {
        color: #0177FF;
        font-size: 14px;
        font-weight: bold;
    }

    .dk-warn {
        color: #fff;
        font-size: 12px;
        border-radius: 24px;
        padding: 3px 0;
        background: #C14810;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .dk-nolist {
        margin-top: 100px;
        color: #333;
        font-size: 14px;
        font-weight: bold;
    }
</style>
