import ColResult from '@/components/col-result'
import request from '@/helpers/request'
import { state } from '@/state'
import VideoItem from './video-item'
import { List } from 'vant'
import { defineComponent } from 'vue'
import styles from './video.module.less'
import Tips from './tips'

export default defineComponent({
  name: 'VideoList',
  data() {
    const query = this.$route.query
    return {
      list: [],
      dataShow: true, // 判断是否有数据
      loading: false,
      finished: false,
      params: {
        teacherId: query.teacherId,
        page: 1,
        rows: 20
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      try {
        const params: any = {
          ...this.params
        }
        if (state.version) {
          params.version = state.version || '' // 处理ios审核版本
          params.platform = 'ios-student'
        }
        const res = await request.post('/api-student/videoLesson/selectGroup', {
          data: {
            ...params
          }
        })
        this.loading = false
        const result = res.data || {}
        // 处理重复请求数据
        if (this.list.length > 0 && result.pageNo === 1) {
          return
        }
        this.list = this.list.concat(result.rows || [])
        this.finished = result.pageNo >= result.totalPage
        this.params.page = result.pageNo + 1
        this.dataShow = this.list.length > 0
      } catch {
        this.dataShow = false
        this.finished = true
      }
    },
    onDetail(item: any) {
      this.$router.push({
        path: '/videoDetail',
        query: {
          groupId: item.id
        }
      })
    }
  },
  render() {
    return (
      <> 
        <Tips type="VIDEO" class={styles.tips} title='什么是视频课？' content='视频课是由教师事先精心准备并录制的课程内容。教师依据教学大纲和目标，系统规划每一节视频的主题与内容，确保教学的连贯性和完整性。在录制过程中，采用专业设备如高清摄像机和录屏软件，保障视频画质清晰、音频质量优良。视频课为学生提供了极大的学习灵活性，他们可以依据个人的时间安排自由选择学习时间，不受地点限制。特别适用于系统化学习体系的内容，视频课能够帮助学生按部就班地掌握知识，实现自主高效学习。' />
        {this.dataShow ? (
          <List
            class={styles.videoList}
            v-model:loading={this.loading}
            finished={this.finished}
            immediateCheck={false}
            finishedText="没有更多了"
            onLoad={this.getList}
          >
            {this.list.map(item => (
              <VideoItem item={item} onClick={this.onDetail} />
            ))}
          </List>
        ) : (
          <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无视频课" />
        )}
      </>
    )

    {
      /* <List
v-model:loading={this.loading}
finished={this.finished}
finishedText="没有更多了"
onLoad={this.getList}
>
{this.buyUserList.map(item => (
  <UserList class="mb12" users={item} />
))}
</List> */
    }
  }
})
