<template>
  <div class="bg-white border-box rounded-12 p-12 mb-12">
    <div class="flex flex-items-center flex-justify-between">
      <div class="flex flex-items-center">
        <span class="font-size-16 color-171717 line-height-24 font-500">
          订单金额
        </span>
        <span class="amt font-size-18 font-bold color-FF3D60 ml-4">
          {{ orderData.payAmt }}
        </span>
      </div>
    </div>
    <div
      v-if="orderData.orderStatus === '0'"
      class="font-size-11 color-99A0AE mt-4"
    >
      超时后，订单将自动取消
    </div>
    <div
      v-if="['1', '2'].includes(orderData.orderStatus)"
      class="border-box border-top flex flex-items-center flex-justify-between font-size-12 pt-12 mt-12"
    >
      <div class="color-525866">取消政策及说明</div>
      <div class="flex flex-items-center" @click="emit('click')">
        <span class="theme-color-500 mr-4">查看详情</span>
        <uni-icons type="right" size="12" color="#99A0AE" />
      </div>
    </div>
  </div>
</template>

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

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>
