<template>
  <view v-if="realDuration && planDuration" class="box shadow-lg">
    <!-- 任务时长延迟插件 -->
    <!-- 超时 -->
    <span class="font-bold text-green-500" v-if="realDuration - 0 > planDuration - 0">
      +{{ $time.formatDuration(realDuration - planDuration) }}
    </span>
    <!-- 延时 -->
    <span class="font-bold text-red-500" v-if="realDuration - 0 < planDuration - 0">
      -{{ $time.formatDuration(planDuration - realDuration) }}
    </span>
  </view>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({ task: { default: () => {}, type: Object } });

const realDuration = computed(() => props.task.realDuration);
const planDuration = computed(() => props.task.planDuration);

</script>

<style scoped lang="scss">
  .box{
    border-radius: 8px;
    background: #fff;
    padding: 16px;
    overflow: hidden;
  }
</style>
