<template>
  <div class="w-1200px detail">
    <ui-banner flag="文章详情"  :showPagination="true" banner-class=" my-20px"></ui-banner>

    <div class="flex">
      <div class="left mr-20px w-860px">
        <ui-shadow-box class="w-full bg-white h-auto px-30px pt-30px mb-14px shadow-md">
          <div class="text-size-24px text-[#000] font-thin mb-27px">
            {{article.title}}
          </div>
          <div
            class="flex text-[#B8B8B8] text-size-14px items-center justify-between mb-33px"
          >
            <div class="flex items-center">
              <div>{{article.author}}</div>
              <div class="ml-48px flex items-center">
                <img class="w-18px h-auto mr-8px" src="/imgs/time.png" />
                <span>{{article.publishTimeStr}}</span>
              </div>
            </div>
            <div class="flex items-center">
              <div class="mr-48px">{{article.commentNum}} {{$t('评论')}}</div>
              <div class="mr-48px">{{article.likeNum}} {{$t('点赞')}}</div>
              <div class="mr-48px">{{article.collectNum}} {{$t('收藏')}}</div>
              <div>{{article.viewNum}} {{$t('浏览')}}</div>
            </div>
          </div>
          <div
            class="bg-[#F7F7F7] p-24px text-[#686868] text-size-16px leading-32px whitespace-pre-wrap mb-30px"
          >
            <p class="indent-32px">
              {{article.description}}
            </p>
          </div>
          <div class="content" v-html="article.content"></div>

          <ui-devider class="mb-30px"></ui-devider>
          <div class="flex items-center justify-between">
            <div class="flex">
              <el-switch :value="article.subscribe" @change="handleSubscribe" inactive-color="#E1E1E1" class="mr-10px">
              </el-switch>

              <div class="text-size-16px">{{$t('开启订阅，将为您推荐同类精彩内容！')}}</div>
            </div>
            <div class="flex items-center">
              <el-button @click="handleCollect" class="action-button" :class="{'done':article.collect}" round> {{$t('收藏BTN')}} | {{article.collectNum}} </el-button>
              <el-button @click="handleLike" class="action-button" :class="{'done':article.like}" round> {{$t('点赞BTN')}} | {{article.likeNum}}  </el-button>
              <el-button @click="exportVisible = true" class="action-button" round>
                {{$t('分享')}}
              </el-button>
            </div>
          </div>
          <div class="h-46px"></div>
        </ui-shadow-box>
        <ui-shadow-box class="px-30px pt-37px pb-44px shadow-md">
          <div class="flex justify-between items-center mb-18px">
            <div class="flex items-center">
              <div class="text-size-24px mr-12px">{{ $t("评论T") }}</div>
              <div class="text-size-14px text-[#686868]">
                {{ $t("文明上网，理性发言！") }}
              </div>
            </div>
            <div class="text-size-14px text-primary">{{article.commentNum}} {{ $t("条评论") }}</div>
          </div>
          <el-input
            class="!bg-[#F7F7F7] h-100px mb-20px"
            type="textarea"
            :rows="2"
            :placeholder="$t('我来说两句')"
            v-model="comment"
          >
          </el-input>
          <div class="flex justify-end mb-14px">
            <el-button type="primary" class="text-white h-30px !py-0" @click="handleComment" round
              >{{$t('发布')}}</el-button
            >
          </div>

          <template v-if="comments.length">
            <div class="text-size-20px mb-16px">{{$t('全部评论')}}</div>
            <ui-devider></ui-devider>
            <div v-for="comment in comments" :key="item">
              <div class="flex items-start py-30px">
                <img class="w-60px h-60px rounded-full object-cover" :src="comment.refUserAvatarUrl" />
                <div class="mt-8px ml-14px">
                  <div class="flex mb-14px items-center">
                    <div class="font-extralight text-size-16px mr-30px">{{comment.refUserName}}</div>
                    <div class="text-size-14px text-[#B8B8B8]">{{comment.createTimeStr}}</div>
                  </div>
                  <div class="text-[#686868] leading-20px text-size-14px">
                    {{comment.content}}
                  </div>
                </div>
              </div>
              <ui-devider></ui-devider>
            </div>
            <div class="flex justify-center">
              <el-button v-if="!commentLast" @click="handleLoadComments(++commentPageNum)" type="text" class="!text-[#686868]">{{$t('查看更多评论')}}</el-button>
            </div>
          </template>


        </ui-shadow-box>
      </div>

      <div class="right w-320px">
        <ui-hot-article></ui-hot-article>
        <div class="h-20px"></div>
        <ui-vip-magazine></ui-vip-magazine>
      </div>
    </div>
    <el-dialog @close="exportVisible = false" :visible="exportVisible" width="1200px">
      <div class="w-full">
        <div class="flex items-center mb-60px">
          <div class="flex-1 text-right mr-70px">{{ $t("分享链接") }}：</div>
          <div class="flex-1" id="share-link">{{shareUrl}}</div>
          <div class="flex-1 ml-84px">
            <el-button
                    @click="handleCopyLink"
              class="!font-normal !text-white !bg-primary !w-120px !h-40px"
              round
              >{{ $t("复制链接") }}</el-button
            >
          </div>
        </div>
        <div class="flex items-start">
          <div class="flex-1 text-right mr-70px">{{ $t("分享海报") }}：</div>
          <div class="flex-1">
            <ui-shadow-box ref="post" class="px-24px py-38px flex flex-col items-center">
              <div class="font-extralight text-primary text-size-20px mb-28px">
                {{ $t("杂志期刊") }}
              </div>
              <img v-if="article.cover" :src="article.coverUrl" class="w-310px h-auto mb-24px" />
              <div class="text-size-16px text-[#000A04] mb-32px">
                 {{article.title}}
              </div>
              <div v-html="article.description" class="text-size-14px text-[#686868] mb-24px" style="line-height: 1.5">

              </div>
              <div class="flex items-center w-full justify-end">
                <div class="mr-10px text-[#B8B8B8] text-size-14px">
                  <div class="mb-10px">{{$t('作者')}}：{{article.author}}</div>
                  <div class="text-right">{{$t('时间')}}：{{article.publishTimeStr}}</div>
                </div>
                <img src="/imgs/export-qrcode.png" class="w-64px h-64px" />
              </div>
            </ui-shadow-box>
          </div>
          <div class="flex-1 ml-84px">
            <el-button
              @click="exportPost"
              class="!font-normal !text-white !bg-primary !w-120px !h-40px"
              round
              >{{ $t("复制海报") }}</el-button
            >
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import FileSaver from "file-saver";
import domtoimage from "dom-to-image";
export default {
  methods: {
    async exportPost() {
      let vm = this;
      function copyImage(url){
        const image = new Image()
        // 执行跨域请求获取图片
        image.setAttribute('crossOrigin', 'anonymous')
        image.onload = function () {
          const canvas = document.createElement('canvas')
          canvas.width = image.width
          canvas.height = image.height
          const context = canvas.getContext('2d')
          context.drawImage(image, 0, 0, image.width, image.height)
          // 使用canvas 将图片转换成为image/png的blob数据
          canvas.toBlob(function (data) {
            // clipboard.write 仅支持image/png的blob数据
            navigator.clipboard.write([
              new window.ClipboardItem({
                [data.type]: data,
              }),
            ])
            vm.$message.success(vm.$t('已复制到剪贴板'));
          }, 'image/png')
        }
        image.src = url
      }



      console.log(
        "%c [ this.$refs.post ]-245",
        "font-size:13px; background:pink; color:#bf2c9f;",
        this.$refs.post.$el
      );
      const url = await domtoimage.toPng(this.$refs.post.$el, { filter: false });
      copyImage(url);



    },
    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(){
      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.$message.success(this.$t('已复制到剪贴板'));
    },
    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.$message.success(this.$t('评论成功'));
          this.handleLoadData();
          this.handleLoadComments();
          this.comment = '';
      }else{
        this.$message.warning(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)
         }
      }
    }
  },
  computed:{
    shareUrl(){
      return window.location.href;
    }
  },
  async created() {
     this.handleLoadData();
     this.handleLoadComments();
  },
  data() {
    return {
      exportVisible: false,
      subscriped: true,
      html: ``,
      article:{},
      comments:[],
      comment:'',
      commentPageNum:1,
      commentLast:false
    };
  },
};
</script>

<style>
.detail .content {
}
.detail .action-button {
  @apply !font-light border-1px !border-primary border-solid !text-primary ml-30px;
}
.detail .action-button.done {
  @apply bg-primary !text-white;
}
.detail .el-textarea textarea {
  @apply h-full bg-[#F7F7F7];
}
</style>
