<template>
	<view class="header">
		<view class="header-title">车间物流监控</view>
		<view class="data_box">
			<view class="time">{{time}}</view>
			<view class="date_item">
				<view class="year">{{year}}</view>
				<view class="year">{{ date }}</view>
			</view>
		</view>
		<view class="exit_btn iconfont" @tap="toBack">&#xe85b;</view>
	</view>
</template>

<script>
	export default {
		name:"MyHeader",
		data() {
			return {
				timer: null,
				time: '',
				year: '',
				date: '',
				week: ''
			};
		},
		mounted () {
			this.timer = window.setInterval(this.updateTime, 1000)
		},
		methods: {
			updateTime () {
				let cd = new Date()
				let year = cd.getFullYear()
				let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
				let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
				let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
				let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
				let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
				var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
				let myddy = new Date().getDay()
				let week = weekday[myddy]
				this.time = `${hh}:${mm}:${ss}`
				this.year = `${year}`
				this.date = `${month}.${date}`
				this.week = `${week}`
			},
			toBack () {
				uni.redirectTo({
					url: '/pages/setup'
				})
			}
		},
		beforeDestroy () {
			this.$once('hook:beforeDestroy', () => {
				clearInterval(this.timer)
			})
		}
	}
</script>

<style lang="stylus" scoped>
.header
	position absolute
	left 0
	top 0
	width 100%
	height 96px
	background center / 100% url('../static/image/header_bg.png') no-repeat
.header-title
	width: 50%;
	height: 100%;
	padding-top: 14px;
	font-size: 30px;
	font-family: 'YouSheBiaoTiHei';
	font-weight: 400;
	color: transparent;
	line-height: 24px;
	opacity: 0.89;
	letter-spacing 5px
	background: linear-gradient(0deg, #AAD0F6 0%, #D7E7F5 53.3154296875%, #E0EAF6 100%);
	filter: drop-shadow(#092F6D 1px 4px 1px);
	-webkit-background-clip: text;
	background-clip: text;
	text-align center
	margin: 0 auto;
.exit_btn
	position absolute
	left 10px
	top 10px
	height 28px
	width 28px
	line-height 28px
	font-size 20px
	color #aecaf5
	text-align: center;
	cursor: pointer;
.data_box
	position absolute
	right 10px
	top 10px
	display: flex
	justify-content: flex-end
.time
	font-size: 28px;
	line-height: 28px;
	font-family: 'YouSheBiaoTiHei';
	color: #AECAF5;
.date_item
	margin-left 5px
.year
	font-size: 12px;
	font-family: 'YouSheBiaoTiHei';
	color: #AECAF5;
	line-height: 21px;
	opacity: 0.7;
	&:last-child
		line-height: 0px
</style>