<script setup lang="ts">
import * as echarts from 'echarts/core'
import { GridComponent } from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import SelectTime from './SelectTime.vue'
import studyAnalysisApi from '@/api/studyAnalysis'

const props = withDefaults(
  defineProps<{
    subjectId: number
    userId: any
    windowWidth: number
    isEnglish: boolean
  }>(),
  {
    isEnglish: true,
    subjectId: 0,
    userId: '',
    windowWidth: 1920,
  },
)

const emits = defineEmits(['change'])
echarts.use([GridComponent, BarChart, CanvasRenderer])
let myChart: any
watch(
  () => props.subjectId,
  nv => {
    getDuration()
  },
)
const chartDom = ref()
const showData = ref<anyObj>({
  continuousDuration: 0,
  cumulativeTimeDuration: 0,
  studyDurationVoList: [
    {
      totalTimeAi: 0,
      totalTimeError: 0,
      totalTimeFree: 0,
      totalTimeFreePaper: 0,
      totalTimeSentenceRecord: 0,
      totalTimeWordRecord: 0,
      totalTimeWordTest: 0,
    },
  ],
})
const dateType = ref(0)

const showLoading = ref(false)
function getSizeTransform(size: number): number {
  return Math.floor((props.windowWidth * size) / 1920)
}
function initChart() {
  myChart = echarts.init(chartDom.value)
  const colorList = ['#8FCC00', '#8A94FD', '#FCB1F5', '#70D9FF', '#F37871', '#F7BE6F', '#B1E8FC']

  const nameList = props.isEnglish
    ? [
        'totalTimeFree',
        'totalTimeAi',
        'totalTimeError',
        'totalTimeFreePaper',
        'totalTimeWordRecord',
        'totalTimeWordTest',
        'totalTimeSentenceRecord',
      ]
    : ['totalTimeFree', 'totalTimeAi', 'totalTimeError', 'totalTimeFreePaper']
  const data: anyObj[] = []
  nameList.forEach((item, index) => {
    data.unshift({
      value: (showData.value.studyDurationVoList[0][item] / 60 / 60 || 0).toFixed(1),
      itemStyle: {
        color: colorList[index],
      },
    })
  })
  const option = {
    grid: {
      left: '0',
      right: '8%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#8A94FD50',
          width: getSizeTransform(4),
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        margin: 20,
        color: '#666666',
        fontSize: getSizeTransform(30),
      },
      splitLine: {
        lineStyle: {
          color: '#8A94FD50',
          width: getSizeTransform(4),
        },
      },
    },
    yAxis: {
      type: 'category',
      data: props.isEnglish
        ? ['语感训练', '单词测试', '单词闯关', '自由组卷', '错题本', 'AI\n精准学', '自由学']
        : ['自由组卷', '错题本', 'AI\n精准学', '自由学'],
      axisLine: {
        show: true,
        lineStyle: {
          color: '#8A94FD50',
          width: getSizeTransform(4),
        },
      },
      axisLabel: {
        margin: getSizeTransform(70),
        align: 'center',
        verticalAlign: 'middle',
        color: '#666666',
        fontSize: getSizeTransform(30),
        lineHeight: getSizeTransform(45),
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        type: 'bar',
        barWidth: getSizeTransform(80),
        a: 1,
        data: data,
        label: {
          show: true,
          position: 'right',
          formatter: '{c}h',
          fontSize: getSizeTransform(24),
        },
      },
    ],
  }
  option && myChart.setOption(option)
}

function getDuration() {
  showLoading.value = true
  studyAnalysisApi
    .getReportDuration({
      dateType: dateType.value,
      subjectId: props.subjectId,
      userId: props.userId,
    })
    .then(res => {
      showData.value.cumulativeTimeDuration = res.data.data.cumulativeTimeDuration
      showData.value.continuousDuration = res.data.data.continuousDuration
      Object.assign(showData.value.studyDurationVoList[0], res.data.data.studyDurationVoList[0])

      myChart?.dispose()
      setTimeout(() => {
        initChart()
      })
    })
    .finally(() => {
      showLoading.value = false
    })
}
</script>
<template>
  <div class="data-content">
    <div class="data-title">学习时长统计</div>
    <div class="data-content-card">
      <div class="data-content-card-item">
        累计学习<br />
        <span class="text-number">{{ showData.cumulativeTimeDuration }}</span>
        天
      </div>
      <div class="data-content-card-item">
        连续学习<br />
        <span class="text-number">{{ showData.continuousDuration }}</span>
        天
      </div>
    </div>
    <div class="nav">
      <SelectTime v-model="dateType" @change="getDuration"></SelectTime>
    </div>
    <div v-if="showLoading" class="chart loading">
      <Empty type="loading" />
    </div>
    <div v-else ref="chartDom" :class="{ chart: true, isEnglish: isEnglish }"></div>
  </div>
</template>

<style lang="scss" scoped>
//
.data-content-card {
  margin-top: 6vh;
  display: flex;
  justify-content: center;
  &-item {
    width: 360px;
    height: 16.67vh;
    border-radius: 1.67vh;
    border: 0.67vh dashed #84c9fc;
    box-shadow: 0 0.33vh 0.33vh 0 #00000040;
    text-align: center;
    font-family: $font-special;
    font-size: 3.33vh;
    line-height: 5vh;
    padding-top: 2.67vh;
    color: $font-color;
    .text-number {
      color: #8fcc00;
    }
    &:first-child {
      margin-right: 40px;
    }
  }
}
.nav {
  display: flex;
  justify-content: center;
  margin: 6vh 0 1.67vh;
}

.chart {
  width: 1200px;
  height: 53.17vh;
  margin: 0 auto;
  &.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
  }
}
.isEnglish {
  height: 88.17vh;
}
</style>
