<template>
  <div class="article-details">
    <div class="title">• 文章详情</div>
    <el-row :gutter="20" v-for="(item,index) in GetarticleListTmp" :key="index">
      <el-col :span="4" :offset="1">
        <div class="article-img">
          <img :src="item.thumb_url" class="img-size">
        </div>
      </el-col>
      <el-col :span="8" :offset="1">
        <div class="article-info">
          <p>{{item.title}}</p>
          <div>
            <span>
              <i class="el-icon-star-off"></i>
              {{item.oriPageReadUserTotal}}
            </span>
            <span>
              <i class="el-icon-star-on"></i>
              {{item.addToFavUserTotal}}
            </span>
            <span>
              <i class="el-icon-sold-out"></i>
              {{item.shareUserTotal}}
            </span>
            <span>
              <i class="el-icon-share"></i>
              {{item.originreadtime}}
            </span>
          </div>
        </div>
      </el-col>
      <el-col :span="10" class="articleChart">
        <ve-line :data="item.chartData" height="110px" :grid="grid" :extend="extend" :tooltip-visible="false" :legend-visible="false"></ve-line>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    this.extend = {
      series: {
        smooth: 0,
      },
      yAxis: {
        splitLine: { show: false },
      },
      'xAxis.0.axisLabel.show': false, // x轴标签不显示
      'yAxis.0.axisLabel.show': false, // y轴标签不显示
      'xAxis.0.splitLine.show': false, // x轴表格线不显示
    }
    this.grid = {
      left: 40,
      eight: 40,
      show: true,
      backgroundColor: '#fff',
      borderColor: '#FFF',
    }
    return {
      chartData: {
        columns: ['日期', '图文总阅读人数', '图文总阅读次数'],
        rows: [],
      },
      articleList: [],
    }
  },
  computed: {
    GetarticleListTmp() {
      this.GetarticleList.forEach((item, index) => {
        const tempList = []
        // 拼接 rows
        item.mediaGetarticles.forEach(article => {
          const { refDate, oriPageReadCount, oriPageReadUser } = article
          tempList.push({
            日期: refDate,
            图文总阅读人数: oriPageReadUser,
            图文总阅读次数: oriPageReadCount,
          })
        })
        item.tempList = tempList
        // 拼接图标所需数据
        item.chartData = {
          columns: ['日期', '图文总阅读人数', '图文总阅读次数'],
          rows: item.tempList,
        }
      })
      return this.GetarticleList
    },
  },
  props: ['GetarticleList'],
}
</script>

<style lang="stylus" scoped>
.article-details
  background-color #fff
  border-top 1px solid #ccc
  padding 0 10px
  .title
    height 30px
    line-height 30px
    margin-bottom 10px
  .article-img
    height 90px
    .img-size
      width 156px
      height 100%
  .article-info
    p
      font-size 16px
      height 30px
      line-height 30px
    span
      height 50px
      line-height 50px
      padding-right 30px
      font-size 16px
</style>
