import OEmpty from '@/components/m-empty';
import MHeader from '@/components/m-header';
import MSticky from '@/components/m-sticky';
import { Button, List } from 'vant';
import { defineComponent, reactive } from 'vue';
import styles from './index.module.less';
import { useRouter } from 'vue-router';
import MFullRefresh from '@/components/m-full-refresh';

export default defineComponent({
  name: 'knowledge-ligrary',
  setup() {
    const router = useRouter();

    const form = reactive({
      oPopover: false,
      searchList: [] as any,
      list: [] as any,
      listState: {
        dataShow: true, // 判断是否有数据
        loading: false,
        finished: false,
        refreshing: false,
        height: 0 // 页面头部高度，为了处理下拉刷新用的
      },
      statusText: '全部测验',
      params: {
        keyword: null,
        status: null,
        page: 1,
        rows: 20
      },
      isClick: false,
      visiableNotice: false,
      unitExam: {} as any, // 测验详情
      selectUnitExam: {} as any,
      dialogMessage: '',
      dialogStatus: false
    });

    const getList = () => {
      // console.log('1');
    };

    return () => (
      <div class={styles.knowledgeLibrary}>
        <MSticky position="top">
          <MHeader border={false} background="transparent">
            {{
              right: () => (
                <Button round size="small">
                  错题本
                </Button>
              )
            }}
          </MHeader>
        </MSticky>

        <MFullRefresh
          v-model:modelValue={form.listState.refreshing}
          style={{
            minHeight: `calc(100vh - ${form.listState.height}px)`
          }}>
          <List
            finished={form.listState.finished}
            finishedText=" "
            class={[styles.liveList]}
            style={{
              paddingTop: '12px'
            }}
            onLoad={getList}
            immediateCheck={false}>
            {form.listState.dataShow ? (
              <>121212</>
            ) : (
              <OEmpty description="暂无阶段自测" />
            )}
          </List>
        </MFullRefresh>
      </div>
    );
  }
});
