<template>
  <article class="global">
    <div class="title">{{ title }}</div>
    <div v-if="isShowView">
      <el-button size="small" style="ma" @click="openNewForm">
        全屏查看
      </el-button>
      <div v-if="isfile == true">
        <iframe
          id="map"
          :src="fileUrl"
          scrolling="no"
          frameborder="0"
          class="detail-content-right-text"
        />
      </div>
      <div v-if="isfile == false">
        <img :src="fileUrl" class="detail-content-right-img" />
      </div>
    </div>
    <viewer
      :trigger="$xss(formatTopicHTML(article.contentHtml || ''))"
      :options="options"
    >
      <div
        class="content-html"
        v-html="$xss(formatTopicHTML(article.contentHtml || ''))"
      />
    </viewer>
    <div v-if="video.cover_url" class="container-video-img-cover">
      <div class="warp-video-img-cover">
        <img
          class="video-img-cover"
          :src="video.cover_url"
          :alt="video.file_name"
          @click.stop="openVideo"
        />
        <svg-icon
          type="video-play"
          class="icon-play"
          style="font-size: 50px"
          @click="openVideo"
        />
      </div>
    </div>
    <!--帖子只展示图文混排的图片-->
    <div
      v-if="article.images && article.images.length > 0"
      v-viewer="{ url: 'data-source' }"
      class="images"
      @click="unpaid ? openVideo() : ''"
    >
      <el-image
        v-for="(image, index) in article.images"
        :key="index"
        class="image"
        :data-source="unpaid ? '' : image.url"
        :src="image.thumbUrl"
        :alt="image.filename"
      >
        <div slot="placeholder" class="image-slot">
          <i class="el-icon-loading" />
        </div>
      </el-image>
    </div>
    <div
      v-if="(article.attachments || []).length > 0"
      class="container-attachment"
    >
      <h3 class="name">{{ $t("topic.attachment") }}</h3>
      <div>
        <template v-for="(file, index) in article.attachments">
          <attachment-list
            :key="index"
            :file="file"
            :price="paidInformation.price"
            :is-paid="paidInformation.paid"
            :is-paid-attachment="paidInformation.isPaidAttachment"
            :attachment-price="paidInformation.attachmentPrice"
          />
        </template>
      </div>
    </div>
    <div v-if="unpaid && threadType === 1" class="hide-content-tip">
      {{ $t("pay.contentHide") }}
    </div>
    <nuxt-link
      v-if="category.name"
      :to="{ path: `/category/${category._jv.id}` }"
      class="tag"
      >{{ category.name }}</nuxt-link
    >
    <div v-if="location && location.location">
      <nuxt-link
        :to="`/topic/position?longitude=${location.longitude}&latitude=${location.latitude}`"
        class="location"
      >
        <span class="flex">
          <svg-icon type="location" class="icon" />
          <span> {{ location.location }} </span>
        </span>
      </nuxt-link>
    </div>
    <div v-if="threadType === 6" class="product">
      <product-item :item="article && article.postGoods" />
    </div>
    <div v-if="threadType === 4" class="audio">
      <template v-for="(file, index) in [...audio]">
        <audio-player
          :key="index"
          :file="file"
          :current-audio="currentAudio"
          @play="play"
          @pause="pause"
          @seek="seek"
          @seeking="seeking"
        />
      </template>
    </div>
    <video-pop
      v-if="showVideoPop"
      :cover-url="video.cover_url"
      :url="video.media_url"
      @remove="showVideoPop = false"
    />
    <audio id="audio-player" :src="currentAudio.url" style="display: none" />
  </article>
</template>

<script>
import s9e from "@/utils/s9e";
import isLogin from "@/mixin/isLogin";
import "viewerjs/dist/viewer.css";
import Viewer from "v-viewer/src/component.vue";

export default {
  name: "TopicContent",
  components: { Viewer },
  mixins: [isLogin],
  props: {
    article: {
      type: Object,
      default: () => {},
    },
    title: {
      type: String,
      default: () => "",
    },
    video: {
      type: Object,
      default: () => {},
    },
    audio: {
      type: Object,
      default: () => {},
    },
    paidInformation: {
      type: Object,
      default: () => {},
    },
    threadType: {
      type: Number,
      default: 0,
    },
    category: {
      type: Object,
      default: () => {},
    },
    location: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      isfile: false,
      isShowView: false,
      showVideoPop: false,
      fileUrl: "",
      options: {
        // 过滤表情
        filter(image) {
          return [...image.classList].indexOf("qq-emotion") < 0;
        },

        // 实际查看的图片链接
        url: (thumbImage) => {
          const image = this.article.imageSource.filter(
            (item) => item.fileName === thumbImage.alt
          );
          return image.length > 0 ? image[0].url : thumbImage.src;
        },
      },
      currentAudio: {
        id: "",
        url: "",
        currentTime: "",
        duration: "",
        audio: "",
        seeking: false,
        isPlay: false,
        isLoading: false,
      },
    };
  },
  computed: {
    unpaid() {
      if (process.client && this.paidInformation.paid) {
        this.removeTextHideCover();
      }
      return !(
        this.paidInformation.paid ||
        parseFloat(this.paidInformation.price) === 0
      );
    },
  },
  watch: {
    article: {
      handler() {
        this.addTextHideCover();
      },
      deep: true,
    },
  },
  mounted() {
    this.currentAudio.audio = document.getElementById("audio-player");
  },
  methods: {
    openNewForm() {
      window.open(this.fileUrl, "_blank");
    },
    formatTopicHTML(html) {
      return s9e.parse(html);
    },
    addTextHideCover() {
      if (!!this.article) {
        if (!!this.article.attachments[0]) {
          let filePath = this.article.attachments[0].filePath;
          if (!!filePath) {
            this.isShowView = true;
            if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(filePath)) {
              this.isfile = false;
              this.fileUrl = filePath;
            }
            if (
              /\.(xlsx|xls|csv|doc|docx|docx|rtf|ppt|pptx|pdf|zip|rar|7z|wps|txt|js|json|css|xml|sql|cs)$/.test(
                filePath
              )
            ) {
              this.isfile = true;
              this.fileUrl = "http://ow365.cn/?i=23468&furl=" + filePath;
            }
          }
        }
      }
      if (this.threadType !== 1) return;
      if (!this.unpaid) return;
      const contentHtml = document.querySelector(".content-html");
      if (parseInt(contentHtml.offsetHeight) > 100) {
        contentHtml.classList.add("hide-cover");
      }
    },
    removeTextHideCover() {
      const contentHtml = document.querySelector(".content-html");
      if (contentHtml) contentHtml.classList.remove("hide-cover");
    },
    openVideo() {
      if (!this.isLogin()) return;
      if (this.unpaid) return this.$emit("payForThread");
      this.showVideoPop = true;
    },
    play(file) {
      if (!this.isLogin()) return;
      if (this.unpaid) return this.$emit("payForThread");
      if (this.currentAudio.id !== file._jv.id) {
        this.resetAudio(this.currentAudio.audio);
        this.currentAudio.url = file.media_url;
        this.currentAudio.id = file._jv.id;
        this.currentAudio.audio.src = this.currentAudio.url;
        this.currentAudio.isLoading = true;
        this.currentAudio.audio.load();
      }
      window.setTimeout(() => {
        this.currentAudio.audio.play();
        this.currentAudio.isPlay = true;
        this.currentAudio.audio.addEventListener(
          "timeupdate",
          this.onProgressing
        );
        this.currentAudio.audio.addEventListener("ended", this.onEnded);
      }, 0);
    },
    onProgressing() {
      if (this.currentAudio.seeking) return;
      this.currentAudio.isLoading = false;
      this.currentAudio.duration = this.currentAudio.audio.duration;
      this.currentAudio.currentTime = this.currentAudio.audio.currentTime;
    },
    onEnded() {
      this.resetAudio(this.currentAudio.audio);
    },
    resetAudio(audio) {
      audio.removeEventListener("timeupdate", this.onProgressing);
      audio.removeEventListener("ended", this.onEnded);
      this.currentAudio.isPlay = false;
      this.currentAudio.duration = "";
      this.currentAudio.currentTime = "";
    },
    pause() {
      this.currentAudio.isLoading = false;
      this.currentAudio.isPlay = false;
      this.currentAudio.audio.pause();
    },
    seek(time) {
      this.currentAudio.seeking = false;
      this.currentAudio.currentTime = time;
      this.currentAudio.audio.currentTime = time;
    },
    seeking(time) {
      this.currentAudio.seeking = true;
      this.currentAudio.currentTime = time;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variable/color.scss";

.detail-content-right-text {
  width: 100%;
  height: 600px;
}
.detail-content-right-img {
  width: auto;
  height: 100%;
}

article {
  margin-top: 20px;

  > .title {
    font-weight: bold;
    font-size: 20px;
    // word-break: break-all;
    word-wrap: break-word;
    word-break: normal;
    max-width: 650px;
  }

  .content-html {
    max-width: 650px;
    margin-top: 22px;
    /*font-size: 16px;*/
    /*word-break: break-all;*/

    &.hide-cover {
      position: relative;

      &:after {
        position: absolute;
        display: block;
        left: 0;
        bottom: 0;
        content: "";
        width: 100%;
        height: 100px;
        background: linear-gradient(
          rgba(255, 255, 255, 0),
          rgba(255, 255, 255, 1)
        );
      }
    }
  }

  @media screen and (max-width: 1005px) {
    .title {
      font-size: 18px;
    }
  }

  > .images {
    cursor: pointer;
    margin-top: 30px;
    width: 660px;
    > .image {
      width: 200px;
      height: 200px;
      border-radius: 5px;
      margin-right: 20px;
      margin-bottom: 20px;
      > .image-slot {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: #f5f7fa;
        color: #909399;
        font-size: 22px;
      }
    }
  }

  @media screen and (max-width: 1005px) {
    > .images {
      max-width: 470px;
      width: 100%;
      > .image {
        width: 150px;
        height: 150px;
        border-radius: 5px;
        margin-right: 5px;
        margin-bottom: 5px;
      }
    }
  }

  > .container-attachment {
    margin-top: 30px;
    > .name {
      color: #6d6d6d;
      font-weight: bold;
      font-size: 16px;
    }
  }

  > .container-video-img-cover {
    margin-top: 30px;
    > .warp-video-img-cover {
      cursor: pointer;
      position: relative;
      display: inline-block;
      > .video-img-cover {
        display: block;
        max-width: 400px;
      }
      > .icon-play {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  > .hide-content-tip {
    margin-top: 20px;
    font-size: 16px;
    text-align: center;
  }

  > .tag {
    height: 25px;
    padding: 0 8px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 12.5px;
    margin-right: 15px;
    margin-top: 35px;
    background: $background-color-grey;
    border: 1px solid $background-color-grey;
    color: #777;
    font-size: 12px;
    &:hover {
      color: $color-blue-base;
      background: #fff;
      border: 1px solid $color-blue-base;
    }
  }
  .location {
    display: inline-block;
    background: #f7f7f7;
    border-radius: 13px;
    font-size: 12px;
    color: #777777;
    padding: 4px 10px;
    line-height: 16px;
    margin-top: 10px;
    background: $background-color-grey;
    border: 1px solid $background-color-grey;
    &:hover {
      color: $color-blue-base;
      background: #fff;
      border: 1px solid $color-blue-base;
      .icon {
        fill: $color-blue-base;
      }
    }
    .flex {
      display: flex;
      align-items: center;
    }
    .icon {
      margin-right: 4px;
      fill: #777;
    }
  }
  .product {
    margin: 45px auto 0;
    width: 450px;
  }
  .audio {
    margin: 45px auto 0;
  }
}
</style>
