import OEmpty from '@/components/o-empty'
import OHeader from '@/components/o-header'
import request from '@/helpers/request'
import { state } from '@/state'
import { Cell, CellGroup, Image, Popup } from 'vant'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import Guide from './guide'
import { getImage } from './images'
import styles from './index.module.less'

export default defineComponent({
  name: 'screen-projection',
  setup(props, { emit }) {
    const icons = {
      music: getImage('icon-music.png'),
      video: getImage('icon-video.png')
    }
    const route = useRoute()
    const router = useRouter()
    const query = route.query || {}
    const data = reactive({
      loading: true,
      guideOpen: false,
      knowledgePointList: [] as any,
      name: '',
      lessonTargetDesc: ''
    })
    console.log(query)
    // 获取课件详情
    const getDetail = async () => {
      data.loading = true
      try {
        const res: any = await request.get(
          state.platformApi + `/lessonCoursewareDetail/detail/${query.lessonCoursewareDetailId}`
        )
        if (res?.data) {
          data.name = res.data.name
          data.lessonTargetDesc = res.data.lessonTargetDesc
          data.knowledgePointList = res.data.knowledgePointList || []
        }
      } catch (error) {}
      data.loading = false
    }
    onMounted(() => {
      getDetail()
    })

    // 去课时播放
    const hanldeOpenPlay = (n: any) => {
      router.push({
        path: '/coursewarePlay',
        query: {
          ...query,
          id: query.lessonCoursewareDetailId,
          kId: n.knowledgePointId,
          mId: n.id
        }
      })
    }
    return () => (
      <div>
        <OHeader
          desotry={false}
          rightText="投屏帮助"
          onClickRight={() => {
            console.log('打开投屏')
            data.guideOpen = true
          }}
        />
        <div>
          {data.name && (
            <div class={styles.tips}>
              <div class={styles.line}></div>
              <div>{data.name}</div>
            </div>
          )}
          <CellGroup inset>
            <Cell
              title="胜强测试"
              isLink
              center
              onClick={() => {
                location.href = `http://192.168.3.114:1000/#/coursewarePlay?id=${query.lessonCoursewareDetailId}&courseId=${query.courseId}`
              }}
            >
              {{
                icon: () => (
                  <Image style={{ marginRight: '12px' }} width={36} height={36} src={icons.music} />
                )
              }}
            </Cell>
            {data.knowledgePointList.map((item: any) => {
              return (
                <>
                  {Array.isArray(item.materialList) &&
                    item.materialList.map((n: any) => {
                      return (
                        <Cell title={n.name} isLink center onClick={() => hanldeOpenPlay(n)}>
                          {{
                            icon: () => (
                              <Image
                                style={{ marginRight: '12px' }}
                                width={36}
                                height={36}
                                src={['VIDEO', 'IMG'].includes(n.type) ? icons.video : icons.music}
                              />
                            )
                          }}
                        </Cell>
                      )
                    })}
                </>
              )
            })}
          </CellGroup>
        </div>
        {!data.loading && !data.knowledgePointList.length && <OEmpty />}

        <Popup
          v-model:show={data.guideOpen}
          position="right"
          closeable
          closeIconPosition="top-left"
          safeAreaInsetBottom
          safeAreaInsetTop
        >
          <div class={styles.popup}>
            <Guide />
          </div>
        </Popup>
      </div>
    )
  }
})