<template>
  <div class="people">
    <div class="person" v-for="(data,i) in list" :key="i" :style="calcWidth()">
      <div v-if="data.title=='应急模式'" :style="`background-image:url(${require('@/assets/images/btn.png')})`"  @click="$emit('changeMode')" class="em-mode">
        应急模式
      </div>
      <div v-else-if="data.title=='更多'" class="more-btn">
        <span @click="$emit('more')">更多</span>
      </div>
      <template v-else>
        <img :src="require(`@/assets/images/${data.img}`)" />
        <div>
          <p>{{data.title}}</p>
          <span>{{data.name}}</span>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EmergencyCommand',
  props: {
    hideEmergency: {
      type: Boolean,
      default: false,
    }
  },
  methods: {
    calcWidth() {
      return {
        width: (100 / this.list.length) + '%'
      }
    },
  },
  computed: {
    list() {
      if(this.hideEmergency) {
        return this.$store.state.commandList.slice(0, 2)
      }
      return this.$store.state.commandList
    }
  },
}
</script>

<style lang="stylus" scoped>
.people
  width 100%
  height 100%
  display flex
  position relative
  .person
    display flex
    align-items center
    &:nth-child(3)
      cursor pointer
      &:hover
        p
          color gold
    >img
      width 2.5rem
      height @width
      margin-right 0.5rem
    >div
      p
        font-size 0.9rem
        color $fontColor
    .em-mode
      position absolute
      right 0
      bottom 0
      width 6rem
      height 2rem
      text-align center
      line-height @height
      background-size 100%
      color orange
    .more-btn
      position absolute
      right -0.4rem
      bottom -0.4rem
      span
        color $color-blue
        font-size .9rem
        cursor pointer
</style>
