<template>
    <div id="mainPage">
        <bottomTab :curTab="thisTab"></bottomTab>

        <div class="inputContainer">
            <div class="mu-picker-landspace">
                <mu-row gutter>
                    <mu-col span="12" lg="6" sm="6">
                        <mu-date-input icon="today" landscape v-model="bt" label="BEGIN TIME" type="time" label-float
                                       full-width></mu-date-input>
                    </mu-col>
                    <mu-col span="12" lg="6" sm="6">
                        <mu-date-input icon="today" landscape v-model="et" label="END TIME" type="time" label-float
                                       full-width></mu-date-input>
                    </mu-col>
                </mu-row>
            </div>
        </div>
        <div @click="turnSport">
            <Hand :state="state"></Hand>
        </div>
        <mu-fade-transition>
            <div v-show="!state">
                12345
            </div>
        </mu-fade-transition>
    </div>
</template>

<script>
    import axios from 'axios';
    import bottomTab from '../components/bottomTab'
    import Hand from '@/components/Hand.vue'
    import '../libs/rem';

    let qs = require('qs');
    import Global from '../Global.js'

    export default {
        data() {
            return {
                thisTab: 'SPORT',
                state: true,
                time: undefined,
                landscape: true,
                display: true,
                type: 'ampm',
                viewType: 'clock',
                bt: '',
                et: '',
                lists: []
            }
        },
        mounted() {
        },
        methods: {
            turnSport() {
                // if (!this.bt) {
                //     this.$toast.warning('NULL BEGIN TIME');
                //     return false
                // }
                // if (!this.et) {
                //     this.$toast.warning('NULL END TIME');
                //     return false
                // }
                // if (this.et < this.bt) {
                //     this.$toast.warning('BT IS OVER ET');
                //     return false
                // }

                this.state = false
            }
        },
        components: {
            bottomTab, Hand
        }
    }
</script>

<style scoped>
    #mainPage {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: #000;
        overflow-y: scroll;
        color: red;
    }

    .timeContainer {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .mu-picker {
        overflow: hidden;
        /*display: block;*/
        margin: 0 auto;
    }

    .mu-input {
        color: #fff;
    }

    /deep/ .mu-input.has-label .mu-input-label.float {
        color: #fcfcfc;
    }

    /deep/ .mu-text-field-input {
        color: #fff;
    }

    .inputContainer {
        width: 75%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }
</style>
