import { defineComponent, onMounted, reactive, watch } from 'vue'
import { Image } from 'vant'
import styles from './index.module.less'
import arrowLine from '../images/week/icon-arrow-line.png'
import arrowPoint from '../images/icon-arrow-point.png'
import teacherArrowLine from '../images/month/teacher-icon-arrow-line.png'
import * as echarts from 'echarts/core'
import {
  TitleComponent,
  // 组件类型的定义后缀都为 ComponentOption
  TooltipComponent,
  GridComponent,
  // 数据集组件
  DatasetComponent,
  // 内置数据转换器组件 (filter, sort)
  TransformComponent,
  LegendComponent,
  ToolboxComponent,
  DataZoomComponent
} from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { PieChart } from 'echarts/charts'
import { LabelLayout, UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import { reportCourseType } from '../week-report'
// type EChartsOption = echarts.EChartsOption

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  PieChart,
  ToolboxComponent,
  LegendComponent,
  DataZoomComponent
])

export default defineComponent({
  name: 'orchestra-num',
  props: {
    type: {
      type: String,
      default: 'week'
    },
    reportData: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const forms = reactive({
      total: 0,
      type: 'target' as 'target' | 'submitted',
      workTarget: {} as any, //作业完成率
      workSubmitted: {} as any //作业提交率
    })

    watch(
      () => props.reportData,
      () => {
        handleInit()
      }
    )

    let myChart: any
    const handleInit = () => {
      if (myChart) {
        myChart.dispose()
      }
      const report = props.reportData || {}

      const data = forms.type === 'target' ? report.HOMEWORK_TARGET : report.HOMEWORK_SUBMITTED
      const titleList: any = []
      const valueList: any = []
      for (const i in data) {
        if (i === 'TOTAL') {
          // forms.total = data[i]
          forms.total = Math.ceil(data[i] * 100)
        } else {
          titleList.push(reportCourseType[i])
          valueList.push(Math.ceil(data[i] * 100))
        }
      }

      const chartDom = document.getElementById('overWorkEcharts')
      myChart = echarts.init(chartDom as HTMLDivElement)
      const option = {
        xAxis: {
          type: 'category',
          data: titleList,
          axisLabel: {
            rotate: 45,
            fontSize: 10,
            color: '#333'
          },
          axisLine: {
            lineStyle: {
              color: '#D6D6D6'
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          left: 0,
          top: 22,
          right: 0,
          bottom: 12,
          containLabel: true
        },
        series: [
          {
            type: 'bar',
            showBackground: false,
            barWidth: 15,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#69DCE8' },
                { offset: 0.5, color: '#E5CEFB' },
                { offset: 1, color: '#58A2FF' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#69DCE8' },
                  { offset: 0.5, color: '#E5CEFB' },
                  { offset: 1, color: '#58A2FF' }
                ])
              }
            },
            label: {
              show: true,
              position: 'top',
              fontSize: 10,
              color: '#777'
            },
            data: valueList
          }
        ]
      }
      option && myChart.setOption(option)
    }

    onMounted(() => {
      handleInit()
    })

    return () => (
      <div class={[styles.trainSection, styles.teacherOverSection]}>
        <div class={styles.trainTitle}>
          <div class={styles.name}>
            <Image
              src={props.type === 'month' ? teacherArrowLine : arrowLine}
              class={styles.allowLine}
            />

            {forms.type === 'target' ? '作业完成率' : '作业提交率'}
          </div>

          <div class={styles.countNums}>
            <Image src={arrowPoint} class={styles.arrowPoint} />
            {forms.type === 'target' ? '总完成率' : '总提交率'}
            <span>{forms.total}</span>%
          </div>
        </div>

        <div class={styles.trainSectionContent}>
          <div class={styles.tContent}>
            <div class={styles.calssEchartTitle}>
              <span class={styles.unit}>单位：%</span>
              <div>
                <span
                  class={[
                    styles.overWorkType,
                    forms.type === 'target' ? styles.overWorkActive : ''
                  ]}
                  onClick={() => {
                    forms.type = 'target'
                    handleInit()
                  }}
                >
                  作业完成率
                </span>
                <span
                  class={[
                    styles.overWorkType,
                    forms.type === 'submitted' ? styles.overWorkActive : ''
                  ]}
                  onClick={() => {
                    forms.type = 'submitted'
                    handleInit()
                  }}
                >
                  作业提交率
                </span>
              </div>
            </div>
            <div id="overWorkEcharts" class={styles.classEcharts}></div>
          </div>
        </div>
      </div>
    )
  }
})
