import CourseVideoItem from '@/business-components/course-video-item'
import SectionDetail from '@/business-components/section-detail'
import UserDetail from '@/business-components/user-detail'
import UserList from '@/business-components/user-list'
import { List, Tab, Tabs } from 'vant'
import { defineComponent } from 'vue'
import { state } from '@/state'
import styles from './video-detail.module.less'
import request from '@/helpers/request'
import ColResult from '@/components/col-result'
export default defineComponent({
  name: 'VideoDetail',
  data() {
    const query = this.$route.query
    return {
      userInfo: {} as any,
      detailList: [],
      buyUserList: [], // 购买学生数
      dataShow: true, // 判断是否有数据
      loading: false,
      finished: false,
      params: {
        videoLessonGroupId: query.groupId,
        page: 1,
        rows: 20
      }
    }
  },
  async mounted() {
    try {
      const res = await request.get(
        '/api-teacher/videoLessonGroup/selectVideoLesson',
        {
          params: {
            groupId: this.params.videoLessonGroupId
          }
        }
      )
      const result = res.data || {}
      const users = state.user.data || {}
      this.userInfo = {
        username: users.username || `游客${users.id || ''}`,
        headUrl: users.heardUrl,
        buyNum: result.lessonGroup.countStudent,
        lessonNum: result.lessonGroup.lessonCount,
        lessonName: result.lessonGroup.lessonName,
        lessonDesc: result.lessonGroup.lessonDesc,
        lessonPrice: result.lessonGroup.lessonPrice,
        lessonCoverUrl: result.lessonGroup.lessonCoverUrl
      }

      this.detailList = result.detailList || []

      this.getList()
    } catch {}
  },
  methods: {
    async getList() {
      try {
        let params = this.params
        const res = await request.post('/api-teacher/videoLesson/pageStudent', {
          data: {
            ...params
          }
        })
        this.loading = false
        const result = res.data || {}
        // 处理重复请求数据
        if (this.buyUserList.length > 0 && result.pageNo === 1) {
          return
        }
        this.buyUserList = this.buyUserList.concat(result.rows || [])
        this.finished = result.pageNo >= result.totalPage
        this.params.page = result.pageNo + 1
        this.dataShow = this.buyUserList.length > 0
      } catch {
        this.dataShow = false
        this.finished = true
      }
    },
    onPlay(detail: any) {
      this.$router.push({
        path: '/videoClassDetail',
        query: {
          groupId: this.params.videoLessonGroupId,
          classId: detail.id
        }
      })
    }
  },
  render() {
    return (
      <div class={[styles['video-detail'], 'mb12']}>
        <UserDetail userInfo={this.userInfo} />
        <SectionDetail>
          <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>
        </SectionDetail>

        <SectionDetail
          title="课程列表"
          icon="courseList"
          titleShow={false}
          contentStyle={{ paddingTop: '0' }}
        >
          <Tabs color="var(--van-primary)" lineWidth={20} sticky>
            <Tab title="课程" titleClass="van-hairline--bottom">
              {this.detailList.map((item: any) => (
                <CourseVideoItem
                  class={'mb12'}
                  detail={{
                    id: item.id,
                    title: item.videoTitle,
                    content: item.videoContent,
                    imgUrl: item.coverUrl
                  }}
                  onPlay={this.onPlay}
                />
              ))}
            </Tab>
            <Tab title="学员列表" titleClass="van-hairline--bottom">
              {this.dataShow ? (
                <List
                  v-model:loading={this.loading}
                  finished={this.finished}
                  finishedText="没有更多了"
                  onLoad={this.getList}
                >
                  {this.buyUserList.map((item: any) => (
                    <UserList
                      class="mb12"
                      users={{
                        avatar: item.avatar,
                        studentId: item.userId,
                        studentName: item.username,
                        createTime: item.createTime
                      }}
                    />
                  ))}
                </List>
              ) : (
                <ColResult
                  btnStatus={false}
                  classImgSize="SMALL"
                  tips="暂无学生购买"
                />
              )}
            </Tab>
          </Tabs>
        </SectionDetail>
      </div>
    )
  }
})
