import request from '@/helpers/request'
import { state } from '@/state'
import { Button, Empty, Grid, GridItem, Icon, showToast, Toast } from 'vant'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import styles from './unit-lesson.module.less'
import iconLook from './image/look.svg'
import { useRoute, useRouter } from 'vue-router'
import OEmpty from '@/components/o-empty'
export default defineComponent({
  name: 'unit-Lesson',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const forms = ref({} as any)
    const data = reactive({
      loading: true,
      list: [] as any
    })

    const getList = async () => {
      data.loading = true
      try {
        const res: any = await request.post(
          state.platformApi + '/courseSchedule/getCoursewareByClassId',
          {
            requestType: 'form',
            data: {
              classGroupId: route.query.classGroupId
            }
          }
        )
        if (Array.isArray(res?.data)) {
          data.list = res.data
        }
      } catch (error) {
        console.log(error)
      }

      data.loading = false
    }
    onMounted(() => {
      forms.value = { ...JSON.parse(sessionStorage.getItem('unit-create') || '{}') } as any
      getList()
    })
    const handleClick = (item: any) => {
      forms.value.coursewareName = item.coursewareName
      forms.value.lessonCoursewareId = item.lessonCoursewareId
      sessionStorage.setItem('unit-create', JSON.stringify(forms.value))
      router.push({
        path: '/uni-test',
        query: {
          lessonCoursewareId: item.lessonCoursewareId
        }
      })
    }

    return () => (
      <div style={{ paddingTop: '14px' }}>
        {data.list.length > 0 ? (
          <Grid gutter={14} columnNum={3} class={styles.grid}>
            {data.list.map((item: any) => {
              return (
                <GridItem>
                  <div
                    class={styles.gridItem}
                    style={{
                      background: item.coverImg
                        ? ''
                        : `hsla(${Math.floor(Math.random() * 360)},50%,50%,.8)`
                    }}
                    onClick={() => handleClick(item)}
                  >
                    <img src={item.coverImg} class={styles.cover} />
                    <div class={styles.title}>{item.name}</div>
                    <div class={styles.num}>共{item.unitTestNum || 0}次测验</div>

                    {/* {!item.enableFlag && (
                    <div class={styles.look}>
                      <Icon name={iconLook} /> 未解锁
                    </div>
                  )} */}
                  </div>
                </GridItem>
              )
            })}
          </Grid>
        ) : (
          <OEmpty btnStatus={false} tips="暂无内容"></OEmpty>
        )}

        {/* <Button onClick={() => {
          location.href = 'http://192.168.3.114:1000/teacher.html#/courseList?id=1610595624868495362'
        }}>胜强测试</Button>
        {!data.loading && !data.list.length && <OEmpty tips="没有课件" />} */}
      </div>
    )
  }
})