<template>
	<div class="area-block-t">
		<div v-for="obj in dataArray"
			:class="['soft-item', (obj.Type == 'light' ? 'soft-light glossy' : ''), comFnGetClass(obj)]" :id="obj.Name" style="width:100%;">
			<div v-if="obj.Soft" :title="obj.Desc"
				:style="[comFnChkInput(obj.Keyin) ? { 'cursor': 'pointer' } : { 'cursor': 'crosshair' }]"
				@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 style="padding: 0 0px;" v-if="obj.Type == 'data' && sec" :data-type="obj.Type" :data-soft="obj.Soft" :data-value="fnSec(softValues[obj.Soft].value)" :data-unit="obj.Unit" ></span>
				<span v-else-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
		},
		sec: {
			default: false
		}
	},
	data: () => {
		return {
			onoffObj: { "on": "開", "off": "關" },
			onoffArr: ["off", "on"]
		}
	},
	mounted() {
	},
	methods: {
		fnSec(key) {
			let temp = parseFloat(key);
			temp /= 1000;
			return temp;
		},
		comFnChkInput(keyin) {
			// console.log(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) {
					if (this.softValues[obj.Soft].value) {
						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 = "") {
			// console.log(obj);
			// 檢查是否能輸入
			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) ) + ")",
						title: "請輸入設定數值",
						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
					})
				}
				console.log(upd_val);
				if (this.sec) {
					upd_val *= 1000;
				}

				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("内容未设置");
					// }
					let objs = {
						points: updObj,
						name: obj['Name'],
						value: upd_val
					};

					console.log(objs.value);

					this.$emit("soft_modify", objs);
				}
			} catch (err) {
				return false
			}
		}
	}
}
</script>
<style scoped>
.area-block-t {
	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;
	padding: 0 5px;
	border-radius: 5px;
	border: #0676E3 solid 1px;
	display: flex;
	align-items: center;
	justify-content: center;

}

.area-block-t .base-image {
	width: 100%;
	height: auto;
}

.area-block-t .soft-light {
	border-radius: 50%;
}

.area-block-t .soft-item [data-type='data'][data-value]:before {
	content: attr(data-value);
}

.area-block-t .soft-item [data-type='bool'][data-text]:before,
.area-block-t .soft-item [data-type='text'][data-text]:before {
	content: attr(data-text);
	letter-spacing: 1px;
}

.area-block-t .soft-item [data-type='data'][data-unit]:after {
	content: ' ' attr(data-unit);
}

.area-block-t .soft-item div {
	text-align: right;
}

.w3-modal-content label {
	font-size: 1.2em;
}
</style>
