<template>
  <div class="people">
    <div class="person" v-for="(data,i) in list" :key="i" :style="calcWidth()">
      <div v-if="data.title=='应急模式'"  @click="$emit('changeMode')" class="em-mode">
        <img src="@/assets/images/arrow.png"/>
        应急模式
        <img src="@/assets/images/arrow.png"/>
      </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
  .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
      span
        font-weight bold
    .em-mode
      display flex
      align-items center
      font-family $font-pang
      font-size 1.2rem
      color gold
      img
        width 1.2rem
        height 1rem
        margin-right 0.2rem
        &:last-child
          margin-right 0
          margin-left .2rem
          transform rotate(180deg)
</style>
