<template>
	<view
		:class="['t-td', color]"
		:style="{
			flex: width ? `0 0 ${width}rpx` : '1',
			'border-width': thBorder + 'rpx',
			'border-color': borderColor,
			'font-size': fontSize + 'rpx',
			'justify-content': tdAlignCpd
		}"
	>
		<slot></slot>
	</view>
</template>

<script>
export default {
	props: {
		align: String,
		width: {
			type: Number | null,
			default: null
		},
		color: String
	},
	data() {
		return {
			thBorder: "1",
			borderColor: "#d0dee5",
			tdAlign: "center",
			fontSize: "24"
		};
	},
	inject: ["table", "tr"],

	created() {
		this.thBorder = this.table.border;
		this.borderColor = this.table.borderColor;
		this.fontSize = this.tr.fontSize;
		this.color = this.tr.color;
		if (this.align) {
			this.tdAlign = this.align;
		} else {
			this.tdAlign = this.tr.align;
		}
	},
	computed: {
		tdAlignCpd() {
			let nameAlign = "";
			switch (this.tdAlign) {
				case "left":
					nameAlign = "flex-start";
					break;
				case "center":
					nameAlign = "center";
					break;
				case "right":
					nameAlign = "flex-end";
					break;
				default:
					nameAlign = "center";
					break;
			}
			return nameAlign;
		}
	}
};
</script>

<style lang="scss">
.t-td {
	flex: 1;
	display: flex;
	flex-shrink: 0;
	margin: 0 10upx;
	align-items: center;
	width: 100%;
	text-align: center;
	color: #999999;
	font-size: 24upx;

	&.warn {
		color: #ffaf1d;
	}
	&.fail {
		color: #f51608;
	}
	&.success {
		color: #09bb07;
	}
	&.info {
		color: #333;
	}
}
</style>
