<template>
  <view class="tag-wrapper" :class="[calcType()]" :style="styles">
    <slot />
  </view>
</template>

<script setup>
import { reactive } from 'vue'

const props = defineProps({
  type: { type: [String, Object], default: 'green' },
  styles: { type: Object, default: () => ({}) },
})

const classList = ['purple', 'green', 'blue', 'green-rgba']
const calcType = () => {
  try {
    // 如果传入样式对象覆写样式
    if (Object.keys(props.styles).length > 0) return ''
    //如果预设样式类型中包含样式 使用预设样式类型
    if (classList.includes(props.type)) return props.type
    throw `预设样式类型中未包含此字段 请使使用style字段传入样式对象 自定义样式 注意样式名驼峰语法 目前预设样式字段有 ${classList.join(',')} `
  } catch (err) {
    console.error('error', err)
  }
}
</script>

<style lang="scss" scoped>
.tag-wrapper {
  display: inline-block;
  margin-left: 15rpx;
  padding: 0 15rpx;
  height: 40rpx;
  line-height: 40rpx;
  border-radius: 6rpx;
  text-align: center;
  font-size: 23rpx;
  color: #fff;
}
.purple {
  background: linear-gradient(270deg, rgba(220, 61, 138, 1) 0%, rgba(187, 23, 92, 1) 100%);
}
.green {
  background: linear-gradient(270deg, rgba(61, 220, 68, 1) 0%, rgba(23, 187, 118, 1) 100%);
}
.blue {
  background: linear-gradient(270deg, rgba(35, 161, 252, 1) 0%, rgba(26, 102, 255, 1) 100%);
}

.green-rgba{
	color: rgba(23, 188, 118, 1);
	background: linear-gradient(270deg, rgba(61, 220, 68, 0.3) 0%, rgba(23, 187, 118, 0.3) 100%);
}

</style>
