import ColHeader from '@/components/col-header'
import ColSearch from '@/components/col-search'
import { Sticky, Image, List, Popup, Icon } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'
import VideoItem from '@/student/video-class/video-item'
// import VideoItem from './video-item'

import banner from './images/banner.png'
import request from '@/helpers/request'
import ColResult from '@/components/col-result'
import { state } from '@/state'
import OrganSearch from '@/student/practice-class/model/organ-search'
import { SubjectEnum, useEventTracking, useSubjectId } from '@/helpers/hooks'

export default defineComponent({
  name: 'VideoClass',
  data() {
    return {
      apiSuffix:
        state.platformType === 'STUDENT' ? '/api-student' : '/api-teacher',
      search: '',
      list: [],
      dataShow: true, // 判断是否有数据
      loading: false,
      finished: false,
      listLoading: true,
      params: {
        search: '',
        lessonSubject: null as any,
        subjectName: '全部声部',
        page: 1,
        rows: 20
      },
      searchStatus: false,
      openStatus: false,
      subjectList: []
    }
  },
  async mounted() {
    try {
      const res = await request.get(
        `${this.apiSuffix}/subject/subjectSelect?type=VIDEO`
      )
      this.subjectList = res.data || []
    } catch {
      //
    }

    if (state.platformType === 'TEACHER') {
      const users = state.user.data
      if (users.defaultSubject) {
        this.params.lessonSubject = users.defaultSubject
        this.params.subjectName = users.defaultSubjectName
      }
    } else {
      // 判断是否在缓存
      const subjects: any = useSubjectId(SubjectEnum.VIDEO)
      if (subjects.id) {
        this.params.lessonSubject = Number(subjects.id)
        this.params.subjectName = subjects.name
      } else {
        const list = this.subjectList
        const subjectIds = state.user.data?.subjectId || ''
        const subjectId = subjectIds ? Number(subjectIds.split(',')[0]) : null
        list.forEach((subject: any) => {
          const child = subject.subjects || []
          child.forEach((sub: any) => {
            if (sub.id === Number(subjectId)) {
              this.params.lessonSubject = sub.id
              this.params.subjectName = sub.name
            }
          })
        })
      }
    }
    this.listLoading = false
    this.getList()

    useEventTracking('视频课')
  },
  methods: {
    async getList() {
      try {
        if (this.listLoading) return
        this.listLoading = true

        const params: any = {
          ...this.params
        }
        // 只有学生端会有version
        if (state.version) {
          params.version = state.version || '' // 处理ios审核版本
          params.platform =
            state.platformType === 'STUDENT' ? 'ios-student' : 'ios-teacher'
        }
        const url =
          state.platformType === 'STUDENT'
            ? '/api-student/videoLesson/selectGroup'
            : '/api-teacher/videoLessonGroup/page'
        // 处理搜索，老师端分享用
        // if (state.platformType === 'TEACHER') {
        params.myself = false
        // }
        const res = await request.post(url, {
          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
      } finally {
        this.listLoading = false
      }
    },
    // 设置默认声部
    async setDefaultSubject(subjectId: any) {
      try {
        await request.post('/api-teacher/teacher/defaultSubject', {
          params: {
            subjectId
          }
        })
      } catch {
        //
      }
    },
    onSort() {
      this.params.page = 1
      this.list = []
      this.dataShow = true // 判断是否有数据
      this.loading = false
      this.finished = false
      this.searchStatus = false
      if (state.platformType === 'TEACHER') {
        this.setDefaultSubject(this.params.lessonSubject)
      } else {
        this.params.lessonSubject &&
          useSubjectId(
            SubjectEnum.VIDEO,
            JSON.stringify({
              id: this.params.lessonSubject,
              name: this.params.subjectName
            }),
            'set'
          )
      }
      this.getList()
    },
    onSearch(val: string) {
      this.params.search = val
      this.onSort()
    },
    onDetail(item: any) {
      const params: any = {
        groupId: item.id
      }
      // 判断是否是老师端，如果是，则添加分享按钮
      if (state.platformType === 'TEACHER') {
        params.share = 1
      }
      this.$router.push({
        path: '/videoDetail',
        query: params
      })
    }
  },
  render() {
    return (
      <div class={styles.videoClass}>
        <Sticky offsetTop={0} position="top">
          <ColHeader
            class={styles.classHeader}
            border={false}
            isFixed={false}
            background="transparent"
          />
          <ColSearch
            placeholder="请输入老师名称/课程名称"
            onSearch={this.onSearch}
            v-slots={{
              left: () => (
                <div
                  class={styles.label}
                  onClick={() => {
                    this.searchStatus = !this.searchStatus
                    this.openStatus = !this.openStatus
                  }}
                >
                  {this.params.subjectName}
                  <Icon
                    classPrefix="iconfont"
                    name="down"
                    size={12}
                    color="#333"
                  />
                </div>
              )
            }}
          />
        </Sticky>

        {/* <div class={styles.banner}>
          <Image src={banner} />
        </div> */}

        <div>
          {this.dataShow ? (
            <List
              class={styles.videoList}
              v-model:loading={this.loading}
              finished={this.finished}
              finishedText="没有更多了"
              onLoad={this.getList}
              immediateCheck={false}
            >
              {this.list.map(item => (
                <VideoItem item={item} onClick={this.onDetail} />
              ))}
            </List>
          ) : (
            <ColResult btnStatus={false} tips="暂无视频课" />
          )}
        </div>

        <Popup
          show={this.searchStatus}
          position="bottom"
          round
          closeable
          safe-area-inset-bottom
          onClose={() => (this.searchStatus = false)}
          onClosed={() => (this.openStatus = false)}
        >
          {this.openStatus && (
            <OrganSearch
              subjectList={this.subjectList}
              onSort={this.onSort}
              v-model={this.params.lessonSubject}
              v-model:subjectName={this.params.subjectName}
            />
          )}
        </Popup>
      </div>
    )
  }
})
