// 116-艾森克人格问卷成人式（龚耀先版）

(function () {
  'use strict'

  // 获取url
  var js = 'epqa2'
  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
  if (typeof (AMUI) !== 'undefined') { div = '<div class="am-g" style="width:' + w + ';"><div id="chart-' + rnd1 + '" class="chart am-u-sm-12 am-u-md-7" style="height:' + h + 'px;"></div><div id="chart-' + rnd2 + '" class="chart am-u-sm-12 am-u-md-5" style="height:' + h + 'px;"></div></div>' }
  else { 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()

  // 处理得分，只取前10个
  var json = v.replace(/\|/g, ',').split(',')

  // 折线图配置
  var option1 = {
    grid: { left: 'left', containLabel: true, bottom: 0, right: 20 },
    title: { text: '《艾森克人格问卷成人式(EPQA)》个人整体特征剖面图' },
    tooltip: { trigger: 'axis' },
    toolbox: { feature: { dataView: {}, magicType: { type: ['bar'] }, restore: {}, saveAsImage: {} } },
    xAxis: {
      axisLabel: { interval: 0 },
      data: ['E', 'N', 'P', 'L']
    },
    yAxis: { min: 20, max: 80 },
    series: {
      name: '标准分',
      type: 'line',
      smooth: false,
      label: { show: true },
      markLine: {
        silent: true,
        data: [
          { yAxis: 30, lineStyle: { color: '#b6a2de', opacity: 0.5 } },
          { yAxis: 40, lineStyle: { type: 'solid', color: '#b6a2de', opacity: 0.5 } },
          { yAxis: 50, lineStyle: { type: 'solid', color: '#b6a2de', opacity: 0.5 } },
          { yAxis: 60, lineStyle: { type: 'solid', color: '#b6a2de', opacity: 0.5 } },
          { yAxis: 70, lineStyle: { color: '#b6a2de', opacity: 0.5 } }
        ]
      },
      data: json
    }
  }

  w = $('#chart-' + rnd2).width()
  h = $('#chart-' + rnd2).height() - 60 - 10
  var wh = Math.min(w, h)

  // 中心点坐标
  var x = w / 2
  var y = 60 + wh / 2

  // 象限图配置
  var option2 = {
    grid: {
      left: (w - wh) / 2,
      right: (w - wh) / 2,
      bottom: h - wh + 10
    },
    title: { text: '内外向与神经质十字坐标图' },
    tooltip: { formatter: 'E：' + json[0] + '<br>N：' + json[1] },
    toolbox: { feature: { saveAsImage: {} } },
    xAxis: {
      name: 'E维度（内外倾向性）',
      nameGap: -110,
      min: 20,
      max: 80,
      interval: 10,
      offset: wh * (-0.5)
    },
    yAxis: {
      name: 'N维度（情绪稳定性）',
      min: 20,
      max: 80,
      interval: 10,
      offset: wh * (-0.5)
    },
    series: {
      type: 'scatter',
      symbolSize: 10,
      markPoint: {
        silent: true,
        label: { show: false },
        itemStyle: { color: '#b6a2de' },
        data: [{ coord: [json[0], json[1]] }]
      },
      data: [[json[0], json[1]]]
    },
    graphic: [
      { type: 'text', z: 1, style: { text: '外向、稳定\n多血质', x: x + 50, y: y + 70 } },
      { type: 'text', z: 1, style: { text: '内向、稳定\n粘液质', x: x - 50, y: y + 70, textAlign: 'right' } },
      { type: 'text', z: 1, style: { text: '内向、不稳定\n抑郁质', x: x - 50, y: y - 70, textAlign: 'right' } },
      { type: 'text', z: 1, style: { text: '外向、不稳定\n胆汁质', x: x + 50, y: y - 70 } }
    ]
  }

  // 绘制图表
  $.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)
    }
  })
})()