
<script setup>
// 引入依赖
import api from '@/api/userManage'
import capi from '@/api/course'
import custom from '@/utils/custom'
import {formatDate} from '@/utils/format'
// import _ from 'lodash'
import {ref,onMounted } from 'vue'
// import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
import * as echarts from 'echarts';
// 变量
const typeList = custom.getExercisesTypeList()
const queryParams = ref({
  page:1,
  pageSize:10,
  user_id:0,
  last_time:'',
  subject:''
})
const subjectParams = ref({
    page:1,
    pageSize:100,
})
const tableData = ref([])
const subjectList = ref([])
const total = ref(0)
// 图表
// const myChart = echarts.init(document.getElementById('myEcharts'));
const option = ref({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisTick: {
        alignWithLabel: true
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        name: '学习时长(分钟)',
        barWidth: '60%',
      }
    ]
  });
// 生命周期
onMounted(() => {
  queryParams.value.id = parseInt(route.params.user_id)
  getLearningDetailList()
  getSubject()
})
// 方法
async function getLearningDetailReport() {
  const res = await api.getLearningDetailReport({id:queryParams.value.id})
  if(res.code === 0) {
    option.value.series[0].data = res.data
    initChart()
  }
}
function initChart() { // echart
  const myChart = echarts.init(document.getElementById('myEcharts'));
  option.value && myChart.setOption(option.value);
}
async function getSubject(){ // 获取课程分类
  const res = await capi.getSubjectList(subjectParams.value)
  if(res.code === 0) {
    // subjectList.value = custom.getStdSubject(res.data.records)
    subjectList.value = custom.addTreeFormatSubject(res.data.records,'id')
    // console.log(subjectList.value)
  }
}
async function getLearningDetailList() {
  const res = await api.getLearningDetailList(queryParams.value)
  if(res.code === 0) {
    tableData.value = res.data.records
    total.value = res.data.total
    getLearningDetailReport()
  }
}
function onSubmit() {
  getLearningDetailList()
}
const onReset = () => {
  queryParams.value = {
    page:1,
    pageSize:10,
    user_id:0,
    last_time:'',
    subject:''
  }
  queryParams.value.id = parseInt(route.params.user_id)
}
// const handleSelectionChange = (val) => {
//   question_ids.value = val
// }
function handleCurrentChange(val) {
  queryParams.value.page = val
  getLearningDetailList()
}
function handleSizeChange(val) {
  queryParams.value.pageSize = val
  getLearningDetailList()
}
</script>
<template>
  <div>
    <!--    搜索框-->
    <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true" :model="queryParams">

        <el-form-item label="课程分类">
<!--          <el-select v-model="queryParams.subject" clearable placeholder="请选择">-->
<!--            <el-option-->
<!--              v-for="item in subjectList"-->
<!--              :key="item.id"-->
<!--              :label="item.name"-->
<!--              :value="item.id"-->
<!--            />-->
<!--          </el-select>-->
          <el-tree-select v-model="queryParams.subject" :data="subjectList" :render-after-expand="false" />
        </el-form-item>

        <el-form-item label="最后学习时间">
           <el-date-picker class="oi-item" style="margin-left:5px"
            v-model="queryParams.last_time"
            type="date"
            placeholder="最后学习时间"
            format="YYYY-MM-DD"
            value-format="x"
           />
        </el-form-item>

        <el-form-item>
          <el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
          <el-button size="small" icon="refresh" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--    表格数据-->
    <div class="gva-table-box">
      <!--      数据列表-->
      <el-table :data="tableData">
        <el-table-column align="left" label="ID"  prop="course_id" />
        <el-table-column align="left" label="最后学习时间" min-width="150" >
          <template #default="scope">
            {{formatDate(scope.row.UpdatedAt)}}
          </template>
        </el-table-column>
        <el-table-column align="left" label="科目" min-width="150" prop="subject"></el-table-column>
        <el-table-column align="left" label="课程" min-width="150" prop="name" />
        <el-table-column align="left" label="学习时长(分钟)" min-width="150" prop="duration" />

      </el-table>
      <div class="gva-pagination">
        <el-pagination
          :current-page="queryParams.page"
          :page-size="queryParams.pageSize"
          :page-sizes="[10, 30, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>

    </div>
    <!--    echart-->
    <div class="echarts-box gva-table-box" style="margin-top: 20px">
      <div class="report-title">学习报告:</div>
      <div id="myEcharts" :style="{ width: '900px', height: '300px',margin: '0 auto' }"></div>
    </div>
  </div>
</template>
<style scoped lang="scss">
  .option-item{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .button-box {
    padding: 10px 20px;
    .el-button {
      float: right;
    }
  }
  .warning {
    color: #dc143c;
  }
</style>
