import { defineComponent, onMounted, Teleport, Transition } from 'vue'
import styles from './model-wraper.module.less'
import model1 from './icons/model-1.png'
import model2 from './icons/model-2.png'
import model3 from './icons/model-3.png'

export default defineComponent({
  name: 'modelWraper',
  props: {
    onChangeModelType: {
      type: Function,
      default: () => {},
    },
  },
  setup(props, ctx) {
    return () => (
      <div class={styles.modelWraper} onClick={(e: Event) => e.stopPropagation()}>
        <div class={styles.wrap}>
          <img data-step="step0" onClick={() => props.onChangeModelType!('practice')} src={model1} />
          <img data-step="step1" onClick={() => props.onChangeModelType!('follow')} src={model3} />
          <img data-step="step2" onClick={() => props.onChangeModelType!('evaluation')} src={model2} />
        </div>
      </div>
    )
  },
})
