<!-- 搜索表单 -->
<template>
  <div class="hello-card">
    <div class="hello-card-desc">
      {{
        `${mateData.age ? mateData.age + '岁' : ''} ${
          mateData.position ? mateData.position : ''
        } ${mateData.city ? mateData.city : ''}`
      }}
    </div>
    <div
      class="hello-card-desc u-line-2"
      style="color: #999999; font-size: 14px"
    >
      <div>很高兴认识你~</div>
      <view>海底月是天上月，眼前人是心上人！</view>
    </div>
    <div class="album" style="padding: 5px 0"> </div>
    <!-- <image class="hello-card-image" :src="isMe?userInfo.avatar:friendInfo.avatar" mode="widthFix"></image> -->
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';

  const props = defineProps<{
    // 勾选的项目
    content: string;
  }>();

  interface MateData {
    age: string | number;
    position: string;
    city: string;
  }
  let mateData = ref<MateData>({
    age: '',
    position: '',
    city: ''
  });
  mateData.value = JSON.parse(props.content);
  watch(
    () => props.content,
    (content) => {
      console.log(content);
      if (content) {
        mateData.value = JSON.parse(content);
      }
    }
  );
</script>
