import {
  Cell,
  CellGroup,
  Grid,
  GridItem,
  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, 6]
    },
    isLink: {
      type: Boolean,
      default: true
    }
  },
  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: props.isLink
                  ? `calc(100vh - var(--header-height))`
                  : 'auto',
                overflow: 'hidden',
                width: '100%'
              }}>
              {props.showCount.map(() => (
                <CellGroup inset class={styles.cellGroup}>
                  <Cell center>
                    {{
                      title: () => (
                        <div class={styles.timer}>
                          <SkeletonAvatar class={styles.iconTimer} />
                          <SkeletonParagraph
                            rowWidth={'40%'}
                            style={{ marginTop: '0' }}
                          />
                        </div>
                      ),
                      label: () => (
                        <div class={styles.patrolContainer}>
                          <Grid columnNum={2} border={false}>
                            <GridItem>
                              {{
                                icon: () => (
                                  <SkeletonParagraph
                                    rowWidth={'40%'}
                                    style={{ width: '50px' }}
                                    class={styles.num}
                                  />
                                ),
                                text: () => (
                                  <div class="van-grid-item__text">
                                    <SkeletonParagraph
                                      rowWidth={'40%'}
                                      style={{ width: '50px' }}
                                      class={styles.num}
                                    />
                                  </div>
                                )
                              }}
                            </GridItem>
                            <GridItem>
                              {{
                                icon: () => (
                                  <SkeletonParagraph
                                    rowWidth={'40%'}
                                    style={{ width: '50px' }}
                                    class={styles.num}
                                  />
                                ),
                                text: () => (
                                  <div class="van-grid-item__text">
                                    <SkeletonParagraph
                                      rowWidth={'40%'}
                                      style={{ width: '50px' }}
                                      class={styles.num}
                                    />
                                  </div>
                                )
                              }}
                            </GridItem>
                          </Grid>

                          <SkeletonParagraph
                            class={styles.btn}
                            rowWidth={'20%'}
                          />
                        </div>
                      )
                    }}
                  </Cell>
                </CellGroup>
                // <div class={styles.cellGroup}>
                //   <Cell
                //     center
                //     isLink={props.isLink}
                //     clickable={false}
                //     class={styles.cell}>
                //     {{
                //       icon: () => <SkeletonAvatar class={styles.iconTeacher} />,

                //       title: () => (
                //         <div class={styles.username} style={{ width: '80px' }}>
                //           <SkeletonParagraph rowWidth={'50%'} />
                //           <SkeletonParagraph
                //             style={{
                //               marginTop: '4px'
                //             }}
                //           />
                //         </div>
                //       ),
                //       value: () => (
                //         <div
                //           class={[
                //             styles.attendance,
                //             !props.isLink ? styles.noLink : ''
                //           ]}>
                //           <div class={[styles.attendanceItem]}>
                //             <SkeletonParagraph
                //               class={styles.value}
                //               rowWidth={'40%'}
                //             />
                //             <SkeletonParagraph
                //               class={styles.value}
                //               rowWidth={'40%'}
                //             />
                //           </div>
                //           <div class={[styles.attendanceItem]}>
                //             <SkeletonParagraph
                //               class={styles.value}
                //               rowWidth={'40%'}
                //             />
                //             <SkeletonParagraph
                //               class={styles.value}
                //               rowWidth={'40%'}
                //             />
                //           </div>
                //         </div>
                //       )
                //     }}
                //   </Cell>
                // </div>
              ))}
            </div>
          ),
          default: () => slots.default && slots.default()
        }}
      </Skeleton>
    );
  }
});
