import request from '@/helpers/request'
import { state } from '@/state'
import { Button, Cell, CellGroup, Empty, Grid, GridItem, Icon, Image, Loading, showConfirmDialog, showToast } from 'vant'
import { defineComponent, onMounted, reactive, onUnmounted, ref } from 'vue'
import styles from './uni-test.module.less'
import { useRoute, useRouter } from 'vue-router'
import {
  listenerMessage,
  postMessage,
  promisefiyPostMessage,
  removeListenerMessage
} from '@/helpers/native-message'
import OEmpty from '@/components/o-empty'
import iconLook from './image/look.svg'
import iconCourse from './image/icon-course.png'
import iconCourseLock from './image/icon-course-lock.png'
import { browser } from '@/helpers/utils'
import OSticky from '@/components/o-sticky'
import OHeader from '@/components/o-header'
import iconList from '@/views/courseList/image/icon-list.png'
export default defineComponent({
  name: 'uni-test',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const browserInfo = browser()
    // const catchList = store
    const forms = ref({} as any)
    const data = reactive({
      loading: true,
      detail: {
        cover: '',
        name: '',
        des: ''
      },
      list: [] as any
    })

    /** 获取课件详情 */
    const getDetail = async () => {
      const res: any = await request.get(`${state.platformApi}/lessonCourseware/detail/${route.query.lessonCoursewareId}`)
      if (res?.data){
        data.detail.cover = res.data.coverImg
        data.detail.name = res.data.name
        data.detail.des = res.data.lessonTargetDesc
      }
    }
    const getList = async () => {
      data.loading = true
      try {
        const res: any = await request.post(
          state.platformApi + '/courseSchedule/queryUnitExamination',

          {
            requestType: 'form',
            data: {
              lessonCoursewareId: route.query.lessonCoursewareId,
              classGroupId: forms.value.classGroupId
            }
          }
        )
        //      classGroupId: forms.value.classGroupId
        data.list = res.data || []
      } catch (error) {}

      data.loading = false
    }
    onMounted(() => {
      getDetail()
      forms.value = { ...JSON.parse(sessionStorage.getItem('unit-create') || '{}') } as any
      getList()
    })

    const handleClick = async (item: any) => {
      if (route.query.code === 'select') {
        console.log('选择课时')

        return
      }
      // 选择考试 看详情
      forms.value.testName = item.name
      forms.value.testId = item.id
      sessionStorage.setItem('unit-create', JSON.stringify(forms.value))
      router.push({ path: '/uni-last' })
    }

    return () => (
      <div class={styles.uniTest}>
        <OSticky
          onGetHeight={(height: number) => {
            document.documentElement.style.setProperty('--header-height', height + 'px')
          }}
        >
          <OHeader
            border={false}
            background="transparent"
            color="rgba(124, 61, 18, 1)"
            title="教材详情"
          />
        </OSticky>
        <div class={styles.periodContent}>
          <Image class={styles.cover} src={data.detail.cover}>
            {{
              loading: () => <Loading />, 
            }}
          </Image>
          {/* <img class={styles.cover} src={data.detail.cover} /> */}
          <div>
            <div class={styles.contentTitle}>{data.detail.name}</div>
            <div class={styles.contentLabel}>
              教学目标：{data.detail.des}
            </div>
          </div>
        </div>

        <div class={styles.periodTitle}>
          <img class={styles.pIcon} src={iconList} />
          <div class={styles.pTitle}>课程列表</div>
          <div class={styles.pNum}>共{data.list.length}课</div>
        </div>

        <div class={styles.periodList}>
          <CellGroup inset>
            {data.list.map((item: any) => {
              const isLock = !item.unLockFlag
              return (
                <Cell
                  border
                  center
                  title={item.name}
                  label={`已使用${item.useNum}次`}
                  onClick={() => !isLock && handleClick(item)}
                >
                  {{
                    icon: () => (
                      <div class={styles.periodItem}>
                        <div class={styles.periodItemModel}>
                          <img src={isLock ? iconCourseLock : iconCourse} />
                        </div>
                      </div>
                    ),
                    value: () => (
                      <>
                        <Button disabled={isLock} class={[styles.baseBtn, isLock ? styles.disable : styles.look]}>使用</Button>
                      </>
                    )
                  }}
                </Cell>
              )
            })}
          </CellGroup>
        </div>
        {!data.loading && !data.list.length && <OEmpty tips="暂无内容" />}
      </div>
    )
  }
})
