<template>
    <el-form :model="form" :rules="rules" ref="ruleFormRef" class="NewProjectForm">
        <div class="fz16 text-weight-bold microsoft q-mb-md">项目标题：</div>
        <el-form-item label="" prop="Name">
            <el-input v-model="form.Name" autocomplete="off" />
        </el-form-item>
    </el-form>
    <div class="column q-pt-lg">
        <div class="row">
            <el-button class="col" type="info" plain size="large">记录项目需求</el-button>
        </div>
        <div class="row q-pt-sm">
          <el-button class="col" size="large">规划行程路线</el-button>  
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { ElMessage, FormInstance, FormRules } from 'element-plus';
    import { ref, reactive, watch, inject, onMounted } from "vue";
    import { injectKeyPublic } from '@/types/injectKey';

    const WorkProject = ref({} as any)
    WorkProject.value = inject(injectKeyPublic)

    const props = defineProps({
        addDialogFormVisible: {
            type: Boolean,
            default: false,
        },
    })

    const ruleFormRef = ref<FormInstance>()
    const rules = reactive<FormRules<RuleForm>>({
        Name: [
            { required: true, message: '请输入项目标题', trigger: 'blur' },
            { min: 1, max: 500, message: '', trigger: 'blur' },
        ]
    })
    const form = ref({} as any)
    WorkProject.value.form = {
        Name: ''
    }
    form.value = WorkProject.value.form
    const close = () => {

    }
    const closed = () => {
        
    }
    watch(()=>form.value,(o,n)=>{
        WorkProject.value.form = form.value
    })
    watch(()=>props.addDialogFormVisible,(o,n)=>{
        ruleFormRef.value.clearValidate()
        ruleFormRef.value.resetFields()
   })
    onMounted(()=>{
        
    })
</script>
<style lang="scss" scoped>
.NewProjectForm::v-deep(.el-input__wrapper){
    box-shadow: 0 0 0 0px var(--el-input-border-color,var(--el-border-color)) inset;
    border-radius: 0;
    border: 1px solid #fff;
    border-bottom-color: #e8eaec;
}
.NewProjectForm::v-deep(.el-input__wrapper:hover){
    border-bottom-color: $themeColor; 
    box-shadow: 0 0 0 0px var(--el-input-border-color,var(--el-border-color)) inset !important;
}
::v-deep(.el-form-item.is-error .el-input__wrapper.is-focus){
    box-shadow: 0 0 0 0px var(--el-input-border-color,var(--el-border-color)) inset !important;
}

</style>