<template>
  <div id="report_container">
    <view class="head"></view>
    <img class="boy" src="https://img.shuimuai.com/m_sign_chengji_boy%402x.png" />
    <view class="user">
      <view class="up">
        <view class="left">
          <img src="https://img.shuimuai.com/weixintouxiang.png" />
          <view>
            <text>小疯兔</text>
            <text>普通会员</text>
          </view>
        </view>
        <view class="right">
          <img src="https://img.shuimuai.com/m_icon_chengji%402x.png" />
          <text>成绩记录</text>
        </view>
      </view>
      <view class="down">
        <view>41.59</view>
        <view>专注力得分</view>
      </view>
    </view>
    <view class="bar">
      <view>
        <view class="line"></view>
        <view class="title">数据详情</view>
      </view>
    </view>
    <view class="detail">
      <view>
        <view>80</view>
        <view>专注力最高分</view>
      </view>
      <view>
        <view>20</view>
        <view>专注力最长稳定时间（秒）</view>
      </view>
      <view>
        <view>80</view>
        <view>专注力平均分值</view>
      </view>
    </view>
    <view class="bar">
      <view>
        <view class="line"></view>
        <view class="title">基本脑波</view>
      </view>
    </view>
    <view class="chart">
      <mpvue-echarts :echarts="echarts" :onInit="onAttInit" id="mychart-dom-multi-line"
                       canvasId="mychart-multi-line"></mpvue-echarts>
    </view>
    <view class="conclution">专注力良好，你的表现比一般人好。专注力波动较大，比较容易被外界干扰。你大多数时候不能很好地集中注意力，请继续加油。</view>
    <view class="bar">
      <view>
        <view class="line"></view>
        <view class="title">核销详情</view>
      </view>
    </view>
    <view class="sheet">
      <view class="left">
        <view>专注力训练设备： 喷水音箱</view>
        <view>核销方式： 会员卡</view>
        <view>会员卡剩余时间： 100分钟2秒</view>
        <view>次卡剩余： 2次</view>
      </view>
      <view class="right">
        <view>专注力训练时长： 8分钟23秒</view>
      </view>
    </view>

  </div>
</template>

<script>
import echarts from 'echarts'
import mpvueEcharts from 'mpvue-echarts'
import util from '../../utils/index'

var att_charts,
  $this

// 大脑图表初始化
function initAttChart(canvas, width, height) {
  att_charts = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(att_charts);

  var option = util.getLineOption([0], [0]); // ECharts 配置项

  att_charts.setOption(option);

  return att_charts; // 返回 chart 后可以自动绑定触摸操作
}

export default {
  name: "index_container",
  components: {
    mpvueEcharts
  },
  data() {
    return {
      // 0:未选择 1：时间 2：次数
      // 折线图
      echarts,
      onAttInit: initAttChart,
    }
  },
  methods: {}
  ,
  mounted() {
  },
  created() {
    $this = this;
  },
  onLoad() {
  }
}
</script>

<style scoped>
@import "index.css";
</style>
