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

export default defineComponent({
  name: 'student-manage-detail-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'
              }}>
              <CellGroup class={styles.infobox} border={false}>
                <Cell border={false} center style={{padding: 0}}>
                  {{
                    icon: () => <SkeletonAvatar avatarSize={'1rem'} />,
                    title: () => <SkeletonParagraph rowWidth="80%" />,
                  }}
                </Cell>
              </CellGroup>

              <CellGroup class={styles.infobox} border={false}>
                <Cell border={false} center style={{padding: 0}}>
                  {{
                    icon: () => <SkeletonAvatar avatarSize={'1rem'} />,
                    title: () => <SkeletonParagraph rowWidth="80%" />,
                    label: () => <SkeletonParagraph rowWidth="40%" />,
                    value: () => (
                      <SkeletonParagraph
                        rowWidth="80%"
                        style={{ marginLeft: 'auto' }}
                      />
                    )
                  }}
                </Cell>
              </CellGroup>

              <CellGroup class={styles.infobox}border={false}>
                {new Array(4).fill(1).map(_item => (
                  <Cell border={false}>
                    {{
                      title: () => <SkeletonParagraph rowWidth="80%" />,
                      value: () => (
                        <SkeletonParagraph
                          rowWidth="80%"
                          style={{ marginLeft: 'auto' }}
                        />
                      )
                    }}
                  </Cell>
                ))}
              </CellGroup>

              <div style={{ overflow: 'hidden' }} class={styles.infobox}>
                <SkeletonParagraph rowWidth="30%" />
                <Grid border={false}>
                  {new Array(4).fill(1).map(n => (
                    <GridItem>
                      <SkeletonParagraph rowWidth="90%" />
                      <SkeletonParagraph rowWidth="90%" />
                    </GridItem>
                  ))}
                </Grid>
              </div>

              <div style={{ overflow: 'hidden' }} class={styles.infobox}>
                <SkeletonParagraph rowWidth="30%" />
                <Grid border={false}>
                  {new Array(4).fill(1).map(n => (
                    <GridItem>
                      <SkeletonParagraph rowWidth="90%" />
                      <SkeletonParagraph rowWidth="90%" />
                    </GridItem>
                  ))}
                </Grid>
              </div>
            </div>
          ),
          default: () => slots.default?.()
        }}
      </Skeleton>
    );
  }
});
