<template>
	<page-container sub-title="我是一段描述信息" :tabs="tabs" :current-tab="currentTab" @tab-changed="tabChanged">
		<template #tags>
			<a-tag color="blue">Running</a-tag>
		</template>
		<template #main-content>
			<a-descriptions size="small" :column="2">
				<a-descriptions-item label="Created">Lili Qu</a-descriptions-item>
				<a-descriptions-item label="Association">
					<a>421421</a>
				</a-descriptions-item>
				<a-descriptions-item label="Creation Time">2017-01-10</a-descriptions-item>
				<a-descriptions-item label="Effective Time">2017-10-10</a-descriptions-item>
				<a-descriptions-item label="Remarks">Gonghu Road, Xihu District, Hangzhou, Zhejiang, China</a-descriptions-item>
			</a-descriptions>
		</template>
		<template #extra-content>
			<a-statistic
				title="Status"
				value="Pending"
				:style="{
					marginRight: '32px',
				}"
			/>
			<a-statistic title="Price" prefix="$" :value="568.08" />
		</template>
		<template #ops>
			<a-button key="3">Operation</a-button>
			<a-button key="2">Operation</a-button>
			<a-button key="1" type="primary" @click="test">Primary</a-button>
		</template>
		sss{{ app.layout.fixSiderbar }}{{ app.layout.fixedHeader }}
		<br />
		Really {{ currentTab }}
	</page-container>
</template>
<script lang="ts" setup>
	import { useAppStore } from '@/stores/app'
	import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
	import { Modal } from 'ant-design-vue'
	import { Key } from 'ant-design-vue/es/_util/type'
	import { createVNode } from 'vue'

	const app = useAppStore()
	const tabs = ref([
		{
			key: 'a',
			title: 'A',
			icon: 'icon-edit',
		},
		{
			key: 'b',
			title: 'B',
			icon: 'icon-plus',
		},
		{
			key: 'c',
			title: 'C',
		},
	])
	const currentTab = ref('a')
	const tabChanged = (key: Key) => {
		currentTab.value = key as string
	}
	const test = () => {
		Modal.confirm({
			title: 'Do you Want to delete these items?',
			icon: createVNode(ExclamationCircleOutlined),
			content: createVNode('div', { style: 'color:red;' }, 'Some descriptions'),
			onOk() {
				console.log('OK')
			},
			onCancel() {
				console.log('Cancel')
			},
			class: 'test',
		})
	}
</script>
