<template>
  <van-notice-bar left-icon="warning-o">
    <template #default>
      <div v-if="countdownFinished">
        <span>有效支付时间已过期</span>
      </div>
      <div v-else>
        <div style="display: inline-block">请在&nbsp;&nbsp;</div>
        <div style="display: inline-block">
          <van-count-down
              style="color: orangered"
              :time="60 * 15 * 1000"
              format="mm分ss秒"
              @finish="countDownFinish"
          />
        </div>
        <div style="display: inline-block">&nbsp;&nbsp;内完成支付</div>
      </div>
    </template>
  </van-notice-bar>
</template>

<script setup>
import {ref} from "vue";

const emits = defineEmits(['onFinish'])

const countdownFinished = ref(false)
const countDownFinish = () => {
  countdownFinished.value = true
  emits('onFinish')
}
</script>