import { Button, message, Input, Drawer, Popconfirm, Modal } from 'antd';
import React, { useState, useRef, useEffect } from 'react';
import ProTable from '@ant-design/pro-table';
import { getUintList, getTypeList, GetProductList } from './services';

//页面 相当于 class
const Productlist = (props) => {
  const [selectedRowsState, setSelectedRows] = useState([]);
  const [UintList, setUintList] = useState();
  const [TypeList, setTypeList] = useState();
  useEffect(() => {
    const initUintList = async (value) => {
      var data = await getUintList();
      var list = [];
      if (data.data.length > 0) {
        data.data.forEach((item) => {
          list.push({ stockuint: item.id, text: item.name, value: item.id, label: item.name });
        });
      }
      setUintList(list);
    };
    const initTypeList = async (value) => {
      var data = await getTypeList();
      var list = [];
      if (data.data.length > 0) {
        data.data.forEach((item) => {
          list.push({ typeid: item.id, text: item.name, value: item.id, label: item.name });
        });
      }
      setTypeList(list);
    };
    initUintList();
    initTypeList();
  }, []);
  /** 国际化配置 */

  const columns = [
    {
      title: '多编码id',
      dataIndex: 'codeId',
      tip: '规则名称是唯一的 key',
      hideInSearch: true,
      hideInTable: true,
    },
    {
      title: '物料id',
      dataIndex: 'id',
      hideInSearch: true,
      hideInTable: true,
    },
    {
      title: '条码',
      dataIndex: 'code',
    },
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '库存单位',
      dataIndex: 'stockUint',
      valueType: 'select',
      fieldProps: {
        options: UintList,
      },
    },
    {
      title: '包装单位',
      dataIndex: 'packUnit',
      valueType: 'select',
      fieldProps: {
        options: UintList,
      },
    },
    {
      title: '换算比例',
      dataIndex: 'proportion',
    },
    {
      title: '类别',
      dataIndex: 'typeID',
      valueType: 'select',
      fieldProps: {
        options: TypeList,
      },
    },
    {
      title: '规格',
      dataIndex: 'specs',
    },
    {
      title: '物料属性',
      dataIndex: 'aittribute',
      valueEnum: {
        0: {
          text: '成品',
        },
        1: {
          text: '半成品',
        },
        2: {
          text: '易耗品',
        },
      },
    },
  ];

  return (
    <Modal
      width={1200}
      bodyStyle={{ padding: '32px 40px 48px' }}
      destroyOnClose
      title="选择商品"
      visible={props.IsVisible}
      onCancel={() => props.onCancel()}
      onOk={() => props.onSubmit(selectedRowsState)}
      maskClosable={false}
    >
      <ProTable
        headerTitle="商品信息"
        rowKey="codeId"
        pagination={{ defaultPageSize: 30 }}
        // search={{
        //   labelWidth: 120,
        // }}
        search={false}
        toolBarRender={false}
        //数据绑定
        request={async (params) => {
          var Data = [];
          var total = 0;
          await GetProductList(params).then((r) => {
            Data = r.data.data;
            total = r.data.total;
          });
          return {
            data: Data,
            success: true,
            total: total,
          };
        }}
        columns={columns}
        rowSelection={{
          onChange: (_, selectedRows) => setSelectedRows(selectedRows),
        }}
      />
    </Modal>
  );
};

export default Productlist;
