<template>
  <div class="right-component">
    <div class="left">
      <m-card title="网格管理"><GridManagement /></m-card>
      <m-card title="智能发现"><SmartDiscover /></m-card>
      <m-card title="联勤联动" showTab><Combine @select="$emit('handle', $event)"/></m-card>
    </div>
    <div class="right">
      <m-card title="投诉报修"><ComplaintRepair /></m-card>
      <!-- <m-card title="专项/专题检查"><SpecialInspection /></m-card> -->
      <m-card title="主动巡检"><Patrol @select="$emit('patrol', $event)" /></m-card>
      <m-card title="鹰眼监控" v-if="$store.state.currentStreetInfo.name === '新江湾城街道'">
        <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 class="bottom">
      <m-card title="专项应用"><Application /></m-card>
    </div>
  </div>
</template>

<script>
import GridManagement from './grid-management'
import SmartDiscover from './smart-discover'
import ComplaintRepair from './complaint-repair'
import Patrol from './patrol'
import Combine from './combine'
import Application from './application'
import SpecialInspection from './special-inspection'
export default {
  name: 'RightComponent',
  components: {
    GridManagement,
    SmartDiscover,
    ComplaintRepair,
    Patrol,
    Combine,
    Application,
    SpecialInspection
  },
  data() {
    return {
      imgs: ['monitor1.png', 'monitor2.png', 'monitor3.png', 'monitor4.png']
    }
  },
  methods: {
    handleClick(i) {
      const {id, location} = 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'), location)
      })
      // this.$emit('video', 'http://10.216.71.20:83/openUrl/TMIXpTy/live.m3u8')
    }
  },
}
</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 50%
    width calc(33.3vw / 2)
    height 80%
    &.left
      >div
        &:nth-child(1)
        &:nth-child(2)
          height 37%
        &:nth-child(3)
          height 26%
    &.right
      display flex
      flex-direction column
      >div
        &:nth-child(1)
          height 37%
        &:nth-child(2)
          flex 1
        &:nth-child(3)
          height 26%
    &.bottom
      width 100%
      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>
