<template>
  <div class="community-photo">
    <div
      v-for="item in list"
      :key="item.name"
      :style="`background:url(${
        item.photo &&
        item.photo.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>
    <m-modal v-model="showModal" title="视频" width="30%" offset="-70%">
      <VideoComponent v-if="showModal" :video-src="src" />
    </m-modal>
  </div>
</template>

<script lang="ts">
import { computed, 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'
import store from '@/store'
import { useRoute } from 'vue-router'
import { 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('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 = computed(() => {
      if (curId.value === '527635870583459840') {
        // 振兴小区
        return [
          {
            name: '重庆北路177弄64号',
            photo:
              'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AQCAEc3pAASC2UqtXWs052.jpg',
            video:
              'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AVyAanZkApsdVDHEGc0527.mp4',
          },
          {
            name: '重庆北路后门',
            photo:
              'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AXyAIUKZAAIFC2qNmKI384.jpg',
            video:
              'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB9AaCAPxQuAJBKkDzXu6A359.mp4',
          },
          {
            name: '大沽路大门',
            photo:
              'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AYmAT-A1AAMElShNriM149.jpg',
            video:
              'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB9AbiAQSm8AFcZgGM-DsE721.mp4',
          },
        ]
      }
      return [
        {
          name: '62弄朝北',
          photo:
            'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB5GdOAW6qQAAvNhxSqO-g179.jpg',
          video:
            'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB8_neAFTSLAfLx1EXkWbg945.mp4',
        },
        {
          name: '62弄朝东',
          photo:
            'https://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB5Kj-AX3OMAAwPqHZi_Kg064.jpg',
          video:
            'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB9AKeAStEUAYtR_B1xies646.mp4',
        },
        {
          name: '62弄朝南',
          photo:
            'http://zhongbang.omniview.pro/file/group1/M00/00/1A/CgAG5GB5KrOAVcluAAnbZjB7fNA165.jpg',
          video:
            'http://zhongbang.omniview.pro/file/group1/M00/00/30/CgAG5WB5KrSAB6piAV39_CAFs0Y956.mp4',
        },
      ]
    })
    return {
      prefix,
      list,
      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>
