<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" placeholder="项目标题"/>
        </el-form-item>
    </el-form>
    <div class="column q-pt-lg">
        <div class="row">
            <el-tooltip
                class="box-item"
                effect="dark"
                content="此为TD云高级版/定制版功能"
                placement="left">
                <el-button class="col" type="info" plain size="large" disabled>记录项目需求</el-button>
            </el-tooltip>
        </div>
        <div class="row q-pt-sm">
          <el-button class="col" size="large"@click="router.push('/project/create/trip')">规划行程路线</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';
    import { useRouter } from "vue-router";

    const router = useRouter()
    const search = ref({} as any)
    search.value = inject(injectKeyPublic)

    const form = ref({} as any)
    form.value = search.value.form

    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 close = () => {

    }
    const confirmator = () => {
        
    }
    watch(()=>form.value,(o,n)=>{
        search.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>