<template>
  <cacp-complex-table :actions="[]" :data="personArr">
      <template #title>
          <div class="title">人员信息</div>
      </template>
      <el-table-column label="编号" prop="id"> </el-table-column>
      <el-table-column label="姓名" prop="name"> </el-table-column>
      <el-table-column label="关区号" prop="customsCode"> </el-table-column>
      <el-table-column label="关区" prop="customsName"> </el-table-column>
  </cacp-complex-table>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import type { User, Custom } from '@/types/user'
import { type Result, SuccessResultCode } from '@cacp/ui'
import * as userInfoApis from '@/apis/user'


const personArr = reactive<Array<User>>([
  { id: '1', name: '张三', customsCode: '4200', customsName: '' },
  { id: '2', name: '李四', customsCode: '5200', customsName: '' },
  { id: '3', name: '王五', customsCode: '0100', customsName: '' }
])

queryCustomInfo()

async function queryCustomInfo(): Promise<void> {
  const customCodes: Array<string> = []

  for (const preson of personArr) {
    customCodes.push(preson.customsCode)
  }

  const res: Result<Array<Custom>> = await userInfoApis.queryCustom(customCodes)
  if (res.code === SuccessResultCode) {
    for (const preson of personArr) {
      for (const custom of res.data) {
        if (preson.customsCode === custom.code) {
          preson.customsName = custom.name
        }
      }
    }
  }
}
</script>

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