<template>
  <dm-perm-button
    :perm-tip="permTip"
    :perm-tip-placement="permTipPlacement"
    :size="size"
    :type="type"
    :plain="plain"
    :round="round"
    :loading="loading"
    :disabled="disabled"
    :icon="icon"
    :autofocus="autofocus"
    :native-type="nativeType"
    @click.native="handleClick"><slot></slot></dm-perm-button>
</template>

<script>
export default {
  name: 'MkButton',
  props: {
    effect: { //	默认提供的主题	String	dark/light	dark
      type: String,
      default: 'dark'
    },
    delayTimes: {
      type: Number,
      default: 300
    },
    // tooltip的placement
    permTipPlacement: {
      type: String,
      default: 'top'
    },
    size: String, //	尺寸	string	medium / small / mini	—
    type: String, //	类型	string	primary / success / warning / danger / info / text	—
    plain: { //	是否朴素按钮	boolean	—	false
      type: Boolean,
      default: false
    },
    round: { //	是否圆角按钮	boolean	—	false
      type: Boolean,
      default: false
    },
    circle: { //	是否圆形按钮	boolean	—	false
      type: Boolean,
      default: false
    },
    loading: { //	是否加载中状态	boolean	—	false
      type: Boolean,
      default: false
    },
    icon: String, //	图标类名	string	—	—
    autofocus: { //	是否默认聚焦	boolean	—	false
      type: Boolean,
      default: false
    },
    nativeType: { //	原生 type 属性	string	button / submit / reset	button
      type: String,
      default: 'button'
    },
    option: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      permTip: '',
      disabled: false
    };
  },
  mounted() {
    // 1.判断权限
    if(this.option.perm) {
      this.permTip = '您无该操作权限，请联系超管！';
      this.disabled = true;
      return;
    }
    // 2.域删除
    if(this.option.deleteFlag) {
      this.disabled = true;
      this.permTip = this.option.deleteRemark || '域已被删除';
      return;
    }
  },
  methods: {
    handleClick() {
      if (this.disabled) return;
      this.$emit('click');
    }
  },
};
</script>