import React, { useState, useEffect } from 'react';
import { Button, message, Modal, Table, Descriptions } from 'antd';
import { confirmApi, getDetail, Detail, Item, DetailItem } from "../api";
import useInitail from "@/hooks/useInitail";
import _ from "lodash";

interface Props {
  visible: boolean,
  onCancel: Function,
  item: Item,
  confirm: boolean,
  fetchList: () => any
}

const { Column } = Table;
export default function Index(props: Props) {
  const { visible, onCancel, fetchList, item, confirm } = props;
  const [delay, setDelay] = useState(true);
  const { data, setParams, loading: aloading} = useInitail<Detail, string | undefined>(getDetail, {}, item.shippingNo, delay);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (visible) {
      setParams(item.shippingNo, true);
      setDelay(false);
    }
  }, [visible]);

  const submit = _.throttle((valid: boolean) => {
    if (loading) {
      return;
    }
    setLoading(true);
    confirmApi({valid, shippingNo: item.shippingNo}).then(() => {
      message.success("操作成功");
      setLoading(false);
      onCancel();
      fetchList();
    }).catch(e => {
      message.error(e.message);
      setLoading(false);
    });
  }, 3000);

  return (
    <Modal
      title="发运单导入明细"
      width={1000}
      visible={visible}
      maskClosable={false}
      onCancel={() => onCancel()}
      footer={confirm ? [
        <Button key="1" loading={loading} onClick={() => submit(false)}>作废</Button>,
        <Button key="2" type="primary" loading={loading} disabled={loading} onClick={() => submit(true)}>确认</Button>
      ] : [<Button key="1" loading={loading} onClick={() => onCancel()}>取消</Button>]}
    >
      <Descriptions column={3}>
        <Descriptions.Item label="品牌">{data.brandName}</Descriptions.Item>
        <Descriptions.Item label="供应商" span={2}>{data.supplierName}</Descriptions.Item>
        <Descriptions.Item label="库房">{data.storageName}</Descriptions.Item>
        <Descriptions.Item label="提报门店" span={2}>{data.settleShopName}</Descriptions.Item>
      </Descriptions>
      <Table loading={aloading} rowKey={(v: DetailItem) => `${v.partId}`} scroll={{y: 500, x: 1200}} dataSource={data.list || []} pagination={false}>
        <Column title="配件名称" dataIndex="partName" />
        <Column title="配件编码" dataIndex="partCode" />
        <Column title="配件件号" dataIndex="partNo" />
        <Column title="发运数量" dataIndex="partCount" />
        <Column title="采购单价" dataIndex="price" />
        <Column title="总金额(元)" dataIndex="totalAmount" render={(t: number, _: DetailItem) => ((_.price || 0) * (_.partCount || 0) || '--')} />
        {!confirm && <Column title="入库数量" dataIndex="storageCnt" render={(t: number) => (t || '--')} />}
        {!confirm && <Column title="遗漏数量" dataIndex="omitCnt" render={(t: number) => (t || '--')} />}
        {!confirm && <Column title="破损数量" dataIndex="damagedCnt" render={(t: number) => (t || '--')} />}
        {!confirm && <Column title="补发数量" dataIndex="againCnt" render={(t: number) => (t || '--')} />}
        {!confirm && <Column title="对方责任占比" dataIndex="otherRatio" render={(t: number) => (t ? `${t*10}%` : '--')} />}
      </Table>
    </Modal>
  );
}