<template>
	<div class="button-container" :class="{ 
      'read-more': type === 'read-more',
      'custom': type === 'custom'
    }" :style="customStyles" @click="handleClick">
		<div v-if="type === 'read-more'" class="read-more-wrapper">
			<span class="read-more-text">{{ text }}</span>
		</div>

		<div v-else-if="type === 'custom'" class="custom-wrapper" :style="innerStyles">
			<span class="custom-text" :style="textStyles">{{ text }}</span>
		</div>

		<button v-else class="button-element" :class="{ 
        'submit-btn': type === 'submit',
        'contact-btn': type === 'contact'
      }" :style="buttonStyles" @click="handleClick">
			{{ text }}
		</button>
	</div>
</template>

<script>
	export default {
		name: 'Button',
		props: {
			// 按钮类型
			type: {
				type: String,
				default: 'default', // read-more, submit, contact, custom
				validator: (value) => ['read-more', 'submit', 'contact', 'custom'].includes(value)
			},

			// 按钮文本
			text: {
				type: String,
				default: '按钮'
			},

			// 尺寸
			width: {
				type: String,
				default: ''
			},
			height: {
				type: String,
				default: ''
			},

			// 自定义样式
			backgroundColor: {
				type: String,
				default: ''
			},
			borderRadius: {
				type: String,
				default: ''
			},
			fontSize: {
				type: String,
				default: ''
			},
			fontColor: {
				type: String,
				default: ''
			},
			fontWeight: {
				type: String,
				default: ''
			},
			fontFamily: {
				type: String,
				default: ''
			},

			// READ MORE 特定样式
			readMoreWidth: {
				type: String,
				default: '10.42vw'
			},
			readMoreHeight: {
				type: String,
				default: '3.13vw'
			},

			// 联系按钮特定样式
			contactSize: {
				type: Object,
				default: () => ({
					width: '27.86vw',
					height: '5.42vw'
				})
			},

			// 禁用状态
			disabled: {
				type: Boolean,
				default: false
			}
		},

		computed: {
			customStyles() {
				const baseStyles = this.type === 'read-more' ? {
					width: this.readMoreWidth,
					height: this.readMoreHeight
				} : this.type === 'custom' ? {
					...this.contactSize
				} : {}

				return baseStyles
			},

			innerStyles() {
				return {
					backgroundColor: this.backgroundColor || 'rgba(0, 82, 217, 1)',
					borderRadius: this.borderRadius || '48px'
				}
			},

			textStyles() {
				return {
					fontSize: this.fontSize || '1.25vw',
					fontWeight: this.fontWeight || '700',
					fontFamily: this.fontFamily || '',
					color: this.fontColor || 'rgba(255, 255, 255, 1)'
				}
			},

			buttonStyles() {
				const styles = {}

				if (this.type === 'submit') {
					Object.assign(styles, {
						backgroundColor: 'rgba(0, 82, 217, 1)',
						borderRadius: '7px',
						fontSize: '1.25vw',
						fontWeight: '700',
						border: 'none',
						color: 'rgba(255, 255, 255, 1)'
					})
				} else if (this.type === 'contact') {
					Object.assign(styles, {
						backgroundColor: 'rgba(0, 82, 217, 1)',
						borderRadius: '48px',
						width: this.contactSize.width || '27.86vw',
						height: this.contactSize.height || '5.42vw',
						fontSize: '1.25vw',
						fontWeight: '700',
						border: 'none',
						color: 'rgba(255, 255, 255, 1)'
					})
				}

				// 覆盖默认值
				if (this.width) styles.width = this.width
				if (this.height) styles.height = this.height
				if (this.backgroundColor) styles.backgroundColor = this.backgroundColor
				if (this.fontSize) styles.fontSize = this.fontSize
				if (this.fontColor) styles.color = this.fontColor

				return styles
			}
		},

		methods: {
			handleClick(event) {
				if (this.disabled) return
				this.$emit('click', event)
			}
		}
	}
</script>

<style scoped>
	.button-container {
		cursor: pointer;
		user-select: none;
	}

	.button-container.read-more {
		background-color: #0052D9;
		background-repeat: no-repeat;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.button-element {
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		outline: none;
		transition: all 0.3s ease;
	}

	.button-element:hover:not(:disabled) {
		opacity: 0.8;
		transform: translateY(-1px);
	}

	.button-element:active:not(:disabled) {
		transform: translateY(0);
	}

	.button-element:disabled {
		cursor: not-allowed;
		opacity: 0.6;
	}

	.read-more-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.read-more-text {
		font-size: 0.93vw;
		font-family: 'Gilroy-Bold', sans-serif;
		font-weight: 700;
		color: rgba(255, 255, 255, 1);
		white-space: nowrap;
		text-align: center;
	}

	.custom-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		transition: all 0.3s ease;
	}

	.custom-wrapper:hover {
		opacity: 0.8;
		transform: translateY(-1px);
	}

	.custom-text {
		text-align: center;
		white-space: nowrap;
	}
</style>