import { ClockCircleOutlined, EnvironmentOutlined } from '@ant-design/icons';
import { ProCard, type ProColumns } from '@ant-design/pro-components';
import { Button, Card, Image, Modal, Space, Timeline, Typography } from 'antd';
import React, { useCallback, useEffect, useState } from 'react';
import EnhancedProTable from '@/components/EnhancedProTable';
import { fallback } from '@/constants/antd/image';
import { getSubTimeLog } from '@/services/trade/order';
import type {
  TradeOrderSubLogDO,
  TradeServeInfo,
} from '@/services/trade/order/detail';
import type { ItemConfig } from '../../../../order-info';
import styles from '../../index.module.less';

const { Text, Paragraph } = Typography;
const ServicePetUI: React.FC<ItemConfig<TradeServeInfo>> = (props) => {
  const { data = {}, id } = props;
  const { boneInfo, subInfo } = data;
  const [open, setOpen] = useState<boolean>(false);
  return (
    <div className={styles['order-info']}>
      <Card title="服务信息">
        <ProCard split="vertical" bordered>
          <ProCard title="遗体信息" size="small" colSpan="30%" headerBordered>
            <Paragraph>
              <Text type="secondary">姓名：</Text>
              <Text>{boneInfo?.petName}</Text>
            </Paragraph>
            <Paragraph>
              <Text type="secondary">宠物品种：</Text>
              <Text>{boneInfo?.petType}</Text>
            </Paragraph>
            <Paragraph>
              <Text type="secondary">体型/体重：</Text>
              <Text>{boneInfo?.weight}</Text>
            </Paragraph>
            <Paragraph>
              <Text type="secondary">离世时间：</Text>
              <Text>{boneInfo?.diedTime}</Text>
            </Paragraph>
            <Paragraph>
              <Text type="secondary">离世原因：</Text>
              <Text>{boneInfo?.diedReason}</Text>
            </Paragraph>
            <Paragraph>
              <Text type="secondary">遗体照片：</Text>
              <Space wrap>
                {data.boneInfo?.boneUrl?.map((item: string, index: number) => (
                  <Image
                    width={48}
                    src={item}
                    key={`${index}-${Math.random()}`}
                    fallback={fallback}
                  />
                ))}
              </Space>
            </Paragraph>
          </ProCard>
          <ProCard
            size="small"
            title="预约信息"
            headerBordered
            extra={
              <Button size="small" onClick={() => setOpen(true)}>
                修改记录
              </Button>
            }
          >
            <Space size={100}>
              <div>
                <Paragraph>
                  <Text type="secondary">预约类型：</Text>
                  <Text>{subInfo?.subType}</Text>
                </Paragraph>
                <Paragraph>
                  <Text type="secondary">更改规则：</Text>
                  <Text>{subInfo?.changeRule}</Text>
                </Paragraph>
                <Paragraph>
                  <Text type="secondary">预约时间：</Text>
                  <Text>{subInfo?.subOrder}</Text>
                </Paragraph>
                <Paragraph>
                  <Text type="secondary">用户备注：</Text>
                  <Text>{subInfo?.userRemark}</Text>
                </Paragraph>
                <Paragraph>
                  <Text type="secondary">客服备注：</Text>
                  <Text>{subInfo?.merchantRemark}</Text>
                </Paragraph>
              </div>
              <Timeline
                items={[
                  {
                    dot: (
                      <ClockCircleOutlined className="timeline-clock-icon" />
                    ),
                    color: 'green',
                    children: subInfo?.pickUpAddress,
                  },
                  {
                    dot: <EnvironmentOutlined />,
                    children: subInfo?.pickUpAddress,
                    color: 'red',
                  },
                ]}
              />
            </Space>
          </ProCard>
        </ProCard>
      </Card>
      <SubTimeLogModal id={id} open={open} onCancel={() => setOpen(false)} />
    </div>
  );
};
//修改记录
const SubTimeLogModal: React.FC<{
  id?: number;
  open?: boolean;
  onCancel: () => void;
}> = (props) => {
  const { id, open = false } = props;
  const [log, setLog] = useState<TradeOrderSubLogDO[]>([]);
  const fetchSubTimeLog = useCallback(
    async (id: number) => {
      const res = await getSubTimeLog(id);
      console.log(res);
      setLog(res);
    },
    [id],
  );
  const columns: ProColumns<TradeOrderSubLogDO>[] = [
    {
      title: '预约时间',
      dataIndex: 'subTime',
      valueType: 'dateTime',
    },
    {
      title: '修改时间',
      dataIndex: 'updateTime',
      valueType: 'dateTime',
    },
  ];
  useEffect(() => {
    if (open && id) fetchSubTimeLog(id);
  }, [open, id]);
  return (
    <Modal
      width={'60vw'}
      open={open}
      onCancel={props.onCancel}
      title="修改记录"
      footer={null}
    >
      <EnhancedProTable<TradeOrderSubLogDO>
        columns={columns}
        dataSource={log}
        showIndex={false}
        search={false}
        scroll={{ x: 'max-content' }}
        showSelection={false}
        pagination={false}
      />
    </Modal>
  );
};

export default React.memo(ServicePetUI);
