<template>
  <div class="banner" v-if="list.length > 0">
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <LayoutLink :href="item.url" :report="{PAGE_URL, ...item.reportParams}" reportEvent="XY_UFO_MAIN_EVENT">
          <ImageFormat :data-secc="item.src" :lazy="false" :src="item.src" :alt="item.alt" :width="item.width || 750" :height="item.height || 160" />
          <div 
            v-if="videoUrl" 
            class="video-mask" 
            @click="e => onClickHandler(e, item.url, index)"></div>
          <VideoPlayer
            :ref="`videoPlayer-${index+1}`"
            class="video-player"
            v-if="videoUrl"
            :source="videoUrl"
          />
        </LayoutLink>
      </li>
    </ul>
  </div>
</template>

<script>
import VideoPlayer from "@/components/video-player";

export default {
  name: 'banner',
  props: {
    list: {
      type: Array,
      default: true,
    },
    PAGE_URL: {
      type: String,
    }
  },
  components: { VideoPlayer },
  computed: {
    videoUrl() {
      let videoUrl = null;
      for(const resourceInfo of this.list) {
          const { url} = resourceInfo;
          if(/(\.mp4)/.test(url)) {
            videoUrl = url
            break;
          }
      }
      return videoUrl;
    },
  },
  methods: {
    onClickHandler(e, url, index) {
      e.stopPropagation();
      e.preventDefault();
      if(/(\.mp4)/.test(url)) {
        const key = `videoPlayer-${index+1}`;
        this.$refs[key][0].parentHandleclick()
      }
    }
  }
};
</script>

<style lang="scss" scoped>

.video-mask {
  z-index: 10;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.video-player {
  display: block;
  height: 100%;
  width: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
}

.banner {
  width: 100%;

  /deep/ .layout-link {
    position: relative;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    display: inline-block;
  }

  img {
    width: 100%;
    display: block;
  }
}
</style>