import { defineComponent, reactive } from 'vue'
import styles from './index.module.less'
import request from '@/helpers/request'
import { useRoute } from 'vue-router'
import ColHeader from '@/components/col-header'
import ColResult from '@/components/col-result'
import { List, Popup, Sticky, Image, Icon } from 'vant'

import iconTeacher from '@common/images/icon_teacher.png'
import iconUploadPoster from '@common/images/icon_upload_poster.png'
import TheSticky from '@/components/the-sticky'
import iconVideo from '../images/icon_video.png'
import ColVideo from '@/components/col-video'

export default defineComponent({
  name: 'teacher-style',
  setup() {
    const route = useRoute()
    const state = reactive({
      videoStatus: false,
      videoItem: {} as any,
      isAddBrowse: false,
      dataShow: false,
      teacherId: route.query.teacherId,
      list: [] as any,
      userInfo: {} as any
    })
    const getTeacherDetail = async () => {
      state.dataShow = true
      try {
        const { data } = await request.get(
          '/api-student/teacher/queryTeacherHome',
          {
            params: {
              userId: state.teacherId
            }
          }
        )
        state.userInfo = data
        state.list = data.styleVideo || []
        state.dataShow = state.list.length > 0 ? true : false
      } catch {}
    }
    getTeacherDetail()

    const onPlay = async () => {
      try {
        if (!state.isAddBrowse) {
          return
        }
        await request.get('/api-student/teacher/addVideoBrowse', {
          hideLoading: true,
          params: {
            videoId: state.videoItem.id
          }
        })
        state.isAddBrowse = false
      } catch {}
    }

    return () => (
      <div class={styles['teacher-elegant']}>
        <TheSticky>
          <ColHeader border={false} background="#f6f8f9" isFixed={false} />
        </TheSticky>

        {state.dataShow ? (
          <div class={[styles.elegant]}>
            <div class={styles.line}>
              {state.list.map(
                (item: any, index: number) =>
                  index % 2 === 0 && (
                    <div class={styles.tedeoItem}>
                      <div
                        class={styles.itemBg}
                        onClick={() => {
                          state.videoStatus = true
                          state.isAddBrowse = true
                          state.videoItem = item
                        }}
                      ></div>
                      <img class={styles.iconVideo} src={iconVideo} />
                      <div class={styles.teCover}>
                        <Image
                          src={item.cover || iconUploadPoster}
                          fit="cover"
                        />
                      </div>
                      <div class={styles.teSection}>
                        <div class={styles.info}>
                          <div class={styles.teUserInfo}>
                            <Image
                              src={state.userInfo?.heardUrl || iconTeacher}
                              class={styles.teUserLogo}
                            />
                            <span
                              class={[
                                styles.teUserName,
                                'van-hairline--right van-ellipsis'
                              ]}
                            >
                              {state.userInfo?.username ||
                                `游客${item?.userId || ''}`}
                            </span>
                          </div>
                          <span class={styles.teUserNum}>
                            {item.browse}浏览
                          </span>
                        </div>
                      </div>
                    </div>
                  )
              )}
            </div>
            <div class={styles.line}>
              {state.list.map(
                (item: any, index: number) =>
                  index % 2 === 1 && (
                    <div class={styles.tedeoItem}>
                      <div
                        class={styles.itemBg}
                        onClick={() => {
                          state.videoStatus = true
                          state.isAddBrowse = true
                          state.videoItem = item
                        }}
                      ></div>
                      <img class={styles.iconVideo} src={iconVideo} />
                      <div class={styles.teCover}>
                        <Image
                          src={item.cover || iconUploadPoster}
                          fit="cover"
                        />
                      </div>
                      <div class={styles.teSection}>
                        <div class={styles.info}>
                          <div class={styles.teUserInfo}>
                            <Image
                              src={state.userInfo?.heardUrl || iconTeacher}
                              class={styles.teUserLogo}
                            />
                            <span
                              class={[
                                styles.teUserName,
                                'van-hairline--right van-ellipsis'
                              ]}
                            >
                              {state.userInfo?.username ||
                                `游客${item?.userId || ''}`}
                            </span>
                          </div>
                          <span class={styles.teUserNum}>
                            {item.browse}浏览
                          </span>
                        </div>
                      </div>
                    </div>
                  )
              )}
            </div>
          </div>
        ) : (
          <ColResult
            btnStatus={false}
            classImgSize="SMALL"
            tips="暂无老师风采"
          />
        )}

        <Popup
          show={state.videoStatus}
          round
          class={styles.videoGroup}
          closeable
          onClose={() => {
            state.videoStatus = false
            state.isAddBrowse = false
          }}
        >
          {state.videoStatus && (
            <ColVideo
              playsinline
              onPlay={onPlay}
              src={state.videoItem?.videoUrl}
            />
          )}

          {/* <video
            style={{ height: '210px', width: '100%' }}
            controls
            class={styles.video}
          >
            <source
              src={this.videoItem?.videoUrl + '#t=1,4'}
              type="video/mp4"
            />
          </video> */}
        </Popup>
      </div>
    )
  }
})
