// 74-爱德华个人偏好量表(EPPS)

(function () {
  'use strict'

  // 获取url
  var js = 'epps'
  var $script = $('script[src*="/lb/chart/' + js + '.js"]').last()
  var src = $script.attr('src')

  // 获取参数
  var w = src.match(/[?&]w=([^&]+)/)
  var h = src.match(/[?&]h=([^&]+)/)
  var v = src.match(/[?&]v=([^&]+)/)

  // 处理参数
  if (w === null || w.length < 1) { w = '100%' } else { w = w[1] + 'px' }
  if (h === null || h.length < 1) { h = 400 } else { h = h[1] }
  if (v === null || v.length < 1) { v = '' } else { v = v[1] }

  // 创建容器
  var rnd1 = Math.random().toString().substring(2, 8)
  var rnd2 = Math.random().toString().substring(2, 8)
  var div = '<div style="overflow:hidden;width:' + w + ';"><div id="chart-' + rnd1 + '" class="chart" style="float:left;width:70%;height:' + h + 'px;overflow-x:auto;overflow-y:hidden;margin:0 auto;"></div><div id="chart-' + rnd2 + '" class="chart" style="float:right;width:30%;height:' + h + 'px;overflow-x:auto;overflow-y:hidden;margin:0 auto;"></div></div>'
  $script.after(div).remove()

  // 处理得分
  var json = v.replace(/\|/g, ',').split(',')

  // 折线图配置
  var option1 = {
    grid: { left: 'left', containLabel: true, right: 5, bottom: 5 },
    title: { text: '《爱德华个人偏好量表(EPPS)》结果剖析图' },
    tooltip: { trigger: 'axis' },
    toolbox: { feature: { dataView: {}, magicType: { type: ['bar'] }, restore: {}, saveAsImage: {} } },
    xAxis: {
      data: ['ach', 'def', 'ord', 'exh', 'aut', 'aff', 'int', 'suc', 'dom', 'aba', 'nur', 'chg', 'end', 'het', 'agg']
    },
    yAxis: {},
    series: {
      name: '百分位等级分数',
      type: 'line',
      smooth: false,
      label: { show: true },
      markPoint: { data: [{ name: '最大值', type: 'max' }] },
      data: json
    }
  }

  // 雷达图配置
  var option2 = {
    toolbox: { feature: { dataView: {}, saveAsImage: {} } },
    radar: {
      indicator: [
        { name: 'ach', max: 100 },
        { name: 'def', max: 100 },
        { name: 'ord', max: 100 },
        { name: 'exh', max: 100 },
        { name: 'aut', max: 100 },
        { name: 'aff', max: 100 },
        { name: 'int', max: 100 },
        { name: 'suc', max: 100 },
        { name: 'dom', max: 100 },
        { name: 'aba', max: 100 },
        { name: 'nur', max: 100 },
        { name: 'chg', max: 100 },
        { name: 'end', max: 100 },
        { name: 'het', max: 100 },
        { name: 'agg', max: 100 }
      ]
    },
    series: {
      type: 'radar',
      areaStyle: {},
      data: [{ value: json }]
    }
  }

  // 绘制图表
  $.ajax('/Scripts/echarts/theme/macarons.js', {
    dataType: 'script',
    cache: true,
    complete: function () {
      // console.log(JSON.stringify(option2, null, 2));
      $('#chart-' + rnd1).data({ option: option1, theme: 'macarons' })
      $('#chart-' + rnd2).data({ option: option2, theme: 'macarons' })
      echarts.init(document.getElementById('chart-' + rnd1), 'macarons').setOption(option1)
      echarts.init(document.getElementById('chart-' + rnd2), 'macarons').setOption(option2)
    }
  })
})()