<template>
  <div class="display-detail">
    <NavBar :background="'#8b2729'" />
    <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.pressUrl || 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.displayType">
                  <div class="label">展览类型：</div>
                  <div class="value">
                    {{ dicts.displayType[displayDetail.type] }}
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col class="item" v-if="dicts.displayCharacter">
                  <div class="label">展览性质：</div>
                  <div class="value">
                    {{
                    dicts.displayCharacter[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" v-html="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 class="right">
              <a class="clearfix" @click="unitVisible = true">
                <svg-icon icon-class="book"></svg-icon>
                详情
              </a>
            </div>
          </div>

          <ChStyleUnit :units="node" v-for="node in displayDetail.exhibitionUnits" :key="node.euId" />
        </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" >
                    <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 class="unit-detail-full" v-if="unitVisible">
      <i class="el-icon-close" @click="unitVisible = false"></i>
      <transition name="el-fade-in-linear">
        <detail-dialog :data="displayDetail.exhibitionUnits" :title="displayDetail.title"
          :img="displayDetail.faceImageUrl" v-if="unitVisible"></detail-dialog>
      </transition>
    </div>
    <Footer :background="'#8b2729'" />

  </div>
</template>

<script>
  import AudioPlayer from "@/components/AudioPlayer";
  import NavBar from "@/components/NavBar";
  import Footer from "@/components/Footer";
  import ReaderOperations from "@/components/ReaderOperations";
  import Card from "@/components/Card";
  import Video from "@/components/Video";
  import MenuList from "@/components/MenuList";
  // import ChStyleUnit from "./ChStyleUnit.vue";
  import ChStyleUnit from "./ChStyleUnit.vue";
  import DetailDialog from "./detail-dialog.vue";

  export default {
    components: {
      AudioPlayer,
      ReaderOperations,
      MenuList,
      Video,
      Card,
      ChStyleUnit,
      DetailDialog,
      NavBar,
      Footer,
      "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,
        unitVisible: false,
      };
    },
    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",
          };
        }
      },


      // 点击音频
      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;
    width: calc(100% - 26%); //左右两边各自留13%
  }

  .custom-title {
    display: flex;
    align-items: center;
    position: relative;

    .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);
              width: 1230px;
            }
          }

          .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: 280px;
            }
          }

          .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: -120px;
            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;
        }
      }
    }
  }

  .right {
    float: right;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);

    a {
      font-size: 22px;
    }

    .clearfix {
      clear: both;
    }

    a:hover {
      cursor: pointer;
      color: #2069c4;
    }
  }

  .unit-detail-full {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 99;

    >i {
      color: #fff;
      font-size: 24px;
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 10;

      &:hover {
        cursor: pointer;
      }
    }
  }

  ::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>