<template>
  <span class="stay" v-if="stay"> 留 </span>
  <span class="over" v-if="over"> 结 </span>
  <span class="need" v-if="need"> 待 </span>
  <span class="xiu" v-if="xiu"> 修 </span>
</template>

<script setup name="Tag">
  import { computed } from 'vue';
  const props = defineProps({
    row: Object,
  });
  const stay = computed(() => {
    if (props.row && props.row.caseStatus && props.row.caseStatus === 'stay') {
      return true;
    }
    return false;
  });
  const over = computed(() => {
    if (props.row && props.row.repayStatus && props.row.repayStatus === 'over') {
      return true;
    }
    return false;
  });
  const need = computed(() => {
    if (props.row && props.row.repairStatus && props.row.repairStatus === 'un_repair') {
      return true;
    }
    return false;
  });
  const xiu = computed(() => {
    if (props.row && props.row.repairStatus && props.row.repairStatus === 'repaired') {
      return true;
    }
    return false;
  });
</script>
<style lang="scss" scoped>
  .stay {
    padding: 0 3px;
    line-height: 18px;
    display: inline-block;
    background: #0267ff;
    color: #fff;
    margin-left: 2px;
  }
  .over {
    padding: 0 3px;
    line-height: 18px;
    display: inline-block;
    background: #f12d2d;
    color: #fff;
    margin-left: 2px;
  }
  .need {
    padding: 0 3px;
    line-height: 18px;
    display: inline-block;
    color: rgb(0, 0, 0);
    margin-left: 2px;
    background: #cbec10;
  }
  .xiu {
    padding: 0 3px;
    line-height: 18px;
    display: inline-block;
    color: rgb(0, 0, 0);
    margin-left: 2px;
    background: #0af1b3;
  }
</style>
