<template>
  <div class="show-div">
    <div v-for="item in list" :key="item.value" class="item-div">
      <svg-icon v-if="item.icon" :class="'seat-'+item.icon" icon-class="icon-seat" class="icon-seat"/>
      <div class="item-txt">{{ item.label }} : {{ data[item.value] }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AllShow',
  data() {
    return {
      list: [
        { label: '座席总数', value: 'all', icon: '' },
        { label: '签出总数', value: 'signout', icon: 'offline' },
        { label: '签入总数', value: 'signin', icon: 'online' },
        { label: '示闲总数', value: 'showidle', icon: 'showidle' },
        { label: '示忙总数', value: 'showbusy', icon: 'showbusy' },
        { label: '忙碌总数', value: 'busy', icon: 'busy' },
        { label: '等待总数', value: 'wait', icon: 'wait' }
      ],
      data: {
        all: 8,
        signout: 0,
        signin: 1,
        showidle: 2,
        showbusy: 5,
        busy: 1,
        wait: 0
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .show-div{
    width: 100%;
    background-color: #66b1ff;
    padding: 5px 20px;
    display: flex;
    justify-content: space-between;
    .item-div{
      font-size:16px;
      line-height: 2;
      display: inline-block;
      .icon-seat{
        width: 30px;
        text-align: center;
      }
      .item-txt{
        display: inline-block;
        color:#ffffff;
      }
    }
  }
  .seat-offline{
    color:grey;
  }
  .seat-online{
    color:#409EFF;
  }
  .seat-busy{
    color:#ff0000;
  }
  .seat-showbusy{
    color:#ffff00;
  }
  .seat-showidle{
    color: #58da50;
  }
  .seat-wait{
    color:#fab6b6;
  }
</style>