<template>
  <div class="display-detail">
    <div class="content" id="content">
      <div
        class="
          content-item
          sliders
          wow
          animate__animated animate__fadeInRightBig
        "
        ref="imgs"
        v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
      >
        <div class="view-box">
          <div
            class="slide-group"
            :style="{
              width: sildeGroupWidth,
              left: slideGroupleft + 'px',
            }"
          >
            <div
              class="slide-item"
              v-for="(item, index) in displayDetail.imagesVo"
              :key="index"
            >
              <img :src="$getFullUrl(item.url)" alt="" />
              <div class="modal"></div>
            </div>
          </div>
        </div>

        <div class="modal-layer">
          <div class="left-layer"></div>
          <div class="center-img" @mousewheel="handleImgsSlide">
            <!-- <div class="border-box"></div> -->
            <img src="@/assets/imgs/display/ch/slider-box.png" alt="" />
          </div>
          <div class="right-layer"></div>
        </div>
      </div>
      <div class="content-item intro">
        <div class="wrapper">
          <div class="title">
            <div class="wow animate__animated animate__fadeIn">
              {{ displayDetail.title }}
            </div>
            <div class="view-count wow animate__animated animate__fadeIn">
              <svg-icon icon-class="view"></svg-icon>
              <span>{{ displayDetail.browseCount }}</span>
            </div>
          </div>
          <div class="desc-and-tools">
            <div class="desc wow animate__animated animate__fadeIn">
              <el-row>
                <el-col class="item">
                  <div class="label">关键词：</div>
                  <div class="value">{{ displayDetail.keyword }}</div>
                </el-col>
                <el-col class="item" v-if="dicts.display_type">
                  <div class="label">展览类型：</div>
                  <div class="value">
                    {{ dicts.display_type[displayDetail.type] }}
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col class="item" v-if="dicts.display_character">
                  <div class="label">展览性质：</div>
                  <div class="value">
                    {{
                      dicts.display_character[displayDetail.displayCharacter]
                    }}
                  </div>
                </el-col>
                <el-col class="item">
                  <div class="label">展览单位：</div>
                  <div class="value">{{ displayDetail.deptName }}</div>
                </el-col>
              </el-row>
            </div>
            <div class="tools wow animate__animated animate__fadeIn">
              <ReaderOperations
                :loveCount="displayDetail.loveCount"
                :loveCountStatus="Boolean(displayDetail.loveCountStatus)"
                :collectCount="displayDetail.collectCount"
                :collectCountStatus="Boolean(displayDetail.collectCountStatus)"
                :sourceId="displayDetail.exhibitionId"
                :title="displayDetail.title"
                :sourceType="'biz_exhibition'"
                @reload="reload"
                :selectColor="'#892325'"
              />
            </div>
          </div>
          <div class="divider"></div>
          <div class="intro-and-video">
            <div class="intro-container">
              <div
                class="intro-title wow animate__animated animate__fadeInLeft"
              >
                展览简介
              </div>
              <div
                class="intro-content wow animate__animated animate__fadeInLeft"
              >
                {{ displayDetail.intro }}
              </div>
            </div>
            <div
              v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
              class="videos wow animate__animated animate__fadeInRight"
            >
              <el-carousel>
                <el-carousel-item
                  v-for="item in displayDetail.videosVo"
                  :key="item.fileId"
                >
                  <Video :url="$getFullUrl(item.url)" />
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
          <div
            class="audio"
            :style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
            @click="handleClickAudio"
            v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
          >
            <!-- <svg-icon icon-class="music"></svg-icon> -->
            <img src="@/assets/imgs/display/normal/music-red.png" alt="" />
            <AudioPlayer
              style="display: none"
              :url="$getFullUrl(displayDetail.audiosVo[0].url)"
              ref="AudioPlayer"
            />
          </div>
        </div>
      </div>
      <div
        class="content-item units"
        v-if="displayDetail.exhibitionUnits.length > 0"
      >
        <div class="wrapper">
          <div class="custom-title wow animate__animated animate__fadeInLeft">
            <div class="custom-title-prefix">
              <img src="@/assets/imgs/display/ch/custom-title.png" alt="" />
            </div>
            <div class="custom-title-text">展览单元</div>
            <div class="custom-title-suffix">
              <img src="@/assets/imgs/display/ch/custom-title.png" alt="" />
            </div>
          </div>

          <ChStyleUnit :units="displayDetail.exhibitionUnits" />
        </div>
      </div>
      <div class="content-item lts">
        <div class="wrapper">
          <div class="custom-title wow animate__animated animate__fadeInUp">
            <div class="custom-title-prefix">
              <img src="@/assets/imgs/display/ch/custom-title.png" alt="" />
            </div>
            <div class="custom-title-text">关联文献</div>
            <div class="custom-title-suffix">
              <img src="@/assets/imgs/display/ch/custom-title.png" alt="" />
            </div>
          </div>
        </div>

        <div
          class="lts-content"
          v-if="
            displayDetail.literatureVo && displayDetail.literatureVo.length > 0
          "
        >
          <div class="wrapper wow animate__animated animate__fadeInUp">
            <el-table
              :data="displayDetail.literatureVo"
              :header-cell-style="{
                background: '#eeeeee',
                color: '#333',
              }"
              :row-style="tableRowStyle"
            >
              <el-table-column
                prop="name"
                label="名称"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="authors"
                label="作者"
                align="center"
              ></el-table-column>
              <el-table-column
                prop="date"
                label="出版时间"
                align="center"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="source"
                label="出版所在刊物"
              ></el-table-column>
              <el-table-column label="阅读" align="center">
                <template slot-scope="scope">
                  <div class="pdf-img" @click="handleViewLt(scope.row)">
                    <img src="@/assets/imgs/display/ch/pdf-icon.png" />
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <el-image-viewer
      v-if="imgViewerVisible"
      :on-close="closeImgViewer"
      :url-list="imgList"
    />
  </div>
</template>

<script>
import AudioPlayer from "@/components/AudioPlayer";
import ReaderOperations from "@/components/ReaderOperations";
import Card from "@/views/personal/components/Card";
import Video from "@/components/Video";
import MenuList from "@/components/MenuList";
import { previewFile } from "@/utils/index";
import ChStyleUnit from "./ChStyleUnit.vue";
export default {
  components: {
    AudioPlayer,
    ReaderOperations,
    MenuList,
    Video,
    Card,
    ChStyleUnit,
    "el-image-viewer": () =>
      import("element-ui/packages/image/src/image-viewer"),
  },
  props: {
    displayDetail: {
      type: Object,
      default: () => ({}),
    },
    dicts: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      slideImageWidth: 0, //单个图片的宽度
      sildeGroupWidth: 0, //整个轮播的宽度
      slideGroupleft: 0, //整个轮播距离父亲盒子的距离（中间view区域）
      imgViewerVisible: false,
      relateRelics: [],
      imgsDom: null,
      moveLeft: true,
      moveRight: true,
      audioPlaying: true,
    };
  },
  async mounted() {
    this.loadDetail();
  },
  destroyed() {
    //同时在destroyed回调中移除监听：
    if (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0) {
      //firefox支持onmousewheel
      removeEventListener("DOMMouseScroll", firefoxListenFun);
    }
  },
  methods: {
    async loadDetail() {
      processUnit(this.displayDetail.exhibitionUnits);
      function processUnit(list) {
        for (let o of list || []) {
          if (o.children) {
            if (o.children.length == 0) {
              o.children = null;
            } else {
              processUnit(o.children);
            }
          }
        }
      }
      this.$nextTick(() => {
        this.loadWidth();

        if (
          this.displayDetail.videosVo &&
          this.displayDetail.videosVo.length > 0
        ) {
          this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
          this.$refs.AudioPlayer.play();
        }
      });
    },

    loadWidth() {
      if (
        this.displayDetail.imagesVo &&
        this.displayDetail.imagesVo.length > 0
      ) {
        let slideImage = document.getElementsByClassName("slide-item")[0];
        this.slideImageWidth = slideImage.offsetWidth;
        this.sildeGroupWidth =
          this.slideImageWidth * this.displayDetail.imagesVo.length;
        this.slideGroupleft = -3 * this.slideImageWidth;
      }
    },

    handleImgsSlide(e) {
      this.addImgsEventListener(e);
      this.throttle(this.pageUpOrDown, 500)(e);
    },

    addImgsEventListener(e) {
      e = e || window.event;
      if (navigator.userAgent.toLowerCase().indexOf("msie") >= 0) {
        // IE
        e.returnValue = false;
      } else {
        // Chrome
        e.preventDefault();
      }

      if (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0) {
        //firefox支持onmousewheel
        addEventListener("DOMMouseScroll", this.firefoxListenFun, false);
      }
    },
    firefoxListenFun(e) {
      var obj = e.target;
      var onmousewheel;
      while (obj) {
        onmousewheel = obj.getAttribute("onmousewheel") || obj.onmousewheel;
        if (onmousewheel) break;
        if (obj.tagName == "BODY") break;
        obj = obj.parentNode;
      }
      if (onmousewheel) {
        if (e.preventDefault) e.preventDefault(); //禁止页面滚动
        if (typeof obj.onmousewheel != "function") {
          //将onmousewheel转换成function
          eval("window._tmpFun = function(event){" + onmousewheel + "}");
          obj.onmousewheel = window._tmpFun;
          window._tmpFun = null;
        }
        // 不直接执行是因为若onmousewheel(e)运行时间较长的话，会导致锁定滚动失效，使用setTimeout可避免
        setTimeout(function () {
          obj.onmousewheel(e);
        }, 1);
      }
    },

    pageUpOrDown(e) {
      let detail = e.wheelDelta || e.detail || e.wheelDeltaY;
      let direction = detail > 0 ? "left" : "right";
      if (direction == "left" && this.moveLeft) {
        this.slideGroupleft += this.slideImageWidth;
        this.moveRight = true;
      }
      if (direction == "right" && this.moveRight) {
        this.slideGroupleft += this.slideImageWidth * -1;
        this.moveLeft = true;
      }

      if (this.slideGroupleft == 0) {
        this.moveLeft = false;
        this.moveRight = true;
      }

      if (
        this.slideGroupleft ==
        4 * this.slideImageWidth - this.sildeGroupWidth
      ) {
        this.moveRight = false;
        this.moveLeft = true;
      }
    },

    //节流函数
    throttle(fn, gapTime) {
      let _this = this;
      return function () {
        let _nowTime = +new Date();
        if (_nowTime - _this._lastTime > gapTime || !_this._lastTime) {
          fn(...arguments); // 函数可以带参数
          _this._lastTime = _nowTime;
        }
      };
    },

    // 关联文献的行样式调整
    tableRowStyle({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return {
          background: "#f9f9f9 !important",
        };
      } else {
        return {
          background: "#fff !important",
        };
      }
    },

    // 预览关联文献
    handleViewLt(item) {
      previewFile(item.files[0].url, item.files[0].name);
    },

    // 点击音频
    handleClickAudio() {
      this.audioPlaying = !this.audioPlaying;
      if (this.audioPlaying) {
        this.$refs["AudioPlayer"].play();
        // console.log(this.$refs['audioContainer']);
      } else {
        this.$refs["AudioPlayer"].pause();
      }
    },

    reload() {
      this.$emit("reload");
    },
  },
};
</script>

<style lang="scss" scoped>
// 中国风主题样式
/**公共样式开始 */
.wrapper {
  width: 1200px;
}
.custom-title {
  display: flex;
  align-items: center;
  .custom-title-prefix,
  .custom-title-suffix {
    width: 27px;
    height: 27px;
    margin: 15px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .custom-title-text {
    font-size: 40px;
    font-family: KaiTi;
    font-weight: 400;
    color: #0f0f0f;
    line-height: 114px;
  }
}
/**公共样式结束 */

/**样式开始 */
.display-detail {
  overflow: hidden;
  .content {
    width: 100%;
    overflow: hidden;
    .content-item {
      width: 100%;
    }

    /**轮播图 */
    .sliders {
      height: 434px;
      // margin: 52px 0 84px 0;
      margin-top: 52px;
      display: flex;
      justify-content: center;
      position: relative;
      .view-box {
        position: relative;
        width: 1200px;
        .slide-group {
          display: flex;
          position: absolute;
          height: 100%;
          transition: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
          /**保证能够最开始刚好有四格卡在中间*/
          // transform: translateX(-900px);
          .slide-item {
            width: 300px;
            height: 100%;
            position: relative;
            margin-right: 1px;
            img {
              width: 300px;
              height: 100%;
              object-fit: cover;
              // filter: grayscale(14);
            }
          }
        }
      }

      .modal-layer {
        position: absolute;

        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        .center-img {
          width: 1200px;
          transform: translateY(-25px);
          position: relative;
          filter: drop-shadow(2px 4px 6px #f8f8f8);
          img {
            transform: translateX(-10px);
          }
        }
        .left-layer,
        .right-layer {
          flex: 1;
          height: 100%;
          background-color: rgba(#f8f8f8, 0.8);
        }
      }
    }

    /**展览信息 */
    .intro {
      margin-top: 55px;
      display: flex;
      justify-content: center;

      .wrapper {
        background: url("@/assets/imgs/display/ch/intro-bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 50px;
        position: relative;
        border: 1px solid #d3d3d37a;
        .title {
          font-size: 50px;
          font-family: KaiTi;
          font-weight: bold;
          color: #0f0f0f;
          margin-bottom: 60px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .view-count {
            font-size: 18px;
            margin-top: 10px;
            color: #999;
            font-weight: normal;
            .svg-icon {
              margin-right: 10px;
            }
          }
        }
        .desc-and-tools {
          display: flex;
          justify-content: space-between;
          .desc {
            display: flex;
            .item {
              display: flex;
              margin-right: 16px;
              .label,
              .value {
                font-size: 18px;
                color: #0f0f0f;
                line-height: 36px;
              }
              .label {
                margin-left: 8px;
              }
            }
          }
          .tools {
            width: 230px;
          }
        }

        .divider {
          width: 100%;
          height: 2px;
          border: 1px dashed #b1b0af;
          margin: 42px 0;
        }
        .intro-and-video {
          display: flex;
          .intro-container {
            flex: 1;
            .intro-title {
              font-size: 40px;
              font-family: KaiTi;
              font-weight: 400;
              color: #0f0f0f;
              margin-bottom: 43px;
              position: relative;
              &::after {
                content: "";
                display: inline-block;
                width: 60px;
                height: 2px;
                background-color: #caad91;
                position: absolute;
                left: 0;
                bottom: -12px;
              }
            }
            .intro-content {
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #444444;
              text-indent: 32px;
              line-height: 28px;
              margin-left: 8px;
            }
          }
          .videos {
            flex: 1;
            position: relative;
            height: 256px;
            margin-left: 70px;
          }
        }

        .audio {
          position: absolute;
          right: -100px;
          top: 34px;
          cursor: pointer;
          animation: audioRotate 8s linear infinite;
          transform-origin: center center;
          border: 2px solid #892325;
          padding: 10px;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #fff;
          transition: all 0.5s ease;
          &:hover {
            box-shadow: 0 0 14px rgb(0 0 0 / 40%);
          }
          img {
            width: 60px;
            height: 60px;
          }
        }
      }
    }

    @keyframes audioRotate {
      0% {
        transform: rotateZ(0deg);
      }
      100% {
        transform: rotateZ(360deg);
      }
    }

    @-webkit-keyframes audioRotate {
      0% {
        transform: rotateZ(0deg);
      }
      100% {
        transform: rotateZ(360deg);
      }
    }

    .animation-play-paused {
      animation-play-state: paused;
      -webkit-animation-play-state: paused; /* Safari 和 Chrome */
    }

    /**展览单元 */
    .units {
      margin-top: 94px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .units-content {
        ul {
          li {
            margin-bottom: 20px;
            .unit-title {
              font-size: 36px;
              font-family: KaiTi;
              font-weight: 400;
              color: #4e392c;
              line-height: 83px;
              display: flex;
              justify-content: center;
            }
            .unit-intro {
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #444444;
              text-indent: 36px;
              margin-bottom: 10px;
            }
            .unit-imgs {
              width: 100%;
              .img-item {
                width: 100%;
                img {
                  width: 100%;
                }
              }
            }
          }
        }
      }
    }
    /**关联文献 */
    .lts {
      // background-color: aquamarine;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 100px;
      .lts-content {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 569px;
        background-image: url("@/assets/imgs/display/ch/lts-bg.png");
        overflow-x: hidden;
      }
    }
  }
}
::v-deep .el-carousel {
  height: 100%;
}
::v-deep .el-carousel__container {
  height: 100%;
}
::v-deep .el-carousel__item--card {
  width: 100%;
  height: 100%;
  transform: translateX(0) scale(1) !important;
}
</style>