import OEmpty from '@/components/o-empty'
import OHeader from '@/components/o-header'
import OSearch from '@/components/o-search'
import OSticky from '@/components/o-sticky'
import { ActionSheet, Button, Cell, CellGroup, Icon, Image, List } from 'vant'
import { defineComponent, reactive } from 'vue'
import styles from './index.module.less'
import iconEdit from './images/icon-edit.png'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'unit-test',
  setup() {
    const router = useRouter()
    const form = reactive({
      oPopover: false,
      list: [] as any,
      listState: {
        dataShow: true, // 判断是否有数据
        loading: false,
        finished: false
      },
      statusText: '全部测验',
      params: {
        keyword: null,
        status: null,
        page: 1,
        rows: 20
      },
      isClick: false
    })

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

    const onSearch = () => {
      form.params.page = 1
      form.list = []
      form.listState.dataShow = true // 判断是否有数据
      form.listState.loading = false
      form.listState.finished = false
      getList()
    }
    return () => (
      <div class={styles.unitTest}>
        <OSticky position="top">
          <OSearch
            placeholder="请输入测验名称"
            inputBackground="white"
            background="#f6f8f9"
            onSearch={(val: any) => {
              form.params.keyword = val
              onSearch()
            }}
            v-slots={{
              left: () => (
                <div
                  class={styles.searchBand}
                  style={{ marginRight: '13px' }}
                  onClick={() => (form.oPopover = true)}
                >
                  {form.statusText} <Icon name={form.oPopover ? 'arrow-up' : 'arrow-down'} />
                </div>
              )
            }}
          />
        </OSticky>

        {form.listState.dataShow ? (
          <List
            v-model:loading={form.listState.loading}
            finished={form.listState.finished}
            finishedText=" "
            class={[styles.liveList]}
            onLoad={getList}
            immediateCheck={false}
          >
            {[1, 2, 3, 4].map((item: any) => (
              <CellGroup inset class={styles.cellGroup} border={false}>
                <Cell center isLink clickable={false}>
                  {{
                    icon: () => <Image src={iconEdit} class={styles.img} />,
                    title: () => (
                      <span class={[styles.unitTitle, 'van-ellipsis']}>长笛班-第一次单元测验</span>
                    ),
                    value: () => <span class={styles['no-start']}>未完成</span>
                  }}
                </Cell>
                <Cell center class={styles.unitSection}>
                  {{
                    title: () => (
                      <div class={styles.unitInformation}>
                        <div class={styles.name}>武汉小学2022标准团</div>
                        <div class={styles.endTime}>截止时间：2022-10-24 21:00</div>

                        <div class={styles.unitBtnGroup}>
                          <Button color="#FFF0E6" round block style={{ color: '#F67146' }}>
                            练习模式
                          </Button>
                          <Button
                            type="primary"
                            round
                            block
                            onClick={() => {
                              router.push('/unit-detail')
                            }}
                          >
                            开始测验
                          </Button>
                        </div>
                      </div>
                    )
                  }}
                </Cell>
              </CellGroup>
            ))}
          </List>
        ) : (
          <OEmpty tips="暂无单元测验" />
        )}

        <ActionSheet
          v-model:show={form.oPopover}
          cancelText="取消"
          actions={
            [
              { name: '全部测验', id: 'ALL' },
              { name: '未完成', id: 'ING' },
              { name: '不合格', id: 'LOCKED' },
              { name: '合格', id: 'ACTIVATION' }
            ] as any
          }
          onSelect={(val: any) => {
            form.statusText = val.name
            form.params.status = val.id === 'ALL' ? null : val.id
            form.oPopover = false
            onSearch()
          }}
        />
      </div>
    )
  }
})
