import { defineComponent, PropType } from 'vue'
import empty from '@/common/images/icon_empty.png'
import live from '@/common/images/icon_no_live.png'
import teacherCert from '@/common/images/icon_teacher_cert.png'
import musicCert from '@/common/images/icon_music_cert.png'
import { ElButton } from 'element-plus'

export default defineComponent({
  name: 'col-empty',
  props: {
    message: {
      type: String,
      default: '暂无数据'
    },
    buttonText: {
      type: String,
      default: '去首页'
    },
    buttonVisibility: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'empty'
      // 'empty' | 'live' | 'teacherCert' | 'musicCert'
    },
    onDetail: {
      type: Function,
      default: () => {}
    }
  },
  computed: {
    icon() {
      switch (this.type) {
        case 'empty':
          return empty
        case 'live':
          return live
        case 'teacherCert':
          return teacherCert
        case 'musicCert':
          return musicCert
        default:
          return empty
      }
    }
  },
  render() {
    return (
      <div class="w-full h-full text-center flex items-center justify-center flex-col">
        <img src={this.icon} class="w-64 m-auto" />

        <p class="text-base text-[#999999] pt-4 pb-6">{this.message}</p>

        {this.buttonVisibility && (
          <ElButton
            type="primary"
            class="rounded-sm !px-12"
            round
            style={{ height: '48px' }}
            onClick={() => {
              this.onDetail()
            }}
          >
            {this.buttonText}
          </ElButton>
        )}
      </div>
    )
  }
})
