import { Button, Descriptions, Image, Table } from 'antd';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { OrderManageAPI } from '~/api';
import React, { useEffect, useState } from 'react';
import { purchaseOrderDetailType } from '~/api/interface/orderManageType';
import { InterDataType } from '~/api/interface';
import dayjs from 'dayjs';
import { ColumnsType } from 'antd/es/table';
import './index.scss';

// 采购订单详情返回类型
type detailType = InterDataType<purchaseOrderDetailType>;

const ProcurementOrderDetail = () => {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const [purchaseOrderDetail, setPurchaseOrderDetail] = useState<detailType>();
  // 订单状态
  const [orderStatusList, setOrderStatusList] = useState<{ value: number; label: string }[]>([]);
  const columns: ColumnsType<detailType['skuDTOList'][0]> = [
    {
      title: '商品',
      align: 'center',
      width: '20%',
      render: (_text, record) => (
        <div className='mall-sku-item'>
          <Image src={record.skuImage} className='sku-img' />
          <div className='sku-info'>
            <div className='info-name'>{record.tradeName}</div>
            <div className='info-spec'>
              {Object.entries(JSON.parse(record.productSpec)).map((v, index) => (
                <span key={index}>{v.join('：')}</span>
              ))}
            </div>
          </div>
        </div>
      ),
    },
    {
      title: '单价（元）',
      dataIndex: 'unitPrice',
      align: 'center',
      render: (text) => `￥${text?.toLocaleString()}`,
    },
    {
      title: '数量',
      dataIndex: 'orderNum',
      align: 'center',
    },
    {
      title: '订单状态',
      align: 'center',
      render: () => orderStatusList.find((v) => v.value === purchaseOrderDetail?.statusCode)?.label,
    },
    {
      title: '订单金额（元）',
      align: 'center',
      render: () => `￥${purchaseOrderDetail?.orderAmount}`,
    },
  ];

  // 获取采购订单详情
  const getPurchaseOrderDetail = (id: number) => {
    OrderManageAPI.getPurchaseOrderDetail({ id }).then(({ result }) => {
      if (result) {
        setPurchaseOrderDetail(result);
      }
    });
  };
  // 获取订单状态
  const getOrderStatusList = () => {
    OrderManageAPI.getMallOrderStatusList().then(({ result }) => {
      if (result) {
        const list = result.map((item) => ({ value: item.code, label: item.status }));
        setOrderStatusList(list);
      }
    });
  };

  const backRoute = () => {
    navigate(-1);
  };
  useEffect(() => {
    getPurchaseOrderDetail(Number(searchParams.get('id')));
    getOrderStatusList();
  }, []);

  return (
    <div className='procurement-order-detail'>
      <Descriptions
        title='供应商'
        bordered
        extra={
          <Button type='primary' onClick={backRoute}>
            返回
          </Button>
        }
      >
        <Descriptions.Item label='供应商名称：'>供应商名称：</Descriptions.Item>
        <Descriptions.Item label='供应商电话：'>供应商电话：</Descriptions.Item>
        <Descriptions.Item label='Live'>Hangzhou, Zhejiang</Descriptions.Item>
      </Descriptions>
      <Descriptions title='订单' style={{ marginTop: '10px' }} column={3}>
        <Descriptions.Item label='订单编号：' labelStyle={{ color: '#000' }}>
          {purchaseOrderDetail?.orderNo}
        </Descriptions.Item>
        <Descriptions.Item label='创建时间：' labelStyle={{ color: '#000' }} span={2}>
          {dayjs(purchaseOrderDetail?.createTime).format('YYYY-MM-DD HH:mm:ss')}
        </Descriptions.Item>
        {/*<Descriptions.Item label='合同编号：' labelStyle={{ color: '#000' }}>*/}
        {/*  3*/}
        {/*</Descriptions.Item>*/}
        <Descriptions.Item span={3}>
          <Table
            size='small'
            dataSource={purchaseOrderDetail?.skuDTOList || []}
            columns={columns}
            rowKey='id'
            bordered
            pagination={false}
            style={{ width: '100%' }}
            // rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
          />
        </Descriptions.Item>
      </Descriptions>
      <Descriptions title='物流' bordered style={{ marginTop: '10px' }}>
        <Descriptions.Item label='收货人：'>
          {purchaseOrderDetail?.uavOrderExpressDTO.takeName}
        </Descriptions.Item>
        <Descriptions.Item label='手机号：'>
          {purchaseOrderDetail?.uavOrderExpressDTO.takePhone}
        </Descriptions.Item>
        <Descriptions.Item label='收货地址：'>
          {purchaseOrderDetail?.uavOrderExpressDTO.takeRegion.split('/').join('') ||
            '' + purchaseOrderDetail?.uavOrderExpressDTO.takeAddress}
        </Descriptions.Item>
        <Descriptions.Item label='物流单号：'>
          {purchaseOrderDetail?.uavOrderExpressDTO.sendExpNo || '--'}
        </Descriptions.Item>
        <Descriptions.Item label='物流进度：'>--</Descriptions.Item>
      </Descriptions>
      <Descriptions title='凭证' bordered style={{ marginTop: '10px' }}>
        <Descriptions.Item label='付款凭证：'>供应商名称：</Descriptions.Item>
        <Descriptions.Item label='验收商品：'>供应商电话：</Descriptions.Item>
        <Descriptions.Item label='合同信息：'>Hangzhou, Zhejiang</Descriptions.Item>
      </Descriptions>
    </div>
  );
};
export default ProcurementOrderDetail;
