<template>
	<uni-row>
		<view v-for="(item, index) in data">
			<uni-col :span="item.titleSpan">
				<view class="titleStyle">
					{{ item.title }}
				</view>
			</uni-col>
			<uni-col :span="item.valueSpan">
				<view :class="item.class">
					{{ doEmptyString(item.value) }}
				</view>
			</uni-col>
		</view>
	</uni-row>
</template>
<script>
export default {
	props: {
		// 表格数据
		cellData: {
			type: Object,
			default: () => [
				{
					title: '',
					value: '',
					titleSpan: 4,
					valueSpan: 4
				}
			]
		},
		//每行数据组数  title  value
		rowDataCount: {
			type: Number,
			default: 3
		}
	},
	data() {
		return {
			data: []
		};
	},
	watch: {
		cellData: {
			deep: true,
			immediate: true,
			handler(val) {
				let totalSpan = 0;
				for (var i = 0; i < val.length; i++) {
					//根据每行数据组数 补齐栅格 24
					if ((i + 1) % this.rowDataCount != 0) {
						totalSpan = totalSpan + val[i].titleSpan + val[i].valueSpan;
					} else {
						val[i].valueSpan = 24 - totalSpan - val[i].titleSpan;
						totalSpan = 0;
					}
				}
				this.data = val;
				// console.log(this.data)
			}
		}
	},
	methods: {
		//数据如果为空，自动替换成/
		doEmptyString(obj) {
			let str = '/';
			if (typeof obj == 'undefined' || obj === null || obj === '' || obj === 'Na' || obj === 'N' || obj === '0') {
				return str;
			}
			return obj + '';
		}
	}
};
</script>
<style scoped>
/* 标签样式 */
.titleStyle {
	font-size: 10px;
	color: #747474;
	line-height: 30px;
	height: 30px;
	background: #f2f9fc;
	text-align: center;
	vertical-align: middle;
	border-left: 1px solid #919191;
	border-right: 1px solid #919191;
	border-bottom: 1px solid #919191;
}

/* 内容样式 */
.dataStyle {
	font-size: 12px;
	color: #00007f;
	line-height: 35px;
	height: 30px;
	font-weight: 500;
	text-align: center;
	vertical-align: middle;
	border-bottom: 1px solid #919191;
	text-overflow: ellipsis;
	overflow: hidden;
}

/* 内容样式 */
.dataStyle1 {
	font-size: 10px;
	color: #00007f;
	line-height: 15px;
	height: 30px;
	font-weight: 500;
	text-align: center;
	vertical-align: middle;
	border-bottom: 1px solid #919191;
	text-overflow: ellipsis;
	overflow: hidden;
}
</style>
