<template>
  <div class="order-status-btn">
    <div v-if="type == 1">待派单</div>
    <div class="take" v-if="type == 2">待接单</div>
    <div class="maintain" v-if="type == 3">维修中</div>
    <div class="check" v-if="type == 4">待审核</div>
    <div class="suc" v-if="type == 5">已完成</div>
  </div>
</template>

<script setup lang="ts">
  interface IProps {
    type?: number | string
  }

  const { type } = withDefaults(defineProps<IProps>(), {
    type: 2
  })
</script>

<style scoped lang="less">
  .order-status-btn {
    width: 100px;
    margin: 0 auto;
    div {
      position: relative;
      padding-left: 20px;
      color: #b07451;
      &::after {
        position: absolute;
        left: 20%;
        top: 50%;
        transform: translateY(-50%);
        content: '';
        width: 12px;
        height: 10px;
        background: #b07451;
        border-radius: 3px;
      }
    }
    .check {
      color: #13c2c2;
      &::after {
        background: #13c2c2;
      }
    }
    // 待接单
    .take {
      color: #2f54eb;
      &::after {
        background: #2f54eb;
      }
    }
    // 维修中
    .maintain {
      color: #fa8c16;
      &::after {
        background: #fa8c16;
      }
    }

    .suc {
      color: #74c276;
      &::after {
        background-image: url('../../assets/img/order-suc.svg');
        background-size: 100% 100%;
        width: 15px;
        height: 15px;
        top: 55%;
        left: 20%;
        background-color: transparent;
      }
    }
  }
</style>
