<template>
  <button
    class="py-2.5 text-center w-full flex items-center justify-center"
    :class="getClass"
    :disabled="disabled"
    @click="clickButton"
  >
    <div class="mr-1">
      <slot name="icon" />
    </div>
    <slot>按钮</slot>
  </button>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'CButton',
  components: {
    // 'app-icon':()=>import('./components/common/Icon.vue'),
    // 'main-page': () => import('@/layout/main-page.vue')
  },
  props: {
    round: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'primary'
    }
  },
  computed: {
    getClass() {
      let className = this.round ? 'rounded-full' : 'rounded'
      switch (this.type) {
        case 'primary':
          className = `${className} bg-color-primary text-white`
          break
        case 'secondary':
          className = `${className} bg-white text-text-primary`
          break
        case 'text':
          className = `${className} bg-none text-color-primary`
      }
      return this.disabled
        ? this.type === 'text'
          ? `${className} bg-none text-text-secondary`
          : `${className} bg-button-disabled text-white`
        : `${className}`
    }
  },
  methods: {
    clickButton() {
      this.$emit('click')
    }
  }
})
</script>

<style lang="less">

</style>
