<script setup lang="ts">
import { px2vw } from '@/utils'

const props = withDefaults(
  defineProps<{
    type?: 'primary' | 'success' | 'info' | 'danger'
    size?: number | string
    width?: number | string
    height?: number | string
    loading?: boolean
    tilt?: boolean // 倾斜
    successTwo?: boolean // 特殊success
    disabled?: boolean
  }>(),
  {
    type: 'primary',
    size: 32,
    width: 232,
    height: 80,
    tilt: false,
    successTwo: false,
    disabled: false,
  },
)
const emits = defineEmits(['click'])

const OSS_URL = import.meta.env.VITE_OSS_URL
const TYPE_BG = {
  primary: {
    left: `${OSS_URL}/urm/btn_primary_left.svg`,
    right: `${OSS_URL}/urm/btn_primary_right.svg`,
  },
  success: {
    left: `${OSS_URL}/urm/btn_success_left.svg`,
    right: `${OSS_URL}/urm/btn_success_right_two.svg`,
  },
  danger: {
    left: `${OSS_URL}/urm/btn_danger_left.svg`,
    right: `${OSS_URL}/urm/btn_danger_right.svg`,
  },
  info: {
    left: `${OSS_URL}/urm/btn_info_left.svg`,
    right: `${OSS_URL}/urm/btn_info_right.svg`,
  },
}
const _type = computed(() => (props.disabled ? 'info' : props.type))

const _size = computed(() => px2vw(props.size))
const _iconSize = computed(() => (isNaN(Number(props.size)) ? 48 : Number(props.size) * 1.5))
const _width = computed(() => px2vw(props.width))
const _height = computed(() => px2vw(props.height))
function onClick(e: any) {
  if (props.loading || props.disabled) return
  e.preventDefault()
  emits('click', e)
}
</script>

<template>
  <button
    :class="{
      'x-button': true,
      'is-loading': loading,
      [_type]: true,
      tilt,
    }"
    :disabled="disabled"
    @click="onClick"
  >
    <img v-if="!successTwo" class="x-button-left" :src="TYPE_BG[_type].left" />
    <img class="x-button-right" :src="TYPE_BG[_type].right" />
    <Icon v-if="loading" name="loading" loading :size="_iconSize"></Icon>
    <div v-else class="x-button-text">
      <slot></slot>
    </div>
  </button>
</template>

<style lang="scss" scoped>
.x-button {
  width: v-bind(_width);
  height: v-bind(_height);
  position: relative;
  overflow: hidden;
  font-family: $font-special;
  font-size: v-bind(_size);
  cursor: pointer;
  line-height: 1.5;
  box-shadow: 0 0.5vh 0.17vh 0 rgba(0, 0, 0, 0.25);
  outline: none;
  // transition: opacity 0.3s;
  transition: filter 0.1s ease;
  &[disabled],
  &.is-loading {
    cursor: not-allowed;
    &:active {
      filter: unset;
    }
  }
  &:active {
    filter: brightness(0.9);
  }

  &.danger {
    background: #ff5050;
    border-radius: 4.5vh;
  }

  &.primary {
    background: #ffe850;
    border-radius: 4.5vh;
  }
  &.success {
    background: linear-gradient(180deg, #70f0a5 0%, #5fe799 100%);
    border-radius: 4.5vh;
  }
  &.info {
    background: #83fcf7;
    border-radius: 4.5vh;
  }

  &.tilt {
    transform: skew(-20deg);
    transform-origin: center center;
    border-radius: $radius-5;
    .x-button-left,
    .x-button-right,
    .x-button-text {
      transform: skew(20deg);
    }

    .x-icon {
      animation: rotating 2s linear infinite;
      @keyframes rotating {
        0% {
          transform: skew(20deg) rotateZ(0);
        }
        100% {
          transform: skew(20deg) rotateZ(360deg);
        }
      }
    }
  }

  &-left {
    position: absolute;
    width: calc(v-bind(_size) * 3);
    left: -20px;
    top: -1.67vh;
    z-index: 0;
  }

  &-right {
    position: absolute;
    width: calc(v-bind(_size) * 3);
    right: 0;
    bottom: 0;
    // top: 50%;
    // transform: translateY(-38%);
    z-index: 0;
  }

  &-text {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  & .x-icon {
    top: 0.67vh;
  }
}
</style>
