<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 = "pageSwitchTrend(v,'設定值')">{{v.set_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 = "pageSwitchTrend(v,'實際值')">{{v.real_value}}</span>
					  </div>
					</div>
		    	</div>
		    </div>
		</div>  
	</div>
</template>

<script>
module.exports = {
	props: {
		"data_array": {
			default: [],
			required: true,
		},
		"name": {
			default: null,
			required: true,
		},
		"prefix":{
			default: null,
			required: false,
		},
	},
	mounted () {
	},
	methods: {
		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>