<template>	
	<div :id="dataId" class="com-infoBox" :data-title="typeof dataTitle == 'string' ? dataTitle : false" :data-code="dataCode">
		<div>
			<template v-for="obj in dataArray">
			<div v-if="obj.Type == 'data'" class="com-rowItem">
				<span v-if="obj.Icon.length > 0" class="material-icons">{{ obj.Icon }}</span>
				<div :data-soft="obj.Soft" :data-desc="obj.Desc" :data-value="softValues[obj.Soft].value"></div>
				<span v-if="obj.Unit.length > 0" class="unit">{{ obj.Unit }}</span>
			</div>
			</template>
		</div><div v-if="chartVisible.length > 0" class="com-chartBtns">
			<div v-if="dataTrends.includes('bar')"><span class="material-icons" @click="comFnChartBtnCilck('bar', dataCode)">bar_chart</span></div>
			<div v-if="dataTrends.includes('pie')"><span class="material-icons" @click="comFnChartBtnCilck('pie', dataCode)">pie_chart</span></div>
		</div>
	</div>
</template>

<script>
module.exports = {
	props: {
		"dataId": {
			type: String,
			required: true
		},
		"dataCode": {
			type: String,
			required: true
		},
		"dataTitle": {
			type: String
		},
		"dataArray": {
			type: Object,
			default: [],
			required: true
		},
		"softValues": {
			type: Object,
			default: {},
			required: true
		},
		"dataTrends": {
			type: Object,
			default: [],
			required: true
		}
	},
	data: () => {
		return {
			chartBtns: ["bar", "pie", ""]
		}
	},
	computed: {
		chartVisible () {
			return Array.intersect(this.dataTrends, this.chartBtns);
		}
	},
	methods: {
		comFnChartBtnCilck (_chart, _code) {
			this.$emit("com_chart_click", { chart: _chart, code: _code });
		}
	}
}
</script>