
import { connect } from "umi";
import ProList from "@ant-design/pro-list";
import { Space, Tag, Typography, Empty, Button, message, } from "antd";

import type { CurrentUser } from "umi";
import type { ConnectState } from "@/models/connect";
import type { CommonTypeModel } from "@/services/options/typings";
import type {  ShopModel } from '../../data'


import moment from "moment";
import './index.less'


type ShopProps =
	{
		shopList: ShopModel[],
		shopTree: CommonTypeModel[],
		currentUser?: CurrentUser
	}

/**
 * @description: 我的门店组件
 * @param {ShopProps} ShopProps 组件接收的参数
 * @return {*} 函数组件
 */
const ShopCardList: React.FC<ShopProps> = ({ shopList, shopTree, currentUser }: ShopProps) => {
	
	const businessType = {
		1000: '自营',
		2000: '合作经营',
		3000: '固定租金',
		4000: '展销',
		0: '暂无'
	}

	// 生成服务区门店列表卡片
	const severpartCard = (myshopList: ShopModel[], title: string, index: number) => (
		<ProList<ShopModel>
			key={index}
			grid={{ gutter: 16, column: 2 }}
			className="shop-prolist-card"
			rowKey="SERVERPARTSHOP_ID"
			headerTitle={<Typography.Text>{title}</Typography.Text>}
			dataSource={myshopList}
			metas={{
				title: {
					dataIndex: 'SHOPNAME',
				},
				description: {
					dataIndex: 'desc',
					render: (_, record) => {
						return (
							<div>
								<div>经营时间：{`${record?.BUSINESS_DATE ? moment(record?.BUSINESS_DATE).format('YYYY/MM/DD') : ''} - ${record?.BUSINESS_ENDDATE ? moment(record?.BUSINESS_ENDDATE).format('YYYY/MM/DD') : ''}`}</div>

							</div>
						)
					}
				},
				subTitle: {
					dataIndex: 'BUSINESS_TYPE',
					valueType: "select",
					valueEnum: businessType,
					render: (_) => {
						return (
							<Space size={0}>
								{/* <Tag color="blue">{record?.SERVERPART_NAME}</Tag> */}
								<Tag color="#5BD8A6">{_}</Tag>
							</Space>
						);
					},
				},
				content: {
					dataIndex: 'BUSINESS_STATE',
					valueType: 'select',
					valueEnum: {
						3000: { text: '关闭', status: 'error' },
						2000: { text: '暂停', status: 'warning' },
						1000: { text: '运营中', status: 'processing' },
						1010: { text: '待运营', status: 'default' }
					}
				}
			}}
		/>

	)
	
	return (
		<div>
			{
				shopTree ? shopTree.map((n: CommonTypeModel, index) => severpartCard(shopList.filter((m: ShopModel) => m.SERVERPART_ID === n.value), n.label, index)) :
				<Empty />
			}
			
		</div >
	);
}

export default connect(({ user }: ConnectState) => ({
	currentUser: user.currentUser
}))(ShopCardList);