import { PropType, defineComponent } from 'vue';
import styles from './index.module.less';
import { Cell, SkeletonAvatar, SkeletonParagraph } from 'vant';

export default defineComponent({
  name: 'schedule-manage-list-item',
  props: {
    status: {
      type: String as PropType<'success' | 'error'>,
      default: ''
    }
  },
  emits: ['goto'],
  setup(props, { emit }) {
    return () => (
      <div class={styles.listItem}>
        <div class={styles.itemTop}>
          <SkeletonParagraph />
        </div>
        <Cell center isLink onClick={() => emit('goto')}>
          {{
            icon: () => <SkeletonAvatar avatarSize={'1.28rem'} />,
            title: () => <SkeletonParagraph rowWidth="50%" />,
            label: () => <SkeletonParagraph rowWidth="30%" />,
            value: () => <SkeletonParagraph />
          }}
        </Cell>
      </div>
    );
  }
});
