<template>
  <div :class="current?'current-seat':''" class="seat-div" @click.native="clickSeat">
    <div class="seat-svg" @click="clickSeat">
      <svg-icon :class="'seat-'+seatStatus" icon-class="icon-seat" class="icon-seat"/>
    </div>
    <div class="seat-text">
      {{ data.exten?data.exten:i }}【{{ data.name?data.name:'--' }}】
    </div>
  </div>
</template>

<script>
export default {
  name: 'Seat',
  // filters: {
  //   statusFilter(val) {
  //     if (val.state !== '空闲') {
  //       return 'busy'
  //     }
  //   }
  // },
  props: {
    data: {
      type: Object,
      default: function() {
        return {
          state: '',
          busy: '',
          exten: '',
          name: '--',
          loginId: ''
        }
      }
    },
    i: {
      type: String,
      default: ''
    },
    current: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    seatStatus: function() {
      if (this.data.loginId) {
        if (this.data.state !== '空闲') {
          return 'busy'
        } else {
          if (this.data.busy) {
            return 'showbusy'
          } else {
            return 'online'
          }
        }
      } else {
        return 'offline'
      }
    }
  },
  methods: {
    clickSeat() {
      this.$emit('detail', this.data.loginId, this.data.name, this.data.exten, this.data.state)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$iconsize:80px;
.seat-div{
  width:100%;
  margin-bottom: 10px;
  display: inline-block;
  padding:10px;
  .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;
  }
}
  .seat-div:hover{
    cursor:pointer;
  }
  .current-seat{
    background-color: #deebff;
  }

</style>