<template>
  <n-collapse-item
    :name="`${url}-${type}`"
    :title="url"
    v-bind:class="{
      get: type === 'get',
      put: type === 'put',
      post: type === 'post',
      delete: type === 'delete',
      options: type === 'options',
      head: type === 'head',
      patch: type === 'patch',
    }">
    <template #header>
      <div f n-c style="padding: 10px; height: calc(100% - 10px); display: flex; gap: 20px">
        <div
          c-c
          f
          style="
            width: 80px;
            height: 30px;
            background: var(--color);
            border-radius: 2px;
            font-weight: 700;
            color: #fff;
          ">
          {{ type.toUpperCase() }}
        </div>

        <label style="font-weight: 700">{{ url }}</label>
      </div>
    </template>
    <div></div>
  </n-collapse-item>
</template>
<script lang="ts" setup>
const prop = defineProps({
  type: {
    type: String as PropType<'get' | 'post' | 'put' | 'delete' | 'patch' | 'head' | 'options' | 'trace' | 'connect'>,
    default: 'get',
  },
  url: {
    type: [String, Number],
    required: true,
  },
});
</script>
<style lang="scss" scoped>
@mixin method-style($color) {
  background: rgba($color, 0.1);
  border-radius: 3px;
  border: 1px solid $color !important;
  --color: #{$color};
}

.get {
  @include method-style(#61affe);
}

.put {
  @include method-style(#fca130ff);
}

.post {
  @include method-style(#49cc90);
}

.delete {
  @include method-style(#f93e3e);
}

.options {
  @include method-style(#0d5aa7);
}

.head {
  @include method-style(#9012fe);
}

.patch {
  @include method-style(#50e3c2);
}
</style>
