import { Grid, GridItem, Icon } from 'vant'
import { defineComponent } from 'vue'
import { createState } from './createState'
import styles from './steps.module.less'

export const getAssetsHomeFile = (fileName: string) => {
  const path = `../images/${fileName}`
  const modules = import.meta.globEager('../images/*')
  return modules[path].default
}

export default defineComponent({
  name: 'steps',
  render() {
    return (
      <Grid class={styles.steps} border={false} columnNum="4">
        <GridItem
          v-slots={{
            default: () => (
              <>
                <Icon
                  name={getAssetsHomeFile('icon_course_active.png')}
                  size={24}
                />
                <span
                  class={[
                    styles.gridName,
                    createState.active >= 1 ? styles.active : null
                  ]}
                >
                  课程信息
                </span>
              </>
            )
          }}
        />
        <GridItem
          v-slots={{
            default: () => (
              <>
                <Icon
                  name={
                    createState.active >= 2
                      ? getAssetsHomeFile('icon_plan_active.png')
                      : getAssetsHomeFile('icon_plan_default.png')
                  }
                  size={24}
                />
                <span
                  class={[
                    styles.gridName,
                    createState.active >= 2 ? styles.active : null
                  ]}
                >
                  教学计划
                </span>
              </>
            )
          }}
        />
        <GridItem
          v-slots={{
            default: () => (
              <>
                <Icon
                  name={
                    createState.active >= 3
                      ? getAssetsHomeFile('icon_arrange_active.png')
                      : getAssetsHomeFile('icon_arrange_default.png')
                  }
                  size={24}
                />
                <span
                  class={[
                    styles.gridName,
                    createState.active >= 3 ? styles.active : null
                  ]}
                >
                  课程安排
                </span>
              </>
            )
          }}
        />
        <GridItem
          v-slots={{
            default: () => (
              <>
                <Icon
                  name={
                    createState.active >= 4
                      ? getAssetsHomeFile('icon_start_active.png')
                      : getAssetsHomeFile('icon_start_default.png')
                  }
                  size={24}
                />
                <span
                  class={[
                    styles.gridName,
                    createState.active >= 4 ? styles.active : null
                  ]}
                >
                  开课条件
                </span>
              </>
            )
          }}
        />
      </Grid>
    )
  }
})