import { Table, Select, Input, Card, message, Spin } from 'antd';
import React, { useState } from 'react';
import { fetchPartList, ListVO, fetchProgress, ProgressItemVO } from './api';
import { getShopApi } from '@/pages/pms/storage/partShop/api';
import useInitial from "@/hooks/useInitail";
import usePagination from '@/hooks/usePagination';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import * as API from '@/common/api';
import ProcessModal from './components/ProcessModal';

const { Column } = Table;
const Option = Select.Option;
const Search = Input.Search;

export default function Index() {
  const { list, setParams, paginationConfig, loading } = usePagination<ListVO>(fetchPartList, [], {});
  const { data: shops } = useInitial<PmsStoragePartShop.Option[], {}>(getShopApi, [], {});
  const { data: brands } = useInitial(API.getBrandFilterApi, [], {});
  const [currentInfo, setCurrentInfo] = useState<{visible?: boolean, item?: ProgressItemVO[], loading?:boolean}>({visible: false, item: [], loading: false});

  const process = (id?: string) => {
    setCurrentInfo({loading: true});
    fetchProgress({handleTypeId: id, handleType: "客户订件"}).then(res => {
      setCurrentInfo({ visible: true, item: res.data, loading: false });
    }).catch(e => {
      message.error(e.message);
      setCurrentInfo({ loading: false });
    });
  };

  return (
    <PageHeaderWrapper title="客户订件计划进度">
      <Card>
        <Spin spinning={currentInfo.loading}>
          <div style={{ display: 'flex', alignItems: 'center', marginBottom: 20 }}>
            <Search
              allowClear
              placeholder="配件名称/编码搜索"
              style={{ width: 220, marginRight: 10 }}
              onSearch={e => setParams({keywords: e}, true)}
            />
            <Search
              allowClear
              placeholder="顾问名称搜索"
              style={{ width: 200, marginRight: 10 }}
              onSearch={e => setParams({ serviceName: e}, true)}
            />
            <Search
              allowClear
              placeholder="车牌号搜索"
              style={{ width: 200, marginRight: 10 }}
              onSearch={e => setParams({ plateNo: e}, true)}
            />
            <Search
              allowClear
              placeholder="VIN搜索"
              style={{ width: 200, marginRight: 10 }}
              onSearch={e => setParams({ vin: e}, true)}
            />
            <Select
              allowClear
              placeholder="品牌筛选"
              style={{ width: 200, marginRight: 10 }}
              onChange={v => setParams({ brandId: v }, true)}
              showSearch
              optionFilterProp="children"
            >
              {brands.map(item => <Option key={item.id} value={item.id}>{item.name}</Option>)}
            </Select>
            <Select
              allowClear
              placeholder="门店筛选"
              style={{ width: 200, marginRight: 10 }}
              onChange={v => setParams({shopId: v }, true)}
              showSearch
              optionFilterProp="children"
            >
              {shops.map((item: PmsStoragePartShop.Option) => <Option key={item.id} value={item.id || ""}>{item.name || ""}</Option>)}
            </Select>
            <Select
              allowClear
              placeholder="状态筛选"
              style={{ width: 200 }}
              onChange={v => setParams({status: v }, true)}
              showSearch
              optionFilterProp="children"
            >
              <Option value={0} key="1">未确认</Option>
              <Option value={1} key="2">未添加</Option>
              <Option value={2} key="3">已添加</Option>
              <Option value={3} key="4">已完成</Option>
            </Select>
          </div>
          <Table
            rowKey={(v: ListVO) => `${v.waitListIds}`}
            dataSource={list}
            pagination={paginationConfig}
            loading={loading}
            scroll={{x: 1200}}
          >
            <Column title="配件编码" dataIndex="partCode" fixed="left" />
            <Column title="配件名称" dataIndex="partName" />
            <Column title="采购数量" dataIndex="cnt" />
            <Column title="采购单价" dataIndex="price" />
            <Column title="车牌号" dataIndex="plateNo" />
            <Column title="时间" dataIndex="planTime" />
            <Column title="VIN" dataIndex="typeId" />
            <Column title="工单号" dataIndex="remark" />
            <Column title="品牌" dataIndex="brandName" />
            <Column title="门店名称" dataIndex="shopName" />
            <Column title="服务顾问" dataIndex="userName" />
            <Column title="状态" dataIndex="status" />
            
            {/* <Column title="接车服务顾问" dataIndex="userName" /> */}
            {/* <Column title="库房名称" dataIndex="storageName" /> */}
            {/* <Column title="订件数量" dataIndex="splitCnt" /> */}
           
            <Column
              title="进度"
              fixed="right"
              width={100}
              render={(t, _: ListVO) => (
                <a onClick={() => process(_.waitListIds)}>查看</a>
          )}
            />
          </Table>
          <ProcessModal visible={currentInfo.visible} processItem={currentInfo.item} onCancel={() => setCurrentInfo({visible: false, item: [], loading: false})} />
        </Spin>
      </Card>
    </PageHeaderWrapper>
  );
}