import { defineComponent, reactive, watch } from 'vue'
import styles from './point.module.less'
import iconMulv from '../image/icon-mulv.svg'
import iconArrow from '../image/icon-arrow.svg'
import iconZhibo from '../image/icon-zhibo.svg'
import { Collapse, CollapseItem, Icon } from 'vant'
export default defineComponent({
  name: 'points',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    tabActive: {
      type: String,
      default: ''
    },
    itemActive: {
      type: String,
      default: ''
    }
  },
  emits: ['handleSelect'],
  setup(props, { emit }) {
    const pointData = reactive({
      active: props.tabActive || ''
    })
    watch(
      () => props.tabActive,
      () => {
        pointData.active = props.tabActive
      }
    )
    return () => (
      <div class={styles.container}>
        <div class={styles.pointHead}>
          <img src={iconMulv} />
          课程目录
        </div>
        <div class={styles.content}>
          <Collapse
            class={styles.collapse}
            modelValue={pointData.active}
            onUpdate:modelValue={(val: any) => {
              pointData.active = val
            }}
            accordion
          >
            {props.data.map((item: any) => {
              return (
                <CollapseItem center border={false} isLink={false} title={item.name} name={item.id}>
                  {{
                    default: () => (
                      <>
                        {Array.isArray(item?.materialList) &&
                          item.materialList.map((n: any) => {
                            return (
                              <div
                                class={[
                                  styles.item,
                                  props.itemActive == n.id ? styles.itemActive : ''
                                ]}
                                onClick={() => {
                                  emit('handleSelect', {
                                    itemActive: n.id,
                                    tabActive: item.id,
                                    tabName: item.name
                                  })
                                }}
                              >
                                {n.name}
                                <Icon name={iconZhibo} />
                              </div>
                            )
                          })}
                      </>
                    ),
                    icon: () => <img class={styles.arrow} src={iconArrow} />
                  }}
                </CollapseItem>
              )
            })}
          </Collapse>
        </div>
      </div>
    )
  }
})
