<template>
  <div class="ch-style">
    <div class="content" id="content">
      <div class="e-imgs">
        <swiper
          class="swiper gallery-top"
          :options="swiperOption"
          ref="swiperTop"
        >
          <swiper-slide
            class="slide-item"
            v-for="(item, index) in displayDetail.imagesVo"
            :key="index"
          >
            <img
              :src="$getFullUrl(item.middleUrl || item.pressUrl)"
              style="cursor: pointer"
              @click="handelPreviewImages(displayDetail.imagesVo, index)"
            />
          </swiper-slide>
          <div
            class="swiper-button-next swiper-button-white"
            slot="button-next"
          >
            <i class="el-icon-arrow-right"></i>
          </div>
          <div
            class="swiper-button-prev swiper-button-white"
            slot="button-prev"
          >
            <i class="el-icon-arrow-left"></i>
          </div>
        </swiper>
      </div>
      <div class="bg">
        <div class="bg1">
          <div class="e-name">
            {{ displayDetail.title }}
          </div>
          <div class="e-tools">
            <ReaderOperations
              :info="displayDetail"
              :sourceType="'biz_exhibition'"
              @reload="reload"
            />
          </div>
          <div class="e-info">
            <div class="info-item">
              <span class="label"> 关键词： </span>
              <span class="value">{{ displayDetail.keyword || "暂无" }}</span>
            </div>
            <div class="info-item" v-if="dicts.displayType">
              <span class="label"> 展览类型： </span>
              <span class="value">{{
                dicts.displayType[displayDetail.type] || "暂无"
              }}</span>
            </div>
            <div class="info-item" v-if="dicts.displayCharacter">
              <span class="label"> 展览性质： </span>
              <span class="value">{{
                dicts.displayCharacter[displayDetail.displayCharacter] || "暂无"
              }}</span>
            </div>
            <div class="info-item">
              <span class="label"> 展览单位： </span>
              <span class="value">{{ displayDetail.deptName || "暂无" }}</span>
            </div>
            <div class="info-item">
              <span class="label"> 展览地区： </span>
              <span class="value">{{
                displayDetail.regionName || "暂无"
              }}</span>
            </div>
          </div>
        </div>

        <div class="e-intro">
          <div class="intro-text">
            <div class="title">展览简介</div>
            <div class="text" v-html="displayDetail.intro"></div>
          </div>
        </div>
        <div
          class="e-units wow animate__animated animate__fadeInUp"
          ref="units"
          v-if="displayDetail.exhibitionUnits.length > 0"
        >
          <div class="units-title">展览单元</div>
          <div class="units-content" v-if="currentUnit">
            <div class="left">
              <div
                class="line"
                :style="{
                  height:
                    (displayDetail.exhibitionUnits.length - 1) * 130 + 'px',
                }"
              ></div>
              <div class="dots">
                <div
                  class="dot-item"
                  v-for="(item, index) in displayDetail.exhibitionUnits"
                  :key="index"
                  :style="{ top: index * 130 - 17 + 'px' }"
                  @click="handleClickUnitTitle(item)"
                  @mouseenter="handleMouseEnterUnit(item)"
                  @mouseleave="handleMouseLeaveUnit"
                >
                  <div
                    class="circle"
                    :style="{
                      'background-image': `url(${require(`@/assets/imgs/display/red/${
                        currentUnit.title == item.title ? 'circle-s' : 'circle'
                      }.png`)})`,
                    }"
                  ></div>
                  <div
                    :class="{
                      title: true,
                      active: currentUnit.title == item.title,
                    }"
                  >
                    {{ item.title }}
                  </div>
                </div>
              </div>
            </div>
            <div class="right-content">
              <div class="unit-content">
                <div
                  class="unit-content-container"
                  v-for="(unitValue, unitTitle) in currentUnit.expandUnitInfo"
                  :key="unitTitle"
                >
                  <div class="unit-content-title">
                    {{ unitTitle }}
                  </div>
                  <div
                    class="text-indent unit-content_intro"
                    v-if="currentUnit.intro"
                    v-html="unitValue.intro"
                  ></div>
                  <div
                    class="unit-content_images"
                    v-if="unitValue.imagesVo && unitValue.imagesVo.length > 0"
                  >
                    <!-- <div class="imgs-title">单元图片</div> -->
                    <div class="unit-imgs">
                      <SlideImageGroup
                        :imgList="unitValue.imagesVo"
                        :needEnlarge="true"
                        v-if="unitValue.imagesVo.length > 3"
                      >
                        <template slot-scope="{ item }" slot="img">
                          <img
                            :src="$getFullUrl(item.middleUrl || item.url)"
                            alt=""
                            style="
                              width: 100%;
                              height: 100%;
                              object-fit: contain;
                            "
                          />
                        </template>
                      </SlideImageGroup>
                      <el-row
                        v-if="
                          unitValue.imagesVo.length > 0 &&
                          unitValue.imagesVo.length < 4
                        "
                        :gutter="10"
                      >
                        <el-col
                          v-for="(item, index) in unitValue.imagesVo"
                          :key="index"
                          :span="24 / unitValue.imagesVo.length"
                          style="height: 300px"
                        >
                          <img
                            :src="$getFullUrl(item.middleUrl || item.url)"
                            alt=""
                            style="
                              width: 100%;
                              height: 100%;
                              object-fit: contain;
                              cursor: pointer;
                            "
                            @click="
                              handelPreviewImages(unitValue.imagesVo, index)
                            "
                          />
                        </el-col>
                      </el-row>
                    </div>
                  </div>

                  <div
                    class="unit-content_crs"
                    v-if="
                      unitValue.culturalRelics &&
                      unitValue.culturalRelics.length > 0
                    "
                  >
                    <div class="imgs-title">相关文物</div>
                    <SlideImageGroup :imgList="unitValue.culturalRelics">
                      <template slot-scope="{ item }" slot="img">
                        <img
                          :src="
                            $getFullUrl(
                              item.faceImageMiddleUrl || item.faceImagePressUrl
                            )
                          "
                          alt=""
                          style="
                            width: 100%;
                            height: 100%;
                            object-fit: fill;
                            cursor: pointer;
                          "
                        />
                      </template>
                      <template slot-scope="{ item }" slot="info">
                        <div class="name">{{ item.name }}</div>
                      </template>
                    </SlideImageGroup>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div
          class="e-video wow animate__animated animate__fadeInRight"
          v-if="currentVideo.url"
        >
          <div class="video-title">展览视频</div>
          <div class="video-content">
            <video-player
              v-if="currentVideo.url"
              :src="$getFullUrl(currentVideo.url)"
              class="video-box"
            ></video-player>
            <div class="video-names">
              <div
                :class="{
                  'video-item': true,
                  active: currentVideo && item.fileId == currentVideo.fileId,
                }"
                v-for="(item, index) in displayDetail.videosVo"
                :key="index"
                @click="handleChangeCurrentVideo(item)"
              >
                {{ item.name.split(".")[0] }}
              </div>
            </div>
          </div>
        </div>
        <div class="e-virtual" v-if="displayDetail.virtualVo.length > 0">
          <div class="virtual-title">虚拟展厅</div>
          <div class="wrapper">
            <div
              class="img-container"
              v-for="(item, index) in displayDetail.virtualVo"
              :key="index"
            >
              <img :src="item.faceImagePressUrl" alt="" />
              <div class="modal">
                <svg-icon icon-class="360"></svg-icon>
                <div class="name">点击进入{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>

        <div
          class="e-lts"
          v-if="
            displayDetail.literatureVo && displayDetail.literatureVo.length > 0
          "
        >
          <div class="lts-title">相关文献</div>
          <div class="lts-content">
            <div
              class="lt-item"
              v-for="(item, index) in displayDetail.literatureVo"
              :key="index"
            >
              <span class="lt-order">[{{ index + 1 }}]</span>
              <span class="lt-authors" v-if="item.authors"
                >{{ item.authors }}.</span
              >
              <span class="lt-name" v-if="item.name">{{ item.name }}.</span>
              <span class="lt-source" v-if="item.source"
                >{{ item.source }}.</span
              >
              <span class="lt-date" v-if="item.date">{{ item.date }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-image-viewer
      v-if="imgViewerVisible"
      :on-close="closeImgViewer"
      :url-list="imgList"
      :initial-index="initialIndex"
    />
  </div>
</template>

<script>
import AudioPlayer from "@/components/AudioPlayer";
import ReaderOperations from "@/components/ReaderOperations";
import ChStyleUnit from "./ChStyleUnit.vue";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import videoPlayer from "@/components/VideoPlayer";
import SlideImage from "@/components/SlideImage";
import SlideImageGroup from "@/components/SlideImageGroup";
export default {
  components: {
    AudioPlayer,
    ReaderOperations,
    ChStyleUnit,
    swiper,
    swiperSlide,
    videoPlayer,
    SlideImage,
    SlideImageGroup,
    "el-image-viewer": () =>
      import("element-ui/packages/image/src/image-viewer"),
  },
  props: {
    displayDetail: {
      type: Object,
      default: () => ({}),
    },
    dicts: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      imgViewerVisible: false,
      relateRelics: [],
      audioPlaying: true,
      swiperOption: {
        loop: true,
        slidesPerView: 3,
        grabCursor: false,
        effect: "coverflow",
        fadeEffect: {
          crossFade: true,
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      currentUnit: null,
      currentVideo: {},
      initialIndex: 0,
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  async mounted() {
    this.loadDetail();
    // let units = this.$refs.
  },
  updated() {
    let p = document.getElementsByTagName("p");
    let arr = [...p];
    arr.map((item) => {
      item.style.color = "#fff";
    });
  },
  methods: {
    async loadDetail() {
      processUnit(this.displayDetail.exhibitionUnits);
      this.currentUnit =
        this.displayDetail.exhibitionUnits.length > 0
          ? this.displayDetail.exhibitionUnits[0]
          : null;
      this.expandUnitInfo();
      function processUnit(list) {
        for (let o of list || []) {
          if (o.children) {
            if (o.children.length == 0) {
              o.children = null;
            } else {
              processUnit(o.children);
            }
          }
        }
      }

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

    replaceFaceImage() {
      var img = new Image(); //新建一个图片对象
      let url; //最终显示的大图
      if (this.displayDetail.faceImagePressUrl) {
        url = this.$getFullUrl(this.displayDetail.faceImageUrl);
      } else if (this.displayDetail.imagesVo.length > 0) {
        url = this.$getFullUrl(this.displayDetail.imagesVo[0].url);
      }
      let faceImage = document.getElementById("faceImage");
      img.src = url;
      img.onload = function () {
        faceImage.src = url;
      };
    },
    //节流函数
    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",
        };
      }
    },

    reload() {
      this.$emit("reload");
    },

    handelPreviewImages(images, index) {
      this.imgViewerVisible = true;
      this.imgList = images.map((item) => this.$getFullUrl(item.url));
      this.initialIndex = index;
    },

    closeImgViewer() {
      this.imgViewerVisible = false;
    },

    handleClickUnitTitle(item) {
      this.currentUnit = item;
      this.expandUnitInfo();
    },
    handleMouseEnterUnit(item) {
      this.currentUnit = item;
      this.expandUnitInfo();
    },
    handleMouseLeaveUnit() {
      // this.currentUnit = {};
    },

    expandUnitInfo() {
      // 将每个单元下的所有数据变成key-value形式，方便遍历
      let newUnits = {};
      traveseUnits(this.currentUnit);
      this.$set(
        this.currentUnit,
        "expandUnitInfo",
        JSON.parse(JSON.stringify(newUnits))
      );
      function traveseUnits(obj) {
        newUnits[obj.title] = obj;
        if (obj.children && obj.children.length > 0) {
          obj.children.map((item) => {
            traveseUnits(item);
          });
        }
      }
    },

    handleChangeCurrentVideo(video) {
      this.currentVideo = video;
    },
  },
};
</script>

<style lang="scss">
.unit-content_intro {
  p {
    // color: red !important;
    font-family: $defaultFontFamily !important;
    font-size: 22px;
    text-indent: 44px;
    // color: #fff !important;
  }
}
</style>
<style lang="scss" scoped>
$deepBlue: #a30e0c;

// 中国风主题样式
/**公共样式开始 */

.custom-title {
  width: 50px;
  background-color: $deepBlue;
  min-height: 300px;
  color: #fff;
  font-size: 28px;
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: rgb(215 47 63 / 30%) 4px 3px 8px 1px;
  letter-spacing: 10px;
  font-family: SourceHanSerifCN-Bold;
}

.units {
  background-image: linear-gradient(to bottom, #660d04, #520002);
  min-height: 400px;
}

.content-item {
  width: 100%;
}

.enlarge {
  position: absolute;
  bottom: 40px;
  right: 40px;
  display: flex;
  z-index: 9;
  background-color: #c1925b;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  cursor: pointer;

  img {
    width: 24px;
    height: 24px;
  }
}

/**公共样式结束 */

/**样式开始 */
.ch-style {
  overflow: hidden;
  background-size: 100%;
  background-repeat: no-repeat;
  // position: relative;
  // top: -$nav-height;
  // height: 100%;

  .content {
    width: 100%;
    overflow: hidden;
    background-color: #060d21;

    /**轮播图 */
    .e-imgs {
      padding: 200px 0 0;
      display: flex;
      justify-content: center;

      .slide-item {
        display: flex;
        justify-content: center;
        height: 414px;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .swiper-button-next,
      .swiper-button-prev {
        background-image: none;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-weight: 800;
        transform: translateY(-72px);
        font-size: 26px !important;
        background-color: #1c4e52;
      }

      .swiper-button-next {
        transform: translateX(-100px);
      }

      .swiper-button-prev {
        transform: translateX(100px);
      }
    }

    .bg {
      background-image: url("~@/assets/imgs/display/ch/pattern2.png");
      background-size: 100%;
      width: 100%;
      background-color: #1c4e52;
      padding-bottom: 73px;
      // height:4818px ;
    }

    .bg1 {
      background-image: url("~@/assets/imgs/display/ch/title-bg.png");
      background-size: 100%;
      background-color: #060d21;
      padding-bottom: 100px;
    }

    .e-name {
      font-size: 60px;
      font-weight: bold;
      color: #ffffff;
      text-shadow: 0px 4px 5px #3b130b;
      display: flex;
      justify-content: center;
      padding-top: 200px;
    }

    .e-tools {
      display: flex;
      justify-content: center;
      margin-top: 45px;
    }

    .e-info {
      display: flex;
      color: #fff;
      padding: 0 13%;
      display: flex;
      justify-content: space-between;
      font-size: 18px;
      margin-top: 86px;
    }

    .e-intro {
      padding: 0 13%;
      position: relative;
      margin-top: 160px;

      .intro-text {
        min-height: 572px;
        color: #fff;

        & > .title {
          font-size: 46px;
          font-family: PingFang;
          font-weight: 800;
          color: #ffffff;
          line-height: 53px;
          text-shadow: 0px 4px 0px #7d1813;
          margin-bottom: 40px;
          display: flex;
          justify-content: center;
        }

        & > .text {
          font-size: 24px;
          font-family: PingFang;
          font-weight: 500;
          color: #ffffff;
          line-height: 48px;
          text-indent: 48px;
        }
      }
    }

    .e-units {
      color: #fff;
      padding: 0 10% 35px;
      width: 100%;
      margin-top: 120px;

      .units-title {
        display: flex;
        justify-content: center;
        font-size: 48px;
        font-family: PingFang;
        font-weight: 800;
        color: #ffffff;
        line-height: 53px;
        text-shadow: 0px 4px 0px #7d1813;
        margin-bottom: 185px;
      }

      .units-content {
        display: flex;
        width: 100%;
        justify-content: space-between;

        .left {
          position: relative;
          width: 35%;

          .line {
            background-image: url("~@/assets/imgs/display/red/line.png");
            width: 1px;
            background-size: 100%;
          }

          .dots {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;

            .dot-item {
              position: absolute;
              display: flex;
              align-items: center;
              left: -17px;
              cursor: pointer;
              width: 100%;

              .circle {
                width: 35px;
                height: 35px;
                background-size: 100% 100%;
                background-repeat: no-repeat;
                margin-right: 30px;
              }

              .title {
                font-size: 32px;
                font-family: PingFang;
                font-weight: bold;
                color: #ffffff;
                line-height: 48px;
                opacity: 0.5;
                width: calc(100% - 67px);
                // overflow: hidden;
                // text-overflow: ellipsis;
                // white-space: nowrap;
              }

              .active {
                color: #e5b87d;
                opacity: 1;
              }
            }
          }
        }

        .right-content {
          // flex: 1;
          // width: 58vw;
          width: 60%;

          .unit-content {
            width: 100%;
            position: relative;
            top: -35px;
            color: #fff;

            .unit-content-container {
              .unit-content-title {
                font-family: PingFang;
                line-height: 48px;
                font-size: 24px;
                display: flex;
                justify-content: center;
              }

              &:nth-child(1) {
                .unit-content-title {
                  font-size: 32px;
                  font-weight: bold;
                  margin-bottom: 16px;
                }
              }
            }

            .unit-content_intro {
              font-size: 16px;
              font-weight: 400;
              line-height: 36px;
              // text-indent: 32px;
              margin-bottom: 20px;

              p {
                color: #fff !important;
              }
            }

            .unit-content_images {
              position: relative;

              .unit-content_images_container {
                height: 100%;
                display: flex;
                flex-direction: column;
                background-color: #f5f5f9;

                .images_img {
                  flex: 1;
                }

                .desc {
                  display: flex;
                  justify-content: center;
                  height: 40px;
                  align-items: center;
                }
              }
            }

            //相关文物和单元图片公共样式
            .imgs-title {
              margin: 16px 0;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 20px;

              i {
                margin: 0 10px;
                font-size: 18px;
              }
            }

            .unit-imgs {
              // height: 300px;
            }

            .unit-content_crs {
              position: relative;

              .el-row {
                .el-col {
                  margin-bottom: 10px;

                  .img-container {
                    background-color: #f5f5f9;
                    height: 250px;

                    .images_img {
                      height: 100%;
                      width: 100%;
                      position: relative;
                      cursor: pointer;
                    }
                  }
                }
              }

              .desc {
                display: flex;
                justify-content: center;
                padding: 10px;
                align-items: center;
                color: #333;
                font-size: 14px;
              }
            }

            .buttons {
              display: flex;
              justify-content: flex-end;

              .btn {
                display: flex;
                align-content: center;
                padding: 8px 10px;
                // border: 1px solid $deepBlue;
                color: #666;
                cursor: pointer;

                &:hover {
                  color: $deepBlue;
                }

                .svg-icon {
                  font-size: 22px;
                  margin: 0 4px;
                }
              }
            }
          }
        }
      }
    }

    // 视频
    .e-video {
      margin-top: 140px;
      width: 100%;
      padding: 0 13%;

      .video-title {
        width: 100%;
        display: flex;
        justify-content: center;
        font-size: 48px;
        font-family: PingFang;
        font-weight: 800;
        color: #ffffff;
        line-height: 53px;
        text-shadow: 0px 4px 0px #7d1813;
        margin-bottom: 50px;
      }

      .video-content {
        display: flex;

        .video-names {
          width: 20%;
          background-color: rgba(19, 57, 60, 0.8);
          color: #fff;
          padding: 24px 0;

          .video-item {
            font-size: 18px;
            margin: 8px 30px;
            cursor: pointer;
            transition: all ease 0.5s;

            &:hover {
              transform: translateX(-10%);
            }
          }

          .active {
            color: $yellow;
          }
        }

        .video-box {
          height: 600px;
          flex: 1;
          margin-right: 16px;

          .video-player {
            height: 100%;
          }
        }
      }
    }

    .e-virtual {
      margin-top: 140px;
      justify-content: center;
      padding: 0 13%;

      .virtual-title {
        width: 100%;
        display: flex;
        justify-content: center;
        font-size: 48px;
        font-family: PingFang;
        font-weight: 800;
        color: #ffffff;
        line-height: 53px;
        text-shadow: 0px 4px 0px #7d1813;
        margin-bottom: 50px;
      }

      .wrapper {
        width: 100%;
        // display: flex;

        .img-container {
          // width: 800px;
          // flex: 1;
          width: 100%;
          height: 600px;
          position: relative;
          cursor: pointer;
          overflow: hidden;

          &:hover {
            img {
              transform: scale(1.1);
            }
          }

          img {
            width: 100%;
            height: 100%;
            // height: 400px;
            transition: all ease 0.5s;
            object-fit: cover;
          }

          .modal {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            &:hover {
              .name {
                opacity: 1;
              }
            }

            .svg-icon {
              font-size: 110px;
              color: #fff;
            }

            .name {
              color: #fff;
              font-size: 28px;
              font-family: SourceHanSerifCN-Bold;
              opacity: 0;
              transition: all ease 0.5s;
            }
          }
        }
      }
    }

    /**关联文献 */
    .e-lts {
      color: #333;
      margin-top: 140px;
      padding: 0 13%;

      .lts-title {
        width: 100%;
        display: flex;
        justify-content: center;
        font-size: 48px;
        font-family: PingFang;
        font-weight: 800;
        color: #ffffff;
        line-height: 53px;
        text-shadow: 0px 4px 0px #7d1813;
        margin-bottom: 50px;
      }

      .lts-content {
        color: #fff;
        padding: 40px 0;
      }

      .lt-item {
        border-bottom: 1px dashed #fff;
        padding: 10px 0;
        cursor: pointer;

        &:hover {
          color: #dbb645;
        }

        & > span {
          padding: 0 4px;
        }
      }
    }
  }
}

::v-deep .el-carousel {
  height: 100%;
}

::v-deep .el-carousel__container {
  height: 100%;
}

@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 */
}
</style>
