import { defineComponent } from 'vue'
import styles from './point.module.less'
import iconMulv from '../image/icon-mulv.svg'
export default defineComponent({
  name: 'points',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    active: {
      type: String,
      default: ''
    }
  },
  emits: ['handleSelect'],
  setup(props, {emit}) {
    return () => (
      <div class={styles.container}>
        <div>
          <div class={styles.pointHead}>
            <img src={iconMulv} />
            课程目录
          </div>
          <div class={styles.items}>
            {props.data.map((item: any) => {
              return (
                <>
                  {Array.isArray(item?.materialList) &&
                    item.materialList.map((n: any, index: number) => {
                      return (
                        <div
                          class={[
                            styles.item,
                            `${item.id}-${n.id}` === props.active ? styles.itemActive : ''
                          ]}
                          onClick={() => emit('handleSelect', {id: item.id, index, active: `${item.id}-${n.id}`})}
                        >
                          {item.name}-{n.name}
                        </div>
                      )
                    })}
                </>
              )
            })}
          </div>
        </div>
      </div>
    )
  }
})
