<template>
  <div id="right-component">
    <div class="left">
      <m-card title="美丽街区-美丽家园">
        <div class="info">
          <div v-for="item in beauty" :key="item.name">
            <p>{{item.name}}</p>
            <p><m-count class="count" :value="item.value" /></p>
          </div>
        </div>
      </m-card>
      <m-card title="智慧养老">
        <OldScreen />
      </m-card>
    </div>
    <div class="right">
      <m-card title="单兵指挥">
        <Command />
      </m-card>
      <m-card title="网格事件">
        <GridManage @select="$emit('grid', $event)"/>
      </m-card>
    </div>
  </div>
</template>

<script>
import OldScreen from '../components/old-screen'
import Command from '../components/command'
import GridManage from '../components/grid-manage'
export default {
  name: 'RightComponent',
  components: {
    OldScreen,
    Command,
    GridManage,
  },
  data() {
    return {
      beauty: [
        {name: '2018年完成数', value: 7},
        {name: '2019年完成数', value: 1},
        {name: '2020年完成数', value: 1},
      ],
    }
  },
}
</script>

<style lang="stylus" scoped>
#right-component
  display flex
  z-index 99
  width 100%
  height calc(100vh - 0.5rem)
  position relative
  flex-wrap wrap
  >div
    width calc(33.3vw / 2)
    height 100%
    &.left
      >div
        height 88%
        &:nth-child(1)
          height 12%
    &.right
      display flex
      flex-direction column
      >div
        &:nth-child(1)
          height 22.5%
        &:nth-child(2)
          flex 1
    .info
      width 80%
      display flex
      justify-content space-between
      >div
        p
          color $fontColor
          .count
            color $color-yellow
            font-size .14rem
            padding-left .05rem
</style>
