<template >
  <div>
    <ControlButton :icon="control.icon" v-for="control in controls">
    {{control.title}}
    </ControlButton>
  </div>
</template>
<script>
import deviceStateIcon from '@/assets/images/icon/device-state-icon.png'
import deviceWatchIcon from '@/assets/images/icon/device-watch-icon.png'
import fireIcon from '@/assets/images/icon/fire-icon.png'
import fireRoomIcon from '@/assets/images/icon/fire-room-icon.png'
import fireWayIcon from '@/assets/images/icon/fire-way-icon.png'

const ControlButton = {
  props: {
    icon: {
      type: String,
      default: ''
    }
  },
  render() {
    return (
      <div class="control-button">
        <div class="button">
          <img class="icon" src={this.icon} />
        </div>
        <div class="text">
        { this.$slots.default }
        </div>
      </div>
    )
  }
}

export default {
  name: 'ControlPanel',
  components: {
    ControlButton
  },
  data() {
    return {
      controls: [
        {
          title: '设备状态预警',
          icon: deviceStateIcon
        },
        {
          title: '设备监测预警',
          icon:  deviceWatchIcon
        },
        {
          title: '火警',
          icon: fireIcon
        },
        {
          title: '消防通道预警',
          icon: fireWayIcon
        },
        {
          title: '消控室预警',
          icon: fireRoomIcon
        },
      ]
    }
  },
  methods: {}
}
</script>

<style scoped lang='less'>
/deep/ .control-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .button {
    width: 42px;
    height: 37px;
    background: url('@/assets/images/btn-bg.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    .icon {
      width: 31px;
      height: 31px;
    }
    &:active {
      background: url('@/assets/images/btn-active-bg.png') no-repeat;
      background-size: 100% 100%;
    }

    &:hover {
      background: url('@/assets/images/btn-active-bg.png') no-repeat;
      background-size: 100% 100%;
    }
  }
  .text {
    margin: 10px 0px;
    font-size: 12px;
    color: #fff;
  }
}
</style>
