<!-- -->
<template>
  <div class="cr-detail">
    <div class="wrapper">
      <div class="back" @click="handleBack">
        <svg-icon icon-class="mz-fh"></svg-icon>
        <span>返回上页 </span>
      </div>
      <el-row class="cr-detail_info" :gutter="10">
        <el-col class="cr-images" :span="18">
          <el-carousel
            indicator-position="outside"
            :autoplay="false"
            height="600px"
          >
            <el-carousel-item
              v-for="(item, index) in CRDetail.imagesVo"
              :key="index"
            >
              <el-image
                class="el-image-container"
                :src="$getFullUrl(item.pressUrl || item.url)"
                fit="contain"
              ></el-image>
            </el-carousel-item>
          </el-carousel>
          <div class="enlarge" @click="handelPreviewImages">
            <img src="@/assets/imgs/enlarge-s.png" alt="" />
          </div>
        </el-col>
        <el-col class="relic-info" :span="8">
          <div class="info-title">
            <div class="title">
              {{ CRDetail.name }}
            </div>
            <div class="view-container">
              <svg-icon icon-class="view" class="view-svg-icon"></svg-icon>
              <span class="view-text">{{ CRDetail.browseCount }}</span>
            </div>
          </div>
          <div class="info-body">
            <div class="basic-info">
              <div class="body-item">
                <span class="label">年份</span>
                <span class="value">{{ CRDetail.yearsLabel }}</span>
              </div>
              <div class="body-item">
                <span class="label">类别</span>
                <span class="value">
                  {{ CRDetail.typeLabel }}
                </span>
              </div>
              <div class="body-item">
                <span class="label">级别</span>
                <span class="value">{{ CRDetail.levelLabel }}</span>
              </div>
              <div class="body-item">
                <span class="label">质地</span>
                <span class="value">{{ CRDetail.textureTypeLabel }}</span>
              </div>
              <div class="body-item">
                <span class="label">尺寸</span>
                <span class="value">{{ CRDetail.detailSize }}</span>
              </div>
              <div class="body-item">
                <span class="label">馆藏单位</span>
                <span class="value">{{ CRDetail.deptName }}</span>
              </div>
            </div>
            <!-- <div class="qrcode" ref="qrCodeUrl"></div> -->
          </div>
          <div class="view-3d" @click="handleTo3D" v-if="CRDetail.url3d">
            <img
              src="@/assets/imgs/cr/3d-black.png"
              alt=""
              srcset=""
              width="24px"
              height="24px"
            />
            <span>查看3D模型</span>
          </div>
          <ReaderOperations
            :loveCount="CRDetail.loveCount"
            :loveCountStatus="Boolean(CRDetail.loveCountStatus)"
            :collectCount="CRDetail.collectCount"
            :collectCountStatus="Boolean(CRDetail.collectCountStatus)"
            :sourceId="CRDetail.crId"
            :title="CRDetail.name"
            :sourceType="'biz_cultural_relic'"
            @reload="loadDetail"
          />

          <div
            class="audio"
            :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>
        </el-col>
      </el-row>

      <div class="cr-detail_intro">
        <CustomTitle text="文物简介" />
        <div class="intro-and-video">
          <div class="intro-content wow animate__animated animate__fadeInLeft">
            {{ CRDetail.intro }}
          </div>
          <div
            class="intro-video wow animate__animated animate__fadeInRight"
            v-if="CRDetail.videosVo && CRDetail.videosVo.length > 0"
          >
            <el-carousel trigger="click" height="320px">
              <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>

      <div class="cr-detail_relate_cr" v-if="relateRelics.length > 0">
        <CustomTitle text="关联文物" />
        <el-row :gutter="40" class="cr-list">
          <el-col
            :span="8"
            class="cr-item"
            @click.native="handleToDetail(item.crId)"
            v-for="(item, index) in relateRelics"
            :key="index"
          >
            <div class="container wow animate__animated animate__fadeInUp">
              <div class="img">
                <img
                  v-if="
                    $getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
                  "
                  :src="
                    $getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
                  "
                  width="100%"
                  :alt="item.name"
                />
                <img
                  v-else
                  src="@/assets/404_images/no-pic.png"
                  alt=""
                  width="100%"
                  height="100%"
                  class="img"
                />
              </div>
              <div class="desc">
                <span class="name">{{ item.name }}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div
        class="cr-detail_relate_lt"
        v-if="CRDetail.literatureVo && CRDetail.literatureVo.length > 0"
      >
        <CustomTitle text="相关文献" />
        <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>
    <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: {
    SearchBar,
    CustomTitle,
    AudioPlayer,
    ReaderOperations,
    Video,
    "el-image-viewer": () =>
      import("element-ui/packages/image/src/image-viewer"),
  },

  data() {
    return {
      options: [
        {
          value: "name",
          label: "文物名称",
        },
      ],
      selectValue: "",
      keyword: "",
      CRDetail: {},
      slideImageWidth: "",
      imgViewerVisible: false,
      relateRelics: [],
      imgList: [],
      audioPlaying: true,
    };
  },
  mounted() {
    // this.creatQrCode();
    this.loadDetail();
  },
  methods: {
    creatQrCode() {
      this.$nextTick(() => {
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
          text: "http://www.gzmuseum.com/", // 需要转换为二维码的内容
          width: 100,
          height: 100,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
      });
    },
    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(() => {
            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);
    },
    handleBack() {
      this.$router.go(-1);
    },

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

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

    handelPreviewImages() {
      this.imgViewerVisible = true;
      this.imgList = this.CRDetail.imagesVo.map((item) =>
        this.$getFullUrl(item.url)
      );
    },
    handleToDetail(crId) {
      console.log(crId);
      this.$router.replace({ name: "culturalRelicDetail", params: { crId } });
    },
    // 点击音频
    handleClickAudio() {
      this.audioPlaying = !this.audioPlaying;
      if (this.audioPlaying) {
        this.$refs["AudioPlayer"].play();
        // console.log(this.$refs['audioContainer']);
      } else {
        this.$refs["AudioPlayer"].pause();
      }
    },

    // 预览关联文献
    handleViewLt(item) {
      previewFile(item.files[0].url, item.files[0].name);
    },

    // 关联文献的行样式调整
    tableRowStyle({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return {
          background: "#f9f9f9 !important",
        };
      } else {
        return {
          background: "#fff !important",
        };
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.mr-20 {
  margin-right: 20px;
}
$label: #9f9c9a;

.wrapper {
  width: 1200px;
  margin: 60px auto;
  background-color: #fff;
  padding: 40px;
  .back {
    font-size: 18px;
    display: flex;
    align-items: center;
    color: $label;
    cursor: pointer;
    .svg-icon {
      font-size: 28px;
      margin-right: 10px;
    }
    span {
      font-size: 16px;
    }
  }
  /**文物基本信息 */
  .cr-detail_info {
    margin-top: 32px;
    // display: flex;
    img {
      max-width: 100%;
      height: auto;
    }
    .cr-images {
      width: 700px;
      margin-right: 32px;
      position: relative;
      .el-image {
        background-color: #f5f5f9;
      }
      .enlarge {
        position: absolute;
        bottom: 60px;
        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;
        }
      }
    }
    .relic-info {
      position: relative;
      .info-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 40px;
        .title {
          font-size: 28px;
          font-weight: bold;
          color: #444;
        }
        .view-container {
          .view-svg-icon {
            color: #999;
            margin-right: 5px;
          }

          .view-text {
            color: #999;
          }
        }
        .play {
          margin-left: 10px;
          font-size: 32px;
          cursor: pointer;
        }
      }
      .info-body {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        .basic-info {
          .body-item {
            display: flex;
            .label {
              display: block;
              width: 80px;
              margin-right: 26px;
              margin-bottom: 10px;
              font-weight: bold;
              color: #9f9c9a;
            }
          }
        }
      }

      .view-3d {
        margin: 32px 0;
        padding: 6px 10px;
        width: 100%;
        background-color: #c1925b;
        // border-radius: 48px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;
        &:hover {
          box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
            rgba(0, 0, 0, 0.23) 0px 6px 6px;
        }
        img {
          margin-right: 10px;
        }
      }
      .audio {
        position: absolute;
        right: -180px;
        top: 34px;
        cursor: pointer;
        animation: audioRotate 8s linear infinite;
        transform-origin: center center;
        border: 2px solid #2069c4;
        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: #2069c4;
          font-size: 80px;
        }
        img {
          width: 60px;
          height: 60px;
        }
      }
      @keyframes audioRotate {
        0% {
          transform: rotateZ(0deg);
        }
        100% {
          transform: rotateZ(360deg);
        }
      }

      @-webkit-keyframes audioRotate {
        0% {
          transform: rotateZ(0deg);
        }
        100% {
          transform: rotateZ(360deg);
        }
      }
    }
    .content {
      text-indent: 32px;
    }
  }

  // 文物简介
  .cr-detail_intro {
    margin-top: 32px;
    .intro-and-video {
      display: flex;
      justify-content: space-between;
      .intro-content {
        flex: 1;
        line-height: 1.5;
        text-indent: 32px;
        padding: 0 30px 0 20px;
      }
      .intro-video {
        min-height: 320px;
        flex: 1;
      }
    }
  }
  /**文物相关文献 */
  // .cr-detail_relate_lt {
  //   margin-top: 32px;
  //   .book-item {
  //     margin-bottom: 10px;
  //   }
  // }

  .cr-detail_relate_lt {
    margin: 100px 0;
    .wrapper {
      display: flex;
      background-color: #fafafa;
      border: 2px solid #cccccc;
      border-left: none;
      .lts-content {
        flex: 1;
        padding: 10px;
      }
    }
  }
  /**关联文物 */
  .cr-detail_relate_cr {
    margin-top: 32px;
    .cr-list {
      .cr-item {
        margin-bottom: 40px;
        .container {
          border: 1px solid #f1f1f1;
          height: 300px;
          position: relative;
          display: flex;
          flex-direction: column;
          cursor: pointer;
          &:hover {
            img {
              transform: scale(1.2);
            }
            .desc {
              background-color: #2069c4;
              color: #fff;
            }
          }
          .img {
            background-color: #f8f8f8;
            height: 240px;
            cursor: pointer;
            overflow: hidden;
            img {
              height: 100%;
              object-fit: contain;
              transition: all 0.5s ease;
              // width: auto;
            }
          }
          .desc {
            padding: 16px 0;
            display: flex;
            justify-content: center;
            transition: all 0.5s ease;
            flex: 1;
          }
        }
      }
    }
  }
  /**关联视频 */
  .cr-detail_relate_video {
    margin: 32px 0;
    .video-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      .video-box {
        display: flex;
        justify-content: center;
        border: 1px solid #000;
        video {
          width: 800px;
        }
      }
      .info-box {
        width: 800px;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}

.text-indent {
  text-indent: 28px;
}

.el-image-container {
  width: 100%;
  height: 100%;
}

::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%;
}
</style>
