<template>
  <div class="community-photo">
    <div
      v-for="item in list"
      :key="item.name"
      :style="`background:url(${item.photo}) 100% / 100% 100% no-repeat`"
      @click="handleClick(item.id)"
    >
      <p>{{ item.name }}</p>
      <div class="mask">
        <img src="@/assets/images/play.png" />
      </div>
    </div>
    <m-modal v-model="showModal" title="视频" width="50%">
      <VideoComponent v-if="showModal" :video-src="src" />
    </m-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import photo1 from '@/assets/images/community1.png'
import photo2 from '@/assets/images/community2.png'
import photo3 from '@/assets/images/community3.png'
import { ajax } from '@/ajax'
import VideoComponent from '../components/video-component.vue'

export default defineComponent({
  name: 'CommunityPhoto',
  components: { VideoComponent },
  setup() {
    const showModal = ref(false)
    const src = ref<string | null>(null)
    const handleClick = async (id: 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
      showModal.value = true
    }
    return {
      list: [
        { name: '重庆北路205号入口', photo: photo1 },
        { name: '重庆北路205号道路', photo: photo2 },
        { name: '重庆北路205号电梯', photo: photo3 },
        // {
        //   name: '威海路163',
        //   photo: photo1,
        //   id: '05e1a5f24a224d66955ba2d22d6f64d3',
        // },
        // {
        //   name: '威海路167',
        //   photo: photo2,
        //   id: 'fc82739cb3354262850c715aa9098c83',
        // },
        // {
        //   name: '成都北路140',
        //   photo: photo3,
        //   id: '3c23b0ecd6bb4d73842617010a84cbcf',
        // },
      ],
      handleClick,
      showModal,
      src,
    }
  },
})
</script>

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

.community-photo
  $full()
  display flex
  flex-direction column
  justify-content space-between
  padding .05rem
  >div
    height 32%
    position relative
    cursor pointer
    .mask
      $center()
      display flex
      position absolute
      width 100%
      height 100%
      background-color rgba(0,0,0,0.5)
      opacity 0
      transition opacity .3s ease-in-out
      >img
        width .4rem
        height @width
    &:hover
      .mask
        opacity 1
    >p
      position absolute
      right 0
      bottom 0
      padding .05rem .1rem
      border-radius .1rem 0 0 0
      color $secondary-color
      background rgba(8,28,52,.5)
</style>
