<template>
 <div>
 <div >{{title}}</div>
 <div class="top-prove">為了證明樓下的那貨不會對我造成影響</div>
 <div :class="showTotal ? 'total-introduce' : 'detailed-introduce'">
  <div class="intro-content" :title="introduce" ref="desc">
  <span class="merchant-desc" v-if="introduce">
   {{introduce}}
  </span>
  <div class="unfold" @click="showTotalIntro" v-if="showExchangeButton">
   <p>{{exchangeButton ? '展開' : '收起'}}</p>
  </div>
  </div>
 </div>
 <div class="bottom-prove">為了證明樓上的那貨不會對我造成影響</div>
 <div class="change-buttom">
  <div class="long" @click="tryLong">點這試試一段比較長的文字</div>
  <div class="short" @click="tryShort">點這試試一段比較短的文字</div>
 </div>
 </div>
</template>

<script>
export default {
 name: 'Spread',
 data () {
 return {
  title: '演示展開收起',
  introduce: '',
  // 是否展示所有文本內容
  showTotal: true,
  // 顯示展開還是收起
  exchangeButton: true,
  // 是否顯示展開收起按鈕
  showExchangeButton: false,
  rem: ''
 };
 },
 mounted () {
 this.init();
 },
 methods: {
 showTotalIntro () {
  console.log(this.showTotal);
  this.showTotal = !this.showTotal;
  this.exchangeButton = !this.exchangeButton;
 },
 getRem () {
  console.log('getRem');
  const defaultRem = 16;
  let winWidth = window.innerWidth;
  console.log('winWidth:' + winWidth);
  let rem = winWidth / 375 * defaultRem;
  return rem;
 },
 init () {
  this.introduce = '擁有財富、名聲、權力，這世界上的一切的男人--哥爾·D·羅杰，在被行刑受死之前說了一句話，讓全世界的人都涌向了大海?！跋胍业膶毑貑?？如果想要的話，那就到海上去找吧，我全部都放在那里?！?，世界開始迎接“大海賊時代”的來臨。擁有財富、名聲、權力，這世界上的一切的男人 “海賊王”哥爾·D·羅杰，在被行刑受死之前說了一句話，讓全世界的人都涌向了大海?！跋胍业膶毑貑幔咳绻胍脑?，那就到海上去找吧，我全部都放在那里?！?，世界開始迎接“大海賊時代”的來臨。';
 },
 tryLong () {
  let longIntroduce = 'Vue是一套用于構建用戶界面的漸進式框架。Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。Vue (讀音 /vjuː/，類似于 view) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。';
  if (this.introduce !== longIntroduce) {
  this.showExchangeButton = false;
  this.showTotal = true;
  this.introduce = longIntroduce;
  }
 },
 tryShort () {
  let shortIntroduce = 'Vue (讀音 /vjuː/，類似于 view) 是一套用于構建用戶界面的漸進式框架。';
  if (this.introduce !== shortIntroduce) {
  this.showExchangeButton = false;
  this.showTotal = true;
  this.introduce = shortIntroduce;
  }
 }
 },
 watch: {
 'introduce': function () {
  this.$nextTick(function () {
  console.log('nextTick');
  // 判斷介紹是否超過四行
  let rem = parseFloat(this.getRem());
  console.log('watch 中的rem', rem);
  if (!this.$refs.desc) {
   console.log('desc null');
   return;
  }
  let descHeight = window.getComputedStyle(this.$refs.desc).height.replace('px', '');
  console.log('descHeight:' + descHeight);
  console.log('如果 descHeight 超過' + (5.25 * rem) + '就要顯示展開按鈕');
  if (descHeight > 5.25 * rem) {
   console.log('超過了四行');
   // 顯示展開收起按鈕
   this.showExchangeButton = true;
   this.exchangeButton = true;
   // 不是顯示所有
   this.showTotal = false;
  } else {
   // 不顯示展開收起按鈕
   this.showExchangeButton = false;
   // 沒有超過四行就顯示所有
   this.showTotal = true;
   console.log('showExchangeButton', this.showExchangeButton);
   console.log('showTotal', this.showTotal);
  }
  }.bind(this));
 }
 }
};
</script>

<style lang="less" scoped rel="stylesheet/less">
 .top-prove {
 height: 100px;
 width: 100%;
 background: #dddddd;
 text-align: center;
 line-height: 100px;
 }
 .total-introduce {
 height: auto;
 overflow: hidden;
 font-size: 14px;
 color: #434343;
 margin: 10px;
 .intro-content {
  .merchant-desc {
  width: 100%;
  line-height: 21px;
  }
 }
 .unfold {
  display: block;
  z-index: 11;
  float: right;
  width: 40px;
  height: 21px;
  p {
  margin: 0;
  line-height: 21px;
  color: #7fbe87;
  }
 }
 }
 .detailed-introduce {
 font-size: 14px;
 color: #434343;
 position: relative;
 overflow: hidden;
 margin: 10px;
 .intro-content {
  // 最大高度設為4倍的行間距
  max-height: 84px;
  line-height: 21px;
  word-wrap: break-word;
  /*強制打散字符*/
  word-break: break-all;
  background: #ffffff;
  /*同背景色*/
  color: #ffffff;
  overflow: hidden;
  .merchant-desc {
  width: 100%;
  line-height: 21px;
  }
  &:after,
  // 這是展開前實際顯示的內容
  &:before {
  content: attr(title);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  color: #434343
  // overflow: hidden;
  }
  // 把最后最后一行自身的上面三行遮住
  &:before {
  display: block;
  overflow: hidden;
  z-index: 1;
  max-height: 63px;
  background: #ffffff;
  }
  &:after {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 81px;
  /*截取行數*/
  -webkit-line-clamp: 4;
  text-overflow: ellipsis;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /*行首縮進字符數，值為[(截取行數-1)*尾部留空字符數]*/
  text-indent: -12em;
  /*尾部留空字符數*/
  padding-right: 4em;
  }
  .unfold {
  z-index: 11;
  width: 40px;
  height: 21px;
  outline: 0;
  position: absolute;
  right: 0;
  bottom: 0;
  p {
   margin: 0;
   line-height: 21px;
   color: #7fbe87;
  }
  }
 }
 }
 .bottom-prove {
 height: 100px;
 width: 100%;
 background: #dddddd;
 text-align: center;
 line-height: 100px;
 }
 .change-buttom {
 font-size: 14px;
 color: #2371be;
 .long {
  text-align: 21px;
  text-align: center;
  height: 21px;
 }
 .short {
  text-align: 21px;
  text-align: center;
  height: 20px;
 }
 }
</style>