import { Button, Grid, GridItem, Icon, Tag } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'
import iconBell from '@/views/unit-test/images/icon-bell.png'
import iconTimer from '@/views/unit-test/images/icon-timer.png'

export default defineComponent({
  name: 'notice-start',
  emits: ['close', 'confirm'],
  setup(props, { emit }) {
    return () => (
      <div class={styles.noticeStart}>
        <div class={styles.dialogTitle}>
          <i></i>
          测验须知
        </div>

        <div class={styles.noticeContainer}>
          <div class={styles.unitContainer}>
            <div class={styles.unitTitle}>
              <span class={[styles.name, 'van-ellipsis']}>长笛level1上册测验一</span>
              <Tag type="primary">长笛单技课</Tag>
            </div>
            <Grid border={false} columnNum={3} class={styles.gridScore}>
              <GridItem>
                <p class={styles.title}>20</p>
                <p class={styles.name}>总分</p>
              </GridItem>
              <GridItem>
                <p
                  class={[styles.title]}
                  style={{
                    color: '#F67146'
                  }}
                >
                  16
                </p>
                <p class={styles.name}>合格分</p>
              </GridItem>
              <GridItem>
                <p class={styles.title}>4</p>
                <p class={styles.name}>题目数量</p>
              </GridItem>
            </Grid>

            <div class={[styles.unitTimer, 'van-hairline--top']}>
              <Icon name={iconTimer} />
              <span>测验时长：40:00</span>
            </div>
          </div>

          <div class={styles.reminder}>
            <div class={styles.rTitle}>
              <Icon name={iconBell} class={styles.iconBell} />
              <span>温馨提示：</span>
            </div>

            <p class={styles.rContent}>
              1、单元测验仅可进行一次，请通过练习模式充分练习后再进行测试，以保障测验分数准确；
              <br />
              2、点击开始测验后开始测验计时，到达测验时长后自动完成；
              <br />
              3、开始测验后若中途退出，时长依然计算； <br /> 4、准备好后开始测验吧！
            </p>
          </div>
        </div>

        <div class={['van-hairline--top van-dialog__footer', styles.btns]}>
          <Button onClick={() => emit('close')} class={['van-dialog__cancel']}>
            再等等
          </Button>
          <Button
            onClick={() => emit('confirm')}
            class={['van-dialog__confirm van-hairline--left']}
          >
            开始测验
          </Button>
        </div>
      </div>
    )
  }
})