import { computed, defineComponent, onMounted, reactive, ref, watch } from 'vue'
import styles from './index.module.less'
import ColHeader from '@/components/col-header'
import { Icon } from 'vant'
import nameActive from '../images/icon_name_active.png'
import education from '../images/icon_education.png'
import educationActive from '../images/icon_education_active.png'
import ClassInfo from './class-info'
import CreateClass from './create-class'

export default defineComponent({
  name: 'ClassArrangement',
  setup() {
    const active = ref(1)
    return () => {
      return (
        <div class={styles.classWrap}>
          <ColHeader />
          <div class={styles.tabs}>
            <div class={[styles.tabItem, styles.tabItemActive]}>
              <Icon name={nameActive} size={38} />
              <span class={styles.title}>课程信息</span>
            </div>
            <div
              class={[
                styles.tabItem,
                styles.tabItemRight,
                active.value > 1 ? styles.tabItemActive : ''
              ]}
            >
              <Icon
                name={active.value > 1 ? educationActive : education}
                size={38}
              />
              <span class={styles.title}>课程安排</span>
            </div>
          </div>
          <div style={{ display: active.value === 1 ? 'block' : 'none' }}>
            <ClassInfo
              onSubmit={val => {
                active.value = 2
              }}
            />
          </div>
          <div style={{ display: active.value === 2 ? 'block' : 'none' }}>
            <CreateClass onBack={() => active.value = 1} active={active.value} />
          </div>
        </div>
      )
    }
  }
})