<template>
  <div class="materian-details">
    <el-row class="detail-top">
      <el-col :span="24">
        <div class="detail-title">
          <span>
            <img src="./../../../assets/images/picture.png">
            <span class="title">素材详情</span>
            <span class="gray">
              <span class="star-red">*</span>
              素材数据采集自微信公众号平台，详见
              <a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141084">
                图文分析数据接口</a>
            </span>
          </span>
        </div>
      </el-col>
    </el-row>
    <material-info :MediaList="MediaList" class="datailChart"></material-info>
    <ve-line :data="chartData" :judge-width="true" :extend="extend" height="230px" :mark-line="markLine"></ve-line>
  </div>
</template>
<script>
import MaterialInfo from './MaterialInfo'

export default {
  data() {
    this.markLine = {
      symbol: 'none',
      data: [
        {
          name: 'Y 轴值为 100 的水平线',
          yAxis: 100,
        },
      ],
    }
    this.extend = {
      series: {
        smooth: 0,
      },
    }
    return {
      chartData: {
        columns: ['日期', '图文总阅读人数', '图文总阅读次数'],
        rows: [],
      },
    }
  },
  mounted() {
    this.materialChartList.forEach(item => {
      const { refDate, intPageReadCount, intPageReadUser } = item
      this.chartData.rows.push({
        日期: refDate,
        图文总阅读人数: intPageReadUser,
        图文总阅读次数: intPageReadCount,
      })
    })
  },
  props: ['MediaList', 'materialChartList'],
  components: {
    MaterialInfo,
  },
}
</script>

<style lang="stylus" scoped>
.materian-details
  background-color #fff
  .datailChart
    margin-bottom 20px
  .detail-top
    height 60px
    line-height 60px
    background-color #fff
    padding-left 15px
    margin-top 10px
    .detail-title
      img
        width 30px
        height 30px
</style>
