<template>
	<div>
		<div class="soft-item soft-group" v-for="obj in dataArray" :id="obj.Name" :data-soft="obj.Soft" :data-value="softValues[obj.Soft].value">
			<div v-for="(txt, index) in obj.Icon" v-if="index > 0" :class="['soft-btn', (softValues[obj.Soft].value == index ? 'active' : ''), (typeof obj.Class == 'object' && obj.Class.length > 0 ? obj.Class[index] : obj.Class)]" @click="dataModified == true && softValues[obj.Soft].value != index ? di_inputDialog(obj, index) : ''">
				<div :style="dataModified != true || softValues[obj.Soft].value == index ? 'cursor: default;' : ''"><span>{{txt}}</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, _val) {
			if (!this.dataModified) {
				this.$q.dialog({
					title: "只允許本機修改",
					ok: "確定",
					preventClose: true
				});
				return false
			}
			try {
				await this.$q.dialog({
					title: _obj.Desc + " 切換至 " + (this.softValues[_obj.Soft].value == _val ? "無狀態" : _obj.Icon[_val]),
					ok: "確定",
					cancel: "取消",
					preventClose: true
				});
				// 送出
				var updObj = {}
				updObj[_obj.Soft] = {
					decimal: this.softValues[_obj.Soft].decimal,
					value: this.softValues[_obj.Soft].value == _val ? 0 : _val
				}
				this.$emit("soft_modify", updObj)
			} catch (err) {
				return false
			}
		}
	}
}