<template>
    <div>
        <van-row class="dk-header" type="flex" justify="center" align="center">
            <van-col span="17" class="dk-date">
                <span>{{ date }}</span> <span style="color: #999">（截至{{is_today?punch_hour:'24'}}时）</span>
            </van-col>
            <van-col span="7">
                <van-button
                        type="primary"
                        color="#0177FF"
                        size="small"
                        text="更改日期"
                        @click="show = true"
                        style="border-radius: 38px;width: 100%;">
                </van-button>
            </van-col>
        </van-row>
        <van-row type="flex" justify="center" align="center" style=" height: 94px;border-bottom: 2px solid #EEEEEE">
            <van-col span="8" class="dk-info">
                <div>{{countStaffNum}}</div>
                <div>员工人数</div>
            </van-col>
            <van-col span="8" class="dk-info">
                <div style="color: #0A6D95">{{countPunchClickNum}}</div>
                <div>已打卡</div>
            </van-col>
            <van-col span="8" class="dk-info">
                <div style="color: #9F3112">{{countTempuratureNum}}</div>
                <div>体温异常</div>
            </van-col>
        </van-row>
        <div v-for="(dkList,index) in dkPunchClockList" :key="index">
            <van-row class="dk-title" type="flex" align="center">
                <img src="@/assets/address.png" alt="">
                <span>{{dkList[0].provinceName}}</span>
                <span style="color: #999">（{{dkList.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 dkList"
                            :key="index">
                        <van-col span="15">
                            <span>{{item.dkStaff.name}}</span>
                            <span style="color: #999999">（{{item.dkStaff.phone}}）</span>
                        </van-col>
                        <van-col span="9">
                            <van-row class="dk-fever" type="flex" align="center" justify="end">
                                <div v-if="item.temperature === 0" class="dk-fever-info" style="background: #55B3DA;">
                                    <img src="@/assets/normal_fever.png" alt="">
                                    <span>正常 35.9~37.2</span>
                                </div>
                                <div v-if="item.temperature === 1" class="dk-fever-info" style="background: #E4A835;">
                                    <img src="@/assets/low_fever.png" alt=""/>
                                    <span>低烧 37.3~38</span>
                                </div>
                                <div v-if="item.temperature === 2" class="dk-fever-info" style="background: #C14810;">
                                    <img src="@/assets/height_fever.png" alt="">
                                    <span>高烧 38 以上</span>
                                </div>
                            </van-row>
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>
        </div>
        <div v-if="notPunchClickList.length">
            <van-row class="dk-title" type="flex" align="center">
                <img src="@/assets/no_sign.png" alt="" style="height: 15px;width: 15px">
                <span>未打卡</span>
                <span style="color: #999">（{{notPunchClickList.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 notPunchClickList"
                            :key="index">
                        <van-col span="15">
                            <span>{{item.name}}</span>
                            <span style="color: #999999">（{{item.phone}}）</span>
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>
        </div>
        <van-calendar
                v-model="show"
                :min-date="minDate"
                :default-date="maxDate"
                :round="false"
                color="#0177FF"
                position="right"
                @confirm="onConfirm"/>
        <van-row
                class="dk-nolist"
                v-if="!dkPunchClockList.length&&!notPunchClickList.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 {dk_formatDate, isToday} from '@/utils/util'
    import {staffTemperatureInfo} from '@/api/index'
    import {getAction} from '@/api/manage'
    import {getStore} from "@/utils/storage";

    export default {
        name: "temperature",
        data() {
            return {
                date: dk_formatDate(new Date(), '-'),
                show: false,
                minDate: new Date(2020, 1, 1),
                maxDate: new Date(),
                is_today: true,
                punch_hour: new Date().getHours(),
                punch_time: dk_formatDate(new Date(), '-'),
                countPunchClickNum: 0,
                countStaffNum: 0,
                countTempuratureNum: 0,
                notPunchClickList: [],
                dkPunchClockList: [],

            }
        },
        components: {
            [Button.name]: Button,
            [Col.name]: Col,
            [Row.name]: Row,
            [Calendar.name]: Calendar,
        },

        mounted() {
            this.getTemperatureInfo();
        },
        methods: {
            getTemperatureInfo() {
                getAction(staffTemperatureInfo, {
                    punch_time: this.punch_time,
                    enterprise_id: getStore(getStore('role')).id
                }).then(data => {
                    const {countPunchClickNum, countStaffNum, countTempuratureNum, notPunchClickList, dkPunchClockList} = data.data;

                    this.countPunchClickNum = countPunchClickNum;
                    this.countStaffNum = countStaffNum;
                    this.countTempuratureNum = countTempuratureNum;
                    this.notPunchClickList = notPunchClickList;
                    this.dkPunchClockList = dkPunchClockList;

                })
            },
            onConfirm(e) {
                this.show = false;
                this.date = dk_formatDate(e, '-');
                this.punch_time = dk_formatDate(e, '-');
                this.is_today = isToday(this.date);
                this.punch_hour = isToday ? new Date().getHours() : '';
                this.getTemperatureInfo();
            }
        }
    }
</script>

<style scoped>
    .dk-header {
        height: 60px;
        padding: 0 15px;
        border-bottom: 1PX solid #EEEEEE;
    }

    .dk-date {
        color: #333333;
        font-weight: bold;
        font-size: 16px;
    }

    .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: 12px;
        height: 16px;
        margin-right: 10px;
    }

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

    .dk-fever img {
        height: 12px;
        width: 12px;
        margin-right: 5px;
    }

    .dk-fever-info {
        font-family: PingFangSC-Medium, PingFang SC;
        font-size: 12px;
        color: #fff;
        -webkit-border-radius: 24px;
        -moz-border-radius: 24px;
        border-radius: 24px;
        padding: 4px 8px;
    }

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