<template>
  <div class="right-component">
    <p class="title">发现督查</p>
    <div>
      <div class="left">
        <m-card title="智能发现"><SmartDiscover /></m-card>
        <m-card title="投诉报修"><ComplaintRepair /></m-card>
      </div>
      <div class="right">
        <m-card title="主动巡检"><Patrol @select="$emit('patrol', $event)" /></m-card>
        <m-card title="联勤联动"><Combine @select="$emit('handle', $event)"/></m-card>
        <m-card title="鹰眼监控">
          <div class="monitor-video">
            <div v-for="(img, i) in imgs" @click="handleClick(i)" :key="img" :style="`background-image: url(${require(`@/assets/images/${img}`)})`">
              <div><img src="@/assets/images/play.png"/></div>
            </div>
          </div>
        </m-card>
      </div>
    </div>
  </div>
</template>

<script>
import SmartDiscover from './smart-discover'
import ComplaintRepair from './complaint-repair'
import Patrol from './patrol'
import Combine from './combine'
export default {
  name: 'RightComponent',
  components: {
    SmartDiscover,
    ComplaintRepair,
    Patrol,
    Combine,
  },
  data() {
    return {
      imgs: ['monitor1.png', 'monitor2.png', 'monitor3.png', 'monitor4.png']
    }
  },
  methods: {
    handleClick(i) {
      const {id} = this.$store.state.videoInfo[i]
      this.$ajax.get({
        url: this.$api.GET_VIDEO_URL + id,
        showLoading: true,
      }).then(res => {
        this.$emit('video', this.$com.confirm(res, 'payload.url'))
      })
    }
  },
}
</script>

<style lang="stylus" scoped>
.right-component
  z-index 99
  background-image url('../../assets/images/component-bg.png')
  background-repeat no-repeat
  background-size 100% 100%
  width 100%
  height calc(100vh - 0.5rem)
  position relative
  padding .15rem .1rem .1rem
  .title
    position absolute
    text-align center
    left 0
    right 0
    margin 0 auto
    font-size .14rem
    top -0.1rem
    text-shadow 0 0 .05rem #3391FF
    font-weight bold
  >div
    display flex
    width 100%
    height 100%
    >div
      flex 1
      &.left
        >div
          &:nth-child(1)
            height 70%
          &:nth-child(2)
            height 30%
      &.right
        >div
          &:nth-child(1)
          &:nth-child(2)
            height 40%
          &:nth-child(3)
            height 20%
  .monitor-video
    display flex
    flex-wrap wrap
    align-items center
    >div
      width calc((100% - .3rem) / 4)
      height 80%
      cursor pointer
      background-size cover
      background-repeat no-repeat
      position relative
      +div
        margin-left .1rem
      >div
        width 100%
        height 100%
        background rgba(0,0,0,0)
        $flex-center()
        transition background .3s ease-in-out
        >img
          width .3rem
          height @width
          opacity 0
          transition opacity .3s ease-out
      &:hover
        >div
          background rgba(0,0,0,.5)
          >img
            opacity 1
</style>
