<template>
	<view :style="{height:'100vh',overflow:'hidden'}">
		<u-status-bar></u-status-bar>
		<u-navbar
			title="生态流量监控" 
			:autoBack="true" 
			:titleStyle="{
				fontSize:'18px'
			}" 
			:height='44'
			:safeAreaInsetTop=true
			leftIconSize='20'
			leftIconColor='rgb(153, 153, 153)'
		>
		</u-navbar>
        <view class="" style="margin-top: 44px;;background-color: #f0f0f0;border-top: 1px solid #f0f0f0;">
			<view style="display: flex;padding: 20px;background-color: #fff;align-items: center;">
				<u--input v-model="start" shape='circle'
					style="background-color: #f0f0f0;height: 30px;text-align: center;" border='none' @focus="show = true;"></u--input>
				-
				<u--input v-model="end" shape='circle' 
					style="background-color: #f0f0f0;height:30px;" border='none' @focus="show = true;"></u--input>
				<text style="color: #006cff; margin-left: 10px;">搜索</text>
			</view>

		</view>
		<!-- <u-calendar :show="show" mode="single" @confirm="confirm" @cancel='cancel' @close="show=false"></u-calendar> -->
    <u-datetime-picker :show="show" mode="datetime" @confirm="confirm" @cancel='cancel' @close="show=false" v-modal="stm"></u-datetime-picker>
	</view>
</template>
<script>
import moment from 'moment';
export default {
    data(){
       return{
         show:false,
         start:moment().subtract(1,"weeks").format("YYYY-MM-DD HH"),
         end:moment().format("YYYY-MM-DD HH")
       }
    },
    computed:{
      stm(){
        return moment()
      }
    },
    methods:{
        confirm(e) {
				console.log(e);
				this.start = moment(e.value).format("YYYY-MM-DD HH")
				this.show = false
			},
			cancel() {
				this.show = false
			},
    }
}
</script>