import React, { useEffect, useState } from 'react';
import { Input } from 'antd';
import { useStore } from '../index';
import debounce from 'lodash/debounce';
import { planPoolTypeData, getUrl } from '@/pages/pms/entity';
import usePagination from "@/hooks/usePagination";
import {getStoragePage} from "@/pages/pms/storage/StorageManage/api";
import useInitail from "@/hooks/useInitail";
import * as api from "@/pages/pms/storage/partShop/api";
import PmsSelect from '@/pages/pms/comonents/PmsSelect';

const { Search } = Input;

export default function Filter() {
  const { list: storages } = usePagination<PartStorageSpace.PageVO>(getStoragePage, {pageSize: 1000});
  const { data: shops } = useInitail<PmsStoragePartShop.Option[], {}>(api.getShopApi, [], {});
  const { dfParams, setDfParams, partTypeData } = useStore();
  const [url, setUrl] = useState('/api/pms/erp/plan/pool/export');

  useEffect(() => {
    setUrl(getUrl('/api/pms/erp/plan/pool/export', dfParams));
  }, [dfParams]);

  const handleChangeKeywords = debounce((value: string) => {
    setDfParams({ ...dfParams, current: 1, keywords: value });
  }, 500);

  return (
    <div style={{display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-start', marginBottom: 10, alignItems: 'center'}}>
      <PmsSelect
        style={{ width: 200, marginRight: 10}}
        allowClear
        value={dfParams.shopId}
        onChange={value => {
          const st: any = storages.find(it => it.shopId == value) || {};
          setDfParams({ ...dfParams, current: 1, shopId: value, storageId: st.id });
        }}
        placeholder="请选择服务站"
        options={shops
        .filter(it => (dfParams.shopId && it.id == dfParams.shopId) || !dfParams.shopId)
        .map((item: PmsStoragePartShop.Option) => ({value: item.id, label: item.name}))}
      />
      <PmsSelect
        style={{ width: 200, marginRight: 10}}
        allowClear
        value={dfParams.storageId}
        onChange={value => {
          const st: any = storages.find(it => it.id == value) || {};
          setDfParams({ ...dfParams, current: 1, storageId: value, shopId: st.shopId });
        }}
        placeholder="请选择库房"
        options={storages
        .filter(it => (dfParams.shopId && it.shopId == dfParams.shopId) || !dfParams.shopId)
        .map((item: PartStorageSpace.PageVO) => ({value: item.id, label: item.storageName}))}
      />
      <PmsSelect
        allowClear
        style={{ width: 200, marginRight: 10}}
        onChange={(poolType) => {
          setDfParams({ ...dfParams, current: 1, poolType });
        }}
        placeholder="请选择来源类型"
        options={planPoolTypeData.map(i => ({value: i.value, label: i.label}))}
      />
      <PmsSelect
        allowClear
        style={{ width: 200, marginRight: 10}}
        onChange={(partType) => setDfParams({ ...dfParams, current: 1, partType })}
        placeholder="请选择配件类型"
        options={partTypeData.map(i => ({value: i.value, label: i.label}))}
      />
      <Search
        style={{ width: 200, marginRight: 10}}
        allowClear
        enterButton
        placeholder="配件编码|名称"
        onSearch={v => handleChangeKeywords(v)}
      />
      <a 
        href={url}
      >
        导出计划池表格
      </a>
    </div>
  );
}