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

const { Text, Paragraph, Title } = Typography;
const ProdInfo: React.FC<ItemConfig<Item[]>> = (props) => {
  const { data = [] } = props;
  const [visible, setVisible] = useState(false);
  const [item, setItem] = useState<Item>();
  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>
    );
  }, []);
  const onPhoto = useCallback(
    async (item: Item) => {
      setVisible(true);
      setItem(item);
    },
    [item, visible],
  );

  return (
    <div className={styles['order-info']}>
      <Card title="商品信息" loading={props.loading}>
        {data?.map((item) => (
          <ProCard
            key={item.id}
            size="small"
            title={renderTitle(item)}
            bordered
            headerBordered
            gutter={8}
            extra={
              <Button size="small" onClick={() => onPhoto(item)}>
                交易快照
              </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>
      <PhotoModal
        open={visible}
        onCancel={() => setVisible(false)}
        item={item}
      />
    </div>
  );
};

// 交易快照
const PhotoModal: React.FC<{
  open: boolean;
  onCancel: () => void;
  item?: Item;
}> = (props) => {
  const [photo, setPhoto] = useState<TradeOrderFastPhotoRespVo>();
  const [loading, setLoading] = useState<boolean>(false);
  const { item } = props;
  console.log(item, 'item');
  const onPhoto = useCallback(async () => {
    try {
      setLoading(true);
      const res = await getfastPhoto({
        itemId: item?.id as number,
        spuId: item?.spuId as number,
      });
      setPhoto(res);
    } finally {
      setLoading(false);
    }
  }, [item]);
  useEffect(() => {
    if (props.open && item) {
      onPhoto();
    }
  }, [props.open, item]);

  return (
    <Modal
      title="交易快照"
      open={props.open}
      onCancel={props.onCancel}
      footer={null}
      width={820}
    >
      <Spin spinning={loading}>
        <div
          style={{
            height: '480px',
            width: '100%',
            overflow: 'hidden',
            display: 'flex',
            justifyContent: 'space-between',
            gap: '16px',
          }}
        >
          <div className="left" style={{ width: '386px', height: '100%' }}>
            <AdvancedImageGallery images={photo?.imgs?.split(',') || []} />
          </div>
          <div
            className="right"
            style={{ height: '100%', overflow: 'auto', width: '386px' }}
          >
            <Title level={4}>{photo?.spuName}</Title>
            <Paragraph>
              <Text type="secondary">{photo?.brief}</Text>
            </Paragraph>
            <div
              style={{
                marginBottom: '16px',
                background: '#00000005',
                padding: '8px',
                borderRadius: '8px',
                fontSize: '12px',
              }}
            >
              <span>
                当前页面为订单快照，包含订单创建时的商品描述和下单信息，买卖双方和平台在发生交易争议时，将作为判断依据。
              </span>
            </div>
            <div
              style={{
                marginBottom: '16px',
                background: '#00000005',
                padding: '8px',
                borderRadius: '8px',
              }}
            >
              <strong>已选：{photo?.skuName}（已选的SKU规格）</strong>
            </div>
            <DangerouslySetInnerHTML content={photo?.content} />
          </div>
        </div>
      </Spin>
    </Modal>
  );
};

export default React.memo(ProdInfo);
