<template>
	<div class="area-block">
		<img class="base-image w3-image" :src="baseImage" draggable="false" style="height: 100%;"></img>
		<div :class="['soft-item', { 'soft-light' : obj.Type == 'light', 'glossy' : obj.Type == 'light' }, typeof obj.Class == 'string' && obj.Class.length > 0 ? obj.Class : '', typeof obj.Class == 'object' ? (obj.Class.length > 1 ? obj.Class[softValues[obj.Soft].value] : obj.Class[0]) : '',fnSiteClass(obj.Name)]" v-for="obj in dataArray" :id="obj.Name">
			<div v-if="obj.Soft" :title="obj.Desc" :style="obj.Keyin != 'No' && dataModified == true ? 'cursor: pointer; color: blue;' : ''" @click="obj.Keyin != 'No' && dataModified == true && obj.Type != 'button' ? di_input(obj, softValues[obj.Soft].value) : ''">
				<span v-if="obj.Type == 'data'" :data-type="obj.Type" :data-soft="obj.Soft" :data-value="softValues[obj.Soft].value" :data-unit="obj.Unit"></span>
				<span v-else-if="obj.Type == 'text'" :data-type="obj.Type" :data-soft="obj.Soft" :data-value="softValues[obj.Soft].value" :data-text="obj.Icon[softValues[obj.Soft].value]" ></span>
				<img v-else-if="obj.Type == 'image'" :data-type="obj.Type" :data-soft="obj.Soft" :data-value="softValues[obj.Soft].value" :src="obj.Icon[softValues[obj.Soft].value]" border="0" width="100%"></img>
				<img v-else-if="obj.Type == 'giffer'" :data-type="obj.Type" v-giffer="di_gifferPlay(obj.Soft, obj.Unit)" :src="obj.Icon" border="0"></img>
				<div v-else-if="obj.Type == 'input'" class="text-primary">{{obj.Desc}} : <input v-model="softValues[obj.Soft].value" class="text-tertiary" size="32" readonly="true" style="padding: 2px 5px;"></input></div>
			</div>
			<div v-else @click="anchorTo(obj.Desc)" style="cursor: pointer;">
				<!-- {{ obj.Desc }} -->
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			</div>
		</div>

	</div>
</template>

<script>
module.exports = {
	props: {
		"dataArray": {
			default: [],
			required: true
		},
		"softValues": {
			default: {},
			required: true
		},
		"baseImage": {
			default: ""
		},
		"dataModified": {
			default: false
		}
	},
	data: () => {
		return {
			upperPoint: null,
			lowerPoint: null,
			upperVal: null,
			lowerVal: null,
		}
	},
	methods: {
		fnSiteClass(name){
			let words = name.split('_');
			let site = 'site_'+words[1];
			return site;
		},
		di_gifferPlay (_soft, _softs) {
			if (typeof _softs != "string") {
				_softs = "";
			}
			var self = this;
			var _play = false;
			Array.union([_soft], _softs.split(";")).forEach(function(_point){
				if (self.softValues[_point].value == 1) {
					_play = true;
				}
			})
			return _play;
		},
		async di_inputOnOff (_target) {
			if (!this.dataModified) {
				this.$q.dialog({
					title: "只允許本機修改",
					ok: "確定",
					preventClose: true
				});
				return false
			}
			try {
				await this.$q.dialog({
					title: "ON/OFF切換？",
					ok: "確定",
					cancel: "取消",
					preventClose: true
				});
				var updObj = {}
				updObj[_target] = {
					decimal: 0,
					value: this.softValues[_target].value == true ? "off" : "on"
				}
				this.$emit("soft_modify", updObj) 
			} catch (err) {
				return false
			}
		},
		di_input(_target, _value) {
			switch(_target.Keyin) {
				case 'Yes':
					this.di_inputDialog(_target.Soft, _value);
					break;
				default:
					break;
			}
		},
		// 寫入選中點位
		async di_inputDialog (_target, _value) {
			let that = this;
			if (!that.dataModified) {
				that.$q.dialog({
					title: "只允許本機修改",
					ok: "確定",
					preventClose: true
				});
				return false
			}
			try {
				if (_target.substr(0, 1) == "R") {
					var input = _value;
					await that.$q.dialog({
						title: "設置點位(" + _target + ")",
						options: {
							type: "radio",
							model: _value ? "on" : "off",
							items: [{ 
								label: "Off", value: "off"
							}, {
								label: "On", value: "on"
							}]
						},
						ok: "確定",
						cancel: "取消",
						preventClose: true
					}).then(function(res){
						input = res;
					});
				} else { // D點, S點
					var input = await that.$q.dialog({
						title: "設置點位(" + _target + ")",
						prompt: {
							model: _value || "",
							type: "text"
						},
						ok: "確定",
						cancel: "取消",
						preventClose: true
					});
				}
				if (input.length) {
					var updObj = {}
					updObj[_target] = {
						decimal: that.softValues[_target].decimal,
						value: input
					}
					console.log(updObj)
					await that.$parent.FnSoftAjaxCommand(updObj, true).then(function(res){
						console.log(res);
						that.$parent.FnNotify("寫入成功", 'success');
					}).catch(async function(err){
						that.$parent.FnAlert("錯誤", err);
					});
					// that.$emit("soft_modify", updObj) 
				}
			} catch (err) {
				return false
			}
		},
		// 寫入選中點位
		async di_inputBtn (_target, _value) {
			let that = this;

			if(that.$parent.LoginSetup.group <= 1) {
				that.$parent.FnNotify('無操作權限','warning');
				return false;
			}
			if (!that.dataModified) {
				that.$q.dialog({
					title: "只允許本機修改",
					ok: "確定",
					preventClose: true
				});
				return false
			}
			try {
				var tgtSoft = _target.Soft;
				var foundObj = this.dataArray.find(ele => ele.Name == `${_target.Name}_in`);
				if(foundObj != undefined) {
					// 寫入的點是另外的點位（csv的TagName有另一組加'_in'的，如:Tag_05_in）
					tgtSoft = foundObj.Soft;
				} 
				var updObj = {};
				updObj[tgtSoft] = {
					decimal: that.softValues[tgtSoft].decimal,
					value: _value
				}
				console.log(updObj)
				await that.$parent.FnSoftAjaxCommand(updObj, true).then(function(res){
					console.log(res);
					that.$parent.FnNotify("寫入成功", 'success');
				}).catch(async function(err){
					that.$parent.FnAlert("錯誤", err);
				});
			} catch (err) {
				return false
			}
		},
		anchorTo(desc) {
			// alert(desc);
			let flag = 1;
			if(desc.includes('RTO'))
				flag = 2;
			this.$emit("anchor_to", flag);
		}
	}
}
</script>
<style scoped>
.area-block {
	position: relative;
	font-size: 1.25rem;
	font-weight: 600;
	box-shadow: 0px 0px 2px 1px rgba(20%, 20%, 40%, 0.4), 0px 0px 6px 3px rgba(20%, 20%, 40%, 0.2);
	background-color: #fff;
}
.area-block .base-image {
	width: 100%;
	height: auto;
}
.area-block .soft-light {
	border-radius: 50%;
}
.area-block .soft-item [data-type='data'][data-value]:before {
	content: attr(data-value);
}
.area-block .soft-item [data-type='bool'][data-text]:before,
.area-block .soft-item [data-type='text'][data-text]:before {
	content: attr(data-text);
	letter-spacing: 1px;
}
.area-block .soft-item [data-type='data'][data-unit]:after {
	content: ' ' attr(data-unit);
}
.w3-modal-content label {
	font-size: 1.2em;
}
</style>