<template>
  <div id="articleDetail">
    <div class="title">{{ detail.title }}</div>
    <div class="time">{{ detail.createTime }}</div>
    <div class="info_ctx_wrap tal" v-for="(html, index) in nodesHtml" :key="index">
      <p v-html="html"></p>
      <img v-if="index < nodesHtml.length - 1" class="img" :src="imgs[index]" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Article',
  data() {
    return {
      id: '',
      detail: '',
      content: '', //内容
      imgs: [], //图片列表
      nodesHtml: [], //切割的富文本元素
    }
  },
  mounted() {
    // console.log(this.$route.query)
    this.id = this.$route.query.id
    this.getConsultationDetail()
  },
  methods: {
    // 获取底部栏目资讯
    getConsultationDetail() {
      if (!this.id) return
      this.yxAxios.post(`${this.proxyUrl}/manage/info/content/detail/${this.id}`).then((res) => {
        if (res.data.code == 200) {
          let tempData = res.data.data
          tempData.createTime = tempData.createTime.slice(0, 10)
          tempData.content = tempData.content.replace(/\<img/gi, '<img class="rich-img" ') //正则给img标签增加class
          let nodes = tempData.content
          console.log('nodes:', nodes)
          // 定义一个富文本中的图片数组
          let imgs = [] //图片
          // 定义一个富文本除了图片元素意外的元素
          let nodesHtml = [] //切割的富文本元素
          if (nodes && nodes.indexOf('src') >= 0) {
            //当存在src图片才执行
            nodes = nodes.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
              imgs.push(capture) //src的值
              console.log(match)
              console.log(capture)
              console.log(imgs)
              this.imgs = imgs
              return '&**&' //把图片标签提取出来,并替换成&**&,以便后续来使用splic
            })
            // 把nodes中是把img标签替换成&**&的一个标签字符串
            nodesHtml = nodes.split('&**&') //切割一下..拿到数组去遍历
            // nodesHtml = nodesHtml.slice(0, -1) //最后是一个</p>标签,如果不去掉,最后会多一张图片...因为最后一个是p的闭合标签,去了也罢~
            console.log('nodesHtml:', nodesHtml)
          } else {
            if (nodes) {
              nodesHtml.push(nodes)
              console.log('nodesHtml:', nodesHtml)
            } else {
              nodesHtml = ['暂无详情']
            }
          }
          this.content = nodes
          this.nodesHtml = nodesHtml
          this.detail = tempData
          document.title = this.detail.title
        } else {
          this.$toast.fail(res.message)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
#articleDetail {
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 40px;
  .title {
    font-size: 36px;
    text-align: left;
    margin: 10px;
    font-weight: bold;
  }

  .time {
    font-size: 24px;
    color: gray;
    margin: 10px 0;
  }

  /* 基础信息 */
  .info_wrap {
    margin-top: 20px;
    background-color: white;
  }

  .info_ctx_wrap {
    .img {
      width: 100%;
      height: auto;
    }
    p {
      font-size: 28px;
      letter-spacing: 1px;
      margin: 20px 0;
    }
  }

  .tac {
    text-align: center;
  }

  .tal {
    text-align: left;
  }
}
</style>
<style lang="scss">
// 长辈版
.elder {
  #articleDetail .title,#articleDetail .time,#articleDetail .info_ctx_wrap p{
    font-size: 36px;
  }
  
}
</style>