import { defineComponent, reactive, watch } from 'vue'
import styles from './point.module.less'
import { iconMulv, iconArrow } from '../image/icons.json'
import iconZhibo from '../image/icon-load.gif'
import {
  iconImage,
  iconImageActive,
  iconVideo,
  iconVideoActive,
  iconSong,
  iconSongActive
} from '../image/icons.json'
import { Collapse, CollapseItem, Icon, Image } from 'vant'
import PlayLoading from './play-loading'
export default defineComponent({
  name: 'points-list',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    tabActive: {
      type: [String, Number, Array],
      default: ''
    },
    itemActive: {
      type: String,
      default: ''
    }
  },
  emits: ['handleSelect'],
  setup(props, { emit }) {
    const pointData = reactive({
      active: props.tabActive[0] || '',
      childActive: props.tabActive[1] || ''
    })
    watch(
      () => props.tabActive,
      () => {
        pointData.active = props.tabActive[0] || ''
        pointData.childActive = props.tabActive[1] || ''
      }
    )

    // 获取对应图片
    const getImage = (item: any) => {
      if (item.type === 'VIDEO') {
        return props.itemActive == item.id ? iconVideoActive : iconVideo
      } else if (['IMAGE', 'IMG'].includes(item.type)) {
        return props.itemActive == item.id ? iconImageActive : iconImage
      } else if (item.type === 'SONG') {
        return props.itemActive == item.id ? iconSongActive : iconSong
      } else {
        return props.itemActive == item.id ? iconVideoActive : iconVideo
      }
    }
    return () => (
      <div class={styles.container}>
        <div class={styles.pointHead}>
          <img src={iconMulv} />
          <span>知识点目录</span>
        </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, index: number) => {
              return (
                <CollapseItem
                  center
                  border={false}
                  class={index > 0 ? styles.borderTop : ''}
                  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
                                  })
                                }}
                              >
                                <Image src={getImage(n)} class={styles.itemImage} />
                                <span style={{ width: '80%' }} class="van-ellipsis">
                                  {n.name}
                                </span>
                                {/* <Icon name={iconZhibo} /> */}
                                <div class={styles.playLoading}>
                                  <PlayLoading />
                                </div>
                              </div>
                            )
                          })}

                        {Array.isArray(item?.children) && (
                          <Collapse
                            class={[
                              styles.collapse,
                              pointData.active === item.id ? styles.childActive : ''
                            ]}
                            modelValue={pointData.childActive}
                            onUpdate:modelValue={(val: any) => {
                              pointData.childActive = val
                            }}
                            accordion
                          >
                            {item?.children.map((child: any) => {
                              return (
                                <CollapseItem
                                  center
                                  border={false}
                                  isLink={false}
                                  title={child.name}
                                  name={child.id}
                                  class={styles.childCollapseItem}
                                >
                                  {{
                                    default: () => (
                                      <>
                                        {Array.isArray(child?.materialList) &&
                                          child.materialList.map((n: any) => {
                                            return (
                                              <div
                                                class={[
                                                  styles.item,
                                                  props.itemActive == n.id ? styles.itemActive : ''
                                                ]}
                                                onClick={() => {
                                                  emit('handleSelect', {
                                                    itemActive: n.id,
                                                    tabActive: child.id,
                                                    tabName: child.name
                                                  })
                                                }}
                                              >
                                                <Image src={getImage(n)} class={styles.itemImage} />
                                                <span style={{ width: '73%' }} class="van-ellipsis">
                                                  {n.name}
                                                </span>
                                                {/* <Icon name={iconZhibo} /> */}
                                                <div class={styles.playLoading}>
                                                  <PlayLoading />
                                                </div>
                                              </div>
                                            )
                                          })}
                                      </>
                                    ),
                                    icon: () => <img class={styles.arrow} src={iconArrow} />
                                  }}
                                </CollapseItem>
                              )
                            })}
                          </Collapse>
                        )}
                      </>
                    ),
                    icon: () => <img class={styles.arrow} src={iconArrow} />
                  }}
                </CollapseItem>
              )
            })}
          </Collapse>
        </div>
      </div>
    )
  }
})