<script setup>
import request from '~/utils/request'
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { ElMessage } from 'element-plus'
const canvasRef = ref()
const canvasRef2 = ref()
const queryForm_Data = ref({
  team_id: "",
  student_no: "",
  xxk_id: ""
})

const data = ref({});
const option = ref({});

// data.value = {
//   "legend": [
//     "2021学年"
//   ],
//   "xAxis": [
//     "第一次月考",
//     "第二次月考",
//     "期中考试",
//     "第三次月考",
//     "第四次月考",
//     "期末考试"
//   ],
//   "series": [
//     {
//       "data": [
//         {
//           "total": 320,
//           "title": "2021学年三年（2）班第一次月考各科平均成绩",
//           "indicator": [
//             "语文",
//             "数学",
//             "英语",
//             "物理",
//             "化学"
//           ],
//           "data": [
//             40,
//             40,
//             80,
//             80,
//             80
//           ]
//         },
//         {
//           "total": 410,
//           "title": "2021学年三年（2）班第二次月考各科平均成绩",
//           "indicator": [
//             "语文",
//             "数学",
//             "英语",
//             "物理",
//             "化学"
//           ],
//           "data": [
//             80,
//             90,
//             80,
//             80,
//             80
//           ]
//         },
//         {
//           "total": 400,
//           "title": "2021学年三年（2）班期中考试各科平均成绩",
//           "indicator": [
//             "语文",
//             "数学",
//             "英语",
//             "物理",
//             "化学"
//           ],
//           "data": [
//             80,
//             80,
//             80,
//             80,
//             80
//           ]
//         },
//         {
//           "total": 430,
//           "title": "2021学年三年（2）班第三次月考各科平均成绩",
//           "indicator": [
//             "语文",
//             "数学",
//             "英语",
//             "物理",
//             "化学"
//           ],
//           "data": [
//             90,
//             90,
//             80,
//             90,
//             80
//           ]
//         },
//         {
//           "total": 390,
//           "title": "2021学年三年（2）班第四次月考各科平均成绩",
//           "indicator": [
//             "语文",
//             "数学",
//             "英语",
//             "物理",
//             "化学"
//           ],
//           "data": [
//             80,
//             80,
//             70,
//             80,
//             80
//           ]
//         },
//         {
//           "total": 460,
//           "title": "2021学年三年（2）班期末考试各科平均成绩",
//           "indicator": [
//             "语文",
//             "数学",
//             "英语",
//             "物理",
//             "化学"
//           ],
//           "data": [
//             100,
//             90,
//             80,
//             90,
//             100
//           ]
//         }
//       ]
//     }
//   ]
// }

initData();
function initData() {
  request({
    url: '/xdjx/xypjgl_xsxypjcx/content_json',
    data: {
      team_id: queryForm_Data.value.team_id ? queryForm_Data.value.team_id.split(",") : [],
      student_no: queryForm_Data.value.student_no,
      xxk_id: queryForm_Data.value.xxk_id
    }
  }).then(res => {
    const data1 = res.data.content_json;
    data.value = data1;

    if(data.value.series) {
      initChartData();
    } else {
      ElMessage.warning("请先上传数据");
    }
  })
}

const containerRef = ref()
let myChart;
let myChart2;

function initChartData() {
  const { width, height } = containerRef.value.getBoundingClientRect()
  myChart = echarts.init(canvasRef.value, null, { width, height })
  myChart2 = echarts.init(canvasRef2.value, null, { width: 400, height: 400 })

  const option = {
    xAxis: {
      type: 'category',
      data: data.value.xAxis
    },
    yAxis: {
      type: 'value'
    },
    series: data.value.series.map(({ data }) => ({
      data: data.map(({ total }) => total),
      type: 'line',
      smooth: true,
      label: {
        show: true
      }
    })),
  };
  myChart.setOption(option)
  
  const _data = data.value.series[0].data[0]
  if(_data.indicator.length != 0) {
    const option2 = {
      title: {
        text: _data.title
      },
      radar: {
        indicator: _data.indicator.map(name => ({ name }))
      },
      series: [
        {
          type: 'radar',
          data: [
            {
              value: _data.data,
              label: {
                show: true,
                formatter: function (params) {
                  return params.value;
                }
              }
            },
          ]
        }
      ]
    };
    myChart2.setOption(option2)
  }
  
  myChart.on('click', { seriesIndex: 0 }, function (args) {
    const { dataIndex } = args
    const _data = data.value.series[0].data[dataIndex]
    if(_data.indicator.length != 0) {
      const option2 = {
        title: {
          text: _data.title
        },
        radar: {
          indicator: _data.indicator.map(name => ({ name }))
        },
        series: [
          {
            type: 'radar',
            data: [
              {
                value: _data.data,
                label: {
                  show: true,
                  formatter: function (params) {
                    return params.value;
                  }
                }
              },
            ]
          }
        ]
      };
      myChart2.setOption(option2)
    } else {
      myChart2.clear();
    }
  })
}

onMounted(() => {
  
})

const timestamp = ref(Date.now())
const handleQueryFormBtn_search = () => {
  data.value.series[0].data.forEach(item => {
    item.data = item.data.map(() => (~~(Math.random() * 100)))
    item.total = item.data.reduce((p, c) => p + c, 0)
  })
  const option = {
    xAxis: {
      type: 'category',
      data: data.value.xAxis
    },
    yAxis: {
      type: 'value'
    },
    series: data.value.series.map(({ data }) => ({
      data: data.map(({ total }) => total),
      type: 'line',
      smooth: true,
      label: {
        show: true
      }
    })),
  };
  myChart.setOption(option)
  const _data = data.value.series[0].data[0]
  const option2 = {
    title: {
      text: _data.title
    },
    radar: {
      indicator: _data.indicator.map(name => ({ name }))
    },
    series: [
      {
        type: 'radar',
        data: [
          {
            value: _data.data,
          },
        ]
      }
    ]
  };
  myChart2.setOption(option2)
  // timestamp.value = Date.now()
}
</script>

<template>

  <div class="card w-full h-full relative flex flex-col">
    <div>
      <el-form inline :model="queryForm_Data">
        <el-form-item label="学年">
          <remote-multi-select to="team" v-model="queryForm_Data.team_id" class="multi"></remote-multi-select>
          <!-- <remote-cascader-class v-model="queryForm_Data.class_id" clearable /> -->
        </el-form-item>
        <el-form-item label="学号">
          <remote-select url="/xddy/dygl_xsxjk/index" :fields="['xdx_xsxh', 'xdx_xsxm']" v-model="queryForm_Data.student_no"></remote-select>
          <!-- <el-input v-model="queryForm_Data.student_no" clearable /> -->
        </el-form-item>
        <el-form-item label="考试名称">
          <remote-select url="/xdjx/xypjgl_kssz/index" :fields="['xxk_id', 'xxk_mc']" v-model="queryForm_Data.xxk_id"></remote-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="initData" type="primary">搜索</el-button>
        </el-form-item>
      </el-form>
      <div class="divider"></div>
    </div>
    <div class="flex-auto" ref="containerRef" :key="timestamp">
      <canvas ref="canvasRef"></canvas>
      <canvas ref="canvasRef2" class="absolute bottom-10 right-10"></canvas>
    </div>

  </div>
</template>

<style lang="scss" scoped>
:deep(.multi) {
  width: 250px;
}
</style>