{{extend defaultLayout}} {{block 'css'}}
<script src="{{_res_path}}template/extend/js/qrcode.min.js"></script>
<link rel="stylesheet" type="text/css" href="{{_res_path}}template/kuaishou/css/commnet.css" />
{{/block}} {{block 'main'}}
<div id="text" style="display: none"></div>
<div class="video_info_container">
  <div class="svg_container">
    <img src="{{_res_path}}image/kuaishou/logo.png" alt="Logo" />
    <div class="top-info">评论数量：{{CommentLength}}条</div>
    {{if Type == '视频'}}
    <div class="top-info">视频大小：{{VideoSize}}MB</div>
    <div class="top-info">点赞数量：{{likeCount}}</div>
    <div class="top-info">观看次数：{{viewCount}}</div>
    {{else if Type == '图集'}}
    <div class="top-info">图片数量：{{ImageLength}}张</div>
    {{/if}}
  </div>
  <div class="qrcode_box">
    <div class="qrcode" id="qrcode"></div>
    {{if Type == '视频'}}
    <div class="qrcode_text">视频直链(永久)</div>
    {{else if Type == '图集'}}
    <div class="qrcode_text">图集分享链接 共{{ImageLength}}张</div>
    {{/if}}
  </div>
</div>

<div class="comment-container">
  {{each CommentsData val}}

  <div class="comment">
    <img src="{{val.userimageurl}}" class="user-avatar" />
    <div class="comment-content">
      <div class="user-info">
        {{val.nickname}}
      </div>
      <div class="comment-text">{{@val.text}}</div>
      {{if (val.commentimage || val.sticker) != null}}
      <div class="comment-imgbox">
        <img class="comment-imgbox_1" src="{{val.commentimage || val.sticker}}" />
      </div>
      {{/if}}
      <div class="like-section">
        <div class="info-content">
          <div class="additional-info">
            {{val.create_time}} · {{val.ip_label}}&nbsp&nbsp&nbsp&nbsp {{if val.reply_comment_total > 0}}
            <span style="color: #b9b9b9; letter-spacing: 3px">共{{val.reply_comment_total}}条回复</span>
            {{else}}
            <span style="color: #555">回复</span>
            {{/if}}
          </div>
          <div class="like_info">
            <div class="like-icon">
              <svg width="80" height="80" fill="none" xmlns="http://www.w3.org/2000/svg" class="FEC76vvL"
                viewBox="0 0 20 20">
                <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M7.646 4.168c-2.238 0-4.035 1.919-4.035 4.152l.002.13a.834.834 0 00-.001.073c.006.3.075.66.15.962.074.294.178.622.294.86.467 1.004 1.284 1.979 2.071 2.78a23.69 23.69 0 002.646 2.323l.015.012.012.01c.174.175.543.54 1.2.54h.019c.186 0 .63 0 1.028-.387l.033-.027c.033-.029.08-.067.14-.117l.003-.003c.436-.359 1.456-1.2 2.462-2.214.644-.646 1.312-1.396 1.822-2.17a7.94 7.94 0 00.2-.318.84.84 0 00.063-.13.956.956 0 01.11-.214.835.835 0 00.074-.144c.029-.073.05-.121.066-.154l.003-.007a.832.832 0 00.147-.29c.125-.444.21-.835.219-1.316a.82.82 0 00-.002-.067 5.39 5.39 0 00.002-.16c-.015-2.22-1.807-4.124-4.035-4.124-.845 0-1.667.262-2.316.789a4.029 4.029 0 00-2.392-.789zm7.076 4.153V8.424l-.002.07c0 .008 0 .022.002.039a3.065 3.065 0 01-.121.721 1.9 1.9 0 00-.078.144 3.297 3.297 0 00-.089.2c-.083.135-.137.24-.193.38a6.64 6.64 0 01-.124.195v.001c-.425.644-1.007 1.305-1.613 1.912l-.002.001a31.607 31.607 0 01-2.342 2.106l-.032.026-.12.1-.048-.046c-.05-.05-.119-.105-.152-.131l-.006-.005A22.003 22.003 0 017.32 11.96l-.003-.003c-.747-.76-1.408-1.577-1.753-2.323a3.149 3.149 0 01-.185-.555 3.468 3.468 0 01-.1-.553.964.964 0 000-.104V8.42a3.56 3.56 0 01-.001-.099c0-1.373 1.11-2.485 2.368-2.485.662 0 1.288.269 1.848.85a.833.833 0 001.282-.099c.33-.47.892-.751 1.578-.751 1.258 0 2.368 1.113 2.368 2.485z"
                  fill="#777" fill-opacity="0.8" opacity="0.9"></path>
              </svg>
              <span class="like-count">{{val.digg_count}}&nbsp&nbsp&nbsp</span>
              <svg width="80" height="80" fill="none" xmlns="http://www.w3.org/2000/svg" class="FEC76vvL"
                viewBox="0 0 20 20">
                <path
                  d="M15.58 8.58c0 .1 0 .21-.01.31v.13l-.01.06c-.04.44-.13.8-.27 1.22-.02.08-.06.15-.12.21h.01c-.04.07-.07.13-.1.19a.37.37 0 01-.05.11c-.07.11-.09.14-.13.23-.01.04-.03.07-.05.1-.67 1.09-1.71 2.14-2.56 2.91-.43.39-.83.72-1.12.97-.13.1-.25.19-.33.26l-.03.03-.11.08h-.01l-.01.02h-.01c-.1.11-.33.33-.67.41h-.01c-.09.04-.19.07-.29.08-.58.08-.95-.23-1.11-.37l-.03-.03c-.64-.45-1.27-.93-1.87-1.43-.98-.83-2.16-1.95-2.84-3.13-.14-.24-.26-.5-.36-.77-.11-.29-.2-.59-.25-.89h-.01v-.06l-.02-.14c-.29-2.05.92-4.16 2.92-4.45.15-.02.29-.03.43-.03.88 0 1.7.36 2.41.99.14.13.23.31.23.5l.02 1.29 1.3.96c.14.1.23.26.26.44.03.17-.01.35-.12.5l-.94 1.32.63 1.34c.07.17.08.35.02.51a.69.69 0 01-.35.38c-.16.08-.34.09-.51.03a.67.67 0 01-.38-.34l-.81-1.7a.702.702 0 01-.06-.35c.01-.12.05-.23.12-.33l.79-1.11-1.02-.76a.55.55 0 01-.2-.23.641.641 0 01-.08-.3l-.02-1.31c-.43-.32-.86-.47-1.28-.47-.08 0-.17 0-.25.02-1.07.15-1.98 1.39-1.77 2.92l.02.1v.02s.01.05.01.08c.03.14.09.36.18.59.09.26.19.46.24.55h.01c.57.98 1.6 1.98 2.55 2.79.54.45 1.09.87 1.66 1.28l.03.02c.07.06.16.12.2.15.03.03.06.05.09.07.03-.01.07-.02.11-.03l.09-.09c.05-.04.13-.11.2-.16l.02-.02.03-.03.32-.26c.36-.29.72-.6 1.07-.91.81-.74 1.72-1.67 2.29-2.58.06-.13.11-.23.19-.36.03-.06.06-.13.09-.19.02-.04.05-.09.09-.14.09-.31.14-.53.17-.78v-.2c.12-1.49-.85-2.63-1.89-2.7h-.12c-.57 0-1.19.26-1.49.68-.05.07-.11.14-.19.18a.55.55 0 01-.25.1c-.09.02-.18.02-.27 0a.545.545 0 01-.24-.12.54.54 0 01-.18-.19.825.825 0 01-.1-.26.576.576 0 01.02-.26c.02-.09.06-.17.11-.24.6-.84 1.67-1.25 2.59-1.25.08 0 .15 0 .22.01 1.87.12 3.16 1.92 3.16 3.83z"
                  fill="#777" fill-opacity="0.8"></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  {{/each}}
</div>
<script>
  qrcode = new QRCode(document.getElementById('qrcode'), {
    width: 600,
    height: 600,
    colorDark: '{{useDarkTheme}}' === 'true' ? '#c3c3c3' : '#3a3a3a',
    colorLight: '{{useDarkTheme}}' === 'true' ? '#121212' : '#f4f4f4',
  })
  qrcode.makeCode('{{share_url}}')
</script>
{{/block}}