<template>
  <div v-show="isShow" class="ed-viewer">
    <!-- 蒙层 -->
    <div class="ed-viewer--mask"></div>
    <!-- 关闭按钮 -->
    <div class="ed-viewer__btn ed-viewer--close" @click="close">
      <i class="el-icon-circle-close"></i>
    </div>

    <!-- 上一张按钮 -->
    <div v-if="isRow" class="ed-viewer__btn ed-viewer__prev" @click="handlePrev">
      <i class="el-icon-arrow-left"></i>
    </div>
    <!-- 下一张按钮 -->
    <div v-if="isRow" class="ed-viewer__btn ed-viewer__next" @click="handleNext">
      <i class="el-icon-arrow-right"></i>
    </div>

    <!-- 内容层 -->
    <div ref="content" class="ed-viewer__content">
      <el-carousel ref="carousel"
                   :initial-index="index"
                   :initial-swipe="index"
                   :interval="0"
                   :show-indicators="false"
                   arrow="never"
                   indicator-position="none"
                   @change="handleChange">
        <el-carousel-item v-for="(item, indexes) in list"
                          :key="indexes"
                          @click.native.self="close()">
          <component :is="isMediaType(item)"
                     v-if="isMediaType(item)"
                     :id="'ed-preview__'+indexes"
                     :class="'ed-preview__'+isMediaType(item)"
                     ref="item"
                     :src="item.url"
                     :style="[styleName,styleBoxName]"
                     controls="controls"
                     ondragstart="return false"
                     @click="handleClick(item,indexes)"
                     @mousedown="move"></component>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!--  操作区  -->
    <div class="ed-viewer__btn ed-viewer__actions">
      <div class="ed-viewer__actions__inner">
        <i class="el-icon-zoom-out" @click="subScale"></i>
        <i class="el-icon-zoom-in" @click="addScale"></i>
        <i class="el-image-viewer__actions__divider"></i>
        <i class="el-icon-printer" @click="handlePrint"></i>
        <i class="el-image-viewer__actions__divider"></i>
        <i class="el-icon-refresh-left" @click="rotate=rotate-90"></i>
        <i class="el-icon-refresh-right" @click="rotate=rotate+90"></i>
      </div>
    </div>
  </div>
</template>

<script>
import {isMediaType, setPx} from '../../../tools/utils'

export default {
  name: "EdViewer",
  props: {
    list: {
      type: Array
    }
  },
  data() {
    return {
      scale: 1,
      rotate: 0,
      left: 0,
      top: 0,
      index: 0,
      isShow: false,
    }
  },
  computed: {
    styleBoxName() {
      return {
        marginLeft: setPx(this.left),
        marginTop: setPx(this.top)
      }
    },
    styleName() {
      return {
        transform: `scale(${this.scale}) rotate(${this.rotate}deg)`,
        maxWidth: '100%',
        maxHeight: '100%',
        minWidth: '50vw',
        minHeight: '50vh'
      }
    },
    isRow() {
      return this.list.length > 1
    }
  },
  methods: {
    isMediaType(item) {
      const {url, type} = item;
      console.log(isMediaType(url, type))
      return isMediaType(url, type)
    },
    open() {
      this.isShow = true
    },
    move(e) {
      //算出鼠标相对元素的位置
      let disX = e.clientX;
      let disY = e.clientY;
      let scale = 2;
      document.onmousemove = (e) => {       //鼠标按下并移动的事件
                                            //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX;
        let top = e.clientY - disY;
        disX = e.clientX;
        disY = e.clientY;
        //移动当前元素
        this.left = this.left + (left * scale)
        this.top = this.top + (top * scale)
      };
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },
    close() {
      this.isShow = false
      if (Object.prototype.hasOwnProperty.call(this.$listeners, 'beforeClose')) {
        this.$emit('beforeClose', this.list, this.index)
      }
    },
    // 上一张按钮
    handlePrev() {
      this.$refs.carousel.prev()
      this.index = this.$refs.carousel.activeIndex
      this.stopItem()
    },
    // 下一张按钮
    handleNext() {
      this.$refs.carousel.next()
      this.index = this.$refs.carousel.activeIndex
      this.stopItem()
    },
    // 缩小
    subScale () {
      if (this.scale !== 0.2) {
        this.scale = parseFloat((this.scale - 0.2).toFixed(2))
      }
    },

    // 放大
    addScale () {
      this.scale = parseFloat((this.scale + 0.2).toFixed(2))
    },

    // 打印
    handlePrint(){
      this.$print(`#ed-preview__${this.index}`)
    },

    handleClick() {
    },
    handleChange () {
      this.scale = 1;
      this.rotate = 0;
    },
    stopItem() {
      this.left = 0;
      this.top = 0;
      this.$refs.item.forEach(ele => {
        ele.pause && ele.pause()
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.ed-viewer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all .5s;
  z-index: 9998;

  .ed-viewer--mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
  }

  .ed-viewer__btn {
    z-index: 1024;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: .8;
    cursor: pointer;
    -webkit-user-select: none;
    box-sizing: border-box;
    -moz-user-select: none;
    user-select: none;
  }

  .ed-viewer--close {
    top: 40px;
    right: 40px;
    width: 40px;
    height: 40px;
    font-size: 24px;
    color: #fff;
    background-color: #606266;
  }

  .ed-viewer__prev {
    width: 44px;
    height: 44px;
    font-size: 24px;
    color: #fff;
    background-color: #606266;
    border-color: #fff;
    top: 50%;
    transform: translateY(-50%);
    left: 40px
  }

  .ed-viewer__next {
    transform: translateY(-50%);
    right: 40px;
    text-indent: 2px;
    width: 44px;
    height: 44px;
    font-size: 24px;
    color: #fff;
    background-color: #606266;
    border-color: #fff;
    top: 50%;
  }

  .ed-viewer__actions {
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    width: 282px;
    height: 44px;
    padding: 0 23px;
    background-color: #606266;
    border-color: #fff;
    border-radius: 22px;

    .ed-viewer__actions__inner {
      width: 100%;
      height: 100%;
      text-align: justify;
      cursor: default;
      font-size: 23px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }

}

::v-deep {
  .ed-viewer__content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .el-carousel {
      width: 90%;
      height: 100%;
    }

    .el-carousel__container {
      height: 100%;
    }

    .el-carousel__item {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.ed-preview__iframe {
  width: 60vw;
  height: 75vh;
  border: none;
}
</style>
