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 { LineChart } 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,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  ToolboxComponent,
  LegendComponent,
  DataZoomComponent,
  LineChart
])

export default defineComponent({
  name: 'orchestra-num',
  props: {
    type: {
      type: String,
      default: 'week'
    },
    reportData: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const forms = reactive({
      total: 0
    })

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

    let myChart: any
    const handleInit = () => {
      if (myChart) {
        myChart.dispose()
      }

      const data = props.reportData || {}
      const titleList: any = []
      const valueList: any = []
      let lineColor = '#356BF7'
      let textColor = '#1B4FD7'
      for (const i in data) {
        if (i === 'TOTAL') {
          forms.total = data[i] * 100
          if (forms.total <= 59) {
            lineColor = '#FF8057'
            textColor = '#F67146'
          }
        } else {
          titleList.push(reportCourseType[i])
          valueList.push(data[i] * 100)
        }
      }

      const chartDom = document.getElementById('studentEcharts')
      myChart = echarts.init(chartDom as HTMLDivElement)
      const option = {
        xAxis: {
          type: 'category',
          data: titleList,
          axisLabel: {
            rotate: 45,
            fontSize: 10,
            color: '#333'
          }
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          left: 0,
          top: 22,
          right: 0,
          bottom: 12,
          containLabel: true
        },
        series: [
          {
            type: 'line',
            showBackground: false,
            itemStyle: {
              color: lineColor
            },
            label: {
              show: true,
              position: 'top',
              fontSize: 10,
              color: textColor
            },
            data: valueList
          }
        ]
      }

      option && myChart.setOption(option)
    }

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

    return () => (
      <div
        class={[
          styles.trainSection,
          props.type === 'month' ? styles.teacherTrainSection : '',
          styles.studentSection
        ]}
      >
        <div class={styles.trainTitle}>
          <div class={styles.name}>
            <Image
              src={props.type === 'month' ? teacherArrowLine : arrowLine}
              class={styles.allowLine}
            />
            本{props.type === 'month' ? '月' : '周'}学生出勤
          </div>
          <div class={styles.countNums}>
            <Image src={arrowPoint} class={styles.arrowPoint} />
            总出勤率
            <span
              style={{
                color: forms.total > 59 ? '#42FFE2' : '#FF7C88'
              }}
            >
              {forms.total}
            </span>
            %
          </div>
        </div>

        <div class={styles.trainSectionContent}>
          <div class={styles.tContent}>
            <div class={styles.calssEchartTitle}>
              <span class={styles.unit}>单位：%</span>
            </div>
            <div id="studentEcharts" class={styles.classEcharts}></div>
          </div>
        </div>
      </div>
    )
  }
})