<template>
	<div>
		<div class="w3-row">
		  <div class ="w3-col l6 m6 s6 w3-row" v-for = "(v,k) in data_array">
			<div class="w3-col l8 m8 s8">
				<span style="font-size:1em;font-weight:800;">{{v.label}}</span>
			</div>
			<div class="w3-col l4 m4 s4 w3-center">
				<div style = "border:solid 1px rgba(0, 0, 0, 0.3); margin:1px 6px 1px 0;">
					<span class = "soft-cursor" style="font-size:1em;font-weight:800; color: #0082CA;" @click = "fnIsDetail(v)" v-if ="!v.on_off">
						{{soft_tag_name[v.value] ? soft_tag_name[v.value]['value']: ''}}
					</span>
					<span  style="font-size:1em;font-weight:800; color: #0082CA;"  v-else>
						{{fnONOFF(v.value)}}
					</span>
				</div>
		    </div>
		  </div>
		</div>
	</div>
</template>

<script>
module.exports = {
	props: {
		"data_array": {
			default: [],
			required: true,
		},
		"name": {
			default: null,
			required: true,
		},
		"soft_tag_name": {
			default: null,
			required: true,
		},
	},
	mounted () {
		// console.log(this.soft_tag_name);
	},
	computed:{
	},
	methods: {
		fnIsDetail(v){
			if(this.$root.detail.show){
				this.$emit('temp',v);
			} else{
				this.pageSwitchTrend(v);
			}
		},
		pageSwitchTrend(v) {
			// console.log(v.on_off);
			this.$root.FnPageSwitch('/Waychein/trend.php',{machine:this.name,soft:v.label},'_blank');
		},
		fnONOFF(key){
			if(this.soft_tag_name[key]){
				return this.soft_tag_name[key]['value'] == 1 ? 'ON' : 'OFF';
			}
			return 'wrong';
		}
	}
}
</script>