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

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

<style lang="scss" scoped>
	@import "../../libs/css/style.components.scss";
@include themify($themes) {

	.u-th {
		@include vue-flex;
		flex-direction: column;
		flex: 1;
		justify-content: center;
		font-size: themed('font-size-14');
		color: themed('u-main-color');
		font-weight: 500;
		background-color: themed('u-bg-color');
		// &--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>
