<template>
  <div class="display-detail">
    <div class="content" id="content">
      <!-- 展览图片 -->
      <div
        class="
          content-item
          display-detail_imgs
          wow
          animate__animated animate__fadeInDownBig
        "
        ref="imgs"
        v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
      >
        <swiper :options="swiperOption" ref="mySwiper">
          <swiper-slide
            v-for="(item, index) in displayDetail.imagesVo"
            :key="index"
          >
            <div class="img-container">
              <img :src="item.url" alt="" srcset="" />
            </div>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>
      <!-- 展览基本信息 -->
      <div
        class="
          content-item
          display-detail_basic_info
          wow
          animate__animated animate__fadeInUp
        "
      >
        <div class="wrapper">
          <div class="top">
            <div class="top-wrapper">
              <div class="film-img-container">
                <img src="@/assets/imgs/display/red/jiaopian.png" alt="" />
              </div>
              <div class="film-img-container">
                <img src="@/assets/imgs/display/red/jiaopian.png" alt="" />
              </div>
            </div>
          </div>
          <div class="bottom">
            <div class="bottom-wrapper">
              <div class="film-img-container">
                <img src="@/assets/imgs/display/red/jiaopian.png" alt="" />
              </div>
              <div class="film-img-container">
                <img src="@/assets/imgs/display/red/jiaopian.png" alt="" />
              </div>
            </div>
          </div>
          <div class="info-container">
            <div class="info-container-left">
              <el-image
                :src="$getFullUrl(displayDetail.faceImageUrl)"
                fit="cover"
                @click.native="
                  handelPreviewImages([displayDetail.faceImageUrl])
                "
              ></el-image>
            </div>
            <div class="info-container-right">
              <div class="info-title">
                <div class="title">{{ displayDetail.title }}</div>
                <div class="view-count">
                  <svg-icon icon-class="view"></svg-icon>
                  <span>{{ displayDetail.browseCount }}</span>
                </div>
              </div>
              <el-row>
                <el-col :span="14">
                  <div class="basic-info">
                    <div class="body-item">
                      <span class="label">关键词</span>
                      <span class="value">{{ displayDetail.keyword }}</span>
                    </div>
                    <div class="body-item">
                      <span class="label">展览类型</span>
                      <span class="value">{{
                        dicts.display_type[displayDetail.type]
                      }}</span>
                    </div>
                    <div class="body-item">
                      <span class="label">展览性质</span>
                      <span class="value">{{
                        dicts.display_character[displayDetail.displayCharacter]
                      }}</span>
                    </div>
                    <div class="body-item">
                      <span class="label">展览单位</span>
                      <span class="value">{{ displayDetail.deptName }}</span>
                    </div>
                    <div class="body-item">
                      <span class="label">展览地区</span>
                      <span class="value">{{ displayDetail.regionName }}</span>
                    </div>
                  </div>
                </el-col>
                <el-col :span="10">
                  <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"
                  />
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
      <!-- 展览简介 -->
      <div
        class="
          content-item
          display-detail_intro
          wow
          animate__animated animate__fadeInUp
        "
      >
        <div class="wrapper">
          <div class="custom-title">展览简介</div>
          <div class="intro-content">
            <div class="intro-content-container">{{ displayDetail.intro }}</div>
          </div>
          <div
            class="intro-video"
            v-if="displayDetail.videosVo && displayDetail.videosVo.length > 0"
          >
            <el-carousel :interval="4000" type="card" height="260px">
              <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>
      <!--展览单元  -->
      <div
        class="
          content-item
          display-detail_units
          wow
          animate__animated animate__fadeInUp
        "
        ref="units"
        v-if="displayDetail.exhibitionUnits.length > 0"
      >
        <div class="wrapper">
          <div class="custom-title units">展览单元</div>
          <div class="units-content">
            <div class="left-menu">
              <div
                class="left-menu-item"
                v-for="(item, index) in displayDetail.exhibitionUnits"
                :key="index"
                @click="handleClickUnitTitle(item)"
              >
                <!-- {{ item.imagesVo }} -->
                <div
                  :class="{ 'base-img': true, active: currentUnit == item }"
                  :id="item.euId"
                  v-if="item.imagesVo && item.imagesVo.length > 0"
                >
                  <img :src="item.imagesVo[0].pressUrl" alt="" />
                </div>
                <div class="text">{{ item.title }}</div>
              </div>
            </div>
            <div class="right-content">
              <el-row v-if="currentUnit && currentUnit.imagesVo.length > 0">
                <el-col
                  :span="i == 0 ? 24 : 8"
                  v-for="(v, i) in currentUnit.imagesVo"
                  :key="i"
                >
                  <div class="img-container">
                    <img :src="v.pressUrl" alt="" />
                  </div>
                  <div class="unit-name-intro" v-if="i == 0">
                    <div class="unit-name">{{ currentUnit.title }}</div>
                    <div class="unit-intro">{{ currentUnit.intro }}</div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <!-- <div class="units-content">
            <div
              class="units-content-item"
              v-for="(item, index) in displayDetail.exhibitionUnits"
              :key="index"
            >
              <div class="units-content-container">
                <div class="title">{{ item.title }}</div>
                <div class="intro">{{ item.intro }}</div>
                <div
                  class="imgs"
                  v-if="item.imagesVo && item.imagesVo.length > 0"
                >
                  <el-carousel
                    :interval="4000"
                    type="card"
                    height="200px"
                    v-if="item.imagesVo.length > 3"
                  >
                    <el-carousel-item
                      v-for="(img, i) in item.imagesVo"
                      :key="i"
                    >
                      <el-image
                        :src="img.pressUrl"
                        @click.native="handelPreviewImages(item.imagesVo)"
                      ></el-image>
                    </el-carousel-item>
                  </el-carousel>
                  <el-row :gutter="20" v-else>
                    <el-col
                      :span="10"
                      v-for="(img, i) in item.imagesVo"
                      :key="i"
                    >
                      <el-image
                        :src="img.pressUrl"
                        @click.native="handelPreviewImages(item.imagesVo)"
                      ></el-image>
                    </el-col>
                  </el-row>
                </div>
                <div
                  class="imgs"
                  v-if="item.culturalRelicVo && item.culturalRelicVo.length > 0"
                >
                  <el-carousel :interval="4000" type="card" height="200px">
                    <el-carousel-item
                      v-for="item in displayDetail.culturalRelicVo"
                      :key="item.fileId"
                    >
                      <el-image :src="img.faceImagePressUrl"></el-image>
                    </el-carousel-item>
                  </el-carousel>
                  <div class="desc-title">相关文物</div>
                </div>
              </div>

              <div
                class="units-content-img"
                :style="{
                  backgroundImage: `url('${item.imagesVo[0].pressUrl}')`,
                }"
              ></div>
            </div>
          </div> -->
        </div>
      </div>
      <!-- 相关文献 -->
      <div
        class="
          content-item
          display-detail_lts
          wow
          animate__animated animate__fadeInUp
        "
        v-if="
          displayDetail.literatureVo && displayDetail.literatureVo.length > 0
        "
      >
        <div class="wrapper">
          <div class="custom-title">相关文献</div>
          <div class="lts-content">
            <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 { debounce, previewFile } from "@/utils/index";
import ChStyleUnit from "./ChStyleUnit.vue";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  components: {
    AudioPlayer,
    ReaderOperations,
    Video,
    Card,
    ChStyleUnit,
    swiper,
    swiperSlide,
    "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,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        effect: "fade",
        fadeEffect: {
          crossFade: true,
        },
        grabCursor: true,
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
        },
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      currentUnit: null,
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  async mounted() {
    this.loadDetail();
    // let units = this.$refs.
  },
  methods: {
    async loadDetail() {
      processUnit(this.displayDetail.exhibitionUnits);
      this.currentUnit =
        this.displayDetail.exhibitionUnits.length > 0
          ? this.displayDetail.exhibitionUnits[0]
          : null;
      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(() => {
        // if (
        //   this.displayDetail.videosVo &&
        //   this.displayDetail.videosVo.length > 0
        // ) {
        //   this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
        //   this.$refs.AudioPlayer.play();
        // }
      });
    },

    //节流函数
    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");
    },

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

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

    handleClickUnitTitle(item) {
      this.currentUnit = item;
    },
  },
};
</script>

<style lang="scss" scoped>
// 中国风主题样式
/**公共样式开始 */
.wrapper {
  width: 1200px;
}
.custom-title {
  width: 50px;
  background-color: #d72f3f;
  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;
}
.units {
  background-image: linear-gradient(to bottom, #660d04, #520002);
  min-height: 400px;
}
.content-item {
  width: 100%;
}
/**公共样式结束 */

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

    /**轮播图 */
    .display-detail_imgs {
      .img-container {
        height: 430px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }

    /**基本信息 */
    .display-detail_basic_info {
      margin: 80px 0;
      display: flex;
      justify-content: center;

      .wrapper {
        min-height: 200px;
        border-left: 4px solid #ccc9cd;
        border-right: 4px solid #ccc9cd;
        position: relative;
        overflow: hidden;
        &:hover {
          .top-list,
          .bottom-list {
            animation-play-state: paused;
            -webkit-animation-play-state: paused;
          }
        }
        .top {
          position: absolute;
          left: 0;
          top: 0;
          overflow: hidden;
          display: flex;
          width: 1200px;
        }
        .bottom {
          position: absolute;
          left: 0;
          bottom: 0;
          overflow: hidden;
        }
        .top-wrapper,
        .bottom-wrapper {
          display: flex;
          width: 2400px;
        }
        .film-img-container {
          width: 1200px;
          animation: filmMoveLeft 60s ease infinite;
          height: 40px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .info-container {
        display: flex;
        justify-content: space-between;
        padding: 40px 20px 40px 0;
        height: 100%;
        .info-container-left {
          min-height: 200px;
          margin-right: 40px;
          flex: 1;
          .el-image {
            height: 100%;
            width: 100%;
            background-color: #f5f5f9;
          }
        }
        .info-container-right {
          flex: 1;
          min-height: 200px;
          padding: 40px 0 10px;
          .info-title {
            padding-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: 2px solid #f2f2f2;
            display: flex;
            justify-content: space-between;

            .title {
              font-size: 32px;
              font-weight: 500;
              color: #8b0000;
            }
            .view-count {
              font-size: 18px;
              margin-top: 10px;
              color: #999;
              font-weight: normal;
              display: flex;
              align-items: center;
              .svg-icon {
                margin-right: 10px;
              }
            }
          }
          .basic-info {
            .body-item {
              display: flex;
              .label {
                display: block;
                width: 80px;
                margin-right: 26px;
                margin-bottom: 10px;
                font-weight: bold;
                color: #9f9c9a;
              }
            }
          }
        }
      }
    }

    /**简介和视频 */
    .display-detail_intro {
      display: flex;
      justify-content: center;
      .wrapper {
        display: flex;
        background-color: #fafafa;
        border: 2px solid #cccccc;
        border-left: none;
        .intro-content,
        .intro-video {
          flex: 1;
          padding: 40px 0;
        }
        .intro-content {
          padding: 20px;
          text-indent: 32px;
          background-color: #f3f3f3;
          margin: 20px;
          line-height: 28px;
        }
        .intro-video {
          padding: 20px;
        }
      }
    }

    /**展览单元 */
    .display-detail_units {
      display: flex;
      justify-content: center;
      margin-top: 100px;
      // height: 750px;
      // height: calc(100vh);
      background-image: url("@/assets/imgs/display/red/unit-bg.jpg");
      .wrapper {
        // width;
        display: flex;
        border: 2px solid #cccccc;
        border-left: none;
        transition: width 0.5s ease-in-out;
        .units-content {
          flex: 1;
          display: flex;
          .left-menu {
            width: 524px;
            display: flex;
            align-items: center;
            flex-direction: column;
            .left-menu-item {
              height: 54px;
              width: 100%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              position: relative;
              padding: 0 22px;
              display: flex;
              align-items: center;
              background: #520002;
              &:hover {
                .text {
                  color: #fff;
                }
              }
              .base-img {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                // background-position: center;
                // background-size: cover;
                transition: all 0.3s ease;
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  filter: brightness(0.4);
                  transition: all 0.3s ease;
                }
                &:hover {
                  background: #520002;
                  img {
                    display: none;
                  }
                }
              }
              .active {
                background: #520002;
                img {
                  display: none;
                }
              }
              .text {
                font-size: 24px;
                font-weight: 400;
                color: #ccc;
                position: relative;
                z-index: 1;
              }
            }
          }
          .right-content {
            flex: 1;

            .el-col {
              &:first-child {
                position: relative;
                .img-container {
                  height: 420px;
                }
                .unit-name-intro {
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  left: 0;
                  top: 0;
                  padding: 100px 28px 50px;
                  background-image: linear-gradient(
                    to top,
                    rgba(0, 0, 0, 0.8),
                    rgba(0, 0, 0, 0.1)
                  );
                  cursor: pointer;
                  transition: all 0.5s ease;
                  &:hover {
                    background: rgba(0, 0, 0, 0.8);
                    .unit-intro {
                      color: #fff;
                    }
                  }
                  .unit-name {
                    font-size: 48px;
                    font-weight: bold;
                    color: #ffffff;
                    text-align: center;
                    margin-bottom: 40px;
                  }
                  .unit-intro {
                    font-size: 16px;
                    font-weight: 400;
                    color: #ccc;
                    text-indent: 32px;
                    line-height: 40px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 5;
                    -webkit-box-orient: vertical;
                  }
                }
              }
            }
            .img-container {
              width: 100%;
              // height: 100%;
              height: 162px;
              overflow: hidden;
              cursor: pointer;
              &:hover {
                img {
                  transform: scale(1.1);
                }
              }
              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: all ease 0.5s;
              }
            }
          }
        }

        /**以下为手风琴样式（暂时弃用） */
        // &:hover {
        //   width: 100%;
        //   .custom-title,
        //   .units {
        //     display: none;
        //   }
        // }
        // .units-content {
        //   display: flex;
        //   // flex-wrap: wrap;
        //   flex: 1;
        //   &:hover {
        //     .units-content-item {
        //       width: 10vw;
        //       justify-content: flex-start;
        //       align-items: flex-start;
        //       padding: 50px;
        //       .title {
        //         writing-mode: vertical-rl;
        //         color: #ccc;
        //       }
        //     }
        //   }
        //   .units-content-item {
        //     width: 25%;
        //     // height: calc(100vh - 4px);
        //     display: flex;
        //     justify-content: center;
        //     align-items: center;
        //     position: relative;
        //     transition: width 0.5s ease 0.1s;
        //     padding: 50px;
        //     overflow-x: hidden;
        //     &:hover {
        //       // width: 70%;
        //       width: 70vw;
        //       .units-content-img {
        //         filter: none;
        //         background-image: url("@/assets/imgs/display/red/unit-bg.jpg") !important;
        //       }
        //       .title {
        //         writing-mode: horizontal-tb;
        //         color: #666;
        //         font-size: 40px !important;
        //       }
        //       .intro {
        //         padding: 60px 0;
        //       }
        //       .intro,
        //       .imgs,
        //       .desc-title {
        //         display: block !important;
        //       }
        //       .desc-title {
        //         display: flex !important;
        //       }
        //     }
        //     .units-content-container {
        //       position: relative;
        //       z-index: 1;
        //       color: #fff;
        //       display: flex;
        //       flex-direction: column;
        //       .title {
        //         font-size: 32px;
        //         font-family: "KaiTi";
        //       }
        //       .intro {
        //         margin-top: 10px;
        //         display: none;
        //         font-family: "KaiTi";
        //         color: #333;
        //         text-indent: 32px;
        //         font-size: 22px;
        //         line-height: 36px;
        //         width: calc(68vw - 40px);
        //         margin-bottom: 10px;
        //       }
        //       .imgs {
        //         display: none;

        //         .el-image {
        //           width: 100%;
        //           height: 300px;
        //         }
        //       }
        //       .desc-title {
        //         display: none;
        //         font-size: 14px;
        //         color: #333;
        //         display: flex;
        //         justify-content: center;
        //       }
        //     }
        //     .units-content-img {
        //       position: absolute;
        //       left: 0;
        //       top: 0;
        //       width: 100%;
        //       height: 100%;
        //       // z-index: -1;
        //       -webkit-filter: brightness(0.3);
        //       filter: brightness(0.3);
        //       // transition: all 1s ease;
        //       cursor: pointer;
        //       background-size: cover;
        //       background-repeat: no-repeat;
        //     }
        //   }
        // }
      }
    }

    /**关联文献 */
    .display-detail_lts {
      display: flex;
      justify-content: center;
      margin: 100px 0;

      .wrapper {
        display: flex;
        background-color: #fafafa;
        border: 2px solid #cccccc;
        border-left: none;
        .lts-content {
          flex: 1;
          padding: 10px;
        }
      }
    }
  }
}
::v-deep .el-carousel__item--card {
  width: 100%;
  height: 100%;
  transform: translateX(0) scale(1) !important;
}

@keyframes filmMoveLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1200px);
  }
}
@keyframes filmMoveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(1200px);
  }
}

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