import { defineComponent } from 'vue'
import classnames from 'classnames'
import { NoticeBar, Swipe, SwipeItem } from 'vant'
import { browser } from '/src/helpers/utils'
import state from '../state'
import runtime from '../runtime'
import styles from './index.module.less'

import StudenIcon from '../icons/studen.png'

export default defineComponent({
  name: 'evaluating-tips',
  props: {
    studentIcon: {
      type: String,
      default: StudenIcon
    }
  },
  render() {
    return (
      runtime.evaluatingTips ? (
        <div
          class={classnames(styles.notice, {[styles.android]: browser().android})}
          style={{
            left: (state.notchHeight / 2) + 'px'
          }}
        >
          <img src={this.studentIcon || StudenIcon}/>
          <NoticeBar
            scrollable={false}
            style="background: #fff;color: #01C1B5;"
            mode="closeable"
            onClose={() => {
              runtime.evaluatingTips = false
            }}
          >
            <Swipe style="height: 32px;" show-indicators={false} autoplay={3000} vertical>
              <SwipeItem>请在周围安静的环境下演奏，减少杂音</SwipeItem>
              <SwipeItem>请选择稳定、良好的网络环境，避免信号中断</SwipeItem>
              <SwipeItem>演奏前请调试好乐器，保证最佳演奏状态</SwipeItem>
              <SwipeItem>演奏时请佩戴耳机，评测收音更精准</SwipeItem>
            </Swipe>
          </NoticeBar>
        </div>
      ) : null
    )
  }
})
