<template>
	<div>
		<div class="w3-row">
		    <div class="w3-col l5 m5 s5">
		      <span style="font-size:1em;font-weight:800;">&nbsp;</span>
		    </div>
		    <div class="w3-col l7 m7 s7 w3-row">
				<div class="w3-col l6 m6 s6 w3-center">
				  <div>
				    <span style="font-size:1em;font-weight:800; color: #BBBBBB;">設定值</span>
				  </div>
				</div>
				<div class="w3-col l6 m6 s6 w3-center">
				  <div>
				    <span style="font-size:1em;font-weight:800; color: #BBBBBB;">實際值</span>
				  </div>
				</div>
		    </div>
		    <div class="w3-col l12 m12 s12 w3-row" v-for = "(v,k) in data_array">
		    	<div class="w3-col l5 m5 s5">
		        	<span style="font-size:1em;font-weight:800;">{{v.label}}</span>
		    	</div>
		    	<div class="w3-col l7 m7 s7 w3-row">
					<div class="w3-col l6 m6 s6 w3-center">
					  <div style = "margin:1px 10px;border:solid 1px rgba(0, 0, 0, 0.3);">
					    <span class = "soft-cursor" style="font-size:1em;font-weight:800; color: #0082CA; " 
					    @click = "fnIsDetail(v,'設定值')">
					    	{{soft_tag_name[v.set_value] ? soft_tag_name[v.set_value]['value']: ''}}
						</span>
					  </div>
					</div>
					<div class="w3-col l6 m6 s6 w3-center">
					  <div style = "margin:1px 10px;border:solid 1px rgba(0, 0, 0, 0.3);">
					    <span class = "soft-cursor" style="font-size:1em;font-weight:800; color: #0082CA; " 
					    @click = "fnIsDetail(v,'實際值')">
					    	{{soft_tag_name[v.real_value] ? soft_tag_name[v.real_value]['value']: ''}}
						</span>
					  </div>
					</div>
		    	</div>
		    </div>
		</div>  
	</div>
</template>

<script>
module.exports = {
	props: {
		"data_array": {
			default: [],
			required: true,
		},
		"name": {
			default: null,
			required: false,
		},
		"prefix":{
			default: null,
			required: false,
		},
		"soft_tag_name": {
			default: null,
			required: true,
		},
	},
	mounted () {
		// console.log(this.soft_tag_name);
	},
	methods: {
		fnIsDetail(v,suffix){
			if(this.$root.detail.show){
				let label = '';
				if(this.prefix){
					label = this.prefix+' '+v.label+' '+suffix;
				}else{
					label = v.label+' '+suffix;
				}

				let temp ={
					value:v.value,
					label:label
				};
				console.log(temp);
				this.$emit('temp',label);
			} else{
				this.pageSwitchTrend(v,suffix);
			}
		},
		pageSwitchTrend(v,suffix) {
			// console.log(this.prefix);
			if(this.prefix){
				this.$root.FnPageSwitch('/Waychein/trend.php',{machine:this.name,soft:this.prefix+' '+v.label+' '+suffix},'_blank');
			}else{
				this.$root.FnPageSwitch('/Waychein/trend.php',{machine:this.name,soft:v.label+' '+suffix},'_blank');
			}
		},
	}
}
</script>