import { defineComponent, PropType } from 'vue'
import styles from './index.module.less'
import iconSuccess from '@/common/images/icon_success.png'
export const getAssetsHomeFile = (fileName: string) => {
  const path = `./images/${fileName}`
  const modules = import.meta.globEager('./images/*')
  return modules[path].default
}

export default defineComponent({
  name: 'col-steps',
  props: {
    type: {
      type: String,
      default: 'small' as 'small' | 'medium' | 'large'
    },
    active: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      stepLength: 0,
      list: {
        small: [
          {
            title: '课程信息',
            iconActive: getAssetsHomeFile('n1.png')
          },
          {
            title: '教学计划',
            icon: getAssetsHomeFile('n2.png'),
            iconActive: getAssetsHomeFile('n2.png')
          },
          {
            title: '课程安排',
            icon: getAssetsHomeFile('n3.png'),
            iconActive: getAssetsHomeFile('n3.png')
          },
          {
            title: '开课条件',
            icon: getAssetsHomeFile('n4.png'),
            iconActive: getAssetsHomeFile('n4.png')
          }
        ],
        medium: [
          {
            title: '实名认证',
            iconActive: getAssetsHomeFile('n1.png')
          },
          {
            title: '基本信息',
            icon: getAssetsHomeFile('n2.png'),
            iconActive: getAssetsHomeFile('n2.png')
          },
          {
            title: '学历信息',
            icon: getAssetsHomeFile('n3.png'),
            iconActive: getAssetsHomeFile('n3.png')
          }
        ],
        large: [
          {
            title: '课程信息',
            iconActive: getAssetsHomeFile('n1.png')
          },
          {
            title: '课程内容',
            icon: getAssetsHomeFile('n2.png'),
            iconActive: getAssetsHomeFile('n2.png')
          }
        ]
      }
    }
  },
  mounted() {
    this.stepLength = this.list[this.type].length
  },
  render() {
    // console.log(this.active)
    return (
      <div class={[styles.steps, 'flex items-center justify-between bg-white']}>
        {this.list[this.type].map((item: any, index: number) => (
          <div
            class={[
              styles.step,
              styles[this.type],
              this.stepLength - 1 > index && styles.flex,
              this.active >= index && styles.active
            ]}
          >
            <div
              class={[
                'flex items-end pb-5',
                !(index === 0 || this.active >= index) && 'opacity-80'
                // (index === 0 || this.active >= index) && styles.flex
              ]}
            >
              {index === 0 || this.active >= index ? (
                <img src={item.iconActive} class="w-[18px] h-[22px]" />
              ) : (
                <img src={item.icon} class="w-[18px] h-[22px]" />
              )}
              <span class={['pl-2 text-lg font-semibold leading-none']}>
                {item.title}
              </span>
            </div>

            <div class={['relative', styles.imgRound]}>
              <div class={styles.imgNum}>
                {index === 0 || this.active >= index ? (
                  <img src={iconSuccess} class="bg-white " />
                ) : (
                  <div class="w-6 h-6 box-border border-2 border-['#ADE2D1'] rounded-full"></div>
                )}
              </div>
              {this.stepLength - 1 > index && (
                <div class="pl-[30px] pr-[5px] box-border absolute top-2.5 w-full">
                  <div
                    class={[styles.line, this.active > index && styles.active]}
                  ></div>
                </div>
              )}
            </div>
          </div>
        ))}
      </div>

      //   <div class="w-[30px] h-[30px] rounded-full overflow-hidden bg-slate-600 mr-3">
      //     {index === 0 || this.active >= index ? (
      //       <img src={item.iconActive} />
      //     ) : (
      //       <img src={item.icon} />
      //     )}
      //   </div>
      //   {item.title}
    )
  }
})
