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

export default defineComponent({
  name: 'skeleton-modal',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    showCount: {
      type: Array,
      default: () => [1, 2, 3, 4, 5]
    }
  },
  setup(props, { slots }) {
    const forms = reactive({
      loading: false
    });

    onMounted(() => {
      forms.loading = props.show;
    });

    watch(
      () => props.show,
      () => {
        forms.loading = props.show;
      }
    );
    return () => (
      <Skeleton loading={forms.loading} style="flex-wrap: wrap">
        {{
          template: () => (
            <div
              style={{
                height: `calc(100vh - var(--header-height))`,
                overflow: 'hidden'
              }}>
              {props.showCount.map(() => (
                <div class={styles.siteItem}>
                  <CellGroup class={styles.cellGroup}>
                    <Cell center>
                      {{
                        icon: () => <SkeletonAvatar class={styles.iconMusic} />,
                        title: () => (
                          <div
                            style={{
                              display: 'flex',
                              justifyContent: 'space-between'
                            }}>
                            <SkeletonParagraph rowWidth={'40%'} />
                            <SkeletonParagraph
                              style={{
                                marginTop: 0
                              }}
                              rowWidth={'40%'}
                            />
                          </div>
                        )
                      }}
                    </Cell>
                    <Cell center class={styles.username}>
                      {{
                        icon: () => (
                          <SkeletonAvatar class={styles.iconTeacher} />
                        ),
                        title: () => (
                          <div>
                            <SkeletonParagraph rowWidth={'40%'} />
                            <SkeletonParagraph
                              rowWidth={'40%'}
                              style={{ marginTop: '4px' }}
                            />
                          </div>
                        )
                      }}
                    </Cell>
                  </CellGroup>
                  <CellGroup class={styles.cellGroup}>
                    <div class={[styles.photoGroup]}>
                      <div class={[styles.photoUp, styles.showPhoto]}>
                        <h3>
                          <SkeletonParagraph
                            class={styles.photoTitle}
                            rowWidth={'30%'}
                          />
                        </h3>
                        <div class={styles.photoList}>
                          <SkeletonParagraph class={styles.photo} />
                          <SkeletonParagraph class={styles.photo} />
                          <SkeletonParagraph class={styles.photo} />
                        </div>
                      </div>
                      <div class={[styles.photoDown, styles.showPhoto]}>
                        <h3>
                          <SkeletonParagraph
                            class={styles.photoTitle}
                            rowWidth={'30%'}
                          />
                        </h3>
                        <div class={styles.photoList}>
                          <SkeletonParagraph class={styles.photo} />
                          <SkeletonParagraph class={styles.photo} />
                          <SkeletonParagraph class={styles.photo} />
                        </div>
                      </div>
                    </div>
                  </CellGroup>
                </div>
              ))}
            </div>
          ),
          default: () => slots.default && slots.default()
        }}
      </Skeleton>
    );
  }
});
