<template>
  <div class="content">
    <!-- 文物图片 -->
    <div class="content-item display-detail_imgs" ref="imgs">
      <img
        class="animate__animated animate__fadeInDownBig"
        v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0"
        id="faceImage"
        :src="$getFullUrl(CRDetail.imagesVo[0].pressUrl)"
      />
      <img
        id="faceImage"
        v-else-if="CRDetail.faceImagePressUrl"
        class="animate__animated animate__fadeInDownBig"
        :src="CRDetail.faceImagePressUrl"
      />
    </div>

    <div class="wrapper wow animate__animated animate__fadeInUpBig">
      <div class="inner">
        <!-- 展览基本信息 -->
        <div class="content-item display-detail_basic_info">
          <div class="info-container">
            <div
              class="
                info-container-left
                wow
                animate__animated animate__fadeInLeft
              "
              v-if="CRDetail.imagesVo && CRDetail.imagesVo.length > 0"
            >
              <el-carousel>
                <el-carousel-item
                  v-for="(item, index) in CRDetail.imagesVo"
                  :key="index"
                  class="imagesVo-image-container"
                >
                  <div class="img-container">
                    <img
                      :src="$getFullUrl(item.pressUrl)"
                      alt="点击查看大图"
                      srcset=""
                    />
                  </div>
                  <div
                    class="enlarge"
                    @click="handelPreviewImages(CRDetail.imagesVo, true)"
                  >
                    <img src="@/assets/imgs/enlarge-s.png" alt="" />
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
            <div
              class="
                info-container-left
                wow
                animate__animated animate__fadeInLeft
              "
              v-else-if="CRDetail.faceImagePressUrl"
            >
              <div class="img-container">
                <img
                  :src="$getFullUrl(CRDetail.faceImagePressUrl)"
                  alt="点击查看大图"
                  srcset=""
                />
              </div>
              <div
                class="enlarge"
                @click="handelPreviewImages([CRDetail.faceImageUrl])"
              >
                <img src="@/assets/imgs/enlarge-s.png" alt="" />
              </div>
            </div>
            <div
              class="
                info-container-right
                wow
                animate__animated animate__fadeInRight
              "
            >
              <div class="info-title">
                <span>{{ CRDetail.name }} </span>
                <div class="view-count">
                  <svg-icon icon-class="view"></svg-icon>
                  <span>{{ CRDetail.browseCount }}</span>
                </div>
              </div>

              <el-row :span="20">
                <el-col :span="24" class="left">
                  <div class="basic-info">
                    <div class="body-item">
                      <span class="label">
                        <svg-icon icon-class="keyword"></svg-icon>
                        年代：</span
                      >
                      <span class="value">{{ CRDetail.yearsLabel }}</span>
                    </div>
                    <div class="body-item">
                      <span class="label">
                        <svg-icon icon-class="zllx"></svg-icon>类别：</span
                      >
                      <span class="value">{{ CRDetail.typeLabel }}</span>
                    </div>
                    <div class="body-item">
                      <span class="label">
                        <svg-icon icon-class="zlxz"></svg-icon>级别：</span
                      >
                      <span class="value">{{ CRDetail.levelLabel }}</span>
                    </div>
                    <div class="body-item">
                      <span class="label"
                        ><svg-icon icon-class="wwzd"></svg-icon>质地：</span
                      >
                      <span class="value">{{ CRDetail.textureTypeLabel }}</span>
                    </div>
                    <div class="body-item">
                      <span class="label"
                        ><svg-icon icon-class="wwcc"></svg-icon>尺寸：</span
                      >
                      <span class="value">{{ CRDetail.detailSize }}</span>
                    </div>
                    <div class="body-item">
                      <span class="label"
                        ><svg-icon icon-class="zldq"></svg-icon>馆藏单位：</span
                      >
                      <span class="value">{{ CRDetail.deptName }}</span>
                    </div>
                  </div>
                </el-col>
                <el-col :span="16" class="right">
                  <div class="qrcode">
                    <!-- <img
                        src="@/assets/imgs/display/normal/test-qrcode.png"
                        alt=""
                      /> -->
                  </div>
                  <div class="tools">
                    <ReaderOperations
                      :loveCount="CRDetail.loveCount"
                      :loveCountStatus="Boolean(CRDetail.loveCountStatus)"
                      :collectCount="CRDetail.collectCount"
                      :collectCountStatus="Boolean(CRDetail.collectCountStatus)"
                      :sourceId="CRDetail.exhibitionId"
                      :title="CRDetail.title"
                      :sourceType="'biz_exhibition'"
                      @reload="loadDetail"
                    />
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div
            class="audio wow animate__animated animate__fadeInRight"
            :style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
            @click="handleClickAudio"
            v-if="CRDetail.audiosVo && CRDetail.audiosVo.length > 0"
          >
            <img src="@/assets/imgs/display/normal/music.png" alt="" />
            <!-- <svg-icon icon-class="music"></svg-icon> -->
            <AudioPlayer
              style="display: none"
              :url="$getFullUrl(CRDetail.audiosVo[0].url)"
              ref="AudioPlayer"
            />
          </div>
        </div>
        <!-- 文物简介 -->
        <div class="content-item display-detail_intro" v-if="CRDetail.intro">
          <div class="intro-content wow animate__animated animate__fadeInLeft">
            <div class="intro-title">
              <svg-icon icon-class="jianjie"></svg-icon>
              <span>文物简介</span>
            </div>
            <div class="intro-content-container" v-html="CRDetail.intro"></div>
          </div>
          <div
            class="intro-video wow animate__animated animate__fadeInRight"
            v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0"
          >
            <el-carousel :interval="4000" type="card" indicator-position="none">
              <el-carousel-item
                v-for="item in CRDetail.videosVo"
                :key="item.fileId"
              >
                <Video :url="$getFullUrl(item.url)" theme="blue" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>

        <!--相关文物  -->
        <div
          class="content-item display-detail_relateRc"
          ref="units"
          v-if="relateRelics.length > 0"
        >
          <div class="intro-title">
            <svg-icon icon-class="glww" style="font-size: 44px"></svg-icon>
            <span>相关文物</span>
          </div>
          <el-row :gutter="26">
            <el-col
              :span="index == 0 ? 12 : 4"
              v-for="(item, index) in relateRelics"
              :key="index"
            >
              <div
                class="img-container wow animate__animated animate__fadeInUp"
                @click="handleToCr(item)"
              >
                <img :src="item.faceImagePressUrl" alt="" />
                <div class="cr-name-intro">
                  <div class="cr-name">{{ item.name }}</div>
                  <!-- <div class="cr-intro" v-html="item.intro"></div> -->
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 相关文献 -->
        <div
          class="content-item display-detail_lts"
          v-if="CRDetail.literatureVo && CRDetail.literatureVo.length > 0"
        >
          <!-- <div class="wrapper"> -->
          <div class="custom_title wow animate__animated animate__fadeInUp">
            <div class="desc">
              <div class="divider"></div>
              <img
                src="@/assets/imgs/display/normal/title-desc.png"
                class="modify"
                alt=""
              />
            </div>
            <div class="center">
              <svg-icon icon-class="wenxian"></svg-icon>
              <span class="title">相关文献</span>
            </div>
            <div class="desc">
              <img
                src="@/assets/imgs/display/normal/title-desc.png"
                class="modify"
                alt=""
              />
              <div class="divider"></div>
            </div>
          </div>
          <div class="lts-content wow animate__animated animate__fadeInUp">
            <el-table
              :data="CRDetail.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 SearchBar from "@/components/SearchBar";
import AudioPlayer from "@/components/AudioPlayer";
import Video from "@/components/Video";
// import CustomTitle from "@/components/CustomTitle";
import ReaderOperations from "@/components/ReaderOperations";
// import QRCode from "qrcodejs2";
import { getRCDetailByIdV2, crRecommendByPage } from "@/api/culturalRelic";
import { previewFile } from "@/utils/index";

export default {
  components: {
    AudioPlayer,
    ReaderOperations,
    Video,
    "el-image-viewer": () =>
      import("element-ui/packages/image/src/image-viewer"),
  },
  data() {
    let vm = this;
    return {
      imgViewerVisible: false,
      CRDetail: {},
      relateRelics: [],
      audioPlaying: true,
      dotImg: require("@/assets/imgs/display/normal/mz-dot.png"),
      dotImgS: require("@/assets/imgs/display/normal/mz-dot-s.png"),
      page: null,
    };
  },
  async mounted() {
    this.loadDetail();
  },
  methods: {
    async loadDetail() {
      let crId = this.$route.params.crId;
      if (crId) {
        let res = await getRCDetailByIdV2({ crId });
        if (res.code == 0) {
          this.CRDetail = res.data.culturalRelicVo;
          this.relateRelics = res.data.recommendList.records;
          // 获取关联文物
          // this.loadCrRecommend();
          this.$nextTick(() => {
            this.replaceFaceImage();
            if (this.CRDetail.audiosVo && this.CRDetail.audiosVo.length > 0) {
              this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
              this.$refs.AudioPlayer.play();
            }
          });
        }
      }
    },

    async loadCrRecommend() {
      const {
        crId,
        deptId,
        directory,
        level,
        name,
        regionCode,
        remark,
        sourceWay,
        status,
        textureType,
        themeWord,
        type,
        years,
      } = this.CRDetail;
      // debugger
      const params = {
        crId,
        // deptId,
        // directory,
        // level,
        // name,
        // regionCode,
        // remark,
        // sourceWay,
        // status,
        // textureType,
        // themeWord,
        type,
        // years,
        page: 1,
        limit: 5,
      };
      let res = await crRecommendByPage(params);
      this.relateRelics = res.data.records;
      console.log("res", res);
    },

    replaceFaceImage() {
      var img = new Image(); //新建一个图片对象
      let url; //最终显示的大图
      // debugger
      if (this.CRDetail.faceImagePressUrl) {
        url = this.$getFullUrl(this.CRDetail.faceImageUrl);
      } else if (this.CRDetail.imagesVo.length > 0) {
        url = this.$getFullUrl(this.CRDetail.imagesVo[0].url);
      }
      let faceImage = document.getElementById("faceImage");
      img.src = url;
      img.onload = function () {
        faceImage.src = url;
      };
    },
    handleBack() {
      this.$router.go(-1);
    },

    handleTo3D() {
      window.open(this.CRDetail.url3d, "_blank");
    },

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

    handelPreviewImages(items, hasImages) {
      this.imgViewerVisible = true;
      if (hasImages) {
        this.imgList = items.map((item) => this.$getFullUrl(item.url));
      } else {
        this.imgList = items.map((item) => this.$getFullUrl(item));
      }
    },
    handleToDetail(crId) {
      const newPage = this.$router.resolve({
        path: `culturalReli/${crId}`,
      });
      window.open(newPage.href, "_blank");
    },
    // 点击音频
    handleClickAudio() {
      this.audioPlaying = !this.audioPlaying;
      if (this.audioPlaying) {
        this.$refs["AudioPlayer"].play();
        // console.log(this.$refs['audioContainer']);
      } else {
        this.$refs["AudioPlayer"].pause();
      }
    },

    // 关联文献的行样式调整
    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);
    },

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

    handleToCr(item) {
      const { crId } = item;
      const newPage = this.$router.resolve({
        path: "/culturalRelic/" + crId,
      });
      window.open(newPage.href, "_blank");
    },
  },
};
</script>
  
  <style lang="scss" >
// 自定义分页器样式
#page {
  height: 30px;
  display: flex;
  justify-content: center;
}
.page-item {
  cursor: pointer;
}
</style>
  
  <style lang="scss" scoped>
// 中国风主题样式
/**公共样式开始 */
$blue: #2069c4;
.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 {
  background: url("@/assets/imgs/display/normal/bg1.png");
}
.content-item {
  width: 100%;
}

.custom_title {
  display: flex;
  width: 100%;
  padding: 50px 0 40px 0;
  align-items: center;
  .center {
    width: 180px;
    margin: 0 10px;
    display: flex;
    align-items: center;
    .svg-icon {
      font-size: 50px;
      color: $blue;
      margin-right: 10px;
    }
    .title {
      font-size: 26px;
      font-weight: 400;
      color: $blue;
      line-height: 101px;
    }
  }
  .desc {
    flex: 1;
    display: flex;
    align-items: center;
    .modify {
      width: 16px;
      margin: 0 6px;
      img {
        width: 100%;
      }
    }
    .divider {
      flex: 1;
      height: 6px;
      background: url("@/assets/imgs/display/normal/divider.png") 100% 100%
        repeat-x;
      img {
        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;
  }
}

.intro-title {
  font-size: 26px;
  font-weight: 400;
  color: #2069c4;
  line-height: 90px;
  .svg-icon {
    margin-right: 10px;
    font-size: 36px;
  }
}
/**公共样式结束 */

/**样式开始 */
.content {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /**轮播图 */
  .display-detail_imgs {
    height: 436px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .wrapper {
    // width: 1200px;
    // padding: 0 13%;
    // width: 100%;
    width: 78%;
    display: flex;
    justify-content: center;
    .inner {
      width: 100%;
      box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 200px;
      position: relative;
      margin: 36px 0 70px;
      /**基本信息 */
      .display-detail_basic_info {
        position: relative;
        .info-container {
          display: flex;
          justify-content: space-between;
          padding: 60px 36px;
          height: 100%;
          background-color: #fff;
          .info-container-left {
            min-height: 200px;
            max-height: 400px;
            margin-right: 50px;
            flex: 1;
            overflow: hidden;
            position: relative;
            // .imagesVo-image-container {
            //   // position: relative;

            // }
            .img-container {
              height: 100%;
              width: 100%;
              img {
                width: 100%;
                height: 100%;
                object-fit: contain;
              }
            }
          }
          .info-container-right {
            flex: 1;
            min-height: 200px;

            .info-title {
              font-size: 28px;
              font-weight: bold;
              color: #444;
              padding-bottom: 20px;
              margin-bottom: 20px;
              border-bottom: 2px solid #f2f2f2;
              .view-count {
                font-size: 18px;
                margin-top: 10px;
                color: #999;
                font-weight: normal;
                .svg-icon {
                  margin-right: 10px;
                }
              }
            }
            .basic-info {
              .body-item {
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                .label {
                  display: flex;
                  align-items: center;
                  width: 140px;
                  // margin-right: 26px;
                  // margin-bottom: 10px;
                  font-weight: bold;
                  color: #858585;
                  .svg-icon {
                    width: 24px;
                    height: 24px;
                    margin-right: 16px;
                  }
                }
              }
            }

            .right {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              .qrcode {
                margin-bottom: 28px;
                display: flex;
                justify-content: center;
                img {
                  width: 50%;
                  height: 100%;
                }
              }
              .tools {
                width: 100%;
                .tools-item {
                  color: #858585;
                  flex: 1;
                  display: flex;
                  align-items: center;
                  cursor: pointer;
                  .svg-icon {
                    width: 22px;
                    height: 22px;
                    margin-right: 8px;
                  }
                  .like {
                    color: #831122;
                  }
                  .collect {
                    color: #2069c4;
                  }
                }
              }
            }
          }
        }
        .audio {
          position: absolute;
          right: -120px;
          top: 34px;
          cursor: pointer;
          animation: audioRotate 8s linear infinite;
          transform-origin: center center;
          border: 2px solid $blue;
          padding: 10px;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #fff;
          transition: all 0.5s ease;
          &:hover {
            box-shadow: 0 0 14px rgb(0 0 0 / 40%);
          }
          .svg-icon {
            color: $blue;
            font-size: 80px;
          }
          img {
            width: 60px;
            height: 60px;
          }
        }
      }

      /**简介和视频 */
      .display-detail_intro {
        background-image: url("@/assets/imgs/display/normal/bg.png");
        background-size: 1%;
        display: flex;
        min-height: 265px;
        .intro-content,
        .intro-video {
          flex: 1;
        }
        .intro-content {
          padding: 20px;
          margin: 20px;
          line-height: 28px;

          .intro-content-container {
            text-indent: 34px;
          }
        }
      }

      // 关联文物
      .display-detail_relateRc {
        min-height: 560px;
        background-image: url("@/assets/imgs/display/normal/bg.png");
        background-size: 1%;
        padding: 50px 0;
        .intro-title {
          text-indent: 40px;
        }
        .el-col {
          .img-container {
            width: 100%;
            height: 460px;
            position: relative;

            .cr-name-intro {
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0;
              top: 0;
              // padding: 100px 28px 50px;
              display: flex;
              justify-content: center;
              align-items: center;
              transition: all ease 0.5s;
              // background-image: linear-gradient(
              //   to top,
              //   rgba(0, 0, 0, 0.8),
              //   rgba(0, 0, 0, 0.1)
              // );
              .cr-name {
                font-size: 48px;
                font-weight: bold;
                color: #ffffff;
                text-align: center;
                margin-bottom: 40px;
                transition: all 0.5s ease;
                opacity: 0;
              }
              .cr-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 {
              width: 100%;
              height: 100%;
            }
          }
          &:first-child {
            .cr-name-intro {
              &:hover {
                background-image: linear-gradient(
                  to top,
                  rgba(0, 0, 0, 0.8),
                  rgba(0, 0, 0, 0.1)
                );
                .cr-name {
                  opacity: 1;
                }
              }
            }
          }
          &:not(&:first-child) {
            margin-bottom: 30px;
            &:hover {
              .cr-name {
                opacity: 1;
              }
              .cr-name-intro {
                background-image: linear-gradient(
                  to top,
                  rgba(0, 0, 0, 0.8),
                  rgba(0, 0, 0, 0.1)
                );
              }
            }
            .cr-name {
              font-size: 18px;
              opacity: 0;
            }
            .cr-intro {
              display: none;
            }

            .img-container {
              height: 214px;
            }
            .cr-name-intro {
              background-image: linear-gradient(
                to top,
                rgba(0, 0, 0, 0),
                rgba(0, 0, 0, 0)
              );
            }
          }
        }
        .img-container {
          width: 100%;
          height: 100%;
          cursor: pointer;
          overflow: hidden;
          &:hover {
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
            img {
              transform: scale(1.1);
            }
          }
          img {
            width: 100%;
            height: 214px;
            object-fit: cover;
            transition: all 0.5s ease;
          }
        }
      }

      /**关联文献 */
      .display-detail_lts {
        background-color: #fafafa;
        .lts-content {
          flex: 1;
        }
      }
    }
  }
}
::v-deep .el-carousel__item--card {
  width: 100%;
  height: 100%;
  transform: translateX(0) scale(1) !important;
}

::v-deep .el-carousel {
  height: 100%;
}
::v-deep .el-carousel__container {
  height: 100%;
}
::v-deep .el-tree {
  background: transparent;
  .el-tree-node__content {
    height: 50px;
    :hover {
      background: #fff;
      color: $blue;
    }
  }
}
@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>