<template>
	<view :class="['u-td','u-td--' + borderType]" :style="[tdStyle]">
		<slot></slot>
	</view>
</template>

<script>
	/**
	 * td td单元格
	 * @description 表格组件一般用于展示大量结构化数据的场景（搭配u-table使用）
	 * @tutorial https://www.uviewui.com/components/table.html#td-props
	 * @property {String Number} width 单元格宽度百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比，单元格宽度默认为均分tr的长度（默认auto）
	 * @example <u-td>二年级</u-td>
	 */
	export default {
		name: "u-td",
		props: {
			// 宽度，百分比或者具体带单位的值，如30%， 200rpx等，一般使用百分比
			width: {
				type: [Number, String],
				default: 'auto'
			}
		},
		data() {
			return {
				// tdStyle: {
					
				// },
				// theme: 'normal'
			}
		},
		computed: {
			// cTheme() {
			// 	let parent = this.$u.$parent.call(this, 'u-table');
			// 	if (parent) {
			// 		return parent.cTheme
			// 	}else {
			// 		return this.theme;
			// 	}
			// },
			borderType() {
				let parent = this.$u.$parent.call(this, 'u-table');
				if (parent) {
					return parent.borderType
				}else {
					return 'default'
				}
			},
			tdStyle() {
				this.parent = this.$u.$parent.call(this, 'u-table');
				let style = {};
				if (this.parent) {
					// 将父组件的相关参数，合并到本组件
					if (this.width != "auto") style.flex = `0 0 ${this.width}`;
					style.textAlign = this.parent.align;
					if (this.parent.fontSize) style.fontSize = this.parent.fontSize + 'rpx';
					if(this.parent.padding) style.padding = this.parent.padding;
					// if (this.parent.borderColor) {
					// 	style.borderBottom = `solid 1px ${this.parent.borderColor}`;
					// 	style.borderRight = `solid 1px ${this.parent.borderColor}`;
					// }
					if (this.parent.color) style.color = this.parent.color
					if (this.parent.cTheme === 'care') {
						style.fontWeight = '600'
					}else {
						style.fontWeight = '500'
					}
				}
				return style;
			}
		},
		created() {
			this.parent = false;
		},
		// mounted() {
		// 	this.parent = this.$u.$parent.call(this, 'u-table');
		// 	if (this.parent) {
		// 		// 将父组件的相关参数，合并到本组件
		// 		let style = {};
		// 		if (this.width != "auto") style.flex = `0 0 ${this.width}`;
		// 		style.textAlign = this.parent.align;
		// 		// style.fontSize = this.parent.fontSize + 'rpx';
		// 		style.padding = this.parent.padding;
		// 		// style.borderBottom = `solid 1px ${this.parent.borderColor}`;
		// 		// style.borderRight = `solid 1px ${this.parent.borderColor}`;
		// 		// style.color = this.parent.color;
		// 		if (this.parent.cTheme === 'care') {
		// 			style.fontWeight = '600'
		// 		}else {
		// 			style.fontWeight = '500'
		// 		}
		// 		this.tdStyle = style;
		// 	}
		// }
	};
</script>

<style lang="scss" scoped>
	@import "../../libs/css/style.components.scss";

@include themify($themes) {
	.u-td {
		@include vue-flex;
		flex-direction: column;
		flex: 1;
		justify-content: center;
		font-size: themed('font-size-14');
		color: themed('u-content-color');
		align-self: stretch;
		box-sizing: border-box;
		// height: 100%;

		// &--default {
		// 	padding: themed('grid-size-6') themed('grid-size-4');
		// 	border-right: solid 1px themed('u-border-color-disabled');
		// 	border-bottom: solid 1px themed('u-border-color-disabled');
		// }

		// &--primary {
		// 	padding: themed('grid-size-6') themed('grid-size-4');
		// 	border-right: solid 1px themed('u-type-primary');
		// 	border-bottom: solid 1px themed('u-type-primary');
		// }

		// &--warning {
		// 	padding: themed('grid-size-6') themed('grid-size-4');
		// 	border-right: solid 1px themed('u-type-warning');
		// 	border-bottom: solid 1px themed('u-type-warning');
		// }
	}
}
</style>
