<template>
    <div class="temperature">
        <van-cell-group>
            <van-cell
                    class="dk-cell"
                    title="当前位置："
                    title-style="font-weight: bold;"
                    value-class="dk-address"
                    :center="true"
                    :value="province_name"
            />
            <van-cell
                    class="dk-cell"
                    title="今日体温："
                    title-style="font-weight: bold;"
                    value-class="dk-address"
                    :center="true"
                    is-link
                    :value="wendu||'请选择'"
                    @click="show = true"
            />
        </van-cell-group>
        <van-row>
            <van-col span="24">
                <van-button :loading="loading" color="#0177FF" text="提交" class="dk-button" @click="commit"/>
            </van-col>
        </van-row>

        <van-popup
                v-model="show"
                position="bottom"
                :safe-area-inset-bottom="true"
                :style="{ height: '45%' }"
        >
            <van-picker :columns="columns" show-toolbar @cancel="show = false" @confirm="choose"/>
        </van-popup>
    </div>
</template>

<script>
    import {Row, Col, Button, Cell, CellGroup, Popup, Picker, Toast} from 'vant';
    import {getStore} from "@/utils/storage";
    import {postAction} from '@/api/manage'
    import {staffPunchClock} from '@/api/index'

    export default {
        name: "staff_temperature",
        components: {
            [Row.name]: Row,
            [Col.name]: Col,
            [Button.name]: Button,
            [Popup.name]: Popup,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
            [Picker.name]: Picker,
        },
        data() {
            return {
                loading: false,
                location: '',
                wendu: '',
                staff_id: '',
                show: false,
                province_name: '',
                temperature: '',
                columns: ['35.9~37.2', '37.3~38', '38以上']
            }
        },
        mounted() {
            this.staff_id = getStore(getStore('role')).id;
            this.province_name = this.$route.params.province || '未知';
        },
        methods: {
            choose(val, key) {
                this.temperature = key;
                this.wendu = val;
                this.show = false;
            },
            commit() {
                if (this.temperature === '') {
                    Toast('您还没选择体温呢')
                } else {
                    this.loading = true;
                    postAction(staffPunchClock, {
                        staffId: this.staff_id,
                        // province_code: "110000",
                        provinceName: this.province_name,
                        // provinceName: '江苏省',
                        temperature: this.temperature
                    }).then(data => {
                        Toast(data.errmsg);
                        setTimeout(() => {
                            this.loading = false;
                            this.$router.back();
                        }, 1200)
                    }).catch(() => {
                        this.loading = false
                    })
                }
            }
        }
    }
</script>

<style scoped>
    .temperature {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .dk-cell {
        height: 55px;
    }

    .dk-address {
        color: #333333;
        font-size: 14px;
    }

    .dk-button {
        font-size: 17px;
        width: 100%;
        height: 60px;
    }
</style>
