import ColHeader from '@/components/col-header'
import ColResult from '@/components/col-result'
import ColSearch from '@/components/col-search'
import request from '@/helpers/request'
import OrganSearch from '@/student/practice-class/model/organ-search'
import { useRect } from '@vant/use'
import { Icon, List, Popup, Sticky } from 'vant'
import { defineComponent } from 'vue'
import Student from '../components/student'
import styles from './index.module.less'

export default defineComponent({
  name: 'myStudent',
  data() {
    return {
      searchStatus: false,
      openStatus: false,
      subjectList: [],
      list: [],
      dataShow: true, // 判断是否有数据
      loading: false,
      finished: false,
      params: {
        userName: '',
        subjectName: '全部声部',
        subjectId: null as any,
        page: 1,
        rows: 20
      },
      height: 'auto' as any
    }
  },
  async mounted() {
    try {
      const res = await request.get('/api-teacher/subject/subjectSelect')
      this.subjectList = res.data || []
    } catch {}
    this.getList()

    const { height } = useRect((this as any).$refs.headers)
    this.height = height
  },
  methods: {
    onSort() {
      this.params.page = 1
      this.list = []
      this.dataShow = true // 判断是否有数据
      this.loading = false
      this.finished = false
      this.searchStatus = false
      this.getList()
    },
    onSearch(val: string) {
      this.params.userName = val
      this.onSort()
    },
    async getList() {
      try {
        const res = await request.post(
          '/api-teacher/courseSchedule/selectStudent',
          {
            data: this.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
      }
    }
  },
  render() {
    return (
      <>
        <Sticky>
          <div ref="headers">
            <ColHeader isFixed={false} border={false} />
            <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>
                )
              }}
            />
          </div>
        </Sticky>

        {this.dataShow ? (
          <List
            v-model:loading={this.loading}
            finished={this.finished}
            finishedText=" "
            class={[styles.liveList, 'mb12']}
            immediateCheck={false}
            onLoad={this.getList}
          >
            {this.list.map((item: any) => (
              <Student
                item={{
                  userName: item.userName,
                  subjectName: item.subjectName,
                  avatar: item.avatar
                }}
              >
                {item.lastEndClass !== 0 && (
                  <>上次课程 {item.lastEndClass} 天前</>
                )}
              </Student>
            ))}
          </List>
        ) : (
          <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无学员" />
        )}

        <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}
              isReset
              v-model={this.params.subjectId}
              v-model:subjectName={this.params.subjectName}
            />
          )}
        </Popup>
      </>
    )
  }
})
