/**
 * @description 页卡
 */
import React from "react"
import { Tabs, observer, StateManage } from "zion-ui"
import { controlKey } from "../config"

export const TabsCard = observer(function () {
	const { dataSource, activeKey } = StateManage.get(controlKey.tabsCard)
	return <div style={{ background: "#fff", height: "36px" }}>
		<Tabs type="editable-card"
			hideAdd
			size="small"
			onChange={(activeKey) => {
				StateManage.set(controlKey.tabsCard, { activeKey })
				const selectedKeys = activeKey.split(".")[activeKey.split(".").length - 1]
				StateManage.set(controlKey.menu, { selectedKeys: [selectedKeys] })
			}}
			onEdit={(targetKey, action) => {
				dataSource.forEach((data, index) => {
					if (data["key"] == targetKey && targetKey == activeKey) {
						let nextActiveData = {}
						const next = dataSource[index + 1]
						if (next) {
							nextActiveData = next
						} else {
							const prev = dataSource[index - 1]
							nextActiveData = prev
						}
						const nextActiveKey = nextActiveData["key"]
						StateManage.set(controlKey.tabsCard, { activeKey: nextActiveKey })
						const selectedKeys = nextActiveKey.split(".")[nextActiveKey.split(".").length - 1]
						StateManage.set(controlKey.menu, { selectedKeys: [selectedKeys] })
					}
				})
				StateManage.set(controlKey.tabsCard, { dataSource: dataSource.filter(data => data["key"] !== targetKey) })
			}}
			activeKey={activeKey}>
			{dataSource.map(data => {
				return <Tabs.TabPane
					closable={dataSource.length === 1 ? false : true}
					tab={data["label"].split(".")[data["label"].split(".").length - 1]}
					key={data["key"]}></Tabs.TabPane>
			})}
		</Tabs>
	</div>
})