<template>
  <view class="share-actions">
    <view v-if="showSave" class="action-btn save-btn" @click="handleSave">
      <text class="btn-text">{{ saveText }}</text>
    </view>
    <button 
      v-if="showShare" 
      class="action-btn share-btn" 
      open-type="share"
    >
      <text class="btn-text">{{ shareText }}</text>
    </button>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  // 是否显示保存按钮
  showSave: {
    type: Boolean,
    default: true
  },
  // 是否显示分享按钮
  showShare: {
    type: Boolean,
    default: true
  },
  // 保存按钮文字
  saveText: {
    type: String,
    default: '保存图片'
  },
  // 分享按钮文字
  shareText: {
    type: String,
    default: '分享微信'
  }
})

const emit = defineEmits(['save', 'share'])

function handleSave() {
  emit('save')
}
</script>

<style scoped>
.share-actions {
  display: flex;
  gap: 20rpx;
  padding: 0 30rpx;
}

.action-btn {
  flex: 1;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12rpx;
  font-size: 30rpx;
}

.save-btn {
  border: 2rpx solid #0074ff;
  background: transparent;
}

.save-btn .btn-text {
  color: #0074ff;
}

.share-btn {
  background: #0074ff;
  border: none;
  padding: 0;
  line-height: normal;
}

.share-btn::after {
  border: none;
}

.share-btn .btn-text {
  color: #ffffff;
}
</style>
