<template>
  <el-table-column label="工单状态" width="200">
    <template #default="{ row }">
      <div class="state" :class="[orderStateClass[row.state]]">{{ orderState[row.state] }}</div>
    </template>
  </el-table-column>
</template>

<script setup lang="ts">
  const orderStateClass: any = {
    1: 'state1',
    2: 'state2',
    3: 'state3',
    4: 'state4',
    5: 'state5'
  }
  const orderState: any = {
    1: '待派单',
    2: '待接单',
    3: '维修中',
    4: '待审核',
    5: '已完成'
  }
</script>

<style lang="less" scoped>
  .state {
    width: 70px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 7px;
    font-weight: 400;
  }
  .state1 {
    color: #ec615a;
    background-color: rgba(236, 97, 90, 0.2);
  }
  .state2 {
    color: rgba(206, 117, 236, 1);
    background-color: rgba(206, 117, 236, 0.2);
  }
  .state3 {
    color: #ec615a;
    background-color: rgba(236, 97, 90, 0.2);
  }
  .state4 {
    color: rgba(85, 113, 180, 1);
    background-color: rgba(85, 113, 180, 0.2);
  }
  .state5 {
    color: rgba(62, 201, 98, 1);
    background-color: rgba(62, 201, 98, 0.2);
  }
</style>
