import { Cell, CellGroup, Skeleton, 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
                    isLink={props.isLink}
                    class={styles.cellTitle}
                    clickable={false}>
                    {{
                      title: () => (
                        <SkeletonParagraph
                          rowWidth={'80%'}
                          class={styles.title}
                        />
                      )
                    }}
                  </Cell>
                  <Cell center valueClass={styles.cellTimerSkeleton}>
                    {{
                      title: () => <SkeletonParagraph rowWidth={'80%'} />,
                      value: () => <SkeletonParagraph rowWidth={'50%'} />
                    }}
                  </Cell>
                </CellGroup>
              ))}
            </div>
          ),
          default: () => slots.default && slots.default()
        }}
      </Skeleton>
    );
  }
});
