import request from '@/helpers/request'
import { state } from '@/state'
import {
  Button,
  Dialog,
  Empty,
  Field,
  Grid,
  GridItem,
  Icon,
  showConfirmDialog,
  showToast,
  Tab,
  Tabs
} from 'vant'
import OSticky from '@/components/o-sticky'
import { defineComponent, onMounted, reactive, onUnmounted, ref } from 'vue'
import iconEdit from '@/views/unit-test/images/icon-edit.png'
import styles from './uni-last.module.less'
import { useRoute, useRouter } from 'vue-router'
import NewspaperItem from './modals/newspaper-item'
import questIcon from '@/school/images/quest-icon.png'
import { browser } from '@/helpers/utils'
export default defineComponent({
  name: 'uni-test',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const browserInfo = browser()
    const activeName = ref('one')
    // const catchList = store
    const forms = ref({} as any)
    const data = reactive({
      loading: true,
      list: [] as any,
      uniDetail: {} as any
    })
    const showTip = ref(false)
    const getList = async () => {
      data.loading = true
      try {
        const res: any = await request.post(
          state.platformApi + '/courseSchedule/queryUnitExamination',
          {
            requestType: 'form',
            data: {
              lessonCoursewareId: route.query.lessonCoursewareId,
              classGroupId: forms.value.classGroupId
            }
          }
        )
        //      classGroupId: forms.value.classGroupId
        data.list = res.data || []
      } catch (error) {}

      data.loading = false
    }

    const getClassDetail = async () => {
      try {
        const res = await request.get(
          state.platformApi + `/classGroup/detail/${forms.value.classGroupId}`
        )
        forms.value.preStudentNum = res.data.preStudentNum
      } catch (e) {
        console.log(e)
      }
    }
    onMounted(() => {
      forms.value = { ...JSON.parse(sessionStorage.getItem('unit-create') || '{}') } as any
      if (!forms.value.classGroupId) {
        showToast('请选择班级')
        return
      }
      getClassDetail()
      getList()
      getStudentUni()
    })
    const getStudentUni = async () => {
      try {
        const res = await request.post(
          state.platformApi + `/lessonCoursewareExaminationMapper/detail`,
          {
            requestType: 'form',
            data: {
              lessonCoursewareExaminationMapperId: forms.value.testId
            }
          }
        )
        res.data.details.forEach((item: any) => {
          data.uniDetail[item.level] = item
        })
      } catch (e) {
        console.log(e)
      }
    }
    const onSubmit = async () => {
      if (!forms.value.expiryDate) {
        showToast('请输入截止时间')
        return
      }
      try {
        const res = await request.post(
          state.platformApi + `/classGroupUnitExamination/publishUnitExamination`,
          {
            data: {
              classGroupId: forms.value.classGroupId,
              lessonCoursewareExaminationMapperId: forms.value.testId,
              unitExaminationName: `${forms.value?.coursewareName}-${forms.value?.testName}`,
              expiryDate: forms.value.expiryDate
            }
          }
        )
        showToast('创建成功')
        sessionStorage.removeItem('unit-create')
        router.replace('/unit-list')
      } catch (e) {
        console.log(e)
      }
    }
    return () => (
      <>
        <div class={styles.lastWrap}>
          <h4 class={styles.uniTitle}>
            <Icon name={iconEdit} class={styles.editIcon}></Icon>
            {forms.value?.coursewareName}-{forms.value?.testName}
          </h4>
          <div class={styles.infoWrap}>
            <p>乐团：{forms.value?.orchestraName}</p>
            <p>班级：{forms.value?.classGroupName}</p>
            <p>学生人数：{forms.value?.preStudentNum}人</p>
            <Field v-model={forms.value.expiryDate} type="number" input-align="right">
              {{
                extra: () => (
                  <div class={styles.loctionIconWrap}>
                    <span style={{ color: '#777' }}> 天后截止</span>
                    {/* <Image width={19} height={18} src={locIcon}></Image> */}
                  </div>
                ),
                label: () => <span class={styles.addP}>截止时间</span>
              }}
            </Field>
          </div>
          <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="one" title="I类学生">
                <NewspaperItem item={data.uniDetail[1]}></NewspaperItem>
              </Tab>
              <Tab name="two" title="II类学生">
                <NewspaperItem item={data.uniDetail[2]}></NewspaperItem>
              </Tab>
              <Tab name="three" title="III类学生">
                <NewspaperItem item={data.uniDetail[3]}></NewspaperItem>
              </Tab>
            </Tabs>
          </div>
          <OSticky position="bottom">
            <div class={'btnGroup'}>
              <Button block round type="primary" onClick={onSubmit}>
                创建完成
              </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>&nbsp;&nbsp;&nbsp;I类学生：最新进入本乐团的学员</p>
                  <p>&nbsp;II 类学生：较早进入本乐团的学员</p>
                  <p>III 类学生：最早进入本乐团的学员</p>
                </div>
              )
            }}
          ></Dialog>
        </div>
      </>
    )
  }
})