import OEmpty from '@/components/o-empty'
import request from '@/helpers/request'
import dayjs from 'dayjs'
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
dayjs.extend(isSameOrBefore, isSameOrAfter)
import { ActionSheet, Cell, DatePicker, Icon, Image, List, Popover, Popup, Progress } from 'vant'
import { computed, defineComponent, onMounted, reactive } from 'vue'
import { useRoute } from 'vue-router'
import styles from './plan.module.less'
import iconTeacher from '@common/images/icon_teacher.png'
import OActionSheet from '@/components/o-action-sheet'
import { formatterDatePicker } from '@/helpers/utils'

export default defineComponent({
  name: 'plan',
  props: {
    termTimes: {
      type: Object,
      default: {}
    },
    height: {
      type: [String, Number],
      default: 0
    }
  },
  setup(props) {
    const route = useRoute()
    const state = reactive({
      isLoading: false,
      list: [] as any,
      listState: {
        dataShow: true, // 判断是否有数据
        loading: false,
        finished: false
      },

      params: {
        page: 1,
        rows: 100
      }
    })

    // 班级列表
    const getList = async () => {
      try {
        // if (state.isLoading) return
        // state.isLoading = true
        const { data } = await request.post(
          '/api-school/orchestraDataStatistics/orchestraTrainingProgress',
          {
            data: {
              orchestraId: route.query.id
            }
          }
        )
        state.list = data || []
        state.listState.dataShow = state.list.length > 0
      } catch {
        state.listState.dataShow = false
      }
    }

    onMounted(async () => {
      await getList()
    })
    return () => (
      <div style="height: calc(100vh - var(--header-height) - var(--van-tabs-line-height)); overflow: hidden; overflow-y: auto;">
        {state.listState.dataShow ? (
          <div class={[styles.gridContainer]}>
            {state.list.map((item: any) => (
              <div class={styles.gridClass}>
                <div class={styles.className}>
                  <i
                    class={styles.line}
                    style={{
                      backgroundColor:
                        item.coursewareNum < item.endCourseNum ? '#FF928D' : '#64A9FF'
                    }}
                  ></i>
                  {item.classGroupName}
                </div>
                <div class={styles.classNum}>
                  <div class={styles.classNumItem}>
                    <i
                      class={styles.block}
                      style={{
                        backgroundColor:
                          item.coursewareNum < item.endCourseNum ? '#FF9B96' : '#A2CDFF'
                      }}
                    ></i>
                    <span class={styles.use}>已使用</span>
                    <span
                      class={styles.nums}
                      style={{
                        color: item.coursewareNum < item.endCourseNum ? '#F44541' : '#333'
                      }}
                    >
                      {item.coursewareNum || 0}
                    </span>
                    课件
                  </div>
                  <div class={styles.classNumItem}>
                    <i class={styles.block}></i>
                    <span class={styles.use}>已结束</span>
                    <span class={styles.nums}>{item.endCourseNum || 0}</span>节课
                  </div>
                </div>

                <Progress
                  color={
                    item.coursewareNum < item.endCourseNum
                      ? 'linear-gradient(90deg, #FFC3A1 0%, #FF9895 100%)'
                      : 'linear-gradient(90deg, #CDF1FF 0%, #A0CBFF 100%)'
                  }
                  trackColor="#ECECEC"
                  showPivot={false}
                  style={{
                    borderRadius: '10px'
                  }}
                  percentage={
                    item.endCourseNum ? (item.coursewareNum / item.endCourseNum) * 100 : 0
                  }
                  strokeWidth={8}
                />
              </div>
            ))}
          </div>
        ) : (
          <OEmpty btnStatus={false} tips="暂无班级" />
        )}
      </div>
    )
  }
})
