<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Setting</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
	<script src="assets/js/common.js"></script>
	<script src="assets/lib/vue/vue.min.js"></script>
	<script src="assets/lib/element/index.js"></script>
	<link rel="stylesheet" href="assets/css/common.css" type="text/css" />
	<link rel="stylesheet" href="assets/css/header.css" type="text/css" />
	<link rel="stylesheet" href="assets/css/piece.css" type="text/css" />
	<link rel="stylesheet" href="assets/lib/element/theme-chalk/index.css" type="text/css" />
	<link rel="stylesheet" href="assets/css/element.css" type="text/css" />
</head>

<body>
<div id="app" v-cloak>
	<div class="header">
		<div class="btn" @click="onClickBack"><img class="icon" src="assets/icons/left.svg"></div>
		<div class="text">{{ lang.title }}</div>
		<div class="btn"></div>
	</div>
	<div class="content">
		<div class="settings">
			<div class="piece">
				<div class="piece-items">
					<a class="piece-item">
						<div class="piece-item-content">
							<div class="piece-item-key">{{ lang.vertical_mode }}</div>
							<div class="piece-item-val">
								<el-switch :active-value="1" inactive-value="0" v-model="settings.verticalMode" :disabled="environments.interval" @change="onChangeVerticalMode" />
							</div>
						</div>
					</a>
					<a class="piece-item">
						<div class="piece-item-content">
							<div class="piece-item-key">{{ lang.vertical_auto_revolve }}</div>
							<div class="piece-item-val">
								<el-switch :active-value="1" inactive-value="0" v-model="settings.verticalAutoRevolve" :disabled="environments.interval || settings.verticalMode!==1" @change="onChangeVerticalAutoMode" />
							</div>
						</div>
					</a>
					<a class="piece-item">
						<div class="piece-item-content">
							<div class="piece-item-key">{{ lang.full_mode }}</div>
							<div class="piece-item-val">
								<el-switch :active-value="1" inactive-value="0" v-model="settings.fullMode" :disabled="environments.interval" @change="onChangeFullMode" />
							</div>
						</div>
					</a>
				</div>
			</div>
		</div>
	</div>
</div>
</body>

</html>

<script>
	var app = new Vue({
		"el": "#app",
		"data": {
			lang: {
				title						: "同屏设置",
				vertical_mode				: "竖屏模式",
				vertical_auto_revolve		: "竖屏自动旋转",
				full_mode					: "满屏模式",
				tips						: "提示",
				tips_connected_device		: "请连接到设备",
				ok							: "确认",
			},
			settings: {
				verticalMode				: false,
				verticalAutoRevolve			: false,
				fullMode					: false,
			},
			environments: {
				interval					: false,
			},
		},
		"created": function () {
			if (typeof ($android) !== "undefined") {
				//加载语言
				this.lang = Object.assign(this.lang, JSON.parse($android.onGetLang()));
				//加载数据
				var data = JSON.parse($android.onGetData());
				this.settings = Object.assign(this.settings, data.settings);
				//判断连接
				if (!data.state.connected) {
					var _this = this;
					this.$alert(
							_this.lang.tips_connected_device,
							_this.lang.tips,
							{
								showClose: false,
								confirmButtonText: _this.ok,
								callback: function (action) {
									_this.onClickBack();
								},
							}
					)
				}
			}
		},
		"methods": {
			onChanged: function(){
				var _this = this;
				_this.environments.interval = true;
				setTimeout(function(){
					_this.environments.interval = false;
				}, 500);
			},
			onClickBack: function () {
				if (typeof ($android) == "undefined") {
					location.href = "index.html";
					return;
				}
				$android.onClickBack();
			},
			onChangeVerticalMode: function (value) {
				if (typeof ($android) == "undefined")
					return false;
				$android.onChangeVerticalMode(value);
				this.onChanged();
			},
			onChangeVerticalAutoMode: function (value) {
				if (typeof ($android) == "undefined")
					return false;
				$android.onChangeVerticalAutoMode(value);
				this.onChanged();
			},
			onChangeFullMode: function (value) {
				if (typeof ($android) == "undefined")
					return false;
				$android.onChangeFullMode(value);
				this.onChanged();
			},
		}
	})
</script>