<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-image: url('https://lanhu-oss-proxy.lanhuapp.com/40fca7311ab5e3d5eabe97a53becf2da');
  background-size: 100% 100%;
  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>
