<script lang="ts" setup>
import {useConfigStore} from "@/store";

const props = withDefaults(defineProps<{
  text: string,
  fixed?: boolean,
  loading?: boolean
}>(), {
  fixed: false,
  loading: false
})

const emit = defineEmits<{
  click: [event: any]
}>()

const configStore = useConfigStore()

function handleClick(event: any) {
  emit('click', event)
}
</script>

<template>
  <view class="">
    <view v-if="props.fixed" :style="[configStore.iosSafeBottomPlaceholder]" class="h-118rpx"></view>
    <view :style="[props.fixed&&{
      position: 'fixed',
      bottom: '0',
      left: '0',
      right: '0',
    }]" class="z-1 bg-#fff shadow-[0rpx_-6rpx_24rpx_rgba(0,0,0,0.16)]">
      <view class="h-118rpx p-[10rpx+30rpx] box-border">
        <wd-button :loading="props.loading" block
                   custom-class="!h-98rpx !text-30rpx !lh-42rpx !font-bold !rounded-20rpx !bg-#14181B"
                   @click="handleClick">
          {{ props.text }}
        </wd-button>
      </view>
      <view :style="[configStore.iosSafeBottomPlaceholder]"></view>
    </view>
  </view>
</template>

<style lang="scss" scoped>

</style>
