import React from 'react';
import { Input } from 'antd';
import { useStore } from '../index';
import debounce from 'lodash/debounce';
import {getPartTypeApi} from '@/pages/pms/part/Repertory/api';
import useInitail from '@/hooks/useInitail';
import PmsSelect from '@/pages/pms/comonents/PmsSelect';

const { Search } = Input;

export default function Filter() {
  const { shops, setParams, storages, innerParams } = useStore();
  const { data: partTypeData } = useInitail(getPartTypeApi, [], {});

  const handleChangeKeywords = debounce((value: string) => {
    setParams({ current: 1, keyword: value }, true);
  }, 500);

  const isStock = (v:any) => {
    if (v == undefined) {
      setParams({current: 1, pageSize: 10, haveStock: undefined }, true);
      return;
    }
    const param = Boolean(v);
    setParams({current: 1, pageSize: 10, haveStock: param }, true);
  };

  const isSorter = (v:any) => {
    setParams({current: 1, pageSize: 10, orderBy: v }, true);
  };

  return (
    <div>
      <Search
        style={{ width: 180, marginRight: 10, marginBottom: 10 }}
        allowClear
        enterButton
        placeholder="配件编码|名称"
        onSearch={v => handleChangeKeywords(v)}
      />
      <PmsSelect
        style={{ width: 180, marginRight: 10, marginBottom: 10 }}
        allowClear
        value={innerParams.shopId}
        onChange={value => {
          const st: any = storages.find(it => it.shopId == value) || {};
          setParams({ current: 1, shopId: value, storageId: st.id }, true);
        }}
        placeholder="请选择服务站"
        options={shops
        .filter(it => (innerParams.shopId && it.id == innerParams.shopId) || !innerParams.shopId)
        .map((item: PmsStoragePartShop.Option) => ({value: item.id, label: item.name}))}
      />
      <PmsSelect
        style={{ width: 180, marginRight: 10, marginBottom: 10 }}
        allowClear
        value={innerParams.storageId}
        onChange={value => {
          const st: any = storages.find(it => it.id == value) || {};
          setParams({ current: 1, storageId: value, shopId: st.shopId }, true);
        }}
        placeholder="请选择库房"
        options={storages
        .filter(it => (innerParams.shopId && it.shopId == innerParams.shopId) || !innerParams.shopId)
        .map((item: PartStorageSpace.PageVO) => ({value: item.id, label: item.storageName}))}
      />
      <PmsSelect
        allowClear
        style={{ width: 180, marginRight: 10, marginBottom: 10 }}
        onChange={(type) => {
          setParams({ ...innerParams, current: 1, type }, true);
        }}
        placeholder="请选择配件类型"
        options={partTypeData.map((item: any) => ({value: item.value, label: item.label}))}
      />
      <PmsSelect
        allowClear
        placeholder="有无库存筛选"
        onChange={v => isStock(v)}
        style={{ width: 180, marginRight: 10, marginBottom: 10 }}
        options={[
          {value: 1, label: "有库存"},
          {value: 0, label: "无库存"},
        ]}
      />
      <PmsSelect
        placeholder="排序方式"
        defaultValue={18}
        onChange={v => isSorter(v)}
        style={{ width: 180 }}
        options={[
          {value: 18, label: "总库存降序"},
          {value: 21, label: "锁定库存降序"},
        ]}
      />
    </div>
  );
}