<template>
  <div class="profile-list">
    <div class="profile-container">
      <div class="profile-item" v-for="profile in portfolios" :key="profile.id">
        <!--        <img-show class="avatar" :src="your_image_url" :alt="your_alt_text"  />-->
        <div class="info" @click="goToDetail(profile.portfolioId)">
          <div class="name">{{ profile.name }}</div>
          <div class="details">
            <div class="detail">手机: {{ profile.phoneNumber }}</div>
            <div class="detail">民族: {{ profile.ethnicity }}</div>
            <div class="detail">身份证号: {{ profile.idCardNumber }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="header">
      <router-link to="/pages/member-info-add/member-info-add">
        <button class="add-button">新增档案</button>
      </router-link>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'

const portfolios = ref([])
onShow(() => {
  fetchProfiles()
})

const fetchProfiles = () => {
  http.request({
    url: '/p/user/portfolio/page',
    method: 'POST'
  })
    .then(({
      data
    }) => {
      uni.hideLoading()
      portfolios.value = data
      /*   uni.showToast({
          title: data.data,
          icon: 'none',
          duration: 1500
        }) */
    })
}
const goToDetail = (portfoiloId) => {
  // 在这里触发页面跳转，传递档案ID作为参数
  uni.navigateTo({
    url: '/pages/member-info-detail/member-info-detail?portfolioId=' + portfoiloId
  })
}
// 在组件挂载时调用获取档案列表的函数
onMounted(() => {
  fetchProfiles()
})
</script>

<style scoped lang="scss">
@import "./member-info.scss";
</style>
