import request from '@/helpers/request'
import { state } from '@/state'
import { Button, Empty, Grid, GridItem, Icon, showToast, Toast } from 'vant'
import { defineComponent, onMounted, reactive } from 'vue'
import styles from './index.module.less'
import iconLook from './image/look.svg'
import { useRoute, useRouter } from 'vue-router'
import OEmpty from '@/components/o-empty'
export default defineComponent({
  name: 'lessonCourseware',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const data = reactive({
      loading: true,
      list: [] as any
    })
    const getList = async () => {
      data.loading = true
      if (route.query.code === 'select') {
        try {
          const res: any = await request.post(state.platformApi + `/courseSchedule/getCourseware/${route.query.courseScheduleId}`)
          if (Array.isArray(res?.data)) {
            data.list = res.data.map((n: any) => {
              return {
                coverImg: n.coverImg,
                name: n.coursewareName,
                id: n.lessonCoursewareId,
                courseNum: n.coursewareNum,
              }
            })
          }
        } catch (error) {}
      } else {
        try {
          const res: any = await request.post(state.platformApi + '/courseSchedule/myCourseware')
          if (Array.isArray(res?.data)) {
            data.list = res.data
          }
        } catch (error) {}
      }
      data.loading = false
    }
    onMounted(() => {
      getList()
    })
    const handleClick = (item: any) => {
      if (route.query.code === 'select') {
        router.push({
          path: '/courseList',
          query: {
            ...route.query,
            id: item.id
          }
        })
        return
      }
      router.push({
        path: '/courseList',
        query: {
          id: item.id
        }
      })
    }

    return () => (
      <div style={{ paddingTop: '14px' }}>
        <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.courseNum}课</div>
                  {/* {item.delFlag && (
                    <div class={styles.look}>
                      <Icon name={iconLook} /> 未解锁
                    </div>
                  )} */}
                </div>
              </GridItem>
            )
          })}
        </Grid>
        <Button onClick={() => {
          location.href = 'http://192.168.3.114:1000/teacher.html#/courseList?id=1610595624868495362'
        }}>胜强测试</Button>
        {!data.loading && !data.list.length && <OEmpty tips="没有课件" />}
      </div>
    )
  }
})