<template>
  <div class="display-detail">
    <NavBar :background="'#a30e0c'" />
    <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.faceImagePressUrl ||
                      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="13">
                  <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.displayType[displayDetail.type]
                        }}</span>
                    </div>
                    <div class="body-item">
                      <span class="label">展览性质</span>
                      <span class="value">{{
                        dicts.displayCharacter[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="11">
                  <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="'#a30e0c'" />
                </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" v-html="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" v-html="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" >
                    <img src="@/assets/imgs/display/ch/pdf-icon.png" />
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <Footer :background="'#a30e0c'" />
    <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 "@/components/Card";
  import Video from "@/components/Video";
  import ChStyleUnit from "./ChStyleUnit.vue";
  import NavBar from "@/components/NavBar";
  import Footer from "@/components/Footer";
  export default {
    components: {
      AudioPlayer,
      ReaderOperations,
      Video,
      Card,
      ChStyleUnit,
      NavBar,
      Footer,
      "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,
        currentUnit: null,
      };
    },
    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",
          };
        }
      },
      // 点击音频
      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: 1400px;
  }

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

          .bottom {
            position: absolute;
            left: 0;
            bottom: 0;
            overflow: hidden;
          }

          .top-wrapper,
          .bottom-wrapper {
            display: flex;
            width: 2400px;
          }

          .film-img-container {
            animation: filmMoveLeft 60s linear infinite;
            height: 40px;

            img {
              width: 1400px;
              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 {
            width: 100%;
            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(-1400px);
    }
  }

  @keyframes filmMoveRight {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(1400px);
    }
  }

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