<template>
    <div 
    :class="[{'column':column},{'error':hasError},{'w510':addClass=='w510'},{'w388':addClass=='w388'},'form-item']">
        <div class="form-item-top">
            <label v-if="label" for="">{{ label }}
                <img src="../assets/require.svg" v-if="required" alt="">
            </label>
            <template >
                <slot name="formLeft"></slot>
            </template>
            <template >
                <slot name="formRight"></slot>
            </template>
        </div>
        <div class="form-item-bottom">
            <template >
                <slot name="formDom"></slot>
            </template>
        </div>
    </div>
</template>
<script>
export default {
     name: 'GuipFormItem',
     props:['label','required','addClass','column'],
     data() {
         return {
            hasError: false,
            // 目前这两个宽度用的最多，其余宽度自定义类名修改吧
            classList:{
                'w510':'w510',
                'w388':'w388'
            }
         }
     },
     computed: {
        // dynamicClasses() {
        //     return {
        //         active: this.isActive, // 如果isActive为true，则添加'active'类
        //         error: this.hasError,  // 如果hasError为true，则添加'error'类
        //         highlighted: this.isHighlighted, // 如果isHighlighted为true，则添加'highlighted'类
        //     };
        // }
    },
     mounted(){
         console.log(this.required,'required----');
     }
   }
</script>
<style lang="scss" scoped>
.form-item{
    display: flex;
    align-items: center;
    label{
        min-width: 54px;
        margin-right: 8px;
    }
    .form-item-top{
        display: flex;
        align-items: center;
        text-align: left;
    }
    .form-item-bottom{
        flex: 1;
    }
    .rightdesc{
        flex: 1;
        text-align: right;
        font-size: 12px;
        line-height: 13px;
        letter-spacing: 0.08em;
        font-variation-settings: "opsz" auto;
        color: #8A9099;
    }
}
.w510{
    width: 510px;
}
.w388{
    width: 388px;
}
.column{
    display: flex;
    flex-direction: column !important;
    align-items: self-start;
    .form-item-top{
        width: 100%;
        margin-bottom: 12px;
        justify-content: space-between;
    }
    .form-item-bottom{
        width: 100%;
    }
}
.form-top-icon{
    display: flex;
    align-items: center;
    img{
        width: 16px;
        height: 16px;
        margin-right: 8px;
    }
    span{
        color: #1E2226;
    }
}
</style>