<template>
  <span>
    <el-tag v-if="status === 2" type="success">已完成</el-tag>
    <el-tag v-else-if="status === 3" type="danger">异常</el-tag>
    <template v-else>
      <el-tag v-if="isTimeout" type="danger">超时</el-tag>
      <el-tag v-else type="info">剩余{{ remainDays }}天</el-tag>
    </template>
  </span>
</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> 