<template>
  <div class="command">
    <div v-for="item in list" :key="item.label">
      <div><img :src="require(`@/assets/images/${item.img}`)" /></div>
      <div>
        <p>{{item.label}}</p>
        <p>{{item.name}}</p>
      </div>
    </div>
    <img @click="$store.commit('SET_COMMAND_MODAL', true)" class="img" src="@/assets/images/command3.png" />
  </div>
</template>

<script>
export default {
  name: 'Command',
  computed: {
    list() {
      const {currentStreetInfo, streetInfo} = this.$store.state
      const {master1, master2} = streetInfo[currentStreetInfo.id]
      return [
        {
          img: 'command1.png',
          label: '指挥长',
          name: master1,
        },
        {
          img: 'command2.png',
          label: '值班长',
          name: master2,
        },
      ]
    },
  }
}
</script>

<style lang="stylus" scoped>
.command
  display flex
  justify-content space-between
  align-items center
  .img
    width .4rem
    height @width
  >div
    width 40%
    height 100%
    display flex
    >div
      &:first-child
        flex 1
        background #1E4063
        $flex-center()
        >img
          width 70%
      &:last-child
        flex 1.2
        background $cardBg
        display flex
        flex-direction column
        justify-content space-around
        padding-left .1rem
        >p
          &:first-child
            color $fontColor
          &:last-child
            font-size .11rem
  >img
    cursor pointer
    transition transform .3s ease-in-out
    &:hover
      transform rotate(180deg)
</style>
