import { defineComponent, PropType, reactive, watch } from 'vue';
import styles from './point.module.less';
import { iconArrow } from '../image/icons.json';
import {
  iconImage,
  iconImageActive,
  iconVideo,
  iconVideoActive,
  iconSong,
  iconSongActive
} from '../image/icons.json';
import { Collapse, CollapseItem, Image, Loading } from 'vant';
import PlayLoading from './play-loading';
import ColResult from '@/components/col-result';
import ColSearch from '@/components/col-search';
import iconSearch from '../../courseListSearch/image/icon-search.png'
export default defineComponent({
  name: 'points-list',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    tabActive: {
      type: Array as PropType<any>,
      default: () => []
    },
    itemActive: {
      type: String,
      default: ''
    },
    search: {
      type: String,
      default: ''
    },
    loading: {
      type: Boolean,
      default: false
    },
    open: {
      type: Boolean,
      default: false,
    }
  },
  emits: ['handleSelect', 'handleSearch'],
  setup(props, { emit }) {
    const pointData = reactive({
      search: props.search,
      isSearch: false, // 判断是否搜索过
      active: props.tabActive[0] || '',
      childActive: props.tabActive[1] || '',
      liftChildActive: props.tabActive[2] || '',
    });
    watch(
      () => props.tabActive,
      () => {
        pointData.active = props.tabActive[0] || '';
        pointData.childActive = props.tabActive[1] || '';
        pointData.liftChildActive = props.tabActive[2] || '';
      }
    );

    watch(() => props.open, () => {
      pointData.search = props.search
    })

    // 获取对应图片
    const getImage = (item: any) => {
      if (item.typeCode === 'VIDEO') {
        return props.itemActive == item.id ? iconVideoActive : iconVideo;
      } else if (['IMAGE', 'IMG'].includes(item.typeCode)) {
        return props.itemActive == item.id ? iconImageActive : iconImage;
      } else if (item.typeCode === 'SONG') {
        return props.itemActive == item.id ? iconSongActive : iconSong;
      } else {
        return props.itemActive == item.id ? iconVideoActive : iconVideo;
      }
    };

    function formatName(name: string) {
      if (!name || !pointData.search) return name
      const search: any = pointData.search
      return name.replace(search, `<span style="color: #FF6E8E;">${search}</span>`)
   }
    return () => (
      <div class={styles.container}>
        <div class={styles.pointHeadSearch}>
          <ColSearch type={'tenant'} inputBackground="white" placeholder='请输入素材关键词' modelValue={pointData.search} background='transparent' onSearch={(val: any) => {
            // 
            if(props.loading) return
            pointData.isSearch = true
            pointData.search = val
            emit('handleSearch', {
              search: val
            })
          }} />
        </div>
        <div class={styles.content}>
        {props.loading && <div class={styles.lading}>
            <Loading size={24} color='rgba(255, 255, 255, 0.8)' /> <span class={styles.loadingText}>加载中...</span>
          </div>}
          
          {/* {props.loading && <OLoading />} */}
          {!props.loading && !props.data.length &&  <ColResult projectType='tenant' classImgSize="SMALL" btnStatus={false} tips="暂无搜索结果" />}
          {props.data.length > 0 ? <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', {
                                    isSearch: pointData.isSearch,
                                    itemActive: n.id,
                                    tabActive: item.id,
                                    tabName: item.name
                                  });
                                  pointData.isSearch = false
                                }}>
                                <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', {
                                                    isSearch: pointData.isSearch,
                                                    itemActive: n.id,
                                                    tabActive: child.id,
                                                    tabName: child.name
                                                  });
                                                  pointData.isSearch = false
                                                }}>
                                                <Image
                                                  src={getImage(n)}
                                                  class={styles.itemImage}
                                                />
                                                <span
                                                  style={{ width: '73%' }}
                                                  class="van-ellipsis" v-html={formatName(n.name)}>
                                                  {/* {n.name} */}
                                                </span>
                                                {/* <Icon name={iconZhibo} /> */}
                                                <div class={styles.playLoading}>
                                                  <PlayLoading />
                                                </div>
                                              </div>
                                            );
                                          })}

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