import { defineComponent } from 'vue'
import { Button } from 'vant'

import styles from './index.module.less'

import ErrorIcon from './network-error.png'
import { useReload } from '/src/subpages/colexiu/uses'

export default defineComponent({
  name: 'network-error',
  props: {
    onReload: {
      type: Function
    },
    isError: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  render() {
    const { default: defauleContent }: any = this.$slots
    const reload = this.onReload || useReload
    return (
      <>
        {this.isError ? (
          <div class={styles.container}>
            <img src={ErrorIcon} alt="网络错误"/>
            <p>网络开小差，再刷新看看</p>
            <Button loading={this.loading} type="primary" round color="#01C1B5" class={styles.button} plain hairline onClick={() => reload()}>刷新一下</Button>
          </div>
        ) : defauleContent()}
      </>
    )
  }
})
