<template>
  <div class>
    <span class="timebox">{{ timedata.deadline }}秒</span>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch, defineEmits, defineProps } from 'vue'
const props = defineProps({
  timedata: {
    type: Object,
    default: () => {
      return {
        isfinish: true,
        deadline: 60,
        timer: null,
      }
    },
  },
})
// const deadline = ref(60)
onMounted(() => {
  setDeadline()
})
const setDeadline = () => {
  props.timedata.timer = setInterval(() => {
    props.timedata.deadline--
    console.log(props.timedata.deadline)
    if (props.timedata.deadline <= 0) {
      props.timedata.deadline = 60
      props.timedata.isfinish = true
      clearInterval(props.timedata.timer)
    }
  }, 1000)
}
</script>

<style scoped lang="less">
.timebox {
  display: inline-block;
  width: 72px;
  text-align: center;
}
</style>
