import React, { useEffect, useState } from 'react';
import { Button, Modal, Table } from 'antd';
import { useStore } from '../index';
import { custBuyApi } from '../api';
import { PartVO } from '@/pages/pms/partPlan/CustBuyPlan/api';
import useInitial from '@/hooks/useInitail';

const { Column } = Table;

export default function Index() {
  const { custVisible, setCustVisible, item } = useStore();
  const [delay, setDelay] = useState(true);
  const { data, setParams, loading } = useInitial(custBuyApi, [], {}, delay);

  useEffect(() => {
    if (custVisible && item?.planWaitListIds) {
      setParams({ planWaitListIds: item.planWaitListIds }, true);
      setDelay(false);
    }
  }, [custVisible]);

  return (
    <Modal
      title="客户订件详情"
      width={1100}
      visible={custVisible}
      maskClosable={false}
      onCancel={() => setCustVisible(false)}
      footer={[
        <Button onClick={() => setCustVisible(false)}>取消</Button>
      ]}
    >
      <Table
        rowKey={(v: PartVO) => `${v.waitListIds}`}
        dataSource={data}
        pagination={false}
        loading={loading}
        scroll={{x: 1400, y: 500}}
      >
        <Column title="时间" dataIndex="planTime" />
        <Column title="VIN" dataIndex="typeId" />
        <Column title="工单号" dataIndex="remark" />
        <Column title="车牌号" dataIndex="plateNo" />
        <Column title="配件编码" dataIndex="partCode" />
        <Column title="配件名称" dataIndex="partName" />
        <Column title="接车服务顾问" dataIndex="userName" />
        <Column title="门店名称" dataIndex="shopName" />
        <Column title="库房名称" dataIndex="storageName" />
        <Column title="订件数量" dataIndex="splitCnt" />
        <Column title="采购单价" dataIndex="price" />
        <Column title="采购数量" dataIndex="cnt" />
      </Table>
    </Modal>
  );
}