<template>
  <button @click="handleClick" :class="['dz-btn-common', `dz-btn-${type}`, disabled && `dz-btn-${type}-disabled`]" :disabled="disabled" v-if="!isLarge">
    <slot />
  </button>
  <div v-else :class="['large-btn', disabled && 'dz-large-btn-disabled']" @click="handleClick">
    <div class="dz-large-btn-inner">
      <slot />
    </div>
  </div>
</template>

<script lang="ts" setup name="DzButton">
  
  const props = withDefaults(defineProps<{
    isLarge?: boolean
    disabled?: boolean
    type?: 'primary' | 'secondary' | 'dashed' | 'danger' | 'text'
  }>(),
  {
    type:'primary'
  })

  const emit = defineEmits(['click'])

  const handleClick = (e:MouseEvent) => {
    props.disabled && emit('click', e)
  }

</script>

<style lang='less' scoped>
  .dz-btn-common {
    border-radius: 4px;
    font-size: 18px;
    background: transparent;
  }
  .dz-btn-primary {
    border: 1px solid rgba(25,236,255,1);
    color: #19ECFF;
    &:hover {
      border: 1px solid rgba(56,255,230,1);
      color: #38FFE6;
    }
  }

  .dz-btn-secondary {
    border: 1px solid rgba(62,102,183,1);
    color: #88B0FF;
    &:hover {
      border: 1px solid rgba(31,162,255,1);
      color: #1FA2FF;
    }
  }

  .dz-btn-dashed  {
    border: 1px dashed rgba(25,236,255,1);
    color: #19ECFF;
    &:hover {
      border: 1px dashed rgba(45,255,255,1);
      color: #2DFFFF;
    }
  }

  .dz-btn-danger  {
    border: 1px solid rgba(245,34,45,1);
    color: #F5222D;
    &:hover {
      border: 1px solid rgba(255,0,23,1);
      color: #FF0017;
    }
  }

  .dz-btn-text  {
    border: none;
    color: #19ECFF;
    &:hover {
      border: none;
      color: #2DFFFF;
    }
  }

  .dz-btn-primary-disabled, .dz-btn-secondary-disabled, .dz-btn-danger-disabled {
    background: #122655;
    border: 1px solid rgba(62,102,183,1);
    color: #3E66B7;
  }

  .dz-btn-dashed-disabled {
    background: #122655;
    border: 1px dashed rgba(62,102,183,1) !important;
    color: #3E66B7;
  }

  .dz-btn-text-disabled {
    background: none !important;
    border: none !important;
    color: #3E66B7;
  }

  .large-btn {
    width: 272px;
    height: 44px;
    background-image: linear-gradient(180deg, #19ECFF 0%, #076A6D 100%);
    border-radius: 4px;
    padding: 1px;
    cursor: pointer;

    .dz-large-btn-inner {
      width: 100%;
      height: 100%;
      background-image: linear-gradient(180deg, rgb(0,4,62) 0%,  rgb(7,66,153) 100%);
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      color: #19ECFF;
      user-select: none
    }
  }

  .large-btn:hover {
    width: 272px;
    height: 44px;
    background-image: linear-gradient(180deg, #38FFE6 0%, #076A6D 100%);
    border-radius: 4px;
    padding: 1px;
    cursor: pointer;

    .dz-large-btn-inner {
      width: 100%;
      height: 100%;
      background-image: linear-gradient(180deg, rgb(0,4,62) 0%,  rgb(7,66,153) 100%);
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      color: #38FFE6;
      user-select: none
    }
  }

  .dz-large-btn-disabled, .dz-large-btn-disabled:hover {
    background: #122655;
    border: 1px solid rgba(62,102,183,1);
    border-radius: 4px;
    cursor: not-allowed;
    .dz-large-btn-inner {
      background: none;
      color: #3E66B7;
      cursor: not-allowed;
      user-select: none
    }
  }



</style>
