import React, {useEffect, useState} from 'react';
import {Modal, Table, Button} from 'antd';
import { getLockFlowDetail } from '@/pages/pms/storage/partShop/api';
import usePagination from '@/hooks/usePagination';

interface Props {
  item?: any
  visible: boolean
  onCancel: () => any
}
const {Column} = Table;
export default function Index(props: Props) {
  const {item, visible, onCancel} = props;
  const [delay, setDelay] = useState(true);
  const { list, loading, setParams, paginationConfig, setList } = usePagination<PmsStoragePartShop.FlowVO>(getLockFlowDetail, {}, { delay });

  useEffect(() => {
    if (item.shopId && item.partId && visible) {
      setParams({ partId: item.partId, shopId: item.shopId, isLock: item.isLock }, true);
      setDelay(false);
    } else {
      setList([]);
    }
  }, [visible, item.partId]);

  return (
    <Modal
      title={`${item.isLock ? '锁定库存' : '释放库存'}流水`}
      width={1000}
      visible={visible}
      maskClosable={false}
      onCancel={onCancel}
      footer={[
        <Button key="1" onClick={onCancel}>取消</Button>,
      ]}
    >
      <Table 
        loading={loading}
        dataSource={list}
        rowKey={(v: PmsStoragePartShop.FlowVO) => `${v.type}_${v.typeId}`}
        pagination={paginationConfig}
      >
        <Column title="配件数量" dataIndex="partCnt" />
        <Column title="单号" dataIndex="remark" render={t => t || "--"} />
        <Column 
          title="详情" 
          dataIndex="text" 
          width={350}
          render={(t: string, it: PmsStoragePartShop.FlowVO) => {
            const obj = JSON.parse(t || '{}');
            return (
              <div>
                {!!obj.type && <div>{`类型: ${obj.type}`}</div>}
                {!!obj.serviceCatName && <div>{`进站类型: ${obj.serviceCatName}`}</div>}
                {!!obj.exclusiveAdviser && <div>{`专属顾问: ${obj.exclusiveAdviser}`}</div>}
                {!!obj.shopLinkmanName && <div>{`服务顾问: ${obj.shopLinkmanName}`}</div>}
                {!!obj.receiverName && <div>{`服务顾问: ${obj.receiverName}`}</div>}
                {!!obj.plateNo && <div>{`车牌号: ${obj.plateNo}`}</div>}
                {!!obj.ownerName && <div>{`车主: ${obj.ownerName}`}</div>}
                {!!obj.vin && <div>{`VIN: ${obj.vin}`}</div>}
                {!!obj.userName && <div>{`操作账号: ${obj.userName}`}</div>}
                {!!obj.fixRemark && <div>{`备注: ${obj.fixRemark}`}</div>}
              </div>
            );
          }}
        />
        <Column title={`${item.isLock ? '锁库' : '释放'}时间`} dataIndex="recordTime" />
      </Table>
    </Modal>
  );
}