import { ProCard } from '@ant-design/pro-components';
import { Button, Card, Image, Space, Tag, Typography } from 'antd';
import React, { useCallback } from 'react';
import { fallback } from '@/constants/antd/image';
import type { Item } from '@/services/trade/order/detail';
import type { ItemConfig } from '../../order-info';
import styles from './index.module.less';

const { Text, Paragraph } = Typography;
const ProdInfo: React.FC<ItemConfig<Item[]>> = (props) => {
  const { data = [] } = props;
  const renderTitle = useCallback((item: Item) => {
    return (
      <Space style={{ height: '100%' }} size={16}>
        <Paragraph className="order-paragraph">{item.shopName}</Paragraph>
        <Paragraph className="order-paragraph">
          <Text type="secondary"> 商品 ID：</Text>
          <Text copyable>{item.spuId}</Text>
        </Paragraph>
        <Paragraph className="order-paragraph">
          <Text type="secondary">SKU ID：</Text>
          <Text copyable>{item.skuId}</Text>
        </Paragraph>
      </Space>
    );
  }, []);
  return (
    <div className={styles['order-info']}>
      <Card title="商品信息">
        {data?.map((item) => (
          <ProCard
            key={item.id}
            size="small"
            title={renderTitle(item)}
            bordered
            headerBordered
            gutter={8}
            extra={<Button size="small">交易快照</Button>}
          >
            <ProCard
              layout="default"
              colSpan={'50%'}
              style={{ borderRight: '1px solid rgba(5,5,5,0.06)' }}
            >
              <Space>
                <Image width={64} src={item.shopLogo} fallback={fallback} />
                <div>
                  <Text>{item.shopName}</Text>
                  <Paragraph className="order-paragraph">
                    <Text>规格：</Text>
                    <Text type="secondary"> {item.skuName}</Text>
                  </Paragraph>
                  <Space wrap size={0} direction="horizontal">
                    <Paragraph
                      className="order-paragraph"
                      style={{ marginRight: 16 }}
                    >
                      <Text type="secondary">数量：</Text>
                      <Text> {item.count}</Text>
                    </Paragraph>
                    <Paragraph
                      className="order-paragraph"
                      style={{ marginRight: 16 }}
                    >
                      <Text type="secondary">单价：</Text>
                      <Text>
                        ¥{item.price}
                        {item.unit}
                      </Text>
                    </Paragraph>
                    <Paragraph
                      className="order-paragraph"
                      style={{ marginRight: 16 }}
                    >
                      <Text type="secondary">到手价：</Text>
                      <Text>
                        {' '}
                        ¥{item.handedPrice} {item.unit}
                      </Text>
                    </Paragraph>
                    <Paragraph className="order-paragraph">
                      <Text type="secondary">成本价：</Text>
                      <Text>
                        {' '}
                        ¥{item.expensePrice} {item.unit}/-
                      </Text>
                    </Paragraph>
                  </Space>
                </div>
              </Space>
              <Paragraph style={{ marginTop: 16 }}>
                {item.properties}
                <Tag>标签</Tag>
                <Tag>标签</Tag>
                <Tag>标签</Tag>
                <Tag>标签</Tag>
                <Tag>标签</Tag>
              </Paragraph>
              <Paragraph className="order-paragraph">
                <Text type="secondary">商品描述：</Text>
                <Paragraph className="order-paragraph">
                  {item.serveContent}
                </Paragraph>
              </Paragraph>
            </ProCard>
            <ProCard
              style={{
                borderRight: '1px solid rgba(5,5,5,0.06)',
                height: '100%',
              }}
            >
              <Space direction="vertical">
                <Text>付款信息</Text>
                <Paragraph className="order-paragraph">
                  <Text type="secondary">商品总价：</Text>
                  <Text>¥500</Text>
                </Paragraph>
                <Paragraph className="order-paragraph">
                  <Text type="secondary">商品总价：</Text>
                  <Text>¥500</Text>
                </Paragraph>
                <Paragraph>
                  <Text type="secondary">商品总价：</Text>
                  <Text>¥500</Text>
                </Paragraph>
              </Space>
            </ProCard>
            <ProCard>
              <Space direction="vertical">
                <Text>退款信息</Text>
                <Paragraph className="order-paragraph">
                  <Text type="secondary">累计退款金额：</Text>
                  <Text>¥{item.refundPrice}</Text>
                </Paragraph>
                <Paragraph className="order-paragraph">
                  <Text type="secondary">累计退款数量：</Text>
                  <Text>{item.refundCount}</Text>
                </Paragraph>
              </Space>
            </ProCard>
          </ProCard>
        ))}
      </Card>
    </div>
  );
};

export default React.memo(ProdInfo);
