import { PlusOutlined } from '@ant-design/icons';
import React, { useState, useEffect, useRef } from 'react';
import { Button, message } from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import api from './service';

//页面 相当于 class
export default () => {
  //绑定
  const actionRef = useRef();
  //选中的行
  const [selectedRowsState, setSelectedRows] = useState([]);
  //获取店铺分类
  const [srdTypeList, setsrdTypeList] = useState([]);
  //获取店铺名称
  const [srdList, setsrdList] = useState([]);
  // //获取商品信息
  // const [goodsList, setgoodsList] = useState([]);
  // 获取店铺分类、商品名称信息
  useEffect(() => {
    function initsrdTypeList() {
      api.srdTypeList({ current: 1, pageSize: 20, status: '0' }).then((r) => {
        var arr = r.data.data;
        arr.forEach((element) => {
          element.storeTypeId = element.id;
          element.text = element.name;
        });
        setsrdTypeList(arr);
      });
    }
    //店铺名称
    function initsrdList() {
      api.srdList({ current: 1, pageSize: 20, status: '0' }).then((r) => {
        var arr = r.data.data;
        arr.forEach((element) => {
          element.store_Id = element.id;
          element.text = element.name;
        });
        setsrdList(arr);
      });
    }
    // //物料信息
    // function initgoodsList() {
    //   api.goodsList({ current: 1, pageSize: 20, status: '0' }).then((r) => {
    //     var arr = r.data.data;
    //     arr.forEach((element) => {
    //       element.goodsId = element.id;
    //       element.text = element.name;
    //     });
    //     setgoodsList(arr);
    //   });
    // }
    initsrdTypeList();
    initsrdList();
    //initgoodsList();
  }, []);

  /**
   * 一键补货
   */
  function handleManage() {
    api.ReplenishmentGoods(selectedRowsState);
  }
  const columns = [
    {
      title: '主键',
      dataIndex: 'id',
      tip: '规则名称是唯一的 key',
      hideInSearch: true,
      hideInTable: true,
    },
    // {
    //   title: '物料名称',
    //   dataIndex: 'goodsId',
    //   hideInTable: true,
    //   valueType: 'select',
    //   valueEnum: goodsList,
    // },
    {
      title: '物料名称',
      dataIndex: 'goodsName',
      valueType: 'textarea',
      hideInSearch: true,
    },
    {
      title: '配料存放位置',
      dataIndex: 'batching_Loc',
      valueType: 'textarea',
      hideInSearch: true,
    },
    {
      title: '配料余量',
      dataIndex: 'batching_Count',
      valueType: 'textarea',
      hideInSearch: true,
    },
    {
      //大于20%,为正常，低于20%为低库存（配料余量/总的数量）
      title: '库存预警',
      dataIndex: 'status',
      hideInForm: true,
      hideInSearch: true,
      valueEnum: {
        0: {
          text: '正常',
          status: 'Processing',
        },
        1: {
          text: '低库存',
          status: 'Success',
        },
      },
    },
  ];

  return (
    <PageContainer>
      <ProTable
        headerTitle="店铺实时库存查询"
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
        }}
        columns={columns}
        toolBarRender={() => [
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              handleManage();
            }}
          >
            一键补货
          </Button>,
        ]}
        //数据绑定
        request={async (params) => {
          var queryData = [];
          var total = 0;
          if (params.store_Id != undefined) {
            params.store_Id = srdList[params.store_Id].store_Id;
          }
          if (params.storeTypeId != undefined) {
            params.storeTypeId = srdTypeList[params.storeTypeId].storeTypeId;
          }
          // if (params.goodsId != undefined) {
          //   params.goodsId = goodsList[params.goodsId].goodsId;
          // }
          await api.storeBatchList(params).then((r) => {
            queryData = r.data.data;
            total = r.data.total;
          });
          setSelectedRows(queryData);
          return {
            data: queryData,
            success: true,
            total: total,
          };
        }}
        // 每行选择点击事件
        rowSelection={{
          onChange: (_, selectedRows) => {
            setSelectedRows(selectedRows);
          },
        }}
      ></ProTable>
    </PageContainer>
  );
};
