import {
  ActionSheet,
  Button,
  Cell,
  CountDown,
  Icon,
  Image,
  Popup,
  Swipe,
  SwipeItem,
  Tag
} from 'vant'
import { defineComponent, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import NoticeStart from '../model/notice-start'
import styles from './index.module.less'
import iconQuestionNums from '../images/icon-question-nums.png'
import iconCountDown from '../images/icon-count-down.png'
import iconButtonList from '../images/icon-button-list.png'
import OSticky from '@/components/o-sticky'
import ChoiceQuestion from '../model/choice-question'
import { useCountDown } from '@vant/use'
import AnswerList from '../model/answer-list'
import ODialog from '@/components/o-dialog'

export default defineComponent({
  name: 'unit-detail',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const countDownRef = ref()
    const swipeRef = ref()
    const state = reactive({
      visiableNotice: false,
      visiableAnswer: false,
      currentIndex: 0,
      questionList: [1, 2, 3, 4, 5],
      answerList: {},
      time: 30 * 60 * 1000,
      visiableSure: false
    })

    return () => (
      <div class={styles.unitDetail}>
        <Cell center class={styles.unitSection}>
          {{
            title: () => <div class={styles.unitTitle}>长笛level1上册测验一</div>,
            label: () => (
              <div class={styles.unitCount}>
                <div class={styles.qNums}>
                  <Icon class={styles.icon} name={iconQuestionNums} />
                  题目数量 <span class={styles.num}>1</span>/4
                </div>
                <div class={styles.qNums}>
                  <Icon class={styles.icon} name={iconCountDown} />
                  剩余时长：
                  <CountDown
                    ref={countDownRef}
                    time={state.time}
                    format={'mm:ss'}
                    autoStart={false}
                  />
                </div>
              </div>
            )
          }}
        </Cell>

        <Swipe
          loop={false}
          showIndicators={false}
          ref={swipeRef}
          duration={300}
          touchable={false}
          lazyRender
          initialSwipe={state.currentIndex}
        >
          {state.questionList.map((item: any) => (
            <SwipeItem>
              <ChoiceQuestion v-model:value={state.answerList[item]} type="checkbox" />
            </SwipeItem>
          ))}
        </Swipe>

        <OSticky position="bottom" background="white">
          <div class={['btnGroup btnMore']}>
            {state.currentIndex > 0 && (
              <Button
                round
                block
                type="primary"
                plain
                onClick={() => {
                  state.currentIndex -= 1
                  swipeRef.value?.prev()
                }}
              >
                上一题
              </Button>
            )}
            <Button
              block
              round
              type="primary"
              onClick={() => {
                if (state.questionList.length === state.currentIndex + 1) {
                  state.visiableSure = true
                } else {
                  state.currentIndex += 1
                  swipeRef.value?.next()
                }
                console.log(state.currentIndex)
              }}
            >
              {state.questionList.length === state.currentIndex + 1 ? '测试完成' : '下一题'}
            </Button>
            <Image
              src={iconButtonList}
              class={[styles.wapList, 'van-haptics-feedback']}
              onClick={() => (state.visiableAnswer = true)}
            />
          </div>
        </OSticky>

        {/* 题目集合 */}
        <ActionSheet v-model:show={state.visiableAnswer} title="题目列表" safeAreaInsetBottom>
          <AnswerList
            value={[1, 3, 4]}
            onSelect={(item: any) => {
              // 跳转，并且跳过动画
              swipeRef.value?.swipeTo(item, {
                immediate: true
              })
            }}
          />
        </ActionSheet>

        {/* 测验须知 */}
        <Popup
          v-model:show={state.visiableNotice}
          round
          style={{ width: '90%' }}
          closeOnClickOverlay={false}
        >
          <NoticeStart
            onClose={() => {
              state.visiableNotice = false
              router.back()
            }}
            onConfirm={() => {
              console.log('start')
              countDownRef.value.start()
              state.visiableNotice = false
            }}
          />
        </Popup>

        <ODialog
          v-model:show={state.visiableSure}
          title="测验完成"
          message="确认本次测验的题目都完成了吗？\n提交后不可修改哦"
          messageAlign="left"
          showCancelButton
          cancelButtonText="再等等"
          confirmButtonText="确认完成"
        />
      </div>
    )
  }
})