<template>
  <div>
    <div class="shuoshuo-card-noAccess" v-if="!access">
      <font class="noAccess-font">你没有访问权限，请尝试登录！</font>
      <input type="password" v-model="input_password" @input="access = Access()" placeholder="或许可以通过密码访问呢？" class="noAccess-password" >
    </div>
    <div class="shuoshuo-card" v-if="access">
      <div class="shuoshuo-topper">
        <img src="https://q1.qlogo.cn/g?b=qq&s=100&nk=983341575" alt="" class="shuoshuo-avatar">
        <div class="shuoshuo-toptitle">
          <span style="font-size:1.2em;color:var(--fontColor)">Janx</span>
          <div class="shuoshuo-meta">
            <span style="font-size:0.9em">{{source.createTime}}</span>
            <span>
              <svg viewBox="0 0 1024 1024" width="14" height="14" >
                <path d="M14.656 512a497.344 497.344 0 1 0 994.688 0 497.344 497.344 0 1 0-994.688 0z"
                      fill="#FF0000"></path>
                <path
                  d="M374.976 872.64c-48.299-100.032-22.592-157.44 14.421-211.37 40.448-58.966 51.115-117.611 51.115-117.611s31.659 41.386 19.115 106.005c56.149-62.72 66.816-162.133 58.325-200.405 127.317 88.746 181.59 281.002 108.181 423.381C1016 652.501 723.093 323.2 672.277 285.867c16.939 37.333 20.054 100.032-14.101 130.474-58.027-219.84-201.664-265.002-201.664-265.002 16.96 113.536-61.781 237.397-137.344 330.24-2.816-45.163-5.632-76.544-29.483-119.808-5.333 82.176-68.373 149.269-85.29 231.445-22.912 111.637 17.237 193.173 170.581 279.424z"
                  fill="#FFFFFF"></path>
              </svg> {{source.articleEmotion}}
            </span>
            <span>
              <svg viewBox="0 0 1024 1024" width="14" height="14" >
                <path
                  d="M113.834667 291.84v449.194667a29.013333 29.013333 0 0 0 28.842666 29.013333h252.928v90.453333l160.597334-90.453333h252.928a29.013333 29.013333 0 0 0 29.013333-29.013333V291.84a29.013333 29.013333 0 0 0-29.013333-29.013333h-665.6a29.013333 29.013333 0 0 0-29.696 29.013333z"
                  fill="#FFDEAD"></path>
                <path
                  d="M809.130667 262.826667h-665.6a29.013333 29.013333 0 0 0-28.842667 29.013333v40.106667a29.013333 29.013333 0 0 1 28.842667-29.013334h665.6a29.013333 29.013333 0 0 1 29.013333 29.013334V291.84a29.013333 29.013333 0 0 0-29.013333-29.013333z"
                  fill="#FFF3DB"></path>
                <path
                  d="M556.202667 770.048h252.928a29.013333 29.013333 0 0 0 29.013333-29.013333V362.837333s-59.733333 392.533333-724.309333 314.709334v63.488a29.013333 29.013333 0 0 0 28.842666 29.013333h253.098667v90.453333z"
                  fill="#F2C182"></path>
                <path
                  d="M619.008 632.32l101.888-35.157333-131.754667-76.117334 29.866667 111.274667zM891.904 148.992a61.44 61.44 0 0 0-84.138667 22.528l-19.968 34.133333 106.666667 61.610667 19.968-34.133333a61.781333 61.781333 0 0 0-22.528-84.138667z"
                  fill="#69BAF9"></path>
                <path d="M775.338667 198.775467l131.669333 76.032-186.026667 322.218666-131.6864-76.032z"
                      fill="#F7FBFF"></path>
                <path
                  d="M775.168 198.826667l-5.290667 9.216 59.221334 34.133333a34.133333 34.133333 0 0 1 12.458666 46.592l-139.946666 242.346667a34.133333 34.133333 0 0 1-46.762667 12.629333l-59.050667-34.133333-6.656 11.434666 88.746667 51.2L720.896 597.333333l186.026667-322.56z"
                  fill="#D8E3F0"></path>
                <path
                  d="M616.448 622.592l2.56 9.728 101.888-35.157333-44.885333-25.941334-59.562667 51.370667zM891.904 148.992c-1.024 0-2.218667-0.853333-3.242667-1.536A61.610667 61.610667 0 0 1 887.466667 204.8l-19.968 34.133333-73.728-42.496-5.12 8.704 106.666666 61.610667 19.968-34.133333a61.781333 61.781333 0 0 0-23.381333-83.626667z"
                  fill="#599ED4"></path>
                <path
                  d="M265.898667 417.621333H494.933333a17.066667 17.066667 0 1 0 0-34.133333H265.898667a17.066667 17.066667 0 1 0 0 34.133333zM265.898667 533.504H494.933333a17.066667 17.066667 0 0 0 0-34.133333H265.898667a17.066667 17.066667 0 0 0 0 34.133333z"
                  fill="#3D3D63"></path>
                <path
                  d="M959.488 354.645333a99.84 99.84 0 0 0-23.722667-127.488 78.677333 78.677333 0 0 0-142.848-64.170666l-11.605333 20.138666a17.066667 17.066667 0 0 0-20.821333 7.168l-32.085334 55.466667H142.677333a46.250667 46.250667 0 0 0-45.909333 46.08v449.194667a46.08 46.08 0 0 0 45.909333 46.08h236.032v73.386666a17.066667 17.066667 0 0 0 8.362667 14.848 17.066667 17.066667 0 0 0 8.704 2.218667 17.066667 17.066667 0 0 0 8.362667-2.218667l156.672-88.234666h248.32a46.08 46.08 0 0 0 46.08-46.08V398.677333L921.6 283.306667a17.066667 17.066667 0 0 0-4.266667-21.504l1.877334-3.413334a65.365333 65.365333 0 0 1 10.410666 79.189334l-53.077333 91.989333a56.832 56.832 0 0 0 20.821333 77.653333 17.066667 17.066667 0 0 0 24.234667-6.314666 17.066667 17.066667 0 0 0-6.997333-23.04 23.04 23.04 0 0 1-8.362667-31.061334z m-138.410667 386.389334a11.946667 11.946667 0 0 1-11.946666 11.946666H556.202667a17.066667 17.066667 0 0 0-8.362667 2.218667l-134.997333 76.117333v-61.269333a17.066667 17.066667 0 0 0-17.066667-17.066667H142.677333a11.946667 11.946667 0 0 1-11.776-11.946666V291.84a11.946667 11.946667 0 0 1 11.776-11.946667h565.930667L574.464 512a17.066667 17.066667 0 0 0-1.706667 12.970667L597.333333 615.253333H265.898667a17.066667 17.066667 0 1 0 0 34.133334h352.938666a17.066667 17.066667 0 0 0 5.802667 0l102.4-35.328a17.066667 17.066667 0 0 0 9.216-7.509334l85.333333-147.968z m-204.8-184.661334l63.829334 36.864-49.322667 17.066667z m206.848-170.666666v1.365333l-108.373333 186.709333-102.4-59.050666L781.482667 221.866667l102.4 59.050666z m76.458667-161.28L887.466667 244.224l-76.970667-44.373333 11.264-19.797334a44.544 44.544 0 1 1 77.141333 44.544z"
                  fill="#3D3D63"></path>
              </svg> {{source.likeCount}} 条评论
            </span>
          </div>
        </div>
      </div>
      <div class="shuoshuo-container" v-html="source.articleContent">
      </div>
      <div class="shuoshuo-piclist"  ref="imgList"  :class="picClassname">
        <!-- v-viewer.rebuild="{inline: false,'url': 'data-source',images:picList[0]}" -->
        <a :href="item" target="_blank" v-for="item,index in picList[0]" v-show="(index<9)?true:false" :key="item"
        :overtip="`+ ${picList[0].length-9}`"
        :data-sub-html="picList[1][index]||'该图片没有图注呢'"
        data-fb-html='是否需要添加评论功能呢？'
        >
          <div class="imgbox">
              <img :click="clickPicture" target="_blank" :title="picList[1][index]" class="lazyload_images" :data-source="item.indexOf('qiniu.roginx.ink')!=-1?item+'-normal':item" :src="item.indexOf('qiniu.roginx.ink')!=-1?item+'-poster':item"  alt="">
          </div>
        </a>
      </div>
      <div class="shuoshuo-tailer">
        <span style="font-size:0.9em;line-height: 1.5em;">{{source.articleAddress}}</span>
        <span style="font-size:0.9em;line-height: 1.5em;">{{source.articleDevice}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  // const graffiti = () => import( "./graffiti");
  const proPage = () => import( "../common/proPage");
  import MarkdownIt from 'markdown-it';
  // import 'lightgallery.js'
  // import 'lg-thumbnail.js'
  export default {
    components: {
    },
    props: {
      source: {
        type: Number
      },
      userId: {
        type: Number
      }
    },
    data() {
      return {
        isGraffiti: false,
        total: 0,
        replyDialogVisible: false,
        input_password:'',
        access:this.Access(),
        floorComment: {},
        replyComment: {},
        comments: [],
        picList:[],
        picClassname:"",
        pagination: {
          current: 1,
          size: 10,
          total: 0,
          source: this.source,
          floorCommentId: null
        }
      };
    },

    computed: {},

    created() {
      // this.getComments(this.pagination);
      // this.getTotal();
      this.checkPicList();
    },
    mounted() {
        new lightGallery(this.$refs.imgList,{
          plugins: [lgThumbnail,lgHash,lgRotate,lgVideo,lgZoom,lgFullscreen,lgAutoplay,lgComment],
          mode: 'lg-slide',
          cssEasing: 'ease',
          commentBox: true,
          fbComments: true,
          galleryId:this.source.id,
          speed: 300
        });
    },
    methods: {
      toPage(page) {
        this.pagination.current = page;
        window.scrollTo({
          top: document.getElementById('comment-content').offsetTop
        });
        // this.getComments(this.pagination);
      },
      getTotal() {
        this.$http.get(this.$constant.baseURL + "/comment/getCommentCount", {source: this.source})
          .then((res) => {
            if (!this.$common.isEmpty(res.data)) {
              this.total = res.data;
            }
          })
          .catch((error) => {
            this.$message({
              message: error.message,
              type: "error"
            });
          });
      },
      toChildPage(floorComment) {
        floorComment.childComments.current += 1;
        let pagination = {
          current: floorComment.childComments.current,
          size: 5,
          total: 0,
          source: this.source,
          floorCommentId: floorComment.id
        }
        // this.getComments(pagination, floorComment, true);
      },
      emoji(comments, flag) {
        comments.forEach(c => {
          c.commentContent = c.commentContent.replace(/\n/g, '<br/>');
          c.commentContent = this.$common.faceReg(c.commentContent);
          c.commentContent = this.$common.pictureReg(c.commentContent);
          if (flag) {
            if (!this.$common.isEmpty(c.childComments) && !this.$common.isEmpty(c.childComments.records)) {
              c.childComments.records.forEach(cc => {
                c.commentContent = c.commentContent.replace(/\n/g, '<br/>');
                cc.commentContent = this.$common.faceReg(cc.commentContent);
                cc.commentContent = this.$common.pictureReg(cc.commentContent);
              });
            }
          }
        });
      },
      // getComments(pagination, floorComment = {}, isToPage = false) {
      //   this.$http.post(this.$constant.baseURL + "/comment/listComment", pagination)
      //     .then((res) => {
      //       if (!this.$common.isEmpty(res.data) && !this.$common.isEmpty(res.data.records)) {
      //         if (this.$common.isEmpty(floorComment)) {
      //           this.comments = res.data.records;
      //           pagination.total = res.data.total;
      //           this.emoji(this.comments, true);
      //         } else {
      //           if (isToPage === false) {
      //             floorComment.childComments = res.data;
      //           } else {
      //             floorComment.childComments.total = res.data.total;
      //             floorComment.childComments.records = floorComment.childComments.records.concat(res.data.records);
      //           }
      //           this.emoji(floorComment.childComments.records, false);
      //         }
      //       }
      //     })
      //     .catch((error) => {
      //       this.$message({
      //         message: error.message,
      //         type: "error"
      //       });
      //     });
      // },
      addGraffitiComment(graffitiComment) {
        this.submitComment(graffitiComment);
      },
      submitComment(commentContent) {
        let comment = {
          source: this.source,
          commentContent: commentContent
        };

        this.$http.post(this.$constant.baseURL + "/comment/saveComment", comment)
          .then((res) => {
            this.$message({
              type: 'success',
              message: '保存成功！'
            });
            this.pagination = {
              current: 1,
              size: 10,
              total: 0,
              source: this.source,
              floorCommentId: null
            }
            // this.getComments(this.pagination);
            this.getTotal();
          })
          .catch((error) => {
            this.$message({
              message: error.message,
              type: "error"
            });
          });
      },
      submitReply(commentContent) {
        let comment = {
          source: this.source,
          floorCommentId: this.floorComment.id,
          commentContent: commentContent,
          parentCommentId: this.replyComment.id,
          parentUserId: this.replyComment.userId
        };

        let floorComment = this.floorComment;

        this.$http.post(this.$constant.baseURL + "/comment/saveComment", comment)
          .then((res) => {
            let pagination = {
              current: 1,
              size: 5,
              total: 0,
              source: this.source,
              floorCommentId: floorComment.id
            }
            // this.getComments(pagination, floorComment);
            this.getTotal();
          })
          .catch((error) => {
            this.$message({
              message: error.message,
              type: "error"
            });
          });
        this.handleClose();
      },
      replyDialog(comment, floorComment) {
        this.replyComment = comment;
        this.floorComment = floorComment;
        this.replyDialogVisible = true;
      },
      handleClose() {
        this.replyDialogVisible = false;
        this.floorComment = {};
        this.replyComment = {};
      },
      checkPicList(){
        this.picList = JSON.parse(this.source.articleItems);
        let classname = ["","pic1","pic2","pic3"];
        if(this.picList[0].length<3)
          this.picClassname = classname[this.picList[0].length]
        else
          this.picClassname = classname[3]
          if(this.picList[0].length>9){ this.picClassname = classname[3] + " pic-overload"}
      },
      clickPicture(e){
        //获取viewer实例
        const viewer = this.$el.querySelector('.images').$viewer
        //调用show方法进行显示预览图
        viewer.show()
      },
      Access(){
        if(this.$store.state.currentUser?.id == 1) return true;
        if(this.source.permission == 0 ) return true;
        if(this.input_password==this.source.password&&this.source.password!="") return true
        if(this.source.permission == 1 && !this.$common.isEmpty(this.$store.state.currentUser)) return true;
        if(this.source.permission == 2 && this.input_password==this.source.password) return true;
        return false;
      }
    }
  }
</script>

<style scoped>
.shuoshuo-card-noAccess{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px;
  box-sizing: border-box;
  box-shadow: 1px 1px 5px #66666655;
  max-width: 720px;
  height: 300px;
  animation-name: zoomIn;
  margin:20px auto 20px auto;
  border-radius: .5em;
  background-color: var(--themeBackground);
}
.noAccess-font{
  text-align: center;
  width: 200px;
  font-size: 16px;
  line-height: 24px;
  color:#FFF
}
.noAccess-password:placeholder-shown {
  letter-spacing: 2px;
  color: #FFF;
  font-size: 12px;
  font-family: SmileySans;
}
.noAccess-password:focus{
  border-bottom: solid 2px #FFF;
  transition: .3s;
}
.noAccess-password{
  transition: .3s;
  width: 200px;
  font-size: 16px;
  margin: 16px 0;
  padding: 8px 0;
  border:none;
  border-bottom: solid 1px #ffffffbe;
  letter-spacing: 8px;
  text-align: center;
  color: #FFF;
  outline: none;
  background: transparent;
  z-index: 1;
}
.shuoshuo-card{
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 15px;
  box-sizing: border-box;
  box-shadow: 1px 1px 5px #66666655;
  max-width: 720px;
  animation-name: zoomIn;
  margin:20px auto 20px auto;
  border-radius: .5em;
}
.permission-mask{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 99999999999;
  background-color: #FFF;
}
.shuoshuo-topper{
  display: flex;
  flex-direction: row;
}
.shuoshuo-topper .shuoshuo-avatar{
  width:64px;
  height:64px;
}
.shuoshuo-container{
  margin-top: .6em;
  margin-bottom: .2em;
  letter-spacing: 1px;
  line-height: 1.2em;
}
.shuoshuo-toptitle{
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.shuoshuo-piclist{
  width: 100%;
  position: relative;
  user-select: none;
  margin:5px 0  5px 0;
}
.shuoshuo-piclist a {
  list-style: none;
  cursor: zoom-in;
}
.shuoshuo-piclist img{
  width:100%;
  margin: auto;
}

.pic1 a img{
  max-height: 520px;
  max-width: 100%;
  width: unset;
}
.pic2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.pic2 a{
  flex:1;
  margin: 2px;
}
.pic3{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.pic3 a{
  width:33.33%;
  padding: 1px;
  position: relative;
}
.pic3 .imgbox{
  position: relative;
  overflow: hidden;
  padding-bottom: 75%;/*重要属性*/
}
>>> p:has( > iframe:only-child),p:has( > video:only-child){
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
>>> p:has( > iframe:only-child) iframe, p:has( > video:only-child) video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border: none;
    height: 100%;
}
.pic3 .imgbox img{
  width: 100%;
  position: absolute;
  height: 100%;
  object-fit: cover;
}
.pic3.pic-overload a:nth-child(9)::after {
    content: attr(overtip);
    display: flex;
    font-size: 2.5em;
    position: absolute;
    justify-content: center;
    align-items: center;
    width: 100%;
    color: #FFF;
    height: 100%;
    top: 0;
    pointer-events: none;
    background: #00000088;
}
.shuoshuo-meta{
  display: flex;
  flex-direction: row;
}
.shuoshuo-meta span{
  margin-right: .8em;
}
.shuoshuo-topper span,.shuoshuo-tailer span{
  display:block;
  color:var(--greyFont);
}
@media screen and (max-width: 768px) {

  .pic3 .imgbox{
    position: relative;
    overflow: hidden;
    padding-bottom: 100%;/*重要属性*/
  } 
}
</style>
