<template>
	<div>
		<div v-for="obj in dataArray" :class="['soft-item', (obj.Type == 'light' ? 'soft-light glossy' : ''), comFnGetClass(obj)]" :id="obj.Name">
			<div v-if="obj.Soft" :title="obj.Desc" :style="[comFnChkInput(obj.Keyin) ? { 'cursor' : 'pointer' } : '']" @click="comFnChkInput(obj.Keyin) && !['button', 'button2', 'image2'].includes(obj.Type) ? comFnKeyinData(obj) : ''">
				<i v-if="obj.Type == 'data' && obj.Icon.length > 0" class="material-icons">{{obj.Icon}}</i>
				<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"></img>
				<img v-else-if="obj.Type == 'image2'" :data-type="obj.Type" :data-soft="obj.Soft" :data-value="softValues[obj.Soft].value" :src="obj.Icon[softValues[obj.Soft].value]" border="0" @click="comFnKeyinData(obj, obj.Unit)"></img>
				<img v-else-if="obj.Type == 'giffer'" :data-type="obj.Type" v-giffer="comFnGifferPlay(obj.Soft, obj.Unit)" :src="obj.Icon" border="0"></img>
				<div v-else-if="obj.Type == 'input'" :data-soft="obj.Soft" 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" :data-soft="obj.Soft" :label="obj.Desc" @click="comFnKeyinData(obj)" push glossy no-caps color="primary" style="font-size: 1.25rem;"></q-btn>
			</div>
		</div>
	</div>
</template>

<script>
module.exports = {
	props: {
		"dataArray": {
			default: [],
			required: true
		},
		"softValues": {
			default: {},
			required: true
		},
		"dataModified": {
			default: true
		}
	},
	data: () => {
		return {
			onoffObj: { "on": "開", "off": "關" },
			onoffArr: ["off", "on"]
		}
	},
	methods: {
		comFnChkInput (keyin) {
			return keyin == "Yes" && this.dataModified == true ? true : false
		},
		comFnGetClass (obj) {
			if (typeof obj.Class == "string" && obj.Class.length > 0) {
				return obj.Class;
			} else if (typeof obj.Class == "object") {
				if (obj.Class.length > 1) {
					return obj.Class[this.softValues[obj.Soft].value]
				}
				return obj.Class[0]
			}
			return "";
		},
		comFnGifferPlay (_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 comFnKeyinData (obj, _soft="") {
			// 檢查是否能輸入
			if (!this.comFnChkInput(obj.Keyin)) {
				return false
			}
			try {
				var pt = obj.Soft.substr(0, 1)
				var upd_val = false
				var updObj = {}
				updObj[(_soft.length > 2 ? _soft : obj.Soft)] = { decimal: obj.Decimal }
				
				if (obj.Type == "button") {
					var pv = Number(this.softValues[obj.Soft].value)
					var pn = (pv + 1) % 2
					
					await this.$q.dialog({
						title: this.onoffObj[obj.Icon[pv]] + " 切換至 " + this.onoffObj[obj.Icon[pn]],
						message: obj.Soft + "：" + obj.Icon[pv] + " => " + obj.Icon[pn],
						ok: "確定",
						cancel: "取消",
						preventClose: true
					}).then(function(){ 
						upd_val = pn
					})
				} else if (obj.Type == "text") {
					var pv = Number(this.softValues[obj.Soft].value)
					var ra = obj.Icon.map(function(txt, val){ 
						return { label: txt, value: val }
					})
					
					await this.$q.dialog({
						title: "請選擇 (" + (obj.Desc.length ? obj.Desc : (_soft.length > 2 ? _soft : obj.Soft) ) + ")",
						options: {
							type: "radio",
							model: pv,
							items: ra
						},
						ok: "確定",
						cancel: "取消",
						preventClose: true
					}).then(function(pn){
						upd_val = pn
					})
				} else if (obj.Type == "data") {
					var err = ""
					await this.$q.dialog({
						title: "請輸入 (" + (obj.Desc.length ? obj.Desc : (_soft.length > 2 ? _soft : obj.Soft) ) + ")",
						message: (pt == "D" ? "限定數字" : (pt == "R" ? "限定 0 or 1" : "")),
						prompt: {
							model: "",
							type: "text"
						},
						ok: "確定",
						cancel: "取消",
						preventClose: true
					}).then(function(pn){
						if (pt == "D" && isNaN(Number(pn))) {
							err = "只接受數字"
						} else if (pt == "R" && ![0, 1].includes(Number(pn))) {
							err = "只接受 0 和 1"
						} else {
							upd_val = pn
						}
					});
					
					if (err != "") {
						await this.$q.dialog({
							title: "輸入型態錯誤 (" + (obj.Desc.length ? obj.Desc : (_soft.length > 2 ? _soft : obj.Soft) ) + ")",
							message: err,
							ok: "確定",
							preventClose: true
						});
						return false
					}
				} else if (pt == "R") {
					var pv = Number(this.softValues[obj.Soft].value)
					var ra = [{ label: "OFF", value: 0 }, { label: "ON", value: 1 }]
					
					await this.$q.dialog({
						title: "請選擇 (" + (obj.Desc.length ? obj.Desc : (_soft.length > 2 ? _soft : obj.Soft) ) + ")",
						options: {
							type: "radio",
							model: pv,
							items: ra
						},
						ok: "確定",
						cancel: "取消",
						preventClose: true
					}).then(function(pn){
						upd_val = pn
					})
				}
				
				if (upd_val !== false) {
					updObj[(_soft.length > 2 ? _soft : obj.Soft)]["value"] = (pt == "R" ? this.onoffArr[upd_val] : upd_val)
					if (obj.Source == "Soft") {  
						this.$emit("soft_modify", updObj);
					} else if (obj.Source == "MQTT") {
						this.$emit("mqtt_modify", updObj);
					} else {
						throw new Error("内容未设置");
					}
				}
			} catch (err) {
				return false
			}
		}
	}
}
</script>
