<template>
	<view class="zd-row flexcol jccenter container">
		<view class="h1">车间物流监控</view>
		<view class="login_wrap">
			<view class="title">系统配置</view>
			<view class="zd-row mgb20">
				<view class="zd-col-6 label">域名地址</view>
				<view class="zd-col-18"><input type="text" class="inputStyle" v-model="baseUrl"></view>
			</view>
			<view class="zd-row">
				<view class="zd-col-6 label">刷新时间（秒）</view>
				<view class="zd-col-18"><input type="number" class="inputStyle" v-model="setTime"></view>
			</view>
			<button class="button" @tap="toConfig">配置</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.$store.getters.baseUrl,
				setTime: this.$store.getters.setTime / 1000
			};
		},
		methods: {
			toConfig () {
				if (this.setTime > 10800) {
					uni.showToast({
						title: '刷新时间设置过长',
						icon: 'none'
					})
					return
				}
				let obj = {
					baseUrl: this.baseUrl,
					setTime: this.setTime * 1000
				}
				this.$store.dispatch('setConfig', obj)
				uni.redirectTo({
					url: '/pages/screen'
				})
			}
		}
	}
</script>

<style lang="stylus" scoped>
@import '../common/style/mixin.styl';
.h1
	font-size: 60px;
	font-family: 'YouSheBiaoTiHei';
	font-weight: 400;
	color: transparent;
	line-height: 44px;
	opacity: 0.89;
	letter-spacing 10px
	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-bottom 30px
.login_wrap
	width 500px
	background-color rgba(255, 255, 255, 0.8)
	border-radius 5px
	padding 20px
.title
	_font(16px, 28px, #000,,center)
	margin-bottom 10px
.label
	_font(16px, 40px, #333,,)
.inputStyle
	height 40px
	_font(16px, 40px, #606266,,)
	padding 0 15px
	border none
	background-color #ffffff
.button
	_wh(100%, 40px)
	_font(18px, 40px, #fff,,center)
	margin 30px 0 10px 0
	background-color #2778f3
	border-radius 3px
</style>
