<template>
   <el-scrollbar height="100%">
        <div class="page-container main-view">
            <div class="container">
                <el-form
                    :model="dataContainer.form"
                    ref="FormElRef"
                    :inline="true"
                    :rules="dataContainer.rules"
                    label-width="120px"
                >
                    <el-row :gutter="0">
                        <el-col :span="8" :xs="6">
                            <el-form-item label="客户名称" prop="username">
                                <el-input
                                    v-model="dataContainer.form.username"
                                    placeholder="请输入"
                                    clearable
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" :xs="6">
                            <el-form-item label="contact" prop="contact">
                                <el-input
                                    v-model="dataContainer.form.contact"
                                    placeholder="请输入"
                                    clearable
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" :xs="6">
                            <el-form-item label="微伴ID" prop="weibanId">
                                <el-input
                                    v-model="dataContainer.form.weibanId"
                                    placeholder="请输入"
                                    clearable
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" :xs="6">
                            <el-form-item label="输入城市" prop="city">
                                <el-input
                                    v-model="dataContainer.form.city"
                                    placeholder="请输入"
                                    clearable
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <el-button type="primary" @click="handleSubmit"> 提交 </el-button>
            </div>
        </div>
    </el-scrollbar>
</template>

<script setup>
import {
    defineComponent,
    onBeforeUnmount,
    ref,
    reactive,
    getCurrentInstance,
    onActivated,
    onMounted,
} from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { messageError,messageSuccess } from '@/action/messagePrompt.js';
const FormElRef = ref(null); //组件实例
    const router = useRouter();
    const route = useRoute();
    const dataContainer = reactive({
        loading: false,
        form: {},
        rules: {
            username: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
            contact: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
            weibanId: [{ required: true, message: '请输入微伴ID', trigger: 'blur' }],
            city: [{ required: true, message: '请输入城市', trigger: 'blur' }],
        },
    });
            /**
         * 数据初始化
         */
         function initData() {
            let params = route.query;
            if (!params) return;
            dataContainer.form = params;
        }
        initData();

        /** 提交数据 */
        function handleSubmit() {
            /** 使用组件自带方法验证数据 */
             if (!FormElRef.value) return;
            FormElRef.value.validate((valid, e) => {
                if (e) {
                    /** 打印报错信息 */
                    let msg = e[Object.keys(e)[0]][0].message;
                    messageError(msg);
                }
                if (!valid) return;
                /** 像后端提交 */
                messageSuccess("提交成功")
            });
        }
        

</script>

<style scoped lang='scss'>

.main-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    .container {
        background-color: white;
        width: 100%;
        // min-height: 800px;
        height: fit-content;
        border-radius: 5px;
        padding: 15px;
        box-sizing: border-box;
        > * {
            margin: 0 0 30px 0;
            &:last-child {
                margin: 0;
            }
        }
    }
}

</style>