<template>
  <div id="chatRoom">
    <div class="title-divs">
      <div class="button-search" @click="dc()">导出</div>
      <div class="center">
        <div class="timeline-wrap" style="background: lavender" id="cssss">
          <ul class="timeline timeline--first">
            <li class="era">
              <h2 class="era__title">First Era</h2>
            </li>
            <li
              class="entry"
              v-bind:class="[
                (index + 1) % 2 == 1 ? 'entry--left' : ' entry--right',
                item.type_people == 1
                  ? 'entry_1'
                  : item.type_people == 2
                  ? 'entry_2'
                  : item.type_people == 3
                  ? 'entry_3'
                  : 'entry_4',
              ]"
              v-for="(item, index) in datas"
            >
              <div class="entry__content">
                <div class="fyr-name">
                  <span>{{ item.name }}</span>
                </div>
                <p v-html="item.txt"></p>
              </div>
              <div class="yy-class">
                <div class="yy-class-left">
                  <span>测试asdfasdfsasdf：</span>
                  <span>测试士大夫撒大范围撒大范围发生的违asasdfasfasddfasdfsadfasdsdfasdfasdf法</span>
                </div>
                <div class="yy-class-right">
                  <img src="../assets/img/main/background.png">
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { get, post, startLoading, endLoading } from "../util/http_util";
import {} from "../util/data_util";
import { Notification } from "element-ui";
import html2canvas from "html2canvas";
import jspdf from "jspdf";
export default {
  name: "rdsj",
  data() {
    return {
      exportName: "测试下载PNG",
      datas: [
        {
          txt: "撒大声地发送撒的发生的阿什顿发斯蒂芬撒旦法师打发撒大声地发送撒的发生的阿什顿发斯蒂芬撒旦法师打发撒大声地发送撒的发生的阿什顿发斯蒂芬撒旦法师打发",
          name: "长大设",
          type_people: 1,
          iSQuote: 0,//0为未引用，1为引用
        },
        {
          txt: "健康委阿萨德哪家时代峻峰为阿斯蒂芬我胸围佛",
          name: "测试人员",
          type_people: 2,
          iSQuote: 1,
        },
        {
          txt: "卡死了大范围厉害萨拉丁否为红安羧甲淀粉钠介绍的我加我的三大",
          name: "测试人员测试人员",
          type_people: 3,
          iSQuote: 1,
        },
        {
          txt: "卡地访问哪家搜的佛我我埃尔法水电费后我我我维护佛安山东你回复",
          name: "测试人员测试人员测试人员",
          type_people: 4,
          iSQuote: 1,
        },
        {
          txt: "撒大声地发送撒的发生的阿什顿发斯蒂芬撒旦法师打发撒大声地发送撒的发生的阿什顿发斯蒂芬撒旦法师打发撒大声地发送撒的发生的阿什顿发斯蒂芬撒旦法师打发",
          name: "长大设",
          type_people: 2,
          iSQuote: 1,
        },
      ],
    };
  },
  methods: {
    dc() {
      let _this = this;
      startLoading();
      window.pageYoffset = 0;
      document.getElementById("cssss").scrollTop = 0;
      document.body.scrollTop = 0;
      html2canvas(document.querySelector('#cssss'), {
          allowTaint: false,
          useCORS: true,
        //   height: document.getElementById('#cssss').scrollHeight,
        // windowHeight: document.getElementById('#cssss').scrollHeight
      }).then(function(canvas) {
          let contentWidth = canvas.width;
          let contentHeight = canvas.height;
          let pageHeight = contentWidth / 592.28 * 841.89;
          let leftHeight = contentHeight;
          let position = 0;
          let imgWidth = 595.28 - 20;
          let imgHeight = imgWidth / contentWidth * contentHeight;

          let pageData = new Image();
          //设置图片跨域访问
          pageData.setAttribute('crossOrigin', 'Anonymous');

          setTimeout(() => {
              pageData = canvas.toDataURL('image/jpeg', 0.2);
              let PDF = new jspdf('', 'pt', 'a4')
              if (leftHeight < pageHeight) {
                  PDF.addImage(pageData, 'JPEG', 10, 10, imgWidth, imgHeight)
              } else {
                  while (leftHeight > 0) {
                      PDF.addImage(pageData, 'JPEG', 10, position, imgWidth, imgHeight)
                      leftHeight -= pageHeight
                      position -= 841.89
                      if (leftHeight > 0) {
                          PDF.addPage()
                      }
                  }
              }
              PDF.save(`${_this.exportName}.pdf`);
              endLoading();
          },1000);
      });
    },
  },
  mounted() {},
  computed: {},
  activated() {},
  watch: {},
};
</script>
<style lang="scss">
html,
body,
div,
span,
img,
ol,
ul,
li {
  padding: 0;
}

* {
  box-sizing: border-box;
}
#chatRoom {
  width: 100%;
  height: 100%;
  overflow: hidden;
  ol,
  ul {
    list-style: none;
  }
  .button-search {
    width: 100px;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    float: right;
    margin-right: 10px;
    text-align: center;
    cursor: pointer;
    background-image: url(../assets/img/yqjc/41.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .title-divs {
    width: 100%;
    height: 100%;
    .center {
      width: 67%;
      margin: auto;
      box-sizing: border-box;
      overflow-y: auto;
      height: 100%;
      .timeline {
        position: relative;
        max-width: 800px;
        margin: 0 auto;
        padding-top: 20px;
        background-color: inherit;
      }
      .timeline:after {
        content: "";
        position: absolute;
        width: 5px;
        background-color: #0065b3;
        left: 50%;
        top: 0;
        bottom: 0;
        margin-left: -2px;
      }
      .timeline--first:after {
        top: 20px;
      }
      .era {
        text-align: center;
        position: relative;
        z-index: 1;
        padding-bottom: 20px;
      }
      .era__title {
        background-color: #0065b3;
        color: #fff;
        display: inline-block;
        padding: 10px 20px;
      }
      .entry {
        padding: 0px 30px 20px 30px;
        width: 50%;
        position: relative;
        background-color: inherit;
        display: flow-root;
      }
      .entry--right {
        margin-left: 50%;
      }
      .entry__content {
        padding: 1px 15px;
        background-color: #76ed6f;
        position: relative;
        border-radius: 4px;
        .fyr-name {
          width: 80px;
          position: absolute;
          font-size: 12px;
          font-weight: 900;
          top: 3px;
          letter-spacing: 3px;
          text-align: center;
          line-height: 22px;
          color: white;
          padding: 5px 8px;
          border-radius: 4px;
        }
        .fyr-name:before {
          content: " ";
          height: 0;
          position: absolute;
          top: 4px;
          width: 0;
          z-index: 1;
        }
      }
      .yy-class{
        width: calc(100% - 20px);
        padding: 9px;
        font-size: 12px;
        background: #dddddd;
        float: left;
        margin: 10px;
        border-radius: 4px; 
        color: #747474;
        .yy-class-left{
          width: calc(100% - 58px);
          float: left;
          letter-spacing: 1px;
          word-break: break-all;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
        .yy-class-right{
          width: 50px;
          height: 50px;
          float: left;
          margin-left: 5px;
          img{
            width: 100%;
            height: 100%;
            background-size: 100% 100%;
          }
        }
      }
      .entry--left {
        .entry__content {
          .fyr-name {
            left: -90px;
          }
          .fyr-name:before {
            right: -8px;
            border: medium solid transparent;
            border-width: 5px 0 5px 7px;
            border-color: transparent transparent transparent #ffffff;
          }
        }
      }
      .entry--right {
        .entry__content {
          .fyr-name {
            right: -90px;
          }
          .fyr-name:before {
            left: -8px;
            margin-left: 0;
            border: medium solid transparent;
            border-width: 5px 7px 5px 0;
            border-color: transparent #ffffff transparent transparent;
          }
        }
      }
      .entry:before {
        content: " ";
        height: 0;
        position: absolute;
        top: 20px;
        width: 0;
        z-index: 1;
      }
      .entry--left:before {
        right: 22px;
        border: medium solid transparent;
        border-width: 8px 0 8px 8px;
        border-color: transparent transparent transparent #76ed6f;
      }
      .entry--right:before {
        left: 22px;
        margin-left: 0;
        border: medium solid transparent;
        border-width: 8px 8px 8px 0;
        border-color: transparent #76ed6f transparent transparent;
      }
      .entry:after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        right: -14px;
        background-color: white;
        border: 4px solid #0065b3;
        top: 10px;
        border-radius: 50%;
        z-index: 1;
      }
      .entry--right:after {
        right: auto;
        left: -13.6px;
      }
      h2 {
        margin-bottom: 0.5em;
        font-family: sans-serif;
        font-size: 1.2em;
      }
      p {
        font-family: sans-serif;
        word-wrap: break-word;
        margin: 10px 0px;
        letter-spacing: 1px;
        font-size: 15px;
        line-height: 23px;
      }
      .entry_1 {
        .fyr-name {
          background-color: #ff7777;
        }
      }
      .entry_1::after {
        border-color: #ff7777;
      }
      .entry_2 {
        .fyr-name {
          background-color: #47da46;
        }
      }
      .entry_2::after {
        border-color: #47da46;
      }
      .entry_3 {
        .fyr-name {
          background-color: #4695da;
        }
      }
      .entry_3::after {
        border-color: #4695da;
      }
      .entry_4 {
        .fyr-name {
          background-color: #9446da;
        }
      }
      .entry_4::after {
        border-color: #9446da;
      }
    }
  }
}
</style>
