import {
  TransitionGroup,
  computed,
  defineComponent,
  onMounted,
  reactive,
  ref
} from 'vue';
import styles from './index.module.less';
import TheSearch from '@/components/TheSearch';
import { NButton, NImage, NSpace } from 'naive-ui';
import { useRouter } from 'vue-router';
import mock from './mock.json';

export default defineComponent({
  name: 'XiaokuAi',
  setup() {
    const router = useRouter();
    const data = reactive({
      tags: [
        { name: '全部', id: '0' },
        { name: '人教版', id: '1' },
        { name: '人音版', id: '2' }
      ],
      tagIndex: '0',
      list: mock.list
    });
    const _list = computed(() => {
      if (data.tagIndex === '0') return data.list;
      return data.list.filter(item => data.tagIndex === item.category);
    });
    return () => (
      <div class={styles.container}>
        <div class={styles.tools}>
          <div class={styles.tagWrap}>
            <div class={styles.tags}>
              <NSpace size={[24, 12]}>
                <NButton quaternary disabled>
                  类型
                </NButton>
                {data.tags.map((item, index) => (
                  <NButton
                    round
                    secondary={data.tagIndex !== item.id}
                    type={data.tagIndex === item.id ? 'primary' : 'default'}
                    class={[
                      styles.tag,
                      data.tagIndex === item.id ? styles.active : ''
                    ]}
                    onClick={() => (data.tagIndex = item.id)}>
                    {item.name}
                  </NButton>
                ))}
              </NSpace>
            </div>
            <div class={styles.tags}>
              <NSpace size={[24, 12]}>
                <NButton quaternary disabled>
                  学段
                </NButton>
                <NButton round secondary type={'default'}>
                  小学
                </NButton>
                <NButton round secondary type={'default'}>
                  初中
                </NButton>
                <NButton round secondary type={'default'}>
                  高中
                </NButton>
              </NSpace>
            </div>
            <div class={styles.tags}>
              <NSpace size={[24, 12]}>
                <NButton quaternary disabled>
                  年级
                </NButton>
                {['一', '二', '三', '四', '五', '六'].map((item, index) => (
                  <NButton secondary round>
                    {item}年级
                  </NButton>
                ))}
              </NSpace>
            </div>
          </div>
          <TheSearch round />
        </div>
        <div class={styles.content}>
          <NSpace size={[50, 40]}>
            {_list.value.map((item, index) => {
              return (
                <div
                  class={styles.item}
                  key={`item-${index}`}
                  onClick={() => router.push({ path: '/xiaoku-music' })}>
                  <div class={styles.cover}>
                    <div class={styles.itemImg}>
                      <div class={styles.itemBg}></div>
                      <NImage
                        objectFit="cover"
                        src={item.src}
                        lazy
                        previewDisabled={true}
                        onLoad={e => {
                          (e.target as any).dataset.loaded = 'true';
                        }}
                      />
                    </div>
                  </div>
                  <div class={styles.itemName}>{item.name}</div>
                </div>
              );
            })}
          </NSpace>
        </div>
      </div>
    );
  }
});
