<!-- 公共地址组件 -->
<template>

  <div v-if="formData == null || formData == ''" style="text-align: center;margin-top: 50px;font-size: 14px;">
    暂无地址
  </div>
  <div v-else>
    <div class="aftersale-container" v-for="item in formData" :key="item">
      <h3 class="rating-title">{{ item.name }}</h3>
      <div class="content">
        <div class="details">
          <p class="product-model">{{ item.mobile }}</p>
          <p>{{getAreaPath(item?.areaId)}}{{ item.detailAddress }}</p>
          <p class="first-aftersale">是否默认: {{ item.defaultStatus? "是" : "否" }}</p>
        </div>
      </div>
    </div>
  </div>

</template>
<script lang="ts" setup>
import * as UserApi from '@/api/member/user'
import * as AreaApi from '@/api/system/area'
const props = defineProps({
  obj: {
    type: Object,
    default: () => { }
  },
  openSource: {
    type: String,
    default: ''
  },
  userId:{
    type: Number,
    default: undefined
  },
  addressType:{
    type: Number,
    default: undefined
  }
})
console.log(props.addressType)


const formData = ref({})


const geAddressByUserId = async (id) => {
  let res = (await UserApi.getUserAddress(id,props.addressType))
  // 处理返回数据，如果是对象，则转换为数组
  if (!Array.isArray(res) && res != null) res = [res]
  formData.value = res
  console.log("formData", formData.value)
}
const areaTree = ref([])
onMounted(async () => {
  // 获得地区树
  areaTree.value = await AreaApi.getAreaTree()

  console.log("公共售后页面，进来的类型是:", props.openSource)
  if (props.openSource == 'MemberUser') {
    //消费者
    geAddressByUserId(props.userId)
  } 

})


// 扁平化地区树，创建ID到节点信息的映射
const flattenTree = (tree) => {
  const map = new Map();
  const stack = [...tree.map(node => ({ ...node, parentId: null }))]; // 初始栈，根节点没有parentId
  while (stack.length > 0) {
    const node = stack.pop();
    map.set(node.id, { name: node.name, parentId: node.parentId });
    if (node.children) {
      stack.push(...node.children.map(child => ({ ...child, parentId: node.id }))); // 将子节点入栈，并记录其父节点ID
    }
  }

  return map;
};

// 通过映射表构建从根到目标ID的路径
const buildPathFromMap = (map, targetId) => {
  const path = [];
  let currentId = targetId;

  while (currentId !== null) {
    const node = map.get(currentId);
    if (!node) break; // 如果找不到节点，结束循环
    path.unshift(node.name); // 将当前节点名称加到路径开始
    currentId = node.parentId; // 向上回溯到父节点
  }

  return path;
};

// 主函数：给定一个目标ID，返回其路径
const getAreaPath = (targetId) => {
  const map = flattenTree(areaTree.value); // 扁平化地区树
  const path = buildPathFromMap(map, targetId); // 构建路径
  return path.join('');
};
</script>
<style src="@/styles/PcComponents.css"  lang="scss" scoped></style>

<style lang="scss" scoped>
@media screen and (max-width: 768px) {
	::v-deep(.el-pagination__sizes),
	::v-deep(.el-pagination__jump) {
		display: none;
	}
}
.image {
  display: flex;
  justify-content: center;
  /* 水平居中图片 */
  align-items: center;
  /* 垂直居中图片 */
  overflow: hidden;
  /* 隐藏超出部分 */
}

.image img {
  display: block;
  /* 防止图片下方有空隙 */
  max-width: 100%;
  /* 最大宽度为容器宽度，保持原始比例 */
  max-height: 100%;
  /* 最大高度为容器高度，保持原始比例 */
  object-fit: contain;
  /* 保证图片按比例缩放填充，可能会有空白 */
}

.details {
  flex: 2;
}

.details p {
  word-break:break-all;
  margin: 5px 0;
}

.comment {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.rating-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  align-items: stretch;
}

.content-image {
  border-radius: 4px;
  border: 1px solid #ebeef5;
  margin-right: 10px;
  align-items: center;
  display: flex;
  overflow: hidden;
  /* 防止图片溢出容器 */
  flex: 1;
}


@media screen and (max-width: 768px) {
  .aftersale-container {
    width: 84% !important;
  }
}

.aftersale-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 300px;
  border: 1px solid #ebeef5;
  padding: 0 16px 16px;
  border-radius: 4px;
  float: left;
  margin: 10px;
  background: white;

}

.aftersale-comment {
  margin-top: 12px !important;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

}
</style>