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

export default defineComponent({
  name: 'collection-record-item-skelete',
  setup(props) {
    return () => (
      <div class={styles.item}>
        <Skeleton animate>
          {{
            template: () => (
              <div style={{ width: '100%' }}>
                <CellGroup inset>
                  <Cell center>
                    {{
                      title: () => <SkeletonParagraph rowWidth="52%" />,
                      value: () => <SkeletonParagraph />
                    }}
                  </Cell>
                  <Cell center>
                    {{
                      icon: () => <SkeletonAvatar />,
                      title: () => (
                        <div class={styles.name}>
                          <SkeletonTitle />
                        </div>
                      ),
                      value: () => (
                        <div class={styles.price}>
                          <SkeletonParagraph />
                        </div>
                      )
                    }}
                  </Cell>
                </CellGroup>
              </div>
            )
          }}
        </Skeleton>
      </div>
    );
  }
});
