<template>
  <view 
    :class="[
      'position-relative d-flex flex-row radius-base bg-light-light-primary p-1 pt-25 pb-25 gap-xs',
      ...(buttonStyle === 'large-bg' ? ['border-all-base', 'shadow-base'] : []),
    ]"
    :style="{
      width: size === 100 ? '100%' : `calc(${size}% - 15rpx)`,
      ...(buttonStyle === 'text' ? {
        justifyContent: 'center',
        alignItems: 'center',
      } : {}),
      ...(buttonStyle === 'large-bg' ? {
        padding: '20rpx',
        aspectRatio: '172 / 100',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        backgroundImage: `url(${icon})`,
      } : {}),
    }"
    @click="onClick"
  >
    <Image v-if="buttonStyle === 'text'" :src="icon" width="40rpx" height="40rpx" />
    <text :class="[
      buttonStyle === 'large-bg' ? 'size-ll font-songti font-bold color-large-title' : 'size-l color-primary'
    ]"
    >
      {{ title }}
    </text>
    <Image 
      v-if="buttonStyle === 'text' && bg" :src="bg" 
      :width="160" 
      :height="90" 
      :innerStyle="{
        position: 'absolute',
        bottom: 0,
        right: 0,
      }"
    />
  </view>
</template>

<script setup lang="ts">
import Image from '@/components/basic/Image.vue';
import type { PropType } from 'vue';

const props = defineProps({
  title: {
    type: String,
    default: '探索文化地图'
  },
  bg: {
    type: String,
    default: ''
  },
  icon: {
    type: String,
    default: 'https://mncdn.wenlvti.net/app_static/minnan/images/home/IconMap.png'
  },
  size: {
    type: Number,
    default: 100
  },
  buttonStyle: {
    type: String as PropType<'text'|'large-bg'>,
    default: 'text'
  },
})

const emit = defineEmits(['click'])

const onClick = () => {
  emit('click')
}

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

<style scoped lang="scss">
.color-large-title {
  color: #893400;
}
</style>