<template>
  <div class="display-detail">
    <div class="content" id="content">
      <!-- 展览图片 -->
      <div
        class="content-item display-detail_imgs"
        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">
        <div class="wrapper">
          <div class="top">
            <div class="top-wrapper">
              <div class="film-img-container">
                <img src="@/assets/imgs/display/jiaopian.png" alt="" />
              </div>
              <div class="film-img-container">
                <img src="@/assets/imgs/display/jiaopian.png" alt="" />
              </div>
            </div>
          </div>
          <div class="bottom">
            <div class="bottom-wrapper">
              <div class="film-img-container">
                <img src="@/assets/imgs/display/jiaopian.png" alt="" />
              </div>
              <div class="film-img-container">
                <img src="@/assets/imgs/display/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">{{ displayDetail.title }}</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">
        <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"
        ref="units"
        v-if="displayDetail.exhibitionUnits.length > 0"
      >
        <div class="wrapper">
          <div class="custom-title units">展览单元</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 class="desc-title">相关图片</div> -->
                </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"
        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/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 { 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",
        },
      },
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
  async mounted() {
    this.loadDetail();
    // let units = this.$refs.
  },
  methods: {
    async loadDetail() {
      processUnit(this.displayDetail.exhibitionUnits);
      function processUnit(list) {
        for (let o of list || []) {
          if (o.children) {
            if (o.children.length == 0) {
              o.children = null;
            } else {
              processUnit(o.children);
            }
          }
        }
      }
      this.$nextTick(() => {
        // 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;
    },
  },
};
</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-x: hidden;
  .content {
    width: 100%;
    overflow-x: hidden;

    /**轮播图 */
    .display-detail_imgs {
      .img-container {
        height: calc(100vh - 100px);
        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;
          // overflow: hidden;
          // .top-list,
          // .bottom-list {
          //   // animation: filmMoveLeft 60s ease infinite;
          //   width: 1200px;
          //   background-color: #ccc9cd;
          //   height: 20px;
          //   overflow: hidden;

          //   .top-item,
          //   .bottom-item {
          //     width: 10px;
          //     height: 10px;
          //     background-color: #fff;
          //     display: inline-block;
          //     &:not(&:last-child) {
          //       margin-right: 20px;
          //     }
          //   }
          // }
        }
        .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 {
            font-size: 32px;
            font-weight: 500;
            color: #8b0000;
            padding-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: 2px solid #f2f2f2;
          }
          .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: calc(100vh);
      .wrapper {
        // width;
        display: flex;
        background-color: #fafafa;
        border: 2px solid #cccccc;
        border-left: none;
        transition: width 0.5s ease-in-out;
        &: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/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>