<template>
  <div id="right-component">
    <div class="first">
      <img src="@/assets/images/edge.png" />
      <img src="@/assets/images/edge.png" />
      <img src="@/assets/images/edge.png" />
      <img src="@/assets/images/edge.png" />
      <m-card title="便民设施">
        <div class="info">
          <div v-for="item in convenient" :key="item.name">
            <p>{{item.name}}</p>
            <m-count class="count" :value="item.value" /> <span class="unit">人</span>
          </div>
        </div>
      </m-card>
      <m-card title="历史保护建筑">
        <div class="info three">
          <div v-for="item in building" :key="item.name">
            <p>{{item.name}}</p>
            <m-count class="count" :value="item.value" /> <span class="unit">人</span>
          </div>
        </div>
        <Carousel v-model="photo" loop autoplay>
          <CarouselItem v-for="photo in photos" :key="photo">
            <div class="photo-wrapper">
              <div class="photo" :style="`background-image:url(${require('@/assets/images/'+ photo[0])})`" />
              <div class="photo" :style="`background-image:url(${require('@/assets/images/'+ photo[1])})`" />
            </div>
          </CarouselItem>
        </Carousel>
      </m-card>
      <m-card title="地标性建筑">
        <Building />
      </m-card>
      <m-card title="微型消防站">
        <MicFire />
      </m-card>
    </div>
    <div class="left">
      <img src="@/assets/images/edge.png" />
      <img src="@/assets/images/edge.png" />
      <img src="@/assets/images/edge.png" />
      <img src="@/assets/images/edge.png" />
      <m-card title="美丽街区-美丽家园">
        <div class="beauty">
          <div v-for="item in beauty" :key="item.name" @click="$emit('beauty', item)">
            <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">
      <img src="@/assets/images/edge.png" />
      <img src="@/assets/images/edge.png" />
      <img src="@/assets/images/edge.png" />
      <img src="@/assets/images/edge.png" />
      <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'
import Building from '../components/building'
import MicFire from '../components/mic-fire'
export default {
  name: 'RightComponent',
  components: {
    OldScreen,
    Command,
    GridManage,
    Building,
    MicFire,
  },
  data() {
    return {
      photo: 1,
      photos: [
        ['photo1.jpg', 'photo2.jpg'],
        ['photo3.jpg', 'photo4.jpg'],
        ['photo5.jpg', 'photo6.jpg'],
        ['photo7.jpg', 'photo8.jpg'],
        ['photo9.jpg', 'photo10.jpg'],
        ['photo11.jpg', 'photo12.jpg'],
        ['photo13.jpg', 'photo14.jpg'],
      ],
      beauty: [
        {name: '2018年完成数', value: 12, key: 2018},
        {name: '2019年完成数', value: 8, key: 2019},
        {name: '2020年完成数', value: 2, key: 2020},
      ],
      convenient: [
        {name: '便利店', value: 6},
        {name: '早餐车', value: 0},
        {name: '公厕', value: 2},
        {name: '居民活动室', value: 12},
      ],
      building: [
        {name: '文保', value: 0},
        {name: '历保', value: 8},
        {name: '文历双保', value: 0},
      ],
    }
  },
}
</script>

<style lang="stylus" scoped>
#right-component
  display flex
  justify-content space-between
  z-index 99
  width 100%
  height calc(100vh - 0.5rem)
  position relative
  flex-wrap wrap
  .photo-wrapper
    display flex
    .photo
      flex 1
      background-position center
      background-size 100% 100%
      height 1rem
  >div
    width calc(49vw / 3.05)
    // width calc(33.3vw / 2)
    height 100%
    background rgba(6,34,67,.4)
    border .01rem solid rgba(91,213,255,.3)
    position relative
    >img
      width .1rem
      height @width
      position absolute
      z-index 9999
      &:nth-of-type(1)
        top -0.04rem
        left @top
      &:nth-of-type(2)
        transform rotate(90deg)
        top -0.04rem
        right @top
      &:nth-of-type(3)
        transform rotate(180deg)
        bottom -0.04rem
        right @bottom
      &:nth-of-type(4)
        transform rotate(270deg)
        bottom -0.04rem
        left @bottom
    &.first
      >div
        &:nth-of-type(1)
        &:nth-of-type(4)
          height 16%
        &:nth-of-type(2)
        &:nth-of-type(3)
          height 34%
    &.left
      display flex
      flex-direction column
      >div
        height 85%
        &:nth-of-type(1)
          flex 1
    &.right
      display flex
      flex-direction column
      >div
        &:nth-of-type(1)
          height 22%
        &:nth-of-type(2)
          flex 1
    .beauty
      width 80%
      display flex
      justify-content space-between
      >div
        padding .03rem .04rem
        cursor pointer
        transition background .2s, box-shadow .3s ease-in-out
        &:hover
          background $section-hover
          box-shadow -0.05rem .01rem .05rem .01rem rgba(0,0,0,0.8)
        p
          color $fontColor
          .count
            color $color-yellow
            font-size .14rem
            padding-left .05rem
    .info
      height .4rem
      background-image url(../../assets/images/four.png)
      background-size 100% 100%
      display flex
      align-items center
      margin-bottom .1rem
      &.three
        background-image url(../../assets/images/three.png)
        >div
          &:nth-of-type(2)
            margin-left -0.1rem
      >div
        flex 1
        text-align center
        padding-left .05rem
        &:nth-of-type(2)
          margin-left .1rem
        p
          color $fontColor
        .unit
          $unit()
        .count
          font-size .12rem
</style>
