<template>
<div class='container'>
  <div class='title'>{{title}}</div>
  <div class='subhead'>
    <div class='type'>{{type}}</div>
    {{time}}
    <div v-for='(v,i) in tags' :key='i' class='tags'>{{v}}</div>
  </div>
  <div class='main'>
    <wxParse :content='content' noData='加载中……' :imageProp='imageProp'/>
  </div>
  <div v-for='(v,i) in files' class='download' @tap='download(i)' hover-class='fade' :key='i'><img src='/static/imgs/download.png'>{{v.name}}</div>
  <div style='width:100%;height:130rpx;'/>
</div>
</template>
<script>
import wxParse from 'mpvue-wxparse'
export default {
  components: {
    wxParse
  },
  data() {
    return {
      title: '',
      type:'',
      tags: [],
      files: [],
      lawyer: '',
      time: '',
      content: '',
      imgs: '',
      imageProp:{}
    }
  },
  methods: {
    loadArticles(LIPID) {
      wx.showLoading({ title: '正在加载' })
      wx.request({
        url: this.rootUrl + '/pub/getbylipid',
        data: {
          LIPID,
          sessionID: wx.getStorageSync('sessionID')
        },
        success: res => {
          if(res.statusCode=='500'){
            this.service.getUnionId(this.rootAvatar,this.rootUrl).then(res=>{
              console.log(res)
              this.loadArticles(LIPID)
            })
          }else{
            const data = res.data.resquest
            this.title = data.info_Title
            this.content = data.info_Content.replace(/<[^>\\]*\\[^>]*>/g,'')
            this.type = data.info_Type
            this.files = res.data.files
            this.tags = data.info_Tag.split(',')
            this.time = this.service.correctTime(data.createDate)
            wx.hideLoading()
          }
        },
        fail: res => {
          console.log(res)
        }
      })
    },
    download(i){
      wx.setClipboardData({
        data: this.rootAvatar + this.files[i].path,
        success(res) {
          wx.hideToast()
          wx.showModal({
            title: '',
            content: '下载链接已复制到剪贴板，请在浏览器中粘贴下载',
            showCancel: false
          })
        }
      })
    }
  },
  onLoad() {
    this.imageProp = {mode:'aspectFit', padding: 0, lazyLoad:false, domain:this.rootAvatar.replace('https:','')}
    this.loadArticles(this.$root.$mp.query.LIPID)
  },
  onUnload() {
    this.title = ''
    this.content = ''
    this.type = ''
    this.tags = []
    this.time = ''
  }
}
</script>
<style lang="stylus" scoped>
@import url('~mpvue-wxparse/src/wxParse.css')
.container
  padding 40rpx 30rpx 0 30rpx
  .title
    Font(40rpx, 60rpx, bold)
  .subhead
    margin-top 20rpx
    Font(28rpx, 40rpx)
    Flex(flex, , center)
    color #777
    .type
      background tan
      Font(24rpx, 34rpx)
      padding 0 10rpx
      color white
      margin-right 15rpx
    .tags
      background #F5F5F5
      Font(24rpx, 34rpx)
      padding 0 10rpx
      margin-left 10rpx
      &:nth-child(2)
        margin-left auto
  .main
    margin-top 20rpx
    width 100%
    Font(30rpx, 40rpx)
    text-align justify
  .download
    Font(32rpx,40rpx)
    margin-top 30rpx
    Flex(flex, , center)
    color blue
    img
      Height_Width(40rpx)
      margin-right 10rpx
</style>
