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

const {t} = useI18n();
const emit = defineEmits(['close'])

const configStore = useConfigStore()

const show = ref(false);

const formData = reactive({
  rejectReason: '',
  orderId: ''
})

function onOpen(orderId: string) {
  formData.orderId = orderId
  show.value = true;
}

function handleClose() {
  show.value = false;
}

function handleSubmit() {
  if (!formData.rejectReason) {
    uni.showToast({
      title: t('pages-user.order.toast.refuseReasonRequired'),
      icon: 'none'
    })
    return
  }
  appMerchantOrderRejectRefundPost({
    body: {
      ...formData
    }
  }).then(res => {
    uni.showToast({
      title: t('pages-user.order.toast.refuseSuccess'),
      icon: 'none'
    })
    emit('close')
    handleClose()
  })
}

defineExpose({
  onOpen,
});
</script>

<template>
  <wd-popup v-model="show" custom-style="border-radius:32rpx 32rpx 0 0;" position="bottom" @close="handleClose">
    <view class="px-30rpx pt-40rpx relative">
      <view class="text-34rpx text-#333 font-bold text-center mb-37rpx">{{ t('pages-user.order.refuseReason') }}</view>

      <image class="w-28rpx h-28rpx absolute top-40rpx right-30rpx" src="@img/chef/100404.png"
             @click="handleClose"></image>

      <view
          class="min-h-234rpx box-border bg-#F7F7F7 rounded-14rpx overflow-hidden px-18rpx py-10rpx mb-36rpx"
      >
        <wd-textarea
            v-model="formData.rejectReason"
            :maxlength="100"
            :placeholder="t('pages-user.order.toast.refuseReasonRequired')"
            auto-height
            custom-class="!bg-#F7F7F7"
            custom-textarea-container-class="!bg-#F7F7F7"
            no-border
        />
      </view>

      <wd-button block custom-class="!h-98rpx !text-30rpx !font-bold !rounded-16rpx !bg-#14181B"
                 @click="handleSubmit">
        {{ t('common.submit') }}
      </wd-button>

      <view :style="[configStore.iosSafeBottomPlaceholder]"></view>
    </view>
  </wd-popup>
</template>

<style lang="scss" scoped>

</style>