<template>
  <div class="order-status-btn">
    <div v-if="type == 2" class="stop">已停止</div>
    <div class="in-execution" v-if="type == 1">执行中</div>
    <div class="non-execution" v-if="type == 0">未执行</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: #f5222d;
      &::after {
        position: absolute;
        left: 20%;
        top: 50%;
        transform: translateY(-50%);
        content: '';
        width: 12px;
        height: 10px;
        background: #f5222d;
        border-radius: 3px;
      }
    }
    .check {
      color: #13c2c2;
      &::after {
        background: #13c2c2;
      }
    }
    // 执行中
    .in-execution {
      color: #52c41a;
      &::after {
        background: #52c41a;
      }
    }

    .stop{
      color: #D32D26;
      &::after {
        background: #D32D26;
      }
    }
    // 未执行
    .non-execution {
      color: #bfbfbf;
      &::after {
        background: #bfbfbf;
      }
    }
  }
</style>
