<template>
	<div class="my-textTools">
		<input class="color" type="color" v-model="textStyle['--font-color']" ref="colorInput" @change="changeColor" />
		<div class="interval"></div>
		<div class="fontFamily">
			<my-select v-model="textStyle['--font-family']" @change="changeFontFamily"  :list="fontFamilyList[locale]" >
				<template #option="{ item }">
					<span :style="{'font-family': item.value,}">{{ item.label }}</span>
				</template>
			</my-select>
		</div>
		<div class="interval"></div>
		<div class="size">
			<div class="label" @click="changeFontSize(-1)">
				-
			</div>
			<div class="value">{{ parseInt(props.textStyle?.['--font-size']) }}</div>
			<div class="label" @click="changeFontSize(1)">
				+
			</div>
		</div>
		<div class="interval"></div>
		<div class="fontStyle">
			<div class="label" @click="changeFontStyle('--font-weight',['bold','normal'])" :class="{'active': props.textStyle['--font-weight'] === 'bold'}">
				<svg-icon name="textToolsweight" size="12" size-unit="px" color="#000" />
			</div>
			<div class="label" @click="changeFontStyle('--font-style',['italic','normal'])" :class="{'active': props.textStyle['--font-style'] === 'italic'}">
				<svg-icon name="textToolsStyle" size="12" size-unit="px" color="#000" />
			</div>
			<div class="label" @click="changeFontStyle('--font-decoration',['underline','none'])" :class="{'active': props.textStyle['--font-decoration'] === 'underline'}">
				<svg-icon name="textToolsDecoration" size="12" size-unit="px" color="#000" />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { reactive, ref, markRaw, onMounted } from 'vue'
	import { useI18n } from 'vue-i18n'
	const emit = defineEmits(['update:textStyle'])
	const { locale, t } = useI18n()
	const fontFamilyList = ref({
		ENGLISH: [
			{ value:'Medium',label:'Medium' },
			{ value:'Arial',label:'Arial' },
			{ value:'Helvetica',label:'Helvetica' },
			{ value:'Times New Roman',label:'Times New Roman' },
			{ value:'Georgia',label:'Georgia' },
			{ value:'Verdana',label:'Verdana' },
			{ value:'Courier New',label:'Courier New' },
			{ value:'Lucida Console',label:'Lucida Console' },
			{ value:'General Sans',label:'General Sans' },
			{ value:'Inter',label:'Inter' },
		],
		CHINESE_SIMPLIFIED: [
			{ value:'Medium',label:'Medium' },
			{ value:'微软雅黑',label:'微软雅黑' },
			{ value:'宋体',label:'宋体' },
			{ value:'黑体',label:'黑体' },
			{ value:'仿宋',label:'仿宋' },
			{ value:'楷体',label:'楷体' },
			{ value:'苹方',label:'苹方' },
			{ value:'华文黑体',label:'华文黑体' },
			{ value:'华文宋体',label:'华文宋体' },
			{ value:'华文楷体',label:'华文楷体' },
			{ value:'思源黑体',label:'思源黑体' },
			{ value:'MiSans',label:'MiSans' },
		]
	})
	const props = defineProps({
		textStyle: { type: Object },
	})
	const changeFontFamily = (val: string) => {
		props.textStyle['--font-family'] = val
		onChange()
	}
	const changeColor = (e: Event) => {
		const target = e.target as HTMLInputElement
		props.textStyle['--font-color'] = target.value
		onChange()
	}
	const changeFontSize = (val: number) => {
		if (parseInt(props.textStyle?.['--font-size']) + val <= 9 || parseInt(props.textStyle?.['--font-size']) + val >= 51) {	
			return
		}
		props.textStyle['--font-size'] = parseInt(props.textStyle?.['--font-size']) + val + 'px'
		onChange()
	}
	const changeFontStyle = (key: string,value: string[]) => {
		props.textStyle[key] = props.textStyle[key] === value[0] ? value[1] : value[0]
		onChange()
	}
	const onChange = () => {
		emit('update:textStyle', props.textStyle)
	}
</script>

<style lang="less" scoped>
	.my-textTools {
		height: 100%;
		display: flex;
		padding: 6px 19px;
		align-items: center;
		.interval{
			margin: 0 16px;
			height: 25px;
			width: 1px;
			background-color: #EBEBEB;
		}
		.label{
			height: 20px;
			width: 20px;
			border-radius: 2px;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 12px;
			&:hover{
				background-color: #e5e5e5;
			}
			&.active{
				background-color: #e5e5e5;
			}
		}
		.fontFamily{
			width: 103px;
			--el-text-color-regular: #000
		}
		.color{
			width: 55px;
			height: 25px;
		}
		.size{
			display: flex;
			align-items: center;
			gap: 16px;
		}
		.fontStyle{
			display: flex;
			gap: 16px;
			
		}
	}
</style>
