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 { Button, Dialog, Icon, Tab, Tabs } from 'vant'
import { computed, defineComponent, onMounted, reactive, ref } from 'vue'
import questIcon from '@/school/images/quest-icon.png'
import styles from './index.module.less'
import { useRoute, useRouter } from 'vue-router'
import UnitListItem from './models/unit-list-item'
import UnitStudentList from './models/unit-student-list'
import { state } from '@/state'
import request from '@/helpers/request'
export default defineComponent({
  name: 'unitDetail',
  setup() {
    const router = useRouter()
    const route = useRoute()
    const form = reactive({
      studentList: {} as any
    })
    const refreshing = ref(false)
    const loading = ref(false)
    const platformApi = state.platformApi
    const activeName = ref(1)
    const info = ref({} as any)
    const showTip = ref(false)
    const getDetail = async () => {
      try {
        const res = await request.post(`${platformApi}/classGroupUnitExamination/detail`, {
          data: { classGroupUnitExaminationId: route.query.id },
          requestType: 'form'
        })
        info.value = res.data
        console.log('🚀 ~ file: unitDetail.tsx:45 ~ getDetail ~ info.value', info.value)
      } catch (e) {
        console.log(e)
      }
    }

    const getStudentList = async () => {
      try {
        const { data } = await request.post(`${platformApi}/studentUnitExamination/studentDetail`, {
          data: {
            classGroupUnitExaminationId: route.query.id
          },
          requestType: 'form'
        })
        console.log(data)
        form.studentList = data || {}
      } catch {
        //
      }
    }

    // 判断是否可以查看测试报名，如果没有学生则不能查看
    const activeNameStatus = computed(() =>
      form.studentList[activeName.value] && form.studentList[activeName.value].length > 0
        ? false
        : true
    )

    onMounted(() => {
      getDetail()

      getStudentList()
    })

    return () => (
      <div class={styles.unitDetail}>
        <UnitListItem item={info.value}></UnitListItem>
        <div class={styles.tabsWrap}>
          <Icon
            class={styles.tabsWrapIcon}
            name={questIcon}
            size={18}
            color="#333"
            onClick={() => {
              showTip.value = true
            }}
          />
          <Tabs
            v-model:active={activeName.value}
            class={styles.rankTabs}
            background={'#F8F8F8'}
            title-active-color={'#333333'}
            title-inactive-color={'#777'}
            color={'#FF8057'}
            shrink
          >
            <Tab name={1} title="I类学生">
              <UnitStudentList type={1}></UnitStudentList>
            </Tab>
            <Tab name={2} title="II类学生">
              <UnitStudentList type={2}></UnitStudentList>
            </Tab>
            <Tab name={3} title="III类学生">
              <UnitStudentList type={3}></UnitStudentList>
            </Tab>
          </Tabs>
        </div>

        <OSticky position="bottom">
          <div class={['btnGroup']}>
            <Button
              block
              round
              type="primary"
              disabled={activeNameStatus.value}
              onClick={() => {
                router.push({
                  path: '/unit-detail',
                  query: {
                    id: route.query.id,
                    level: activeName.value
                  }
                })
              }}
            >
              测试报告
            </Button>
          </div>
        </OSticky>

        <Dialog
          class="exercisDetailDialog"
          v-model:show={showTip.value}
          title="提示框"
          confirmButtonText="我知道了"
          v-slots={{
            title: () => (
              <div class={styles.DialogTitle}>
                <span></span>
                <p>学生分类</p>
              </div>
            ),
            default: () => (
              <div class={styles.DialogConent}>
                <p>
                  根据学生入团的批次对不同训练阶段的学生进行分类，不同训练阶段的学生可布置不同标准的课后训练和单元测验内容。
                </p>
                <br />
                <p>
                  <span>I类学生：</span>最新进入本乐团的学员
                </p>
                <p>
                  <span>II类学生：</span>较早进入本乐团的学员
                </p>
                <p>
                  <span>III类学生：</span>最早进入本乐团的学员
                </p>
              </div>
            )
          }}
        ></Dialog>
      </div>
    )
  }
})