<template>
  <div class="bg-white  rounded-[12px] p-[12px] mb-[12px]">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <span class="text-[16px] text-[#171717] leading-[24px] font-medium">
          {{ t("order.amount.title") }}
        </span>
        <span class="amt text-[18px] font-bold color-FF3D60 ml-[4px]">
          {{ orderData.payAmt }}
        </span>
      </div>
    </div>
    <div v-if="orderData.orderStatus === '0'" class="text-[11px] text-ink-400 mt-[4px]">
      {{ t("order.amount.autoCancel") }}
    </div>
    <div v-if="['1', '2'].includes(orderData.orderStatus)"
      class=" border-top flex items-center justify-between text-[12px] pt-[12px] mt-[12px]">
      <div class="text-ink-600">{{ t("order.amount.cancelPolicy") }}</div>
      <div class="flex items-center" @click="emit('click')">
        <span class="text-[#2D91FF] mr-[4px]">{{ t("order.amount.viewDetail") }}</span>
        <uni-icons type="right" size="12" color="#99A0AE" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const props = defineProps({
  orderData: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});

const emit = defineEmits(["click"]);
</script>

<style scoped lang="scss">
.amt {
  &::before {
    content: "¥";
    font-size: 16px;
    font-weight: 500;
  }
}
</style>
