<!--
@ 作者: 秦东
@ 时间: 2024-02-28 08:43:59
@ 备注: 文本设置
-->
<script lang='ts' setup>
import { reactive, computed, toRefs, ref, watch, inject,onBeforeMount  } from 'vue'
const props = defineProps({
	layouytStyle:{
		type:Object,
		default(){
			return {}
		}
	},
    place:{
		type:String,
		default:""
	}
});

const ziTiList = [
	{
		value:"宋体",
		label:"宋体",
	},
	{
		value:"微软雅黑",
		label:"微软雅黑",
	},
	{
		value:"黑体",
		label:"黑体",
	},
	{
		value:"Arial",
		label:"Arial",
	},
	{
		value:"Bitter",
		label:"Bitter",
	},
	{
		value:"Verdana",
		label:"Verdana",
	},
	{
		value:"Geneva",
		label:"Geneva",
	},
	{
		value:"sans-serif",
		label:"sans-serif",
	}
];
const fontWeightList = [
    {
		value:"100",
		label:"100",
	},
	{
		value:"400",
		label:"400",
	},
	{
		value:"700",
		label:"700",
	},
	{
		value:"900",
		label:"900",
	},
    {
		value:"bolder",
		label:"bolder",
	}
];
</script>
<template>
    <table style="width:100%">
        <tr>
			<td width="70">字号</td>
			<td>
				<el-input v-model="props.layouytStyle.fontSize">
					<template #append>PX</template>
				</el-input>
			</td>
		</tr>
        <tr>
			<td>字体</td>
			<td>
				<el-select
                    v-model="props.layouytStyle.fontFamily"
                    class="m-2"
                    placeholder="选择字体"
                >
                    <el-option
                        v-for="item in ziTiList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
			</td>
		</tr>
        <tr>
			<td width="70">行高</td>
			<td>
				<el-input v-model="props.layouytStyle.fontHight">
					<template #append>PX</template>
				</el-input>
			</td>
		</tr>
        <tr>
			<td >字重</td>
			<td>
                <el-select
                    v-model="props.layouytStyle.fontWeight"
                    class="m-2"
                    placeholder="选择字重"
                >
                    <el-option
                        v-for="item in fontWeightList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
			</td>
		</tr>
        <tr>
            <td width="50">颜色</td>
            <td>
                <el-color-picker v-model="props.layouytStyle.fontColor" size="default" />
                {{ props.layouytStyle.backgroundColor }}
            </td>
        </tr>
    </table>
</template>
<style  lang='scss' scoped>

</style>