import {
  ActionSheet,
  Button,
  Cell,
  CountDown,
  Icon,
  Image,
  Popup,
  Swipe,
  SwipeItem,
  Tag
} from 'vant'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
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 AnswerList from '../model/answer-list'
import ODialog from '@/components/o-dialog'
import DragQuestion from '../model/drag-question'
import KeepLookQuestion from '../model/keep-look-question'
import PlayQuestion from '../model/play-question'
import ErrorMode from '../model/error-mode'
import ResultFinish from '../model/result-finish'

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

    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}
          onChange={(index: number) => {
            state.currentIndex = index
          }}
        >
          <SwipeItem>
            <ChoiceQuestion v-model:value={state.answerList[0]} type="checkbox" />
          </SwipeItem>
          <SwipeItem>
            <ChoiceQuestion v-model:value={state.answerList[1]} type="radio" />
          </SwipeItem>
          <SwipeItem>
            <DragQuestion />
          </SwipeItem>
          <SwipeItem>
            <KeepLookQuestion />
          </SwipeItem>
          <SwipeItem>
            <PlayQuestion />
          </SwipeItem>
        </Swipe>

        <OSticky position="bottom" background="white">
          <div class={['btnGroup btnMore']}>
            {state.currentIndex > 0 && (
              <Button
                round
                block
                type="primary"
                plain
                onClick={() => {
                  swipeRef.value?.prev()
                }}
              >
                上一题
              </Button>
            )}
            <Button
              block
              round
              type="primary"
              onClick={() => {
                if (state.questionList.length - 1 === state.currentIndex) {
                  state.visiableSure = true
                } else {
                  // swipeRef.value?.next()
                  state.visiableError = true
                }
              }}
            >
              {state.questionList.length - 1 === state.currentIndex ? '测验完成' : '下一题'}
            </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]}
            statusList={[
              {
                text: '答对',
                color: '#71B0FF'
              },
              {
                text: '答错',
                color: '#FF8486'
              }
            ]}
            onSelect={(item: any) => {
              // 跳转，并且跳过动画
              swipeRef.value?.swipeTo(item, {
                immediate: true
              })
              state.visiableAnswer = false
            }}
          />
        </ActionSheet>

        <Popup
          v-model:show={state.visiableError}
          style={{ width: '90%' }}
          round
          closeOnClickOverlay={false}
        >
          <ErrorMode
            onClose={() => (state.visiableError = false)}
            onConform={() => {
              swipeRef.value?.next()
            }}
          />
        </Popup>

        <Popup
          v-model:show={state.visiableResult}
          closeOnClickOverlay={false}
          style={{ background: 'transparent', width: '96%' }}
        >
          <ResultFinish
            // status="FAIL"
            confirmButtonText="继续练习本考点"
            cancelButtonText="下一个考点"
            onClose={() => (state.visiableResult = false)}
            onConform={() => {
              console.log('Success')
              state.visiableResult = false
            }}
          />
        </Popup>

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