import { Empty, Button } from 'vant'
import { defineComponent, toRefs } from 'vue'
import ErrorIcon from './error.svg'
import { postMessage } from '/src/helpers/native-message'

export default defineComponent({
  name: 'ColexiuEmpty',
  props: {
    description: {
      type: String,
      default: '网络错误',
    },
    imageSize: {
      type: Number,
      default: 200,
    },
    image: {
      type: String,
      default: ErrorIcon,
    },
  },
  setup(props, { slots }) {
    const back = () =>
      postMessage({
        api: 'back',
      })
    const { image, imageSize, description } = toRefs(props)
    return () => (
      <Empty image={image.value} imageSize={imageSize.value} description={description.value}>
        {slots.default ? (
          slots.default()
        ) : (
          <Button type="primary" onClick={back}>
            返回
          </Button>
        )}
      </Empty>
    )
  },
})
