<template>
  <el-dialog
    :fullscreen="true"
    :append-to-body="true"
    :visible.sync="show"
    :show-close="false"
    top="0"
    custom-class="big-data-dialog"
  >
    <div class="swiper-container">
      <div class="swiper-icon left-icon" v-show="imgIndex > 0">
        <i class="el-icon-d-arrow-left icon" @click="toLeft"></i>
      </div>
      <div v-show="showRightIcon" class="swiper-icon right-icon">
        <i class="el-icon-d-arrow-right icon" @click="toRight"></i>
      </div>
      <div
        class="img-container"
        :style="{ transform: 'translateX(' + imgIndex * -100 + 'vw)' }"
      >
        <img
          v-for="index in maxImgNumber"
          :key="'swiperImg' + index"
          :src="require(`@/assets/images/ems/bigData-${index}.png`)"
          alt=""
        />
      </div>
    </div>
    <div class="close-btn" @click="show = false">
      <i class="el-icon-close"></i>
    </div>
  </el-dialog>
</template>
<style lang="scss" scoped>
.close-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 23px;
  line-height: 20px;
  color: rgba(217, 242, 255, 1);
  cursor: pointer;
}
.swiper-container {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  .swiper-icon {
    color: rgba(217, 242, 255, 1);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    cursor: pointer;
    font-size: 30px;
    padding: 20px;
    background: transparent;
    &.left-icon {
      left: 20px;
    }
    &.right-icon {
      right: 20px;
    }
    &:hover {
      .icon {
        opacity: 1;
      }
    }
    .icon {
      transition: all 0.6s;
      opacity: 0;
    }
  }
  .img-container {
    height: 100%;
    transition: all 1s;
    display: flex;
    flex-direction: row;
    z-index: 0;
    img {
      width: 100vw;
      height: 100vh;
      display: block;
      margin: 0;
      flex-shrink: 0;
    }
  }
}
</style>
<style lang="scss">
.big-data-dialog {
  .el-dialog__header {
    display: none;
  }

  .el-dialog__body {
    padding: 0;
    margin: 0;
    position: relative;
  }
}
</style>
<script>
export default {
  data() {
    return {
      show: false,
      imgIndex: 0,
      maxImgNumber: 1,
    };
  },
  computed: {
    showRightIcon() {
      return this.imgIndex < this.maxImgNumber - 1;
    },
  },
  watch: {
    show: {
      handler(newValue) {
        if (!newValue) this.imgIndex = 0;
      },
      immediate: true,
    },
  },
  methods: {
    toLeft() {
      if (this.imgIndex === 0) return;
      this.imgIndex -= 1;
    },
    toRight() {
      if (this.imgIndex >= this.maxImgNumber - 1) return;
      this.imgIndex += 1;
    },
  },
};
</script>
