<template>
	<div :key="value" :class="baseClassName">
		<a-tooltip v-for="item in options" :key="item.key" :title="$t(item.name)">
			<div
				:class="`${baseClassName}-item ${baseClassName}-item-${item.key}`"
				:style="item.disable ? disableStyle : {}"
				@click="handleChange(item)"
			>
				<div :class="`${baseClassName}-select-icon`" :style="{ display: value === item.key ? 'block' : 'none' }">
					<icon-font
						type="icon-checked"
						style="margin-top: -14px; margin-left: -14px; font-size: 24px"
						:style="{ color: token.colorPrimary }"
					/>
				</div>
			</div>
		</a-tooltip>
	</div>
</template>
<script lang="ts" setup>
	import { theme } from 'ant-design-vue'

	const props = withDefaults(
		defineProps<{
			value: string
			options: Array<{
				key: string
				name: string
				disable?: boolean
			}>
		}>(),
		{ options: () => [] },
	)
	const { value, options } = toRefs(props)
	const baseClassName = 'ant-pro-setting-drawer-block-checkbox'
	const emit = defineEmits(['selectChange'])
	const disableStyle = computed(() => {
		return { cursor: 'not-allowed' }
	})
	const handleChange = (item: { key: string; disable?: boolean }) => {
		if (!item.disable) {
			emit('selectChange', item.key)
		}
	}
	const { useToken } = theme
	const { token } = useToken()
</script>
<style lang="css" scoped>
	.ant-pro-setting-drawer-block-checkbox {
		display: flex;
	}

	.ant-pro-setting-drawer-block-checkbox-item {
		position: relative;
		width: 44px;
		height: 36px;
		margin-right: 16px;
		overflow: hidden;
		cursor: pointer;
		background-color: #f0f2f5;
		border-radius: 4px;
		box-shadow: 0 1px 2.5px rgb(0 0 0 / 45%);
	}

	.ant-pro-setting-drawer-block-checkbox-item::before {
		position: absolute;
		top: 0;
		left: 0;
		width: 33%;
		height: 100%;
		content: '';
		background-color: #fff;
	}

	.ant-pro-setting-drawer-block-checkbox-item-side::before,
	.ant-pro-setting-drawer-block-checkbox-item-dark::before,
	.ant-pro-setting-drawer-block-checkbox-item-real-dark::before {
		z-index: 1;
		background-color: rgb(0 0 0 / 85%);
	}

	.ant-pro-setting-drawer-block-checkbox-item-real-dark {
		background-color: rgb(0 0 0 / 85%);
	}

	.ant-pro-setting-drawer-block-checkbox-item-top::before {
		display: none;
	}

	.ant-pro-setting-drawer-block-checkbox-item::after {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 25%;
		content: '';
		background-color: #fff;
	}

	.ant-pro-setting-drawer-block-checkbox-item-top::after,
	.ant-pro-setting-drawer-block-checkbox-item-mix::after,
	.ant-pro-setting-drawer-block-checkbox-item-real-dark::after {
		background-color: rgb(0 0 0 / 85%);
	}

	.ant-pro-setting-drawer-block-checkbox-item img {
		width: 48px;
	}

	.ant-pro-setting-drawer-block-checkbox-select-icon {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		padding-top: 15px;
		padding-left: 24px;
		font-size: 14px;
		font-weight: bold;
	}
</style>
