<template>
  <div class="user-info" :class="{ 'easy': type }">
    <div class="user-info-content">
      <div class="user-info-header">
        <svg v-if="type" width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="30" cy="30" r="30" fill="url(#paint0_linear_829_3662)" />
          <ellipse cx="19.5" cy="24" rx="3.5" ry="5" fill="#0F3461" />
          <ellipse cx="40.5" cy="24" rx="3.5" ry="5" fill="#0F3461" />
          <path d="M38 42C36.7075 39.0567 33.7577 37 30.3256 37C27.1735 37 24.4282 38.7348 23 41.2979" stroke="#0F3461"
            stroke-width="2" stroke-linecap="round" />
          <defs>
            <linearGradient id="paint0_linear_829_3662" x1="30" y1="0" x2="30" y2="60" gradientUnits="userSpaceOnUse">
              <stop stop-color="#E8F2FE" />
              <stop offset="1" stop-color="#AED3FF" />
            </linearGradient>
          </defs>
        </svg>
        <svg v-else width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="30" cy="30" r="30" fill="url(#paint0_linear_829_3663)" />
          <ellipse cx="19.5" cy="24" rx="3.5" ry="5" fill="#04790C" />
          <ellipse cx="40.5" cy="24" rx="3.5" ry="5" fill="#04790C" />
          <path d="M38 37C36.7075 39.9433 33.7577 42 30.3256 42C27.1735 42 24.4282 40.2652 23 37.7021" stroke="#04790C"
            stroke-width="2" stroke-linecap="round" />
          <defs>
            <linearGradient id="paint0_linear_829_3663" x1="30" y1="0" x2="30" y2="60" gradientUnits="userSpaceOnUse">
              <stop stop-color="#FAFEE8" />
              <stop offset="1" stop-color="#B8FFAE" />
            </linearGradient>
          </defs>
        </svg>
      </div>
      <div class="title">{{ title }}</div>
      <div class="tags" style="min-height: 23px;">
        <div class="tag" v-for="tag in newTags" :key="tag">{{ tag }}</div>
      </div>
    </div>
    <div class="tips">{{ tips }}</div>
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  type: {
    type: Boolean,
    default: true
  },
  title: {
    type: String,
    default: ''
  },
  tags: {
    type: Array as PropType<string[]>,
    default: () => []
  },
  tips: {
    type: String,
    default: ''
  }
})  
const newTags = ref(props.tags);
watch(() => props.tags, () => {
  newTags.value = props.tags;
}, { immediate: true, deep: true });
</script>
<style scoped lang="scss">
.user-info {
  .user-info-content {
    position: relative;
    padding-left: 80px;
    margin-bottom: 12px;

    .user-info-header {
      position: absolute;
      top: 0;
      left: 0;
    }

    .title {
      color: rgba(18, 18, 18, 1);
      font-family: Source Han Sans SC;
      font-weight: 500;
      font-size: 16px;
      line-height: 23px;
      margin-bottom: 12px;
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;

      .tag {
        border-radius: 4px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        font-size: 12px;
        line-height: 12px;
        padding: 6px 10px;
        background: rgba(222, 255, 216, 1);
        color: rgba(4, 121, 12, 1);
      }
    }
  }

  .tips {
    color: rgba(100, 100, 100, 1);
    font-family: Source Han Sans SC;
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
  }

  &.easy {
    .user-info-content {
      .tags {
        .tag {
          background: rgba(232, 242, 254, 1);
          color: rgba(22, 122, 240, 1);
        }
      }
    }
  }
}
</style>