import { Cell, CellGroup, Icon } from 'vant'
import { defineComponent, PropType } from 'vue'
import styles from './index.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: 'SectionDetail',
  props: {
    icon: {
      type: String as PropType<
        'courseIntroduction' | 'courseList' | 'fans' | 'personal' | 'elegant'
      >,
      default: 'courseIntroduction'
    },
    size: {
      type: Number,
      default: 18
    },
    title: {
      type: String,
      default: '课程介绍'
    },
    border: {
      type: Boolean,
      default: false
    },
    titleShow: {
      // 是否显示标题
      type: Boolean,
      default: true
    },
    contentClass: {
      type: String
    },
    contentStyle: {
      type: Object
    }
  },
  computed: {
    iconSrc() {
      let iconMap = getAssetsHomeFile('icon_course_introduction.png')
      switch (this.icon) {
        case 'courseList':
          iconMap = getAssetsHomeFile('icon_course_list.png')
          break
        case 'fans':
          iconMap = getAssetsHomeFile('icon_fans.png')
          break
        case 'personal':
          iconMap = getAssetsHomeFile('icon_personal.png')
          break
        case 'elegant':
          iconMap = getAssetsHomeFile('icon_elegant.png')
          break
        default:
          iconMap = getAssetsHomeFile('icon_course_introduction.png')
          break
      }
      return iconMap
    }
  },
  render() {
    return (
      <div class={styles['section-detail']}>
        <CellGroup border={this.border}>
          {this.titleShow ? (
            <Cell
              center
              border={this.border}
              v-slots={{
                icon: () => <Icon name={this.iconSrc} size={this.size} />,
                title: () => <div class={styles.name}>{this.title}</div>
              }}
            ></Cell>
          ) : null}
          <Cell center class={this.contentClass} style={this.contentStyle}>
            {this.$slots.default && this.$slots.default()}
          </Cell>
        </CellGroup>
      </div>
    )
  }
})
