<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>
