<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <div style="overflow: hidden">

    
      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" style="overflow: auto;max-height:550px;min-height: 550px;">
        <el-table-column label="头像" align="center" prop="ancName">
          <template #default="scope">
            <span><img :src="scope.row.avatar"  style="width: 50px;height: 50px;border-radius: 50%;border: 1px solid rgb(220, 223, 231);" /></span>
          </template>
        </el-table-column>
        <el-table-column label="顺序" align="center" prop="sort" v-if="openType == 1" />
        <el-table-column label="用户昵称" align="center" prop="descNickName" />
        <el-table-column label="用户手机号" align="center" prop="descPhone" />
      </el-table>
      <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
        @pagination="getList" />
    </div>
  </Dialog>
</template>
<script setup lang="ts">

import { SharePathApi } from '@/api/system/distri/sharepath'


const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题


const list = ref([]) // 列表数据

const loading = ref(false) // 列表的加载中
/** 打开弹窗 */
const openType = ref(0) // 类型
const total = ref(0)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  ancestor: 0,
  depth: undefined,
})
const getList = async () => {
  loading.value = true
  try {
    const data = await SharePathApi.getDuserByUserId(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
const open = async (type: number, id: number,childrenCount:number) => {
  dialogVisible.value = true
  openType.value = type
  if (type == 1) {
    dialogTitle.value = '直推人列表'
    queryParams.depth = 1
  } else if (type == 2) {
    dialogTitle.value = '后代列表'
    queryParams.depth = undefined
  }
  queryParams.ancestor = id
  // 后代数量不为0 才查询
  if(childrenCount){
    getList()
  }else{
    list.value = []
    total.value = 0}
  
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
