<template>
    <div>
        <van-row>
            <van-col span="24">
                <van-row
                        class='dk-cell'
                        type="flex"
                        align="center"
                        justify="space-between"
                        v-for="(item,index) in list"
                        :key="index">
                    <van-col span="15">
                        <span>{{item.punchTime | dk_formatDate}}</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>
                            <div v-if="item.temperature === ''" class="dk-fever-info" style="background: #CCCCCC;">
                                <img src="@/assets/nosign.png" alt="">
                                <span>未打卡</span>
                            </div>
                        </van-row>
                    </van-col>
                </van-row>
            </van-col>
        </van-row>
        <van-row
                class="dk-nolist"
                v-if="!list.length"
                type="flex"
                justify="center"
                align="center">
            <van-col>
                <span>暂无打卡记录</span>
            </van-col>
        </van-row>
    </div>
</template>

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

    export default {
        name: "clock",
        components: {
            [Col.name]: Col,
            [Row.name]: Row,
        },
        data() {
            return {
                list: []
            }
        },
        filters: {
            dk_formatDate(val) {
                return dk_formatDate(val, '年')
            }
        },
        mounted() {
            getAction(queryStaffPunchClock, {staffId: getStore(getStore('role')).id}).then(data => {
                this.list = data.data.dkPunchClockAPIList;
            })
        }
    }
</script>

<style scoped>
    .dk-cell {
        height: 55px;
        color: #333;
        font-size: 14px;
        padding: 0 15px;
        border-bottom: 1px solid #EEEEEE;
        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>
