import React, {useState, useEffect, useMemo} from 'react';
import { Button, Modal, Table } from 'antd';
import { getProgressDetail, ProgressVO, ListVO, Params, SubmitListVO } from "../api";
import useInitial from "@/hooks/useInitail";
import ProgressView from "./ProgressView";
import ShippingDetailModal from './ShippingDetailModal';
import PartDetailModal from './PartDetailModal';
import {flattenDeep} from "@/pages/pms/entity";
import {getDetail, DetailVO, Item} from "@/pages/pms/partPlan/PlanManage/subpages/Detail/api";

interface Props {
  visible: boolean,
  onCancel: Function,
  item: ListVO,
}

const { Column } = Table;
export default function DetailModal(props: Props) {
  const { visible, onCancel, item } = props;
  const params = {planId: item.planId};
  const [delay, setDelay] = useState(true);
  // @ts-ignore
  const { data: progresss, setParams: setProgresssParams } = useInitial<ProgressVO[], Params>(getProgressDetail, [], params, delay);
  // @ts-ignore
  const { data, setParams, loading } = useInitial<Item, Params>(getDetail, {}, params, delay);
  const [visibleDetail, setVisibleDetail] = useState(false);
  const [_item, setItem] = useState<SubmitListVO>({});
  const [visiblePartDetail, setVisiblePartDetail] = useState(false);
  const suppliers = useMemo(() => {
    return flattenDeep(data.list?.map((it: DetailVO) => (it.suppliers || []).map(su => ({...it, ...su}))));
  }, [data]);

  useEffect(() => {
    if (visible) {
      setProgresssParams(params, true);
      setParams(params, true);
      setDelay(false);
    }
  }, [visible]);

  return (
    <Modal
      title="配件计划进度"
      width={1000}
      visible={visible}
      maskClosable={false}
      onCancel={() => onCancel()}
      footer={
        <Button onClick={() => onCancel()}>取消</Button>
      }
    >
      <div style={{display: 'flex', flexDirection: 'row'}}>
        <ProgressView data={progresss} />
        <div style={{width: 700}}>
          <Table loading={loading} rowKey={(v: any) => `${v.planSupplierId}`} scroll={{y: 500, x: 650}} dataSource={suppliers} pagination={false}>
            <Column title="品牌" dataIndex="brandName" />
            <Column title="结算商家" dataIndex="settleDealerName" />
            <Column title="结算门店" dataIndex="settleShopName" />
            <Column title="供应商" dataIndex="supplierName" />
            <Column title="总金额(元)" dataIndex="totalAmount" render={(t: number) => t && t.toFixed(2) || 0} />
            <Column
              title="操作"
              render={(text, _item: SubmitListVO) => (
                <>
                  <a onClick={() => { setVisiblePartDetail(true); setItem(_item); }} style={{marginRight: 20}}>查看配件</a>
                  <a onClick={() => { setVisibleDetail(true); setItem(_item); }}>查看进度</a>
                </>
              )}
            />
          </Table>
        </div>
      </div>
      <ShippingDetailModal
        visible={visibleDetail}
        item={{..._item, ...params}}
        onCancel={() => setVisibleDetail(false)}
      />
      <PartDetailModal
        visible={visiblePartDetail}
        item={_item}
        onCancel={() => setVisiblePartDetail(false)}
      />
    </Modal>
  );
}