import { MyBetaModalFormProps, MyButtons } from '@/common';
import { MyModal } from '@/components/MyModal';
import { Apis } from '@/gen/Apis';
import { ProCard, ProDescriptions } from '@ant-design/pro-components';
import { Space, Spin } from 'antd';
import { useState } from 'react';

export default function Show(props: MyBetaModalFormProps) {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState<any>({});

  return (
    <MyModal
      title={props.title || '查看借阅情况'}
      type={props.item?.type || 'primary'}
      width="600px"
      trigger={<MyButtons.View />}
      onOpen={() => {
        if (props?.item?.id) {
          setLoading(true);
          Apis.Contract.ContractArchiveBorrows.Show({ id: props.item.id })
            .then((res) => {
              setData(res?.data || {});
            })
            .catch((error) => {
              console.error('获取借阅信息失败:', error);
            })
            .finally(() => {
              setLoading(false);
            });
        }
      }}
      node={
        <Space direction="vertical" style={{ width: '100%' }}>
          <ProCard>
            <Spin spinning={loading}>
              <ProDescriptions column={2} title="借阅详情">
                <ProDescriptions.Item label="档案单号">
                  {data?.contract_archive?.code || '-'}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="借阅人">
                  {data?.borrower_name}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="借阅日期">
                  {data?.borrow_date}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="预计归还日期">
                  {data?.expected_return_date}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="实际归还日期">
                  {data?.actual_return_date}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="归还人">
                  {data?.returner_name}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="借阅状态">
                  {data?.return_status === 'NotReturned' ? '未归还' : '已归还'}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="是否需要归还">
                  {data?.is_need_return ? '是' : '否'}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="申请说明" span={2}>
                  {data?.borrow_reason}
                </ProDescriptions.Item>
                <ProDescriptions.Item label="借阅文件" span={2}>
                  {!data?.contract_archive_borrow_files ||
                  !data.contract_archive_borrow_files.length ? (
                    '-'
                  ) : (
                    <div>
                      {data.contract_archive_borrow_files.map(
                        (file: any, index: number) => (
                          <div
                            key={index}
                            style={{
                              marginBottom: 8,
                              padding: 8,
                              border: '1px solid #f0f0f0',
                              borderRadius: 4,
                            }}
                          >
                            <div
                              style={{ fontWeight: 'bold', marginBottom: 4 }}
                            >
                              文件 {index + 1}:
                              {file?.contract_archive_file?.name}
                            </div>
                            <div>借阅数量: {file?.borrow_number}</div>
                            {/* {file?.return_status && (
                            <div>
                              归还状态:{' '}
                              {ContractArchiveFileReturnStatusEnum[
                                file.return_status
                              ]?.text || file.return_status}
                            </div>
                          )} */}
                            {file?.lost_number > 0 && (
                              <div>遗失数量: {file?.lost_number}</div>
                            )}
                            {file?.damaged_number > 0 && (
                              <div>损坏数量: {file?.damaged_number}</div>
                            )}
                            {file?.lost_description && (
                              <div>遗失描述: {file?.lost_description}</div>
                            )}
                            {file?.damaged_description && (
                              <div>损坏描述: {file?.damaged_description}</div>
                            )}
                          </div>
                        ),
                      )}
                    </div>
                  )}
                </ProDescriptions.Item>
              </ProDescriptions>
            </Spin>
          </ProCard>
        </Space>
      }
    />
  );
}
