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 } 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 query = route.query || {}
    const data = reactive({
      guideOpen: false,
      knowledgePointList: [] as any,
      name: '',
      lessonTargetDesc: ''
    })
    console.log(query)
    // 获取课件详情
    const getDetail = async () => {
      try {
        const res: any = await request.get(
          state.platformApi + `/lessonCoursewareDetail/detail/${query.id}`
        )
        if (res?.data) {
          data.name = res.data.name
          data.lessonTargetDesc = res.data.lessonTargetDesc
          data.knowledgePointList = res.data.knowledgePointList || []
        }
      } catch (error) {}
    }
    onMounted(() => {
      getDetail()
    })
    return () => (
      <div>
        <OHeader
          isBack
          rightText="投屏帮助"
          onClickRight={() => {
            console.log('打开投屏')
            data.guideOpen = true
          }}
        />
        <div>
          <div class={styles.tips}>
            <div class={styles.line}></div>
            <div>{data.name}</div>
          </div>
          <CellGroup inset>
            {data.knowledgePointList.map((item: any) => {
              return (
                <>
                  {Array.isArray(item.materialList) &&
                    item.materialList.map((n: any) => {
                      return (
                        <Cell title={n.name} isLink center>
                          {{
                            icon: () => (
                              <Image
                                style={{ marginRight: '12px' }}
                                width={36}
                                height={36}
                                src={['VIDEO', 'IMG'].includes(n.type) ? icons.video : icons.music}
                              />
                            )
                          }}
                        </Cell>
                      )
                    })}
                </>
              )
            })}
          </CellGroup>
        </div>

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