import { defineComponent } from 'vue'
import { Icon } from 'vant'
import { teacherState } from './teacherState'
import styles from './steps.module.less'
import baseDefault from './images/base_default.png'
import baseActive from './images/base_active.png'
import baseFinish from './images/base_finish.png'
import nameDefault from './images/name_default.png'
import nameActive from './images/name_active.png'
import nameFinish from './images/name_finish.png'
import educationDefault from './images/education_default.png'
import educationActive from './images/education_active.png'
import educationFinish from './images/education_finish.png'

import horn from './images/icon_horn.png'

export default defineComponent({
  name: 'steps',
  computed: {
    stepOne() {
      if (teacherState.active === 1) {
        return baseActive
      } else if (teacherState.active > 1) {
        return baseFinish
      } else {
        return baseDefault
      }
    },
    stepTwo() {
      if (teacherState.active === 2) {
        return nameActive
      } else if (teacherState.active > 2) {
        return nameFinish
      } else {
        return nameDefault
      }
    },
    stepThree() {
      if (teacherState.active === 3) {
        return educationActive
      } else if (teacherState.active > 3) {
        return educationFinish
      } else {
        return educationDefault
      }
    }
  },
  render() {
    return (
      <div
        class={[
          styles.steps,
          teacherState.active == 3 ? styles.paddingBottom12 : null
        ]}
      >
        <div class={styles.stepContent}>
          <div class={[styles.stepItem]}>
            <Icon name={this.stepOne} size="38" />
            <p class={this.stepOne != baseDefault ? styles.active : null}>
              实名认证
            </p>
          </div>
          <div
            class={[
              styles.stepItem,
              styles.line,
              this.stepTwo != nameDefault ? styles.lineActive : null
            ]}
          ></div>
          <div class={[styles.stepItem]}>
            <Icon name={this.stepTwo} size="38" />
            <p class={this.stepTwo != nameDefault ? styles.active : null}>
              基本信息
            </p>
          </div>
          <div
            class={[
              styles.stepItem,
              styles.line,
              this.stepThree != educationDefault ? styles.lineActive : null
            ]}
          ></div>
          <div class={[styles.stepItem]}>
            <Icon name={this.stepThree} size="38" />
            <p
              class={this.stepThree != educationDefault ? styles.active : null}
            >
              学历信息
            </p>
          </div>
        </div>
        {teacherState.active == 3 ? (
          <div class={styles.stepTips}>
            <Icon name={horn} size="20" style={{ marginRight: '6px' }} />
            完整填写学历信息有助于您更快的通过认证审核
          </div>
        ) : null}
      </div>
    )
  }
})
