<template>
  <div class="seat-div">
    <div class="seat-svg">
      <svg-icon :class="'seat-'+seatStatus" icon-class="icon-seat" class="icon-seat"/>
    </div>
    <div class="seat-text">
      {{ agentName }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'Seat',
  props: {
    seatStatus: {
      type: String,
      default: 'busy'
    },
    agentName: {
      type: String,
      default: '6042'
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$iconsize:80px;
.seat-div{
  width:100%;
  margin-bottom: 20px;
  display: inline-block;
  .seat-svg{
    text-align: center;
  }
  .icon-seat{
    width: $iconsize;
    height:$iconsize;
    font-size:$iconsize;
  }
  .seat-offline{
    color:grey;
  }
  .seat-online{
    color:#409EFF;
  }
  .seat-busy{
    color:#ff0000;
  }
  .seat-showbusy{
    color:#ffff00;
  }
  .seat-text{
    margin-top: 10px;
    text-align: center;
  }
}

</style>