<template>
  <BackgroundImageButton 
    :backgroundImage="primary ? 'https://xy.wenlvti.net/app_static/images/FrameButtonPrimary.png' : 
      'https://xy.wenlvti.net/app_static/images/FrameButton.png'"
    :backgroundCutBorder="32"
    :backgroundCutBorderSize="36"
    :padding="padding"
    :width="width"
    :touchable="!loading"
    center
    gap="gap.md"
    @click="emit('click')"
  >
    <ActivityIndicator v-if="loading" :size="size === 'large' ? 36 : 28" :color="primary ? 'white' : 'text.content'" />
    <Text :text="text" fontConfig="lightTitle" :fontSize="size === 'large' ? 36 : 28" :color="primary ? 'white' : 'text.content'" />
  </BackgroundImageButton>
</template>

<script setup lang="ts">
import ActivityIndicator from '@/components/basic/ActivityIndicator.vue';
import BackgroundImageButton from '@/components/basic/BackgroundImageButton.vue';
import Text from '@/components/basic/Text.vue';
import { computed } from 'vue';

const props = withDefaults(defineProps<{
  text: string;
  primary?: boolean;
  size?: 'large' | 'small';
  width?: string|number;
  innerStyle?: object;
  loading?: boolean;
}>(), {
  text: '去发布',
  primary: false,
  size: 'large',
}); 

const padding = computed(() => {
  if (props.size === 'large') {
    return [22, 36];
  } else {
    return [18, 20];
  }
});

const emit = defineEmits(['click']);

defineOptions({
  options: {
    virtualHost: true,
  },
})
</script>