<!-- <script setup lang="ts">
// import request from '~/utils/request'

// request({
//   url: '/xdjx/xypjgl_xsxypjcx/content_json'
// }).then(res => {
//   const data = res.data.content_json
// })

</script> -->

<!-- <template>
  <router-view></router-view>
</template> -->

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
const canvasRef = ref()
const canvasRef2 = ref()


const data = ref({
  "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
          ]
        }
      ]
    }
  ]
})

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
    }
  })),
};
const containerRef = ref()
let myChart;
let myChart2;

onMounted(() => {
  const { width, height } = containerRef.value.getBoundingClientRect()
  myChart = echarts.init(canvasRef.value, null, { width, height })
  myChart2 = echarts.init(canvasRef2.value, null, { width: 400, height: 400 })
  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)
  myChart.on('click', { seriesIndex: 0 }, function (args) {
    const { dataIndex } = args
    const _data = data.value.series[0].data[dataIndex]
    const option2 = {
      title: {
        text: _data.title
      },
      radar: {
        indicator: _data.indicator.map(name => ({ name }))
      },
      series: [
        {
          type: 'radar',
          data: [
            {
              value: _data.data,
            },
          ]
        }
      ]
    };
    myChart2.setOption(option2)

  })
})

const queryForm_Data = ref({})
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-cascader-class v-model="queryForm_Data.class_id" clearable />
        </el-form-item>
        <el-form-item label="学生姓名">
          <el-input v-model="queryForm_Data.xskp_xsxm" clearable />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQueryFormBtn_search" 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>
