import { BizValueType, CompanyList } from '@/components';
import BizProvider from '@/components/Biz/BizProvider';
import { business } from '@/services';
import { useIntl } from '@@/exports';
import {
	ProColumns,
	ProTable,
	ProTableProps,
} from '@ant-design/pro-components';

type IOrderSupplierSelectListProps = ProTableProps<
	BusinessAPI.OrderSupplierVO,
	BusinessAPI.OrderSupplierPageQry,
	BizValueType
>;

export default function OrderSupplierSelectList(
	props: IOrderSupplierSelectListProps,
) {
	const intl = useIntl();
	const intlPrefix = 'orderSupplier';
	const { ...tableProps } = props;
	// 订单列表列定义
	const orderColumns: ProColumns<BusinessAPI.OrderSupplierVO, BizValueType>[] =
		[
			{
				title: intl.formatMessage({ id: intlPrefix + '.column.order' }),
				dataIndex: 'orderVO',
				key: 'orderId',
				valueType: 'order',
			},
			{
				title: intl.formatMessage({ id: intlPrefix + '.column.name' }),
				dataIndex: 'name',
				key: 'name',
			},
			{
				title: intl.formatMessage({ id: intlPrefix + '.column.invoiceAmount' }),
				dataIndex: 'invoiceAmount',
				key: 'invoiceAmount',
				valueType: 'money',
				search: false,
			},
			{
				title: intl.formatMessage({ id: intlPrefix + '.column.depositAmount' }),
				dataIndex: 'depositAmount',
				key: 'depositAmount',
				valueType: 'money',
				search: false,
			},
			// 剩余付款金额
			{
				title: intl.formatMessage({
					id: intlPrefix + '.column.remainingAmount',
				}),
				dataIndex: 'remainingAmount',
				key: 'remainingAmount',
				valueType: 'money',
				search: false,
				renderText: (_, record) => {
					return record.invoiceAmount - record.depositAmount || 0;
				},
			},
			{
				title: intl.formatMessage({ id: intlPrefix + '.column.orderCompany' }),
				dataIndex: 'orderCompany',
				valueType: 'select',
				request: async (params) => {
					const { data } = await business.company.listCompany({
						companyListQry: {
							...params,
						},
					});

					return (
						data?.map((item) => {
							return {
								label: item.fullName,
								value: item.companyId,
							};
						}) || []
					);
				},
				render: (_, record) => {
					return (
						<CompanyList
							ghost={true}
							mode={'detail'}
							companyId={record.orderCompany.companyId}
							trigger={() => <a href={'#'}>{record.orderCompany.fullName}</a>}
						/>
					);
				},
			},
			{
				title: intl.formatMessage({ id: intlPrefix + '.column.isPaid' }),
				dataIndex: 'isPaid',
				key: 'isPaid',
				valueType: 'select',
				valueEnum: {
					true: {
						text: intl.formatMessage({
							id: intlPrefix + '.column.isPaid.paid',
						}),
						status: 'success',
					},
					false: {
						text: intl.formatMessage({
							id: intlPrefix + '.column.isPaid.unpaid',
						}),
						status: 'processing',
					},
				},
			},
			...(tableProps.columns || []),
		];

	return (
		<BizProvider>
			<ProTable
				ghost={true}
				search={false}
				options={false}
				{...tableProps}
				rowKey="orderSupplierId"
				columns={orderColumns}
				pagination={false}
				size="small"
				scroll={{
					x: 'max-content',
				}}
			/>
		</BizProvider>
	);
}
