import { PropType, defineComponent, onMounted, reactive } from 'vue';
import styles from './index.module.less';
import { Button, Empty } from 'vant';
import iconEmpty from './images/empty.png';
import iconNetwork from './images/network.png';
import icon404 from './images/404.png';

export default defineComponent({
  name: 'm-empty',
  props: {
    description: {
      type: String as PropType<string | undefined>,
      default: ''
    },
    image: {
      type: String as PropType<'empty' | 'network' | '404'>,
      default: 'empty'
    },
    showButton: {
      type: Boolean,
      default: false
    },
    buttonText: {
      type: String,
      default: '返回'
    }
  },
  emits: ['click'],
  setup(props, { emit }) {
    const forms = reactive({
      image: iconEmpty
    });

    onMounted(() => {
      if (props.image === 'network') {
        forms.image = iconNetwork;
      } else if (props.image === '404') {
        forms.image = icon404;
      }
    });
    return () => (
      <Empty
        style={{
          paddingTop: 0
        }}
        class={styles.mEmpty}
        image={forms.image}
        description={props.description}>
        {props.showButton && (
          <Button
            type="primary"
            plain
            round
            class={styles.button}
            onClick={() => emit('click')}>
            {props.buttonText}
          </Button>
        )}
      </Empty>
    );
  }
});
