<!--
@ 作者: 秦东
@ 时间: 2024-02-23 14:58:56
@ 备注: 组件背景
-->
<script lang='ts' setup>
import { reactive, computed, toRefs, ref, watch, inject } from 'vue'
const props = defineProps({
	layouytStyle:{
		type:Object,
		default(){
			return {}
		}
	}
});
/**
@ 作者: 秦东
@ 时间: 2024-02-23 15:19:57
@ 功能: 监听颜色
*/
watch(()=>props.layouytStyle.backgroundColor,(val : any)=>{
    // console.log("监听颜色-----1--->",val)
    if(val == null || val.length == 0 || val == ""){
        delete props.layouytStyle.backgroundColor;
    }
    // Object.assign(store.controlAttr.styles.divStyle, val)
},
{
    deep: true
});
const transparency = ref(100)
watch(()=>transparency,(val : any)=>{
    // if(val.value == null || val.value.length == 0 || val.value == "" || val.value == 0 || val.value == "0"){
    //     delete props.layouytStyle.transparency;
    // }else{
    //     props.layouytStyle.transparency = val.value
    // }
    props.layouytStyle.transparency = val.value
},
{
    deep: true
});
if(props.layouytStyle.transparency){
    if(props.layouytStyle.transparency == "" || props.layouytStyle.transparency == null){
		props.layouytStyle.transparency = 100
	}
}else{
	props.layouytStyle.transparency = 100
}
// if(props.layouytStyle.backgroundColor){
//     if(props.layouytStyle.backgroundColor == "" || props.layouytStyle.backgroundColor == null){
// 		props.layouytStyle.backgroundColor = 'rgba(255, 255, 255, 1)'
// 	}
// }else{
// 	props.layouytStyle.backgroundColor = 'rgba(255, 255, 255, 1)'
// }
const predefineColorsd = ref([
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    'rgba(255, 69, 0, 0.68)',
    'rgb(255, 120, 0)',
    'hsv(51, 100, 98)',
    'hsva(120, 40, 94, 0.5)',
    'hsl(181, 100%, 37%)',
    'hsla(209, 100%, 56%, 0.73)',
    '#c7158577',
])
</script>
<template>
    <table style="width:94%; margin-left:3%">
        <tr>
            <td width="50">颜色</td>
            <td>
                <el-color-picker v-model="props.layouytStyle.backgroundColor" :predefine="predefineColorsd" show-alpha  size="default" />
			
                {{ props.layouytStyle.backgroundColor }}
            </td>
        </tr>
        <tr>
            <td>透明度</td>
            <td>
                <el-row :gutter="15">
                    <el-col :span="14">
                        <el-slider  v-model="props.layouytStyle.transparency" :min="0" :max="100" />
                    </el-col>
                    <el-col :span="10">
                        <el-input 
                            v-model="props.layouytStyle.transparency" 
                            disabled
                            :formatter="(value) => `${value} %`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                            :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
                            input-style="text-align: right;"
                        />

                    </el-col>
                </el-row>
            </td>
        </tr>
    </table>
</template>
<style  lang='scss' scoped>
.text_right{
    text-align: right;
}
</style>
