<template>
	<div>
		<!-- 區塊定位  -->
	    <div class="w3-border w3-border-light-blue shadow-1" v-for="(item , key) in billBoard" v-if="item['show']" :style="getBillboardAddr(item['top'], item['left'] , item['width'])">
	      	<!-- 區塊圖 -->
	      	<div class="flex-fcwcfs shadow-1 bg-white" >
	        	<!-- 標題 + 按鈕 -->
		        <div class="q-pl-sm q-py-sm flex-frwsbcw title-color" :style="item['title_style']">
		          	<span style="font-size: 1.2rem; font-weight:700 ">
		          		{{ item['title'] }}
		          	</span>
		          	<div class="q-pl-md q-py-xs title-btn-border flex-frwcfs" :style="item['title_btn_border_style']" v-if="item['showButton']">
		            	<div class="q-px-xs" v-for="btn in item['button']" v-if="btn['show']">
		              		<span class="material-icons btn-icon-class move" :style="btn['iconColor']" @click="jumpToDashboard(btn, key)" >{{ btn['icon'] }}</span>
		            	</div>  
		        	</div>
		    	</div>  
	        	<!-- 項目 + 點位 -->
		        <div class="q-pa-xs flex-frwsbcw" v-for="data in item['data']" v-if="data['show']" style="font-size: 1.2rem; font-weight:700 ">
		          	<div>
		            	<span class="material-icons data-icon-class" >{{ data['icon'] }}</span>
		            	<span class="q-pl-sm"> {{ data['label'] }}</span>
		          	</div> 
		          	<div >
		            	<span :class="data['textColor']" style="font-size: 1.3rem">
		            		{{ data['isDBValue'] ? data['DBvalue'] : data['isSoft'] ? !_.isNil($root.SoftTagName[data['SoftValue']]) ?  $root.SoftTagName[data['SoftValue']].value : '無資料' : '無資料' }}
		            	</span>
		            	<span class="q-pl-md"> {{ data['unit'] }}</span>
		          	</div>   
		        </div>    
		    </div>
	    </div>
	    <!-- 線條定位 -->
	    <div :class="idx['class']" :style="getLineAddr(idx)" :title="idx['contect']" v-for="idx in lineBoard" v-if="idx['show']">
	    	<div :class="idx['arrow']['class']" :style="getArrowAddr(idx['arrow'])" v-if="idx['showArrow']"> </div>
	    </div>
	    <div v-if="previousPage" style="position: absolute; top:8%; left: 90%;">
	        <q-btn 
	          	push
	          	size="lg"
	          	color="primary"
	          	align="center"
	          	icon="reply"
	          	:label="previousPageName"
	          	@click="$root.FnPageSwitch(previousPageHref)"
	          	style="font-weight: 700;"
	        ></q-btn>
        </div>
    </div>
</template>

<script>
module.exports = {
	components: { },
	data() {
    	return {
			
    	}
    },
    computed : {},
	props: {
		"bill-board" : {			//	陣列資料	
			"type" : "Object",
			"default" : {},
			"required" : true
		},
		"line-board" : {			//	線條
			"type" : "Object",
			"default" : {},
		},
		"previous-page" : {			//	顯示前一頁按鈕
			"type" : "Boolean",		
			"default" : false
		},
		"previous-page-name" : {	//	前一頁按鈕名稱
			"type" : "String",
			"default" : null,
		},
		"previous-page-href" : {	//	前一頁網頁名稱
			"type" : "String",
			"default" : null,
		}
	},
	watch:{},
	mounted() {},

	methods: {

		//	所有按鈕事件
		btnEvent(btn, value) {
			console.log(btn, value)
			btn.fn(value)
		},

		//	區塊定位
		getBillboardAddr(top , left, width) {
			return {
				"position" : "absolute",
				"zIndex" : 5,
				"top" : `${!_.isNil(top) ? top : '0' }%`,
				"left" : `${!_.isNil(left) ? left : '0' }%`,
				"width" : `${!_.isNil(width) ? width : '250' }px`
			}
		},

		//	線條定位
		getLineAddr(line) {
			if ( _.includes(line['class'], 'line_h') ) {
				return {
					"position" : "absolute",
					// "zIndex" : 5,
					"top" : `${!_.isNil(line['top']) ? line['top'] : '0' }%`,
					"left" : `${!_.isNil(line['left']) ? line['left'] : '0' }%`,
					"width" : "0px",
					"height" : `${!_.isNil(line['height']) ? line['height'] : '0' }px`,
					
				}
			} else if ( _.includes(line['class'], 'line_w') ) {
				return {
					"position" : "absolute",
					// "zIndex" : 5,
					"top" : `${!_.isNil(line['top']) ? line['top'] : '0' }%`,
					"left" : `${!_.isNil(line['left']) ? line['left'] : '0' }%`,
					"width" : `${!_.isNil(line['width']) ? line['width'] : '0' }px`,
					"height" : "0px",
				}
			} else {

			}
		},

		//	箭頭定位
		getArrowAddr(arrow) {
			return {
				"top" : `${!_.isNil(arrow['top']) ? arrow['top'] : '0' }px`,
				"left" : `${!_.isNil(arrow['left']) ? arrow['left'] : '0' }px`,
			}
		},

		//	分佈圖，跳至相對應的畫面
		async jumpToDashboard (link , key) {
			console.log(link)
			if (_.isNil(link['linkto'])) {
				return
			}
			if (await this.$root.FnConfirm("提醒", `是否轉跳至${link['label']}？`)) {
				this.$root.FnPageSwitch(link['linkto'] , !_.isNil(link['params']) ? _.merge( link['params'] , {from_page: _.last(window.location.pathname.split('/'))}, {value : key} ) : '');
			}
		},
	},

	
}
</script>

<style scoped>

	.line_w {		/*水平*/
		border: 2px solid #0040ff;
		position: absolute;
		z-index: 1;
	}

	.line_h {		/*垂直*/
		border: 2px solid #0040ff;
		position: absolute;
		z-index: 1;
	}

	.arrow {
  		border: solid #0040ff;
  		border-width: 0px 4px 4px 0;
  		display: inline-block;
  		padding: 4px;
  		position: absolute;
		z-index: 1;
	}

	.right {
	  	transform: rotate(-45deg);
	}
	 
	.left {
	  	transform: rotate(135deg);
	}
	 
	.up {
	  	transform: rotate(-135deg);
	}
	 
	.down {
	  	transform: rotate(45deg);
	}	
	
	.title-color {
		color: white;
/*		background: linear-gradient(to right, #0040ff 5% , #002080 95%);*/
/*		background: linear-gradient(to right, #1c48ae 5% , #102e72 50% , #0c255c 95%);*/
	}

	.title-btn-border {

/*	    border-top: 2px solid rgba(26, 198, 255, 8.9);*/
/*	    border-bottom: 2px solid rgba(26, 198, 255, 8.9);*/
	    border-radius: 15px 0px 0px 15px;
/*	    border-width: 0px 0px 0px 0px;*/
/*	    border-color: rgba(26, 198, 255, 0.2) rgba(26, 198, 255, 0.9);*/
/*	    border-image: linear-gradient(to right, #02a5d5, #1187d4, #123581) 1;*/
/*	    box-shadow: rgba(26, 198, 255, 0.3) 3px 0px 7px -1px inset, rgba(26, 198, 255, 0.9) -2px 0px 3px 1px;*/
/*	    box-shadow: -5px 0px 5px 1px rgba(26, 198, 255, 0.9) ;*/
	}

	
	.btn-icon-class { 
		font-size: 1.5rem;
/*		color: #1ac6ff;*/
	}

	.data-icon-class { 
		font-size: 1.5rem;
		color: #ffcc00;
	}

	.move:hover {
		transform: translateY(-4px);
	  	transition: all 0.4s ease;
	  	cursor: pointer;
	}



	.flex-fcwcfs {
		display: flex;
		flex-flow: column wrap;
		justify-content: center;
		align-items: flex-start;
	}

	.flex-frwcfs {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
	}

	.flex-frwsbcw {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}




	/* --  moblie device  -- */
	@media all and (max-width: 575.98px) {

		

	}
	/* --  tablets and ipads  -- */
	@media all and (min-width: 576px) and (max-width: 767.98px) {

		

	}
	/* --  laptops  -- */
	@media all  and (min-width: 768px) and (max-width: 1199.98px) {

		

	}
	/* --  desktops  -- */
	@media all and (min-width: 1200px) {

		
	}

</style>
