<template>
  <div class="display-detail">
<<<<<<< HEAD
    <div class="content" id="content">
      <div
        class="content-item sliders"
        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/slider-box.png" alt="" />
          </div>
          <div class="right-layer"></div>
        </div>
      </div>
      <div class="content-item intro wow animate__animated animate__fadeInUp">
        <div class="wrapper">
          <div class="title">{{ displayDetail.title }}</div>
          <div class="desc-and-tools">
            <div class="desc">
              <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">
              <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="loadDetail"
              />
            </div>
          </div>
          <div class="divider"></div>
          <div class="intro-and-video">
            <el-row :gutter="70">
              <el-col
                class="intro-container"
                :span="
                  displayDetail.videosVo && displayDetail.videosVo.length > 0
                    ? 12
                    : 24
                "
              >
                <div class="intro-title">展览简介</div>
                <div class="intro-content">
                  {{ displayDetail.intro }}
                </div>
              </el-col>
              <el-col
                :span="12"
                v-if="
                  displayDetail.videosVo && displayDetail.videosVo.length > 0
                "
                class="videos"
              >
                <el-carousel :interval="4000" type="card" height="220px">
                  <el-carousel-item
                    v-for="item in displayDetail.videosVo"
                    :key="item.fileId"
                  >
                    <Video :url="$getFullUrl(item.url)" />
                  </el-carousel-item>
                </el-carousel>
              </el-col>
            </el-row>
          </div>
          <div
            class="audio"
            :style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
            @click="handleClickAudio"
            v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
          >
            <img src="@/assets/imgs/display/audio.png" alt="" />
            <AudioPlayer
              style="display: none"
              :url="$getFullUrl(displayDetail.audiosVo[0].url)"
              ref="AudioPlayer"
            />
          </div>
        </div>
      </div>
      <div class="content-item units">
        <div class="wrapper">
          <div class="custom-title">
            <div class="custom-title-prefix">
              <img src="@/assets/imgs/display/custom-title.png" alt="" />
            </div>
            <div class="custom-title-text">展览单元</div>
            <div class="custom-title-suffix">
              <img src="@/assets/imgs/display/custom-title.png" alt="" />
            </div>
            <div class="right">
              <a class="clearfix" @click="unitVisible = true">详情</a>
            </div>
          </div>

          <div class="units-content">
            <ul>
              <li
                v-for="(item, index) in displayDetail.exhibitionUnits"
                :key="index"
                :class="{ active: activeUnit === item.euId }"
                :style="`--i: ${1 / displayDetail.exhibitionUnits.length}`"
                @click="showUnit(item.euId)"
              >
                <!-- <div class="unit-title">{{ item.title }}</div>

                <div class="unit-intro">{{ item.intro }}</div>
                <div
                  class="unit-imgs"
                  v-if="item.imagesVo && item.imagesVo.length > 0"
                >
                  <div
                    class="img-item"
                    v-for="(i, idx) in item.imagesVo"
                    :key="idx"
                  >
                    <img :src="$getFullUrl(i.url)" alt="" />
                  </div>
                </div> -->
                <div class="unit-node">
                  <div class="unit-imgs">
                    <div
                      class="img-item"
                      v-if="item.imagesVo && item.imagesVo.length > 0"
                    >
                      <img :src="$getFullUrl(item.imagesVo[0].url)" alt="" />
                    </div>
                  </div>
                  <div class="unit-content">
                    <div class="unit-title">{{ item.title }}</div>

                    <div class="unit-intro">{{ item.intro }}</div>
                  </div>
                </div>
                <div class="units-title">
                  <p>
                    <span v-html="changeTitle(item.title)"></span>
                  </p>
                  <span></span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="content-item lts">
        <div class="wrapper">
          <div class="custom-title">
            <div class="custom-title-prefix">
              <img src="@/assets/imgs/display/custom-title.png" alt="" />
            </div>
            <div class="custom-title-text">关联文献</div>
            <div class="custom-title-suffix">
              <img src="@/assets/imgs/display/custom-title.png" alt="" />
            </div>
          </div>
        </div>

        <div
          class="lts-content"
          v-if="
            displayDetail.literatureVo && displayDetail.literatureVo.length > 0
          "
        >
          <div class="wrapper">
            <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/pdf-icon.png" />
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <!-- <div class="title">
              
            </div>
            <div class="lts-item"></div> -->
          </div>
        </div>
      </div>
    </div>

    <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>
=======
    <BlueStyle
      v-if="displayDetail.themeType == '1'"
      :displayDetail="displayDetail"
      :dicts="dicts"
      @reload="loadDetail"
    />
    <ChStyle
      v-if="displayDetail.themeType == '2'"
      :displayDetail="displayDetail"
      :dicts="dicts"
      @reload="loadDetail"
    />
    <RedStyle
      v-if="displayDetail.themeType == '3'"
      :displayDetail="displayDetail"
      :dicts="dicts"
      @reload="loadDetail"
    />
>>>>>>> 0a5122f18a449aad5a094cb7200226a4a74ebba7
  </div>
</template>

<script>
import BlueStyle from "./components/BlueStyle.vue";
// import NormalStyle from "./components/NormalStyle.vue";
import ChStyle from "./components/ChStyle.vue";
import RedStyle from "./components/RedStyle.vue";
import { getDisplayById } from "@/api/display";
import { mapGetters } from "vuex";
export default {
  components: {
<<<<<<< HEAD
    AudioPlayer,
    ReaderOperations,
    MenuList,
    Video,
    Card,
    "el-image-viewer": () =>
      import("element-ui/packages/image/src/image-viewer"),
    detailDialog: () => import("./detail-dialog.vue"),
=======
    BlueStyle,
    ChStyle,
    RedStyle,
>>>>>>> 0a5122f18a449aad5a094cb7200226a4a74ebba7
  },

  data() {
    return {
      displayDetail: {},
<<<<<<< HEAD
      slideImageWidth: 0, //单个图片的宽度
      sildeGroupWidth: 0, //整个轮播的宽度
      slideGroupleft: 0, //整个轮播距离父亲盒子的距离（中间view区域）
      imgViewerVisible: false,
      relateRelics: [],
      curUnit: [],
      imgsDom: null,
      moveLeft: true,
      moveRight: true,
      audioPlaying: true,
      activeUnit: "",
      unitVisible: false,
=======
>>>>>>> 0a5122f18a449aad5a094cb7200226a4a74ebba7
    };
  },
  computed: {
    ...mapGetters(["dicts"]),
  },
  async mounted() {
    await this.$store.dispatch("dict/getDictList", [
      "display_type",
      "display_character",
    ]);
    this.loadDetail();
  },

  methods: {
    async loadDetail() {
      const { exhibitionId } = this.$route.params;
      console.log(exhibitionId);
      if (exhibitionId) {
        let res = await getDisplayById({ exhibitionId });
        if (res.code == 0) {
          console.log("res", res);
          this.displayDetail = res.data;
        }
      }
    },
<<<<<<< HEAD

    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();
      }
    },

    showUnit(id) {
      if (id === this.activeUnit) {
        this.activeUnit = " ";
      } else {
        this.activeUnit = id;
      }
    },
    changeTitle(str) {
      return str.split("").join("<br>");
    },
=======
>>>>>>> 0a5122f18a449aad5a094cb7200226a4a74ebba7
  },
};
</script>

<style lang="scss" scoped>
<<<<<<< HEAD
// 中国风主题样式
/**公共样式开始 */
.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;
  }
}
.right {
  float: right;
  .clearfix {
    clear: both;
  }
  a:hover {
    cursor: pointer;
    color: #2069c4;
  }
}
/**公共样式结束 */

/**样式开始 */
.display-detail {
  overflow-x: hidden;
  .content {
    width: 100%;
    overflow-y: 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;
            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: 84px;
      display: flex;
      justify-content: center;

      .wrapper {
        background: url("@/assets/imgs/display/intro-bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 60px;
        position: relative;
        .title {
          font-size: 62px;
          font-family: KaiTi;
          font-weight: 400;
          color: #0f0f0f;
          margin-bottom: 60px;
        }
        .desc-and-tools {
          display: flex;
          justify-content: space-between;
          .desc {
            display: flex;
            .item {
              display: flex;
              .label,
              .value {
                font-size: 18px;
                font-weight: 300;
                color: #0f0f0f;
                line-height: 36px;
              }
            }
          }
        }

        .divider {
          width: 100%;
          height: 2px;
          border: 1px dashed #b1b0af;
          margin: 60px 0;
        }
        .intro-and-video {
          .intro-container {
            .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;
            }
          }
          .videos {
            position: relative;
            ::v-deep {
              .el-carousel {
                height: 100%;
                width: 100%;
                .el-carousel__container {
                  height: 100%;
                  display: flex;
                  justify-content: center;
                }
                .el-carousel__item {
                  width: 100%;
                  transform: translateX(0) !important;
                }
              }
            }
          }
        }

        .audio {
          position: absolute;
          right: -100px;
          top: 34px;
          cursor: pointer;
          animation: audioRotate 8s linear infinite;
          transform-origin: center center;
          border: 1px solid #892325;
          border-radius: 50%;
          // padding: 10px;
          width: 60px;
          height: 60px;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 28px;
            height: 28px;
          }
        }
      }
    }

    @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 {
          display: flex;
          flex-wrap: nowrap;
          overflow: auto;
          li {
            // margin-bottom: 20px;
            width: calc(var(--i) * 100%);
            transition: 0.6s;
            overflow: hidden;
            // flex-shrink: 0;
            position: relative;
            &.active {
              width: 100%;
              flex-shrink: 0;

              > .unit-node {
                filter: none;
                /* > .unit-imgs {
                  width: 100%;
                  .img-item {
                    width: 100%;
                    height: auto;
                    img {
                      width: 100%;
                      height: auto;
                    }
                  }
                } */
              }
              > .units-title {
                opacity: 0;
              }
            }
            &:hover {
              cursor: pointer;
            }
            .unit-title {
              font-size: 36px;
              font-family: KaiTi;
              font-weight: 400;
              // color: #4e392c;
              color: #bb4343;
              line-height: 83px;
              display: flex;
              justify-content: center;
            }
            .unit-intro {
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              // color: #444444;
              color: #e2e2e2;
              text-indent: 36px;
              // margin-bottom: 10px;
              // margin-top: 20px;
              line-height: 1.8;
            }
            .unit-imgs {
              width: 100%;
              // width: 500px;
              height: 100%;
              flex-shrink: 0;
              overflow: hidden;
              .img-item {
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                // height: 100%;
                img {
                  width: 100%;
                  // height: 100%;
                  transition: 0.6s;
                }
              }
            }
            .unit-node {
              width: 1200px;
              height: 550px;
              display: flex;
              overflow: hidden;
              transition: 0.6s;
              filter: sepia(0.6);
              position: relative;

              > .unit-content {
                padding: 10px 30px;
                flex: 1;
                flex-shrink: 0;
                // background-color: #fff;
                position: absolute;
                top: 0;
                right: 0;
                width: 50%;
                height: 100%;
                background-image: linear-gradient(
                  to right,
                  rgba(0, 0, 0, 0) 0%,
                  rgba(0, 0, 0, 0.7) 40%
                );

                > .unit-title {
                  position: absolute;
                  top: 100px;
                  left: 50%;
                  transform: translateX(-50%);
                }
                > .unit-intro {
                  position: absolute;
                  top: 200px;
                  height: 70%;
                  padding: 0 20px;
                }
              }
            }
            .units-title {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              transition: 0.6s;
              > p {
                color: #fff;
                position: absolute;
                left: 0;
                top: 0;
                margin: 0;
                font-size: 28px;
                font-family: "楷体";
                padding: 16px;
                height: calc(100% - 32px);
                box-shadow: 10px 0px 21px 0 #9b7e3f inset;
              }
              > span {
              }
            }
          }
        }
      }
    }
    /**关联文献 */
    .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/lts-bg.png");
      }
    }
  }
  .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;
      }
    }
  }
}
</style>
=======
</style>
>>>>>>> 0a5122f18a449aad5a094cb7200226a4a74ebba7
