<template>
  <div :class="config.classText.join(' ')">
    <div class="add-wechat-button-wrapper">
      <!-- 文字样式按钮 -->
      <button 
        v-if="config.buttonStyle === 'text'"
        class="add-wechat-button text-style"
        :style="{ 
          backgroundColor: config.buttonColor,
          color: config.buttonTextColor
        }"
        @click="handleClick"
      >
        {{ config.buttonText }}
      </button>

      <!-- 图片样式按钮 -->
      <img 
        v-else-if="config.buttonStyle === 'image'"
        :src="config.buttonImage || require('@/assets/images/default.jpg')"
        class="add-wechat-button image-style"
        @click="handleClick"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'h5-add-wechat-button',
  props: {
    config: {
      type: Object,
      default: () => {
        return {
          classText: ['parent-div'],
          buttonStyle: 'text',
          buttonText: '提交',
          buttonColor: '#FF5A5A',
          buttonTextColor: '#ffffff',
          buttonImage: ''
        }
      }
    }
  },
  methods: {
    handleClick() {
      // 点击事件可在此处理
    }
  }
}
</script>

<style src="./css/base.css"></style>
<style lang="scss" scoped>
.add-wechat-button-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.add-wechat-button {
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &.text-style {
    width: 100%;
    padding: 12px 16px;
    font-weight: 600;
    
    &:hover {
      opacity: 0.9;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    &:active {
      opacity: 0.8;
      transform: translateY(0);
    }
  }
  
  &.image-style {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    
    &:hover {
      opacity: 0.9;
      transform: scale(1.02);
    }
    
    &:active {
      opacity: 0.8;
      transform: scale(1);
    }
  }
}
</style>
