<template>
  <el-dialog 
    title="查看成员" 
    v-model="visible" 
    :close-on-click-modal="false" 
    draggable
    width="1000px">
    <div v-loading="loading">
      <div style="margin-bottom: 15px;">
        <el-text type="primary" size="large">社团名称：{{ associationName || '-' }}</el-text>
      </div>
      <el-table 
        :data="memberList" 
        border 
        :cell-style="tableStyle.cellStyle"
        :header-cell-style="tableStyle.headerCellStyle">
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="deptName" label="学院" show-overflow-tooltip align="center" min-width="150" />
        <el-table-column prop="classNo" label="班号" show-overflow-tooltip align="center" width="120" />
        <el-table-column prop="stuNo" label="学号" show-overflow-tooltip align="center" width="120" />
        <el-table-column prop="realName" label="姓名" show-overflow-tooltip align="center" width="100" />
        <el-table-column prop="phone" label="联系电话" show-overflow-tooltip align="center" width="120" />
      </el-table>
      
      <!-- 分页 -->
      <pagination 
        v-if="pagination.total > 0"
        @size-change="sizeChangeHandle" 
        @current-change="currentChangeHandle" 
        v-bind="pagination" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">关 闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="StuAssociationMemberDialog">
import { ref, reactive } from 'vue'
import { fetchList } from '/@/api/stuwork/stuassociationmember'
import { BasicTableProps, useTable } from "/@/hooks/table";

// 定义变量内容
const visible = ref(false)
const loading = ref(false)
const associationName = ref('')
const associationId = ref('')

// 表格样式
const tableStyle = {
  cellStyle: { padding: '8px 0' },
  headerCellStyle: { background: '#f5f7fa', color: '#606266', fontWeight: 'bold' }
}

// 成员列表
const memberList = ref<any[]>([])

// 分页配置
const pagination = reactive({
  current: 1,
  size: 10,
  total: 0
})

// 打开弹窗
const openDialog = async (id: string, name: string) => {
  visible.value = true
  associationId.value = id
  associationName.value = name || ''
  memberList.value = []
  pagination.current = 1
  pagination.total = 0
  
  await getMemberList()
}

// 获取成员列表
const getMemberList = async () => {
  if (!associationId.value) return
  
  loading.value = true
  try {
    const res = await fetchList({
      associationId: associationId.value,
      current: pagination.current,
      size: pagination.size
    })
    
    if (res.data) {
      if (res.data.records && Array.isArray(res.data.records)) {
        memberList.value = res.data.records
      } else if (Array.isArray(res.data)) {
        memberList.value = res.data
      } else {
        memberList.value = []
      }
      
      pagination.total = res.data.total || res.data.totalCount || 0
    } else {
      memberList.value = []
      pagination.total = 0
    }
  } catch (err) {
    memberList.value = []
    pagination.total = 0
  } finally {
    loading.value = false
  }
}

// 分页变化
const sizeChangeHandle = (size: number) => {
  pagination.size = size
  pagination.current = 1
  getMemberList()
}

const currentChangeHandle = (current: number) => {
  pagination.current = current
  getMemberList()
}

// 暴露方法
defineExpose({
  openDialog
})
</script>

<style scoped lang="scss">
</style>

