import React, { useState } from 'react';
import { Table, Divider } from "antd";
import { useStore } from '../index';
import LockDetailModal from './LockDetailModal';
import FlowDetailModal from './FlowDetailModal';
import PartShopModal from './PartShopModal';
import LockFlowModal from './LockFlowModal';

const { Column } = Table;

export default function Filter() {
  const { setParams, loading, paginationConfig, list, setVisible, setItem, item, fw, setIsprice} = useStore();
  const [visibleLockDetail, setVisibleLockDetail] = useState(false);
  const [visibleFlowDetail, setVisibleFlowDetail] = useState(false);
  const [visibleLockFlow, setVisibleLockFlow] = useState(false);

  return (
    <div>
      <Table
        size="small"
        loading={loading}
        pagination={paginationConfig}
        dataSource={list}
        rowKey={(item: PartRepertorySpace.Item) => `${item.id}`}
        onChange={(_pagination) => setParams({ ..._pagination }, true)}
      >
        <Column title="服务站名称" dataIndex="shopName" />
        <Column title="库房" dataIndex="storageName" />
        <Column title="配件编码" dataIndex="partCode" />
        <Column title="配件名称" dataIndex="partName" />
        <Column title="配件类型" dataIndex="partType" />
        <Column title="加权成本价（元）" dataIndex="costPrice" />
        <Column title="总库存数量" dataIndex="stock" />
        <Column title="库销比" dataIndex="ratio" />
        <Column
          title="锁定库存"
          dataIndex="lockStock"
          render={(t, it: PartRepertorySpace.Item) => <a onClick={() => { setVisibleLockDetail(true); setItem(it); }}>{t || 0}</a>}
        />
        <Column
          title="出库流水"
          render={(t, it: PartRepertorySpace.Item) => <a onClick={() => { setVisibleFlowDetail(true); setItem({...it, isOut: true}); }}>查看</a>}
        />
        <Column
          title="入库流水"
          render={(t, it: PartRepertorySpace.Item) => <a onClick={() => { setVisibleFlowDetail(true); setItem({...it, isOut: false}); }}>查看</a>}
        />
        <Column
          title="锁库流水"
          render={(t, it: PartRepertorySpace.Item) => <a onClick={() => { setVisibleLockFlow(true); setItem({...it, isLock: true}); }}>查看</a>}
        />
        <Column
          title="释放流水"
          render={(t, it: PartRepertorySpace.Item) => <a onClick={() => { setVisibleLockFlow(true); setItem({...it, isLock: false}); }}>查看</a>}
        />
        {fw ? (
          <Column
            title="操作"
            render={(text, _item: PartRepertorySpace.Item) => (
              <div style={{display: 'flex', alignItems: 'center'}}>
                <a onClick={() => { setVisible(true); setItem(_item); }}>修改</a>
                <Divider type="vertical" />
                <a onClick={() => { setVisible(true); setItem(_item); setIsprice(true); }}>修改价格</a>
              </div>
            )}
          />
        ) : (
          <Column
            title="操作"
            render={(text, _item: PartRepertorySpace.Item) => (
              <a onClick={() => { setVisible(true); setItem(_item); setIsprice(true); }}>修改价格</a>
            )}
          />
        )}
      </Table>
      <LockDetailModal item={item} visible={visibleLockDetail} onCancel={() => setVisibleLockDetail(false)} />
      <FlowDetailModal item={item} visible={visibleFlowDetail} onCancel={() => setVisibleFlowDetail(false)} />
      <LockFlowModal item={item} visible={visibleLockFlow} onCancel={() => setVisibleLockFlow(false)} />
      <PartShopModal />
    </div>
  );
}