<template>
	<div>
		<a-float-button v-if="!open" shape="square" type="primary" :style="hanldStyle" @click="open = !open">
			<template #icon>
				<icon-font type="icon-cogs" />
			</template>
		</a-float-button>
		<a-drawer
			v-model:open="open"
			:width="width"
			placement="right"
			:closable="false"
			:body-style="{ padding: '12px 0px 0px 0px' }"
		>
			<a-space direction="vertical" size="middle" style="width: 100%">
				<a-card size="small" :bordered="false" :title="$t('layout.setting.theme.algorithm')">
					<block-checkbox
						:value="app.layout.value.navTheme"
						:options="themeOptions"
						@select-change="themeChanged"
					></block-checkbox>
				</a-card>

				<a-card size="small" :bordered="false" :title="$t('layout.setting.themeColor')">
					<a-row style="margin-bottom: 12px">
						<a-col :span="24">
							<theme-color-radio v-for="option in themeColors" :key="option.key" :option="option"></theme-color-radio>
						</a-col>
					</a-row>
					<a-row style="margin-bottom: 12px">
						<a-col :span="12">{{ $t('layout.setting.colorPicker') }}</a-col>
						<a-col :span="12" style="text-align: right">
							<a-input
								v-model:value="app.theme.value.primaryColor"
								:bordered="false"
								type="color"
								style="width: 44px"
							></a-input>
						</a-col>
					</a-row>
				</a-card>
				<a-card size="small" :bordered="false" :title="$t('layout.setting.navMode')">
					<block-checkbox
						:value="app.layout.value.layout"
						:options="layoutOptions"
						@select-change="layoutChanged"
					></block-checkbox>
				</a-card>
				<a-card size="small" :bordered="false" :title="$t('layout.setting.layout')">
					<a-row style="margin-bottom: 12px">
						<a-col :span="12">{{ $t('layout.setting.fixedHeader') }}</a-col>
						<a-col :span="12" style="text-align: right">
							<a-switch
								v-model:checked="app.layout.value.fixedHeader"
								:checked-children="$t('layout.setting.on')"
								:un-checked-children="$t('layout.setting.off')"
							/>
						</a-col>
					</a-row>
					<a-row style="margin-bottom: 12px">
						<a-col :span="12">{{ $t('layout.setting.fixSiderbar') }}</a-col>
						<a-col :span="12" style="text-align: right">
							<a-switch
								v-model:checked="app.layout.value.fixSiderbar"
								:disabled="app.layout.value.layout === 'top'"
								:checked-children="$t('layout.setting.on')"
								:un-checked-children="$t('layout.setting.off')"
							/>
						</a-col>
					</a-row>
					<a-row style="margin-bottom: 12px">
						<a-col :span="12">{{ $t('layout.setting.splitMenus') }}</a-col>
						<a-col :span="12" style="text-align: right">
							<a-switch
								v-model:checked="app.layout.value.splitMenus"
								:disabled="app.layout.value.layout !== 'mix'"
								:checked-children="$t('layout.setting.on')"
								:un-checked-children="$t('layout.setting.off')"
							/>
						</a-col>
					</a-row>
				</a-card>
				<a-card size="small" :bordered="false" :title="$t('layout.setting.other')">
					<a-row style="margin-bottom: 12px">
						<a-col :span="12">{{ $t('layout.setting.colorWeak') }}</a-col>
						<a-col :span="12" style="text-align: right">
							<a-switch
								v-model:checked="app.layout.value.colorWeak"
								:checked-children="$t('layout.setting.on')"
								:un-checked-children="$t('layout.setting.off')"
							/>
						</a-col>
					</a-row>
					<a-row style="margin-bottom: 12px">
						<a-col :span="12">{{ $t('layout.setting.gray') }}</a-col>
						<a-col :span="12" style="text-align: right">
							<a-switch
								v-model:checked="app.layout.value.gray"
								:checked-children="$t('layout.setting.on')"
								:un-checked-children="$t('layout.setting.off')"
							/>
						</a-col>
					</a-row>
				</a-card>
			</a-space>
		</a-drawer>
	</div>
</template>
<script lang="ts" setup>
	import BlockCheckbox from './block-checkbox.vue'
	import ThemeColorRadio from './theme-color-radio.vue'

	import { useI18n } from 'vue-i18n'
	import { useAppStore } from '@/stores/app'
	const open = ref<boolean>(false)
	const width = ref(300)
	const hanldStyle = computed(() => {
		return { bottom: '50%', right: '0px' }
	})

	const layoutOptions = [
		{
			key: 'side',
			name: 'layout.setting.nav.side',
		},
		{
			key: 'top',
			name: 'layout.setting.nav.top',
		},
		{
			key: 'mix',
			name: 'layout.setting.nav.mix',
		},
	]
	const themeOptions = [
		{
			key: 'light',
			name: 'layout.setting.theme.mode.light',
		},
		{
			key: 'dark',
			name: 'layout.setting.theme.mode.dark',
		},
		{
			key: 'real-dark',
			name: 'layout.setting.theme.mode.realDark',
		},
	]

	import { colorList } from '@/hooks/useTheme'
	import { storeToRefs } from 'pinia'

	const app = storeToRefs(useAppStore())

	const themeColors = computed(() => {
		return colorList.map((item) => {
			return Object.assign(item, { name: useI18n().t(`layout.setting.theme.${item.key}`) })
		})
	})
	const layoutChanged = (key: 'side' | 'top' | 'mix') => {
		app.layout.value.layout = key
		if (key !== 'side') {
			app.layout.value.collapsed = false
		}
	}
	const themeChanged = (key: 'light' | 'dark' | 'real-dark') => {
		console.log(key)
		app.layout.value.navTheme = key
		if (key !== 'real-dark') {
			//处理暗黑模式
		}
	}
</script>
