<template>
	<div>
		<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]) : '']" v-for="obj in dataArray" :id="obj.Name">
			<div v-if="obj.Soft" :title="obj.Desc" :style="obj.Keyin == 'Yes' && dataModified == true ? 'cursor: pointer' : ''" @click="obj.Keyin == 'Yes' && dataModified == true && obj.Type != 'button' ? di_inputDialog(obj, softValues[obj.Soft].value) : ''">
				<span v-if="obj.Type == 'data'" :data-type="obj.Type" :data-soft="obj.Soft" :data-value="!_.isNil(softValues[obj.Soft]) ? softValues[obj.Soft].value : ''" :data-unit="obj.Unit"></span>
				<span v-else-if="['text', 'bool'].includes(obj.Type)" :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"></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>
				<q-btn v-else-if="obj.Type == 'button' && dataModified == true" :label="obj.Desc" @click="di_inputDialog(obj.Soft, (obj.Keyin == 'Yes' ? softValues[obj.Unit].value : softValues[obj.Soft].value))" push glossy no-caps size="lg" color="primary"></q-btn>
				<q-btn v-else-if="obj.Type == 'button2' && dataModified == true" :label="obj.Desc" @click="di_inputOnOff(obj.Soft)" :data-test="softValues[obj.Soft].value" :color="softValues[obj.Soft].value == 1 ? 'amber' : 'blue-grey-1'" text-color="dark" no-caps size="lg"></q-btn>
			</div>
		</div>
	</div>
</template>

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