<template>
  <m-card class="card" title="场景监控视频">
    <div class="nav">
      <!-- <a-select
        v-model:value="curScene"
        dropdown-class-name="community-video-selector-drop-down"
      >
        <a-select-option
          v-for="option in scenes"
          :key="option.value"
          :value="option.value"
        >
          {{ option.name }}
        </a-select-option>
      </a-select> -->
      <a-select
        v-model:value="curAddress"
        dropdown-class-name="community-video-selector-drop-down"
      >
        <a-select-option
          v-for="(option, i) in addresses"
          :key="i + '-' + option.value"
          :value="option.value"
        >
          {{ option.name }}
        </a-select-option>
      </a-select>
    </div>
    <div class="community-video">
      <!-- <div
        v-for="item in list"
        :key="item.name"
        :style="`background:url(${
          item.photo &&
          item.photo
            .replace('https://zhongbang.omniview.pro/', prefix)
            .replace('http://zhongbang.omniview.pro/', prefix)
        }) 100% / 100% 100% no-repeat`"
        @click="handleClick(item.video)"
      >
        <p>{{ item.name }}</p>
        <div class="mask">
          <img src="@/assets/images/play.png" />
        </div>
      </div> -->
      <template v-if="videoList.length > 0">
        <div
          v-for="item in videoList.slice(0, 3)"
          :key="item.name"
          @click="handleClick(item.video)"
        >
          <VideoComponent
            v-if="item.video"
            :video-src="item.video"
            autoplay="none"
            :controls="false"
          />
          <p>{{ item.name }}</p>
          <div class="mask">
            <img src="@/assets/images/play.png" />
          </div>
        </div>
      </template>
      <m-empty v-else />
    </div>
  </m-card>
  <m-modal v-model="showModal" title="视频" width="30%" offset="-70%">
    <VideoComponent v-if="showModal" :video-src="src" />
  </m-modal>
</template>

<script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue'
import VideoComponent from '../components/video-component.vue'
import store from '@/store'
import { useRoute } from 'vue-router'
import { ajax, api } from '@/ajax'

export default defineComponent({
  name: 'CommunityPhoto',
  components: { VideoComponent },
  setup() {
    const showModal = ref(false)
    const src = ref<string | null>(null)
    const prefix = computed(() => api.SOURCE_URL)
    const handleClick = async (video: string) => {
      // if (!id) return
      // const [{ remark2 }] = (
      //   await ajax.get({
      //     url: `http://10.39.25.33:81/njdl/imp/pc/njdl/equipment/getEquipmentVideoById?id=${id}`,
      //   })
      // ).data
      // src.value = remark2
      src.value =
        video &&
        video.replace('https://zhongbang.omniview.pro/', prefix.value) &&
        video.replace('http://zhongbang.omniview.pro/', prefix.value)
      showModal.value = true
    }
    const route = useRoute()
    const curId = computed(
      () => (route && route.query.id) || store.state.communityOptions[0].type
    )
    const list = ref<any[]>([])
    ajax
      .get({
        url: api.GET_MONITOR,
        params: {
          communityId: curId.value || undefined,
          pageSize: 9000,
        },
      })
      .then((res) => {
        list.value = (res?.data?.content || []).map((item: any) => ({
          name: `${item.buildingAddr}通道${item.channelNo}`,
          ...item,
        }))
        addresses.value.push(
          ...list.value.map((item: any) => ({
            name: item.name,
            value: item.name,
          }))
        )
        Promise.all(
          list.value.map((item) =>
            ajax.get({
              url: api.GET_VIDEO_URL.replace('{id}', item.id),
            })
          )
        ).then((res) => {
          const urls = res.map((item) => item?.data?.content || null)
          list.value.forEach((item, i) => {
            item.video = urls[i]
          })
          videoList.value = [...list.value]
        })
      })
    const curScene = ref('all')
    const curAddress = ref('all')
    const scenes = [{ name: '全部场景', value: 'all' }]
    const addresses = ref([{ name: '全部地址', value: 'all' }])
    const videoList = ref<any[]>([])
    watch(
      () => curAddress.value,
      (address: string) => {
        if (address === 'all') {
          videoList.value = list.value
        } else {
          videoList.value = list.value.filter((item) => item.name === address)
        }
      }
    )
    return {
      prefix,
      videoList,
      handleClick,
      showModal,
      src,
      scenes,
      addresses,
      curScene,
      curAddress,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'

.nav
  margin .04rem 0
  padding 0 .06rem
  >div
    width 100%
.community-video
  padding .05rem
  box-sizing border-box
  overflow hidden
  >div
    height 1.68rem
    // width 100%
    position relative
    cursor pointer
    margin-bottom .05rem
    overflow hidden
    .mask
      $center()
      position absolute
      top 0
      left 0
      width 100%
      height 100%
      opacity 0.8
      transition all .3s ease-in-out
      >img
        width .3rem
        height @width
        transition transform .3s ease-in-out
        transform-origin center center
    &:hover
      .mask
        opacity 1
        background-color rgba(0,0,0,0.4)
        >img
          transform scale(1.2) rotate(360deg)
    >p
      position absolute
      top .05rem
      left @top
      padding .04rem .1rem
      border-radius .14rem
      color #fff
      background rgba(0,0,0,0.6)
</style>
