<template>
  <transition appear name="cvp-fade" mode="out-in">
    <div v-if="show" class="comp-video-preview">
      <div class="cvp-mask"/>
      <div class="cvp-btn close" @click.stop="onClose">
        <i class="el-icon-close"/>
      </div>
      <div v-if="canNav" class="cvp-btn prev" @click.stop="onPrev">
        <i class="el-icon-arrow-left"/>
      </div>
      <div v-if="canNav" class="cvp-btn next" @click.stop="onNext">
        <i class="el-icon-arrow-right"/>
      </div>
      <div class="cvp-content">
        <template v-for="(item, i) in urlList">
          <file
            v-if="i === index"
            :key="item.url"
            :type="item.type"
            :src="item.url"
            class="cvp-file"/>
        </template>
      </div>
    </div>
  </transition>
</template>

<script>
import File from './file'
export default {
  name: 'VideoPreview',
  components: {
    File
  },
  props: {
    urlList: {
      type: Array,
      default: () => ([])
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      index: 0
    }
  },
  computed: {
    canNav() {
      return Array.isArray(this.urlList) && this.urlList.length > 1
    }
  },
  methods: {
    onPrev() {
      const len = this.urlList.length
      this.index = (this.index - 1 + len) % len
    },
    onNext() {
      const len = this.urlList.length
      this.index = (this.index + 1) % len
    },
    onClose() {
      this.$emit('update:show', false)
    }
  }
}
</script>

<style lang="scss">
.comp-video-preview {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2020;
  .cvp-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: .5;
    background: #000;
  }
  .cvp-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .cvp-file {
      display: block;
      width: 72%;
      height: auto;
    }
  }
  .cvp-btn {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: .8;
    cursor: pointer;
    box-sizing: border-box;
    user-select: none;
    &.close {
      top: 40px;
      right: 40px;
      width: 40px;
      height: 40px;
      font-size: 24px;
      color: #fff;
      background-color: #606266;
    }
    &.prev,
    &.next {
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      font-size: 24px;
      color: #fff;
      background-color: #606266;
      border-color: #fff;
    }
    &.next {
      right: 40px;
      text-indent: 2px;
    }
  }
}
.cvp-fade-appear,
.cvp-fade-enter,
.cvp-fade-leave-to {
  opacity: 0;
}
.cvp-fade-appear-active,
.cvp-fade-enter-active,
.cvp-fade-leave-active {
  transition: opacity .5s;
}
.cvp-fade-appear-to,
.cvp-fade-enter-to,
.cvp-fade-leave {
  opacity: 1;
}
</style>
