<template>
    <el-form :model="form" :rules="rules" ref="ruleFormRef" class="NewProjectForm">
        <div class="row items-center text-weight-bold microsoft q-mb-md">
            <span class="text-negative q-pr-sm">*</span>
            <span class="fz16">行程标题</span>
        </div>
        <el-form-item label="" prop="Name">
            <el-input v-model="form.Name" autocomplete="off" placeholder="行程标题"/>
        </el-form-item>
        <div class="row items-center text-weight-bold microsoft q-mb-md q-pt-lg">
            <span class="text-negative q-pr-sm"></span>
            <span class="fz16">出行日期</span>
        </div>
        <el-form-item>
            <el-date-picker @change="getTime"
                v-model="dateTime"
                type="daterange"
                start-placeholder="开始"
                end-placeholder="结束"
                format="YYYY-MM-DD"
                date-format="YYYY-MM-DD"
                value-format="YYYY-MM-DD">
            </el-date-picker>
        </el-form-item>
        <div class="row items-center text-weight-bold microsoft q-mb-md q-pt-lg">
            <span class="text-negative q-pr-sm"></span>
            <span class="fz16">出发与返回（城市）</span>
        </div>
        <el-form-item>
            <div class="row col flex-between">
                <el-select
                    v-model="form.qscs"
                    multiple
                    filterable
                    remote
                    reserve-keyword
                    placeholder="出发城市"
                    :remote-method="remoteMethod"
                    :loading="loading"
                    style="width: 174px;"
                >
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>
                <div>
                    <el-divider direction="vertical" style="height: 80%;"/>
                </div>
                <el-select
                    v-model="form.qscs"
                    multiple
                    filterable
                    remote
                    reserve-keyword
                    placeholder="返回城市"
                    :remote-method="remoteMethod"
                    :loading="loading"
                    style="width: 174px;"
                >
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>
            </div>
            
        </el-form-item>
    </el-form>
</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 dateTime = ref('')
    const options = ref([])
    const loading = ref(false)
    const form = reactive({
        Name: '',
        qscs: ''
    } as any)

    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 = () => {
        
    }
    const getTime = () => {
        console.log(dateTime.value)
        if(dateTime.value.length>0){
            // queryObj.value.star = dateTime.value[0]
            // queryObj.value.end = dateTime.value[1]
        }else{
            // queryObj.value.star = ''
            // queryObj.value.end = ''
        }
    }
    const remoteMethod = (query: string) => {
        if (query) {
            loading.value = true
            setTimeout(() => {
            loading.value = false
            options.value = list.value.filter((item) => {
                return item.label.toLowerCase().includes(query.toLowerCase())
            })
            }, 200)
        } else {
            options.value = []
        }
    }
    // 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;
}
.NewProjectForm::v-deep(.el-select:hover){
    border: 0!important;;
    box-shadow: 0 0 0 0px var(--el-input-border-color,var(--el-border-color)) inset !important;
}
.NewProjectForm::v-deep(.select-trigger:hover){
    border: 0!important;;
    box-shadow: 0 0 0 0px var(--el-input-border-color,var(--el-border-color)) inset !important;
}
.NewProjectForm::v-deep(.el-tooltip__trigger:hover){
    border: 0!important;;
    box-shadow: 0 0 0 0px var(--el-input-border-color,var(--el-border-color)) inset !important;
}
.NewProjectForm::v-deep(.el-tooltip__trigger:hover){
    border: 0!important;;
    box-shadow: 0 0 0 0px var(--el-input-border-color,var(--el-border-color)) inset !important;
}
.NewProjectForm::v-deep(.el-select__tags:hover){
    border: 0!important;;
    box-shadow: 0 0 0 0px var(--el-input-border-color,var(--el-border-color)) inset !important;
}


</style>