import { defineComponent, reactive } from 'vue';
import styles from './index.module.less';
import { NTabs, NTabPane, NScrollbar } from 'naive-ui';
import ResourceSearchGroup from '../../model/resource-search-group';
import CardType from '@/components/card-type';
// import { useElementSize } from '@vueuse/core';
// import { useRect } from '@vant/use';

export default defineComponent({
  name: 'resource-main',
  props: {
    selectionHeight: {
      type: String,
      default: '100%'
    }
  },
  setup() {
    const forms = reactive({
      list: [
        {
          id: '5',
          name: '其多列',
          title: '其多列',
          type: 'VIDEO',
          content:
            'https://gyt.ks3-cn-beijing.ksyuncs.com/courseware/1687844560120.mp4',
          url: 'https://gyt.ks3-cn-beijing.ksyuncs.com/courseware/1687844640957.png'
        },
        {
          id: '2',
          name: '其多列',
          title: '其多列',
          type: 'IMG',
          content: 'https://daya.ks3-cn-beijing.ksyun.com/202306/TiLlteU.png',
          url: 'https://daya.ks3-cn-beijing.ksyun.com/202306/TiLlteU.png'
        },
        {
          id: '3',
          name: '其多列',
          title: '其多列',
          type: 'IMG',
          content: 'https://daya.ks3-cn-beijing.ksyun.com/202306/TiLlxJ0.png',
          url: 'https://daya.ks3-cn-beijing.ksyun.com/202306/TiLlxJ0.png'
        },
        {
          id: '4',
          name: '彩虹岛',
          title: '彩虹岛',
          type: 'SONG',
          content: '22078',
          url: 'https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet-fixed/1675770786664-1.png'
        }
      ],
      height: '100%' as any
    });

    return () => (
      <div class={styles['resource-main']}>
        <NTabs
          animated
          defaultValue="shareResources"
          paneClass={styles.paneTitle}
          paneWrapperClass={styles.paneWrapperContainer}>
          {{
            suffix: () => (
              <div class={styles.iconScreen}>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                  <g fill="none">
                    <path
                      d="M5 6a1 1 0 0 1 1-1h2a1 1 0 0 0 0-2H6a3 3 0 0 0-3 3v2a1 1 0 0 0 2 0V6zm0 12a1 1 0 0 0 1 1h2a1 1 0 1 1 0 2H6a3 3 0 0 1-3-3v-2a1 1 0 1 1 2 0v2zM18 5a1 1 0 0 1 1 1v2a1 1 0 1 0 2 0V6a3 3 0 0 0-3-3h-2a1 1 0 1 0 0 2h2zm1 13a1 1 0 0 1-1 1h-2a1 1 0 1 0 0 2h2a3 3 0 0 0 3-3v-2a1 1 0 1 0-2 0v2z"
                      fill="#198CFE"></path>
                  </g>
                </svg>
              </div>
            ),
            default: () => (
              <>
                <NTabPane name="shareResources" tab="共享资源">
                  <ResourceSearchGroup />
                  <NScrollbar class={styles.listContainer}>
                    <div class={styles.list}>
                      {forms.list.map((item: any) => (
                        <CardType isShowAdd item={item} />
                      ))}
                    </div>
                  </NScrollbar>
                </NTabPane>
                <NTabPane name="myResources" tab="我的资源">
                  <ResourceSearchGroup />
                  <NScrollbar class={styles.listContainer}>
                    <div class={styles.list}>
                      {forms.list.map((item: any) => (
                        <CardType isShowAdd item={item} />
                      ))}
                    </div>
                  </NScrollbar>
                </NTabPane>
                <NTabPane name="myCollect" tab="我的收藏">
                  <ResourceSearchGroup />
                  <NScrollbar class={styles.listContainer}>
                    <div class={styles.list}>
                      {forms.list.map((item: any) => (
                        <CardType isShowAdd item={item} />
                      ))}
                    </div>
                  </NScrollbar>
                </NTabPane>
              </>
            )
          }}
        </NTabs>
      </div>
    );
  }
});
