<template>
  <ui-page-layout :title="$t('文章详情')">
    <div class="px-24rem bg-white w-full pb-98rem">

      <div class="w-full bg-white h-auto rem-30rem pt-30rem mb-14rem">
        <div class="text-size-40rem text-[#000]   mb-27rem">
          {{article.title}}
        </div>
        <div class="text-[#B8B8B8] text-size-24rem mb-19rem">{{article.author}}</div>
        <div class="flex text-[#B8B8B8] text-size-14rem items-center justify-between mb-33rem">
          <div class="flex items-center">

            <div class=" flex items-center">
              <img class="w-18rem h-auto mr-8rem" src="/imgs/time.png" />
              <span>{{article.publishTimeStr}}</span>
            </div>
          </div>
          <div class="flex items-center text-size-20rem">
            <div class="mr-24rem">{{article.commentNum}} {{$t('评论')}}</div>
            <div class="mr-24rem">{{article.likeNum}} {{$t('点赞')}}</div>
            <div class="mr-24rem">{{article.collectNum}} {{$t('收藏')}}</div>
            <div>{{article.viewNum}} {{$t('浏览')}}</div>
          </div>
        </div>
        <div class="bg-[#F7F7F7] p-24rem text-[#686868] text-size-16rem leading-32rem whitespace-pre-wrap mb-30rem">
          <p class="indent-32rem">
            {{article.description}}
          </p>
        </div>
        <div class="content" v-html="article.content"></div>
<!--        <div class="p-24rem bg-[#f7f7f7] text-[#686868] leading-32rem text-size-16rem mb-30rem">-->
<!--          <p>作者：香港特派员赵圆松；期刊：尖瑞科技期刊（ID：business-data）</p>-->
<!--          <p>本文由 @商业数据派 原创发布于杂志期刊，未经许可，禁止转载。</p>-->
<!--          <p>题图来自 Unsplash，基于CC0协议</p>-->
<!--        </div>-->
        <div class="flex justify-center mb-30rem mt-30rem">
          <div type="primary" round
               @click="$router.push('/open-vip')"
            class="h-60rem w-500rem bg-primary flex justify-center items-center rounded-full text-white">{{$t('成为会员，查看更多精彩内容！')}}
          </div>
        </div>
        <ui-devider class="mb-30rem"></ui-devider>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <el-switch :value="article.subscribe" @change="handleSubscribe" inactive-color="#E1E1E1" class="mr-10rem">
            </el-switch>

            <div class="text-size-30rem text-[#282828]">{{$t('开启订阅，将为您推荐同类精彩内容！')}}</div>
          </div>
          <!-- <div class="flex items-center">
            <el-button class="action-button done" round> 收藏 | 2 </el-button>
            <el-button class="action-button" round> 点赞 | 20 </el-button>
            <el-button @click="exportVisible = true" class="action-button" round>
              分享
            </el-button>
          </div> -->
        </div>
        <div class="h-46rem"></div>

        <div class="rem-30rem pt-37rem pb-44rem" id="comment-list">
          <div class="text-size-30rem mb-16rem">{{$t('全部评论')}}({{article.commentNum}})</div>
          <ui-devider></ui-devider>
          <div v-for="comment in comments" :key="item">
            <div class="flex items-start py-30rem">
              <img class="w-60rem h-60rem rounded-full" :src="comment.refUserAvatarUrl" />
              <div class="mt-8rem ml-14rem">
                <div class="flex mb-14rem items-center">
                  <div class=" text-size-30rem mr-30rem">{{comment.refUserName}}</div>
                  <div class="text-size-24rem text-[#B8B8B8]">{{comment.createTimeStr}}</div>
                </div>
                <div class="text-[#686868] leading-34rem text-size-24rem">
                  {{comment.content}}
                </div>
              </div>
            </div>
            <ui-devider></ui-devider>
          </div>
          <div class="flex justify-center">
            <el-button @click="$router.push('/article-comment?code=' + article.code)" type="text" class="!text-[#686868]">{{ $t("查看更多评论") }}</el-button>
          </div>
        </div>
      </div>
      <van-action-sheet v-model="showShare"   >
        <div class="h-334rem bg-[#fff] flex justify-around items-center">
          <img @click="showShare = false" src="/imgs/h5-action-close.png"  class="w-32rem h-32rem absolute right-30rem top-30rem"/>
          <div @click="() => {
            showShare = false
            exportVisible = true
          }" class="flex flex-col items-center">
            <img  src="/imgs/h5-share-post.png" class="w-70rem"/>
            <div class="font-light text-size-30rem text-primary mt-23rem">{{$t('分享海报')}}
            </div>
          </div>
          <div @click="handleShareLink" class="flex flex-col items-center">
            <img src="/imgs/h5-share-link.png" class="w-70rem"/>
            <div class="font-light text-size-30rem text-primary mt-23rem">
              {{$t('分享链接')}}
            </div>
          </div>
        </div>
      </van-action-sheet>

      <van-overlay :show="exportVisible">
        <div  class="w-screen h-full flex flex-col items-center justify-between ">
          <div v-if="!postUrl" ref="post"
            class="mt-24rem w-675rem h-1037rem  py-38rem flex flex-col items-center bg-white rounded-10rem px-45rem">
            <div class=" text-primary text-size-36rem mb-72rem">
              {{ $t("杂志期刊") }}
            </div>
            <img :src="article.coverUrl" class="w-full h-328rem object-cover" />
            <div class="text-size-30rem leading-42rem text-[#000A04] mt-28rem ">
              {{article.title}}
            </div>
            <div class="text-size-30rem text-[#686868] leading-40rem mt-36rem font-light">
              {{article.description}}
            </div>
            <div class="flex items-center w-full justify-end mt-74rem pb-45rem">
              <div class="mr-10rem text-[#B8B8B8] text-size-14rem h-84rem flex flex-col justify-between">
                <div class="mb-10rem">{{$t('作者')}}：{{article.author}}</div>
                <div class="text-right">{{$t('时间')}}：{{article.publishTimeStr}}</div>
              </div>
              <img src="/imgs/export-qrcode.png" class="w-120rem h-120rem" />
            </div>
          </div>
          <img v-else :src="postUrl" >

          <div class="w-full h-200rem bg-white flex justify-center items-center relative">
            <img @click="exportVisible = false" src="/imgs/h5-action-close.png"
              class="w-32rem absolute top-30rem right-30rem" />
            <div @click="exportPost"
              class="w-600rem h-88rem bg-primary flex justify-center items-center rounded-full text-white">
              {{ $t("保存海报") }}
            </div>
          </div>
        </div>

      </van-overlay>
      <div class="absolute left-0 bottom-0 h-88rem w-full bg-[#f7f7f7] flex items-center">
        <div class="flex-1 flex pl-24rem items-center justify-between">
          <img class="w-13rem mr-12rem" src="/imgs/comment-arrow-left.png" />
          <van-field
                  v-model="comment"
                  :placeholder="$t('发表评论')"
                  @focus="commentFocus=true"
                  @blur="handleCommentInputBlur"
            class="flex items-center !p-0 !pl-24rem bg-transparentborder-1rem border-[#707070] border-solid !flex-1 h-60rem rounded-full bg-white">
          </van-field>
          <div class="pl-24rem pr-24rem" v-if="commentFocus">
            <el-button @click="handleComment"   type="text" class="pl-24rem pr-24rem !text-[#686868]">{{ $t("发送") }}</el-button>
          </div>
        </div>

        <div v-if="!commentFocus" class="flex items-center flex-1 justify-around">
          <img @click="handleScrollToComment" src="/imgs/h5-message.png" class="w-37rem" />
          <img v-if="!article.collect" @click="handleCollect" src="/imgs/comment-collection.png" class="w-37rem" />
          <img v-else @click="handleCollect" src="/imgs/comment-collection-1.png" class="w-37rem" />
          <img v-if="!article.like" @click="handleLike" src="/imgs/comment-like.png" class="w-36rem" />
          <img v-else @click="handleLike" src="/imgs/comment-like-1.png" class="w-36rem" />
          <img @click="showShare = true" src="/imgs/comment-share.png" class="w-41rem" />
        </div>
      </div>
    </div>
  </ui-page-layout>
</template>

<script>
import FileSaver from "file-saver";
import domtoimage from "dom-to-image";
export default {
  methods: {
    async handleShareLink(){

      const str = window.location.href;
      const inputo = document.createElement("input");
      document.body.appendChild(inputo);
      inputo.value = str;
      inputo.setAttribute('readOnly', 'readOnly')
      inputo.select();
      document.execCommand("Copy");
      document.body.removeChild(inputo);
      this.$toast(this.$t('链接已复制到剪贴板'));
    },
    async handleCommentInputBlur(){
        setTimeout(()=>{
           this.commentFocus =false;
        },1000);
    },
    async exportPost() {

      // const url = await domtoimage.toPng(this.$refs.post, { filter: false });
      // window.open(url);
      this.$toast(this.$t('长按上面图片保存到相册'));
    },
  async handleCollect(){

    let resp = await  this.$http.post(this.$api.cms.collect,this.$qs.stringify({refArticle:this.article.code}));
    if(resp.data.status === 200){
      this.handleLoadData();
    }

  },async handleLike(){

    let resp = await  this.$http.post(this.$api.cms.like,this.$qs.stringify({refArticle:this.article.code}));
    if(resp.data.status === 200){
      this.handleLoadData();
    }

  },
  async handleLoadData(){
    let res = await  this.$http.post(this.$api.cms.detail,this.$qs.stringify(this.$route.query));
    if(res.data.status === 200){
      this.article = res.data.data.cmsArticle;
    }
  },
  async handleSubscribe(){
    let resp = await  this.$http.post(this.$api.cms.subscribe,this.$qs.stringify({refArticle:this.article.code}));
    if(resp.data.status === 200){
      this.handleLoadData();
    }
  },
  async handleCopyLink(){
    var url =document.getElementById("share-link");
    url.select(); // 选择对象
    document.execCommand("Copy"); // 执行浏览器复制命令
  },
  async handleComment(){

    let resp = await this.$http.post(this.$api.cms.comment,this.$qs.stringify({refArticle:this.article.code,content:this.comment}))

    if(resp.data.status === 200){
      this.$toast(this.$t('评论成功'));
      this.handleLoadData();
      this.handleLoadComments();
      this.comment = '';
    }else{
      this.$toast(this.$t(resp.data.desc));
    }

  },
  async handleLoadComments(pageNum){

    if(!pageNum){
      pageNum = 1;
    }

    let resp = await this.$http.post(this.$api.cms.listComments,this.$qs.stringify({refArticle:this.$route.query.code,pageNum:pageNum}))

    if(resp.data.status === 200){
      if(pageNum === 1){
        this.comments = resp.data.data.cmsArtComments;
      }else{
        this.comments = this.comments.concat(resp.data.data.cmsArtComments);
        this.commentLast = (!resp.data.data.cmsArtComments.length)
      }
    }
  }
  ,  handleScrollToComment(){
      let item = document.querySelector("#comment-list");
      let parent = document.querySelector(".ui-scroll-view ");
      parent.scrollTo({
        top: item.offsetTop ,//需要父元素设置postion(relative、absolute、fixed)
        behavior: "smooth"
      })
    },
  },
  watch:{
    exportVisible(){
       if(this.exportVisible){
          this.$nextTick(()=>{
            domtoimage.toSvg(this.$refs.post, { filter: false ,scale:8}).then((url)=>{
              this.postUrl = url;
            });
          })

         //  FileSaver.saveAs(url, "post.png");
       }
    }
  },

  computed:{
    shareUrl(){
      return window.location.href;
    }
  },
  async created() {
    this.handleLoadData();
    this.handleLoadComments();
  },
  data() {
    return {
      postUrl:'',
      exportVisible: false,
      subscriped: true,
      html: ``,
      article:{},
      comments:[],
      comment:'',
      commentPageNum:1,
      commentLast:false,
      commentFocus:false,
      showShare:false
    };
  },
};
</script>

<style>
.detail .content {}

.detail .action-button {
  @apply !font-light border-1rem !border-primary border-solid !text-primary ml-30rem;
}

.detail .action-button.done {
  @apply bg-primary !text-white;
}

.detail .el-textarea textarea {
  @apply h-full bg-[#F7F7F7];
}
</style>
