<template>
  <view class="remain-span">
    <view v-if="status === 2">
      <uni-tag text="已完成" type="success" />
    </view>
    <view v-else-if="status === 3">
      <uni-tag text="异常" type="error" />
    </view>
    <template v-else>
      <view v-if="isTimeout">
        <uni-tag text="超时" type="error" />
      </view>
      <view v-else>
        <uni-tag :text="'剩余' + remainDays + '天'" type="info" />
      </view>
    </template>
  </view>
</template>

<script>
export default {
  name: 'ExpressRemainTime',
  props: {
    planDate: {
      type: [String, Date],
      required: false
    },
    status: {
      type: Number,
      required: true
    }
  },
  computed: {
    remainDays() {
      if (!this.planDate) return '-';
      const now = new Date();
      const plan = new Date(this.planDate);
      const diff = plan.getTime() - now.getTime();
      return Math.ceil(diff / (1000 * 60 * 60 * 24));
    },
    isTimeout() {
      if (!this.planDate) return false;
      const now = new Date();
      const plan = new Date(this.planDate);
      return now.getTime() > plan.getTime();
    }
  }
}
</script>

<style scoped>
.remain-span {
  display: inline-block;
}
</style>
