<template>
  <div :class="`${namespace}-action-panel`">
    <ActionItem v-for="item in actions"
      :title="item.name"
      :icon="item.icon"
      :activeIcon="item.activeIcon"
      :key="item.name"
    />
  </div>
</template>

<script>
import ActionItem from './ActionItem.vue'
export default {
  name: 'ActionPanel',
  inject: ['namespace'],
  components: {
    ActionItem
  },
  data: () =>({
    actions: [
      {
        name: '消火栓',
        icon: require('@/assets/images/xf0.png'),
        activeIcon: require('@/assets/images/xf1.png'),
      },
      {
        name: '天然水源',
        icon: require('@/assets/images/shuiyuan0.png'),
        activeIcon: require('@/assets/images/shuiyuan1.png'),
      },
      {
        name: '微型消防站',
        icon: require('@/assets/images/weixing0.png'),
        activeIcon: require('@/assets/images/weixing1.png'),
      },
      {
        name: '物联网',
        icon: require('@/assets/images/wlwang0.png'),
        activeIcon: require('@/assets/images/wlwang1.png'),
      },
      {
        name: '消防车',
        icon: require('@/assets/images/xfc0.png'),
        activeIcon: require('@/assets/images/xfc1.png'),
      }
    ]
  })
}
</script>

<style scoped lang="less">
@import '@/assets/styles/config.less';

  .@{namespace}-action-panel { 
    height: 200px;
    width: 1200px;
    display: flex;
    justify-content: space-between;
  }
</style>
