import { defineComponent, computed, h, provide } from 'vue'

export default defineComponent({
	name: 'EsRow',
	props: {
		tag: {
			type: String,
			default: 'div',
		},
		gutter: {
			type: Number,
			default: 0,
		},
		type: {
			type: String,
			default: '',
		},
		justify: {
			type: String,
			default: 'start',
		},
		align: {
			type: String,
			default: 'top',
		},
	},
	setup(props, { slots }) {
		provide('ElRow', props.gutter)

		/**
		 * @description: 属性值首字符拼接
		 * @param {*} str
		 * @return {*}
		 */
		const strConcat = str => {
			const arr = str.split('-')
			let text = ''
			for (let index = 0; index < arr.length; index++) {
				const element = arr[index]
				text += element.substr(0, 1)
			}
			return text
		}

		const style = computed(() => {
			const ret = {
				marginLeft: '',
				marginRight: '',
			}
			if (props.gutter) {
				ret.marginLeft = `-${props.gutter / 2}px`
				ret.marginRight = ret.marginLeft
			}
			return ret
		})

		return () =>
			h(
				props.tag,
				{
					class: [
						'es-row',
						props.justify !== 'start'
							? `es-jc--${strConcat(props.justify)}`
							: '',
						props.align !== 'top'
							? `es-ai--${strConcat(props.align)}`
							: '',
						props.type === 'flex' ? 'es-flex' : '',
					],
					style: style.value,
				},
				slots.default?.(),
			)
	},
})