import { Card, ConfigProvider, Spin, Upload } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import React, {useState} from "react";
import useInitial from "@/hooks/useInitail";
import { getDetail, Item, Params, SupplierVO, StorageVO, PartVO, DetailVO } from "./api";
import zhCN from "antd/lib/locale-provider/zh_CN";
import st from "@/pages/pms/partPlan/PlanManage/style.less";
import StepBnt from "@/pages/pms/comonents/StepBnt";
// @ts-ignore
import {common} from "@/typing/common";
import {flattenDeep} from "@/pages/pms/entity";
import {sum} from "lodash";
import PartDetailModal from './components/PartDetailModal';

export default function Index({ match }: common.ConnectProps) {
  const { planId } = match.params;
  const { data, loading } = useInitial<Item, Params>(getDetail, {}, {planId});
  const [visiblePart, setVisiblePart] = useState(false);
  const [parts, setParts] = useState<PartVO[]>([]);

  return (
    <PageHeaderWrapper title="配件计划详情">
      <Spin spinning={loading}>
        <ConfigProvider locale={zhCN}>
          <Card className={st.page}>
            {data.list?.map((dealer: DetailVO = {}) => (
              <div key={`dealer${dealer.settleDealerName}`} style={{ marginTop: 10 }}>
                <div style={{ fontWeight: "bold" }}>{`商家: ${dealer.settleDealerName || ''}`}</div>
                {(dealer.suppliers || []).map((supplier: SupplierVO = {}) => {
                const paList: any[] = flattenDeep((supplier.storages || []).map((st: any) => (st.parts || [])));
                return (
                  <div key={`supplier${supplier.supplierName}`} style={{ marginTop: 10, marginLeft: 40 }}>
                    <div style={{ fontWeight: "bold" }}>{`供应商: ${supplier.supplierName || ''}`}</div>
                    <div style={{display: 'flex', marginLeft: 40, marginTop: 10}}>
                      <div style={{marginRight: 20}}>
                        {`总金额: ${sum(paList.map((it: any) => (it.price || 0) * (it.partCnt || 0))).toFixed(2)}元`}
                      </div>
                      <div>{`品种数: ${paList.length}种`}</div>
                    </div>
                    {(supplier.storages || []).map((storage: StorageVO) => (
                      <div key={`storage${storage.storageName}`} style={{ marginTop: 10, marginLeft: 60 }}>
                        <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
                          <div style={{ fontWeight: "bold" }}>{`发运库房: ${storage.storageName || ''}`}</div>
                          <div style={{marginLeft: 20}}>{`总金额: ${sum((storage.parts || []).map((it: any) => (it.price || 0) * (it.partCnt || 0))).toFixed(2)}元`}</div>
                          <div style={{marginLeft: 20}}>{`品种数: ${(storage.parts || []).length}种`}</div>
                          <a style={{marginLeft: 20}} onClick={() => { setVisiblePart(true); setParts(storage.parts || []); }}>
                            查看配件
                          </a>
                          <a style={{marginLeft: 20}} href={`/api/pms/erp/part/plan/export/plan/list?id=${storage.planGroupId}`}>
                            导出
                          </a>
                        </div>
                      </div>
                    ))}
                  </div>
                );
              })}
              </div>
          ))}
            <div style={{ display: 'flex', alignItems: 'flex-start', marginBottom: 20 }}>
              <span style={{ marginRight: 10 }}>备注：{data.remark}</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'flex-start' }}>
              <span style={{ marginRight: 10 }}>附件：</span>
              <div style={{display: 'flex'}}>
                {data.fids?.split(',').map(i => (
                  <Upload
                    listType="picture-card"
                    fileList={[{
                    uid: '-1',
                    name: i,
                    status: 'done',
                    url: `/api/file/show?fid=${i}`,
                }]}
                    disabled
                  />
                ))}  
              </div>
            </div>
            <PartDetailModal visible={visiblePart} onCancel={() => setVisiblePart(false)} parts={parts} />
            <StepBnt
              disable={false}
              bntLoading={false}
              close={() => history.back()}
            />
          </Card>
        </ConfigProvider>
      </Spin>
    </PageHeaderWrapper>
  );
}