import { defineComponent } from 'vue';
import styles from './index.module.less';
import {
  Cell,
  Grid,
  GridItem,
  Skeleton,
  SkeletonAvatar,
  SkeletonParagraph
} from 'vant';

export default defineComponent({
  name: 'student-manage-skeletion',
  props:{
    loading: {
        type: Boolean,
        default: true
    }
  },
  setup(props, {slots}) {
    return () => (
      <Skeleton loading={props.loading}>
        {{
          template: () => (
            <div
              style={{
                width: '100%',
                height: 'calc(100vh - 30px - var(--header-height))',
                overflow: 'hidden'
              }}>
              <div class={styles.statistics}>
                <div class={styles.statisticsItem}>
                  <SkeletonAvatar avatarSize={'1rem'} />
                  <div class={styles.statisticsDes} style={{ width: '50%' }}>
                    <SkeletonParagraph rowWidth="80%" />
                    <SkeletonParagraph rowWidth="90%" />
                  </div>
                </div>

                <div class={styles.statisticsItem}>
                  <SkeletonAvatar avatarSize={'1rem'} />
                  <div class={styles.statisticsDes} style={{ width: '50%' }}>
                    <SkeletonParagraph rowWidth="80%" />
                    <SkeletonParagraph rowWidth="90%" />
                  </div>
                </div>
              </div>

              {new Array(2).fill(1).map(stu => (
                <div style={{ overflow: 'hidden' }} class={styles.student}>
                  <Cell border={false}>
                    {{
                      icon: () => <SkeletonAvatar avatarSize={'1.28rem'} />,
                      title: () => <SkeletonParagraph rowWidth="50%" />,
                      label: () => <SkeletonParagraph rowWidth="30%" />
                    }}
                  </Cell>
                  {new Array(2).fill(1).map(n => (
                    <Grid border={false}>
                      {new Array(4).fill(1).map(n => (
                        <GridItem>
                          <SkeletonParagraph rowWidth="80%" />
                          <SkeletonParagraph rowWidth="90%" />
                        </GridItem>
                      ))}
                    </Grid>
                  ))}
                </div>
              ))}
            </div>
          ),
          default: () => slots.default?.()
        }}
      </Skeleton>
    );
  }
});
