import OHeader from '@/components/o-header'
import OSearch from '@/components/o-search'
import OSticky from '@/components/o-sticky'
import { Cell, Image, List, Tag } from 'vant'
import { defineComponent, onMounted, reactive } from 'vue'
import styles from './teacher.module.less'
import iconTeacher from '@common/images/icon_teacher.png'
import request from '@/helpers/request'
import { state } from '@/state'
import OEmpty from '@/components/o-empty'

export default defineComponent({
  name: 'teacher',
  emits: ['close', 'select'],
  setup(props, { slots, attrs, emit }) {
    const form = reactive({
      schoolId: null,
      list: [] as any,
      listState: {
        dataShow: true, // 判断是否有数据
        loading: false,
        finished: false
      },
      params: {
        keyword: null,
        page: 1,
        rows: 20
      },
      selectItem: {} as any
    })

    const getList = async () => {
      try {
        const res = await request.post('/api-school/teacher/page', {
          data: {
            ...form.params,
            schoolId: state.user.data.school.id
          }
        })
        form.listState.loading = false
        const result = res.data || {}
        // 处理重复请求数据
        if (form.list.length > 0 && result.pageNo === 1) {
          return
        }
        const rows = result.rows || []
        rows.forEach((item: any) => {
          item.subjectNames = item.subjectName ? item.subjectName.split(',') : []
        })
        form.list = form.list.concat(rows)
        form.listState.finished = result.current >= result.pages
        form.params.page = result.current + 1
        form.listState.dataShow = form.list.length > 0
      } catch {
        form.listState.dataShow = false
        form.listState.finished = true
      }
    }

    const onSearch = () => {
      form.params.page = 1
      form.list = []
      form.listState.dataShow = true // 判断是否有数据
      form.listState.loading = false
      form.listState.finished = false
      getList()
    }

    // 选择老师
    const onSelectTeacher = (item: any) => {
      emit('select', item)
      emit('close')
    }
    onMounted(() => {
      getList()
    })
    return () => (
      <>
        <OSticky position="top">
          <OHeader title="交接老师" />
          <OSearch
            placeholder="请输入老师姓名"
            inputBackground="white"
            background="#F8F8F8"
            onSearch={(val: any) => {
              form.params.keyword = val
              onSearch()
            }}
          />
        </OSticky>
        {form.listState.dataShow ? (
          <List
            v-model:loading={form.listState.loading}
            finished={form.listState.finished}
            finishedText=" "
            class={[styles.liveList]}
            onLoad={getList}
            immediateCheck={false}
          >
            {form.list.map((item: any) => (
              <Cell onClick={() => onSelectTeacher(item)}>
                {{
                  icon: () => <Image class={styles.img} src={item.avatar || iconTeacher} />,
                  title: () => (
                    <div class={styles.content}>
                      <p class={[styles.name, 'van-ellipsis']}>{item.nickname}</p>

                      <p class={styles.subjects}>
                        {item.subjectNames &&
                          item.subjectNames.length > 0 &&
                          item.subjectNames.map((subject: any) => (
                            <Tag type="primary">{subject}</Tag>
                          ))}
                      </p>
                    </div>
                  )
                }}
              </Cell>
            ))}
          </List>
        ) : (
          <OEmpty btnStatus={false} classImgSize="SMALL" tips="暂无伴学老师" />
        )}
      </>
    )
  }
})