<template>
	<div>
		<div class="alarm-grid" v-if="Object.keys(dataArray).length > 0">
			<div class="grid-row title">
				<div class="grid-cell">警報點位</div>
				<div class="grid-cell">目前數值</div>
				<div class="grid-cell">High</div>
				<div class="grid-cell">Low</div>
				<div class="grid-cell">HH</div>
				<div class="grid-cell">LL</div>
				<div class="grid-cell">狀態</div>
			</div>
			<div class="grid-row area-block" v-for="(obj, tag) in dataArray">
				<div class="grid-cell">{{obj.value.Desc}}</div>
				<div class="grid-cell soft-item" v-for="key in ['value', 'H', 'L', 'HH', 'LL', 'onoff']">
					<span 
						v-if="['data', 'text'].includes(obj[key].Type)" 
						:class="[typeof obj[key].Class == 'string' && obj[key].Class.length > 0 ? obj[key].Class : '', typeof obj[key].Class == 'object' ? (obj[key].Class.length > 1 ? obj[key].Class[softValues[obj[key].Soft].value] : obj.Class[0]) : '']"
						:data-type="obj[key].Type" 
						:data-soft="obj[key].Soft" 
						:data-value="softValues[obj[key].Soft].value" 
						:data-text="obj[key].Type == 'text' ? obj[key].Icon[softValues[obj[key].Soft].value] : ''"
						:style="obj[key].Keyin == 'Yes' && dataModified == true ? 'cursor: pointer;' : ''"
						@click="obj[key].Keyin == 'Yes' && dataModified == true ? di_inputDialog(obj[key]) : ''"
					></span>
					<span v-else class="text-empty">{{ key == "onoff" ? "啟用" : "---"}}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
module.exports = {
	props: {
		"dataArray": {
			default: [],
			required: true
		},
		"softValues": {
			default: {},
			required: true
		},
		"dataModified": {
			default: true
		}
	},
	methods: {
		async di_inputDialog (_obj) {
			if (!this.dataModified) {
				this.$q.dialog({
					title: "只允許本機修改",
					ok: "確定",
					preventClose: true
				});
				return false
			}
			try {
				var _value = this.softValues[_obj.Soft].value;
				if (_obj.Soft.substr(0, 1) == "R") {
					var input = _value;
					await this.$q.dialog({
						title: "設置點位(" + _obj.Soft + ")",
						options: {
							type: "radio",
							model: _value ? "on" : "off",
							items: [{ 
								label: _obj.Type == "text" ? _obj.Icon[0] : "Off", value: "off"
							}, {
								label: _obj.Type == "text" ? _obj.Icon[1] : "On", value: "on"
							}]
						},
						ok: "確定",
						cancel: "取消",
						preventClose: true
					}).then(function(res){
						input = res;
					});
				} else { // D點, S點
					var input = await this.$q.dialog({
						title: "設置點位(" + _obj.Soft + ")",
						prompt: {
							model: _value || "",
							type: "text"
						},
						ok: "確定",
						cancel: "取消",
						preventClose: true
					});
				}
				if (input.length) {
					var updObj = {}
					updObj[_obj.Soft] = {
						decimal: this.softValues[_obj.Soft].decimal,
						value: input
					}
					this.$emit("soft_modify", updObj) 
				}
			} catch (err) {
				return false
			}
		}
	}
}
</script>