<template>
  <div id="playing_container">
    <!--    计费面板模块-->
    <div class="game_panel padding-top-sm">
      <van-row gutter="16">
        <van-col span="8" offset="2">
          <view class="text-sm">
            <text class="title">已游玩时间</text>
          </view>
          <view class="text-lg   padding-top">
            <van-count-down :time="mode_item.time" format="mm:ss" auto-start @finish="time_out"></van-count-down>
          </view>
        </van-col>
        <van-col span="10" offset="4">
          <view class="text-sm">
            <text class="title">计费模式</text>
            <text class="type padding-left-sm">{{ mode_item.name }}</text>
          </view>
          <button class="cu-btn bg-red text-white margin-top-sm" @click="game_finished">
            <img src="https://img.shuimuai.com/m_duankainaohuan.png" class="cut_brain_icon" alt="">
            <text class="padding-lr cut_text text-sm" @click="game_finished">停止游玩</text>
          </button>
        </van-col>
      </van-row>
    </div>

    <!--    设备状态-->
    <div class="game_status padding-tb">
      <van-row>
        <van-col span="10" offset="2">
          <div class="flex flex-direction align-center justify-center">
            <img src="https://img.shuimuai.com/web/touhuanzhuangtai_2.png" alt="" class="device_img">
            <text class="text-default">已经正确佩戴</text>
          </div>
        </van-col>
        <van-col span="10">
          <div class="flex flex-direction align-center justify-center">
            <van-row class="elc_power_container text-center">
              <van-col v-for="(item,index) in elc_power/25" :key="index" span="6">
                <img src="https://img.shuimuai.com/web/dianchi_3.png" alt="" class="device_elc">
              </van-col>
            </van-row>
            <text class="text-default">{{ elc_power }}%</text>
            <text class="text-default">设备电量</text>
          </div>
        </van-col>
      </van-row>
    </div>


    <!--    图标模块-->
    <div class="ec_container">
      <view class="bar">
        <view>
          <view class="line"></view>
          <view class="title">大脑状态</view>
        </view>
        <view class="label">
          <view>
            <view class="dot dot-orange"></view>
            <view class="name">Att(专注度)</view>
          </view>
          <view>
            <view class="dot dot-pink"></view>
            <view class="name">Att(放松度)</view>
          </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="bar">
        <view>
          <view class="line"></view>
          <view class="title">基本脑波</view>
        </view>
        <view class="label">
          <view>
            <view class="dot dot-blue"></view>
            <view class="name">Delta</view>
          </view>
          <view>
            <view class="dot dot-green"></view>
            <view class="name">Theta</view>
          </view>
          <view>
            <view class="dot dot-yellow"></view>
            <view class="name">Beta</view>
          </view>
          <view>
            <view class="dot dot-orange-yellow"></view>
            <view class="name">Alpha</view>
          </view>
        </view>
      </view>
      <view class="chart">
        <mpvue-echarts :echarts="echarts" :onInit="onMedInit" id="mychart-dom-multi-line-med"
                       canvasId="mychart-multi-line-med"></mpvue-echarts>
      </view>
    </div>

    <!--    窗口弹出-->
    <van-popup :show="pop_show" @close="close_pop" round :close-on-click-overlay="false">
      <div class="err_container flex flex-direction align-center justify-around">
        <view>
          <text class="title">
            本次游玩时间已到
          </text>
        </view>
        <view>
          <text class="sub-title">
            您的{{mode_item.name}}消费已用完
          </text>
        </view>
        <img src="https://img.shuimuai.com/web/sign_notimeJfish.png" class="err_img" alt="">
        <button class="cu-btn lg bg-primary text-white" @click="game_finished">查看报告</button>
      </div>
    </van-popup>
  </div>
</template>

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

var att_charts,
  med_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 后可以自动绑定触摸操作
}

// 我的设备图表初始化
function initMedChart(canvas, width, height) {
  med_charts = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  canvas.setChart(med_charts);

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

  med_charts.setOption(option);

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

export default {
  name: "index_container",
  components: {
    mpvueEcharts
  },
  data() {
    return {
      // 0:未选择 1：时间 2：次数
      mode: 0,
      mode_list: [
        {
          id: 1,
          name: "会员时间消费",
          time: 20 * 60 * 1000,
          err_title: "本次游玩时间已用完"
        },
        {
          id: 2,
          name: "次卡(10分钟)",
          // time: 10 * 60 * 1000,
          time: 1 * 1000,
          err_title: "您的会员消费时间已用完",
        }
      ],
      mode_item: {},
      pop_show: false,
      elc_power: 100,
      // 折线图
      echarts,
      onAttInit: initAttChart,
      onMedInit: initMedChart
    }
  },
  methods: {
    //游戏结束方法
    game_finished() {
      $this.to_report()
    },
    //  关闭弹窗
    close_pop() {
      $this.pop_show = false
    },
    // 时间到
    time_out() {
      $this.pop_show = true
    },
    to_report(){
      mpvue.navigateTo({
        url:"/pages/report/main"
      })
    }
  }
  ,
  mounted() {
  },
  created() {
    $this = this;
  },
  onLoad($option) {
    $this.mode = $option.mode
    $this.mode_list.forEach(($val, $index) => {
      if ($option.mode == $val['id']) {
        $this.mode_item = $val
      }
    })
  }
}
</script>

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