import { PlusOutlined } from '@ant-design/icons';
import { Tabs, message, Button } from 'antd';
const { TabPane } = Tabs;
import React, { useState, useRef, useEffect } from 'react';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import { GetShopFoodMenuPage, GetStoreInfoPage } from "./services"
import ProTable from '@ant-design/pro-table';
import CreateForm from './components/CreateForm';
import LogForm from './components/Logs';
import { UnorderedListOutlined } from '@ant-design/icons';
import { history } from 'umi';
const key = 'message';
import MenuGoods from "./components/MenuGoods";
import FranchiseeMenu from "./components/FranchiseeMenu";

const storeGoodsInfo = (props) => {

	const actionRef = useRef();
	// 门店列表
	const [storeLsit, setStoreLsit] = useState([]);
	// 当前选中的门店
	const [currStore, setCurrStore] = useState();
	// 是否展示菜品弹窗
	const [showModal, setShowModal] = useState(false);
	//当前选中的菜谱
	const [currFoodMenu, setCurrFoodMenu] = useState();
	//是否展示 关联加盟商菜谱弹窗
	const [franchiseeMenuModal, setFranchiseeMenuModal] = useState(false);

	/**
	 * 获取店铺列表
	 * @param {*} page 
	 */
	const getStoreInfoPageInfo = async () => {
		const response = await GetStoreInfoPage({ current: 1, pageSize: 999 });
		if (response.statusCode === 200) {
			response.data?.forEach(item => {
				item.value = item.id;
				item.label = item.name;
			});
			if (response.data.length > 0) {
				setCurrStore(response.data[0].id);
			}
			setStoreLsit(response.data);
		} else {
			message.error(JSON.stringify(response.errors) || '获取门店列表失败！');
		}
	}

	const columns = [
		{
			title: '店铺',
			dataIndex: 'storeId',
			valueType: 'select',
			hideInTable: true,
			fieldProps: {
				options: storeLsit,
				value: currStore,
				onChange: (value) => {
					setCurrStore(value);
				}
			}
		},
		{
			title: '菜谱名称',
			dataIndex: 'name',
			hideInSearch: true
		},
		{
			title: '操作',
			dataIndex: 'option',
			valueType: 'option',
			render: (_, record) => [
				<a
					key="food-menu-list"
					onClick={() => {
						setCurrFoodMenu(record);
						setShowModal(true);
					}}
				>
					菜谱商品
				</a>,
			],
		},
	];


	useEffect(() => {
		getStoreInfoPageInfo();
	}, []);

	useEffect(() => {
		if (currStore && actionRef.current) {
			actionRef.current.reload();
		}
	}, [currStore]);

	return <PageContainer>
		<ProTable
			columns={columns}
			actionRef={actionRef}
			pagination={{
				pageSize: 10
			}}
			request={async (params = {}, sort, filter) => {
				if (!currStore) return [];
				const response = await GetShopFoodMenuPage({
					...params,
					storeId: currStore
				});
				if (response.statusCode === 200) {
					return {
						data: response.data.data,
						success: true,
						total: response.data.total,
					};
				}
				return []
			}}
			rowKey="id"
			headerTitle="菜谱列表"
			toolBarRender={() => [
				<Button
					key="button"
					icon={<PlusOutlined />}
					onClick={() => {
						setFranchiseeMenuModal(true);
					}}
					type="primary"
				>
					关联加盟商菜谱
				</Button>
			]}
		/>
		{
			showModal && currStore && currFoodMenu && <MenuGoods
				foodMenu={currFoodMenu}
				open={showModal}
				storeId={currStore}
				onCancel={() => setShowModal(false)}
				onOk={() => setShowModal(false)}
			>

			</MenuGoods>
		}

		{
			franchiseeMenuModal && currStore && <FranchiseeMenu
				open={franchiseeMenuModal}
				storeId={currStore}
				onCancel={() => setFranchiseeMenuModal(false)}
				onOk={() => {
					setFranchiseeMenuModal(false);
					actionRef.current?.reload();
				}}
			>

			</FranchiseeMenu>
		}
	</PageContainer>;
};

export default storeGoodsInfo;
