import {
  defineComponent,
  toRefs,
  reactive,
  onMounted,
  ref,
  nextTick
} from 'vue'

// import classes from './index.module.less'
import detaile from '@/components/videoDetailItem/images/detaile.png'
import videoCourseItem from './modals/videoCourseItem'
// from './images/courseIcon.png'
import courseIcon from '@/views/home/images/titleDot.png'
import peopleIcon from './images/peopleIcon.png'
import teacherIcon from './images/teacherIcon.png'
import player from '@/components/albumItem/images/player.png'
import teacher from './images/teacher.png'
import teacherHeader from '@/common/images/icon_teacher.png'
import musiceIcon from './images/musiceIcon.png'
import TimetableIcon from './images/TimetableIcon.png'


import ablumIcon from '@/components/col-header/images/ablumIcon.png'
import noAblumIcon from '@/components/col-header/images/noAblumIcon.png'
import onlineIcon from '@/components/col-header/images/onlineIcon.png'
import noOnlineIcon from '@/components/col-header/images/noOnlineIcon.png'
import styleIcon from '@/components/col-header/images/styleIcon.png'
import nostyleIcon from '@/components/col-header/images/noStyleIcon.png'
import videoIcon from '@/components/col-header/images/videoIcon.png'
import noVideoIcon from '@/components/col-header/images/noVideoIcon.png'
import vipIcon from '@/components/col-header/images/vipIcon.png'
import noVipIcon from '@/components/col-header/images/noVipIcon.png'


import styles from './index.module.less'
import videoDetailItem from '@/components/videoDetailItem'
import colVideo from '@/components/col-video/index'
import request from '@/helpers/request'
import pagination from '@/components/pagination'
import { useRoute } from 'vue-router'
import { getUserInfo, getUserType, getAuth } from '@/helpers/utils'
import showVideoDetail from './modals/showVideoDetail'
import bookIcon from './images/bookIcon.png'
import tree from './images/tree.png'
import styleBG from './images/styleBG.jpg'
import { ElDialog } from 'element-plus'
export default defineComponent({
  name: 'videoDetailList',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  components: {
    videoDetailItem,
    videoCourseItem,
    pagination,
    colVideo,
    showVideoDetail
  },
  setup(props, conent) {
    const state = reactive({
      title: props.title,
      videoList: [],
      videoDetail: {
        auditId: 0,
        auditName: '',
        auditStatus: '',
        auditVersion: '',
        avatar: '',
        countStudent: 0,
        createTime: '',
        hotFlag: 0,
        id: 0,
        lessonCount: 0,
        lessonCoverUrl: '',
        lessonDesc: '',
        lessonName: '',
        lessonPrice: 0,
        lessonSubject: '',
        lessonSubjectName: '',
        lessonTag: '',
        realName: '',
        sortNumber: 0,
        teacherId: 0,
        topFlag: 0,
        updateTime: '',
        username: ''
      },
      otherVideoList: [],
      teacherDetail: {} as any,
      id: '',
      pageInfo: {
        // 分页规则
        limit: 5, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [5, 20, 40, 50] // 选择限制显示条数
      },
      userType: '',
      showVideoDetail: false,
      activeItem: null as any,
      styleList:[]as any,
      iconList:[] as any
    })

    const route = useRoute()
    const getVideoList = async () => {
      try {
        const res = await request.post(
          '/api-website/open/videoLessonGroup/info/page',
          {
            data: {
              auditStatus: 'PASS',
              videoLessonGroupId: state.id,
              page: state.pageInfo.page,
              rows: state.pageInfo.limit
            }
          }
        )
        state.videoList = res.data.rows
        state.pageInfo.total = res.data.total
      } catch (e) {
        console.log(e)
      }
    }
    const getVideoDetail = async () => {
      try {
        const res = await request.get(
          '/api-website/open/videoLessonGroup/selectVideoLesson',
          {
            params: {
              groupId: state.id
            }
          }
        )
        state.videoDetail = { ...res.data.lessonGroup }
        // state.styleList = {...res.data.detailList}
        const teacherRes = await request.get(
          `/api-website/open/teacher/detail/${res.data.lessonGroup.teacherId}`
        )
        state.teacherDetail = { ...teacherRes.data }
        setUser()

      } catch (e) {}
    }

    const getOther = async () => {
      try {
        const res = await request.post(
          '/api-website/open/videoLessonGroup/otherLesson',
          {
            data: {
              videoLessonGroupId: state.id
            }
          }
        )
        state.otherVideoList = res.data
      } catch (e) {
        console.log(e)
      }
    }

    const getDetail = (val: string) => {
      state.id = val
      nextTick(() => {
        _init()
      })
    }
    const setUser = () => {
      state.iconList = [] as any
      if (state.teacherDetail.tag.indexOf('STYLE') != -1) {
        state.iconList.push(styleIcon)
      } else {
        state.iconList.push(nostyleIcon)
      }
      if (state.teacherDetail.tag.indexOf('VIDEO') != -1) {
        state.iconList.push(videoIcon)
      } else {
        state.iconList.push(noVideoIcon)
      }
      if (state.teacherDetail.tag.indexOf('LIVE') != -1) {
        state.iconList.push(onlineIcon)
      } else {
        state.iconList.push(noOnlineIcon)
      }
      if (state.teacherDetail.tag.indexOf('MUSIC') != -1) {
        state.iconList.push(ablumIcon)
      } else {
        state.iconList.push(noAblumIcon)
      }
    }
    const _init = () => {
      getVideoList()
      setTimeout(() => {
        getVideoDetail()
      }, 100)
      setTimeout(() => {
        getOther()
      }, 150)
    }
    const followVideo = async () => {
      try {
        const res = await request.get('/api-website/student/starOrUnStar', {
          params: {
            userId: state.teacherDetail.userId,
            starStatus: state.teacherDetail.isStar ? 0 : 1
          }
        })
        _init()
        // state.otherVideoList = res.data
      } catch (e) {
        console.log(e)
      }
    }
    const openVideo = (item: any) => {
      state.activeItem = item
      state.showVideoDetail = true
    }
    onMounted(() => {
      if (route.query.id) {
        state.id = route.query.id as string
      }
      state.userType = getUserType()
      _init()
    })
    return () => (
      <>
        <div class={styles.allWrap}>
          <div class="wall" style={{ height: '60px' }}></div>
          <div class={[styles.w1200, styles.detailWrap]}>
            <div class={styles.detailLeft}>
              <img
                src={
                  state.videoDetail.lessonCoverUrl
                    ? state.videoDetail.lessonCoverUrl
                    : detaile
                }
                class={styles.detailTopImg}
                alt=""
              />
              <div class={styles.courseDetailWrap}>
                <p class={styles.courseDetailTitle}>
                  <span class={styles.courseDetailText}>{state.videoDetail.lessonName}</span>{' '}
                  <div class={styles.courseTitleR}>
                    <img src={bookIcon} alt="" />
                    <span>{state.videoDetail.countStudent}人在学</span>
                  </div>
                </p>
              </div>
              <div class={styles.tag}>
                {state.videoDetail.lessonSubjectName}
              </div>
              <div class={styles.courseWrap}>
                <div class={styles.courseTitle}>
                  <span>课程介绍</span>
                  <img src={courseIcon} alt="" />
                </div>

                <div class={styles.courseInfo}>
                  <p>{state.videoDetail.lessonDesc}</p>
                </div>
                {/* courseList */}
                <div class={styles.courseListWrap}>
                  <div class={styles.courseTitle}>
                    <div class={styles.courseTitleLeft}>
                      <span>课程列表</span>
                      <img src={courseIcon} alt="" />
                    </div>
                    <p class={styles.courseTitlTimer}>
                      <img src={tree} alt="" />
                      <span> 共{state.videoDetail.lessonCount}课时</span>
                    </p>
                  </div>
                  {state.videoList.map(item => {
                    return <videoCourseItem item={item}></videoCourseItem>
                  })}
                </div>
              </div>
              <pagination
                total={state.pageInfo.total}
                v-model:page={state.pageInfo.page}
                v-model:limit={state.pageInfo.limit}
                pageSizes={state.pageInfo.page_size}
                pagination={getVideoList}
              />
            </div>
            <div class={styles.detailRight}>
              <div class={styles.teacherInfo}>
                <div  class={styles.teacherTopInfo}>
                  <div class={styles.teacherHeadWrap}>
                    <div class={styles.teacherHeadLeft}>
                      <img
                        src={
                          state.videoDetail.avatar
                            ? state.videoDetail.avatar
                            : teacherHeader
                        }
                        alt=""
                        class={styles.teacherHeader}
                      />
                      <div class={styles.teacherHeadInfo}>
                        <div class={styles.teacherHeadName}>
                          <span>{state.videoDetail.username}</span>
                          {state.userType == 'STUDENT' ? (
                            <div
                              class={[
                                styles.teacherHeadRight,
                                state.teacherDetail.isStar ? styles.isStart : ''
                              ]}
                              onClick={() => followVideo()}
                            >
                              {state.teacherDetail.isStar ? '已关注' : '+ 关注'}
                            </div>
                          ) :   <div class={styles.iconWrapList}>
                          <img
                            src={ state.teacherDetail.isVip?vipIcon:noVipIcon}
                            class={styles.vipIcon}
                            alt=""
                          />
                          {state.iconList.map(item => (
                            <img
                              class={styles.teacherDetailIcon}
                              src={item}
                              alt=""
                            />
                          ))}
                        </div>}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div>
                    <p class={styles.fensNum}>{state.teacherDetail.fansNum}</p>
                    <p class={styles.fens}>粉丝数</p>
                  </div>
                </div>
                {state.teacherDetail.introduction?  <div class={styles.titleWrap}>
                  {/* <img src={peopleIcon} alt="" /> */}
                  <span>个人介绍</span>
                </div>:null}
                <p class={styles.teacherDetail}>
                  {state.teacherDetail.introduction}
                </p>
                {state.teacherDetail.styleVideo&&state.teacherDetail.styleVideo.length>0?  <div class={styles.titleWrap}>
                  {/* <img src={teacherIcon} alt="" /> */}
                  <span>老师风采</span>
                </div>:null}

                <div class={styles.teacherVideoList}>
                  {state.teacherDetail.styleVideo &&
                    state.teacherDetail.styleVideo.map((item: any) => {
                      return (
                        <div
                          class={styles.videoItem}
                          onClick={() => openVideo(item)}
                        >
                          {/* <colVideo
                            styleValue={{ with: '159px', height: '89px' }}
                            controls={false}
                            src={item.videoUrl}
                            class={styles.videoItemVideo}
                          /> */}
                          {/* <video
                            class={styles.videoItemVideo}
                            src={item.videoUrl}
                            controls={false}
                          ></video> */}
                          <img  class={styles.videoItemVideo} src={item.cover?item.cover:styleBG} alt="" />
                          <img src={player} alt="" class={styles.player} />
                        </div>
                      )
                    })}

                  {/* <div class={styles.videoItem}>
                    <img src={detaile} alt="" class={styles.Styles} />
                    <img src={player} alt="" class={styles.player} />
                  </div> */}
                </div>
              </div>
              {state.otherVideoList.length>0&&
              <div class={styles.otherCourse}>
                <h2>其他课程</h2>
                <div>
                  {state.otherVideoList.map(item => {
                    return (
                      <videoDetailItem
                        detail={item}
                        isFull={true}
                        onGetDetail={val => {
                          getDetail(val)
                        }}
                      ></videoDetailItem>
                    )
                  })}

                  {/* videoDetailItem */}
                </div>
              </div>
              }
            </div>
          </div>
          <ElDialog
            title="个人风采"
            modelValue={state.showVideoDetail}
            onUpdate:modelValue={val => (state.showVideoDetail = val)}
            closeOnClickModal={true}
            closeOnPressEscape={false}
          >
            <showVideoDetail
              item={state.activeItem}
              onClose={() => (state.showVideoDetail = false)}
            ></showVideoDetail>
          </ElDialog>
        </div>
      </>
    )
  }
})
