<script setup lang="ts">

import {ref, shallowRef} from 'vue';

import {useVbenModal} from '@vben/common-ui';
import {Descriptions, DescriptionsItem, Tabs, TabPane, Table} from 'ant-design-vue';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';

// import {personInfo} from '#/api/property/resident/person';
import type {Person} from "#/api/property/resident/person/model";
import {accessControlColumns,carColumns} from "#/views/property/resident/person/data";
// import {personList} from "#/api/property/resident/person";
// import {renderDict} from "#/utils/render";


dayjs.extend(duration);
dayjs.extend(relativeTime);
const personDetail = shallowRef<null | Person>(null);

const [BasicModal, modalApi] = useVbenModal({
  onOpenChange: handleOpenChange,
  onClosed() {
    personDetail.value = null;
  },
});



const activeKey = ref('1');

async function handleOpenChange(open: boolean) {
  if (!open) {
    return null;
  }
  modalApi.modalLoading(true);

  // const {id} = modalApi.getData() as { id: number | string };
  // const response = await personInfo(id);
  const response = {id:1};
  // 赋值
  personDetail.value = response;

  modalApi.modalLoading(false);
}


</script>

<template>
  <BasicModal :footer="false" :fullscreen-button="false" title="入驻人员信息" class="w-[70%]">
    <Descriptions v-if="personDetail" size="small" :column="1" bordered :labelStyle="{width:'100px'}">
      <DescriptionsItem label="入驻人员">
       {{ '入驻人员' }}
      </DescriptionsItem>
      <DescriptionsItem label="所属单位">
        {{ '单位名称' }}
      </DescriptionsItem>
      <DescriptionsItem label="入驻位置">
        {{ '单位名称' }}
      </DescriptionsItem>
      <DescriptionsItem label="人脸图片">
        {{ '单位名称' }}
      </DescriptionsItem>
      <DescriptionsItem label="入驻时间">
        {{ '单位名称' }}
      </DescriptionsItem>
      <DescriptionsItem label="车牌号码">
        {{ '单位名称' }}
      </DescriptionsItem>
      <DescriptionsItem label="备注">
        {{ '单位名称' }}
      </DescriptionsItem>

    </Descriptions>
    <div class="foot-tabs">
      <Tabs v-model:activeKey="activeKey" type="card">
        <TabPane key="1" tab="门禁记录">
          <Table :dataSource="[]" :columns="accessControlColumns" :pagination="false"  >
            <template #bodyCell="{ column, index }">
              <template v-if="column.field === 'id'">
                {{ index + 1 }}
              </template>
            </template>
          </Table>
        </TabPane>
        <TabPane key="2" tab="车辆记录">
          <Table :dataSource="[]" :columns="carColumns" :pagination="false" >
            <template #bodyCell="{ column, index }">
              <template v-if="column.field === 'id'">
                {{ index + 1 }}
              </template>
            </template>
          </Table>
        </TabPane>
      </Tabs>
    </div>
  </BasicModal>
</template>
<style lang="scss" scoped>
.foot-tabs {
  margin-top:20px;
}
</style>
