<template>
        <el-form :model="formData" status-icon :rules="rules" label-width='200px' label-position="right" ref="formData1" >
            <el-form-item label="订单号:" v-if="editorShow" class="el-form-pad">
                <template slot-scope="scope">
                    <el-button type="text" @click="onEdit(scope.row, scope.$index)"> {{formData.orderId}} </el-button>
                </template>
            </el-form-item>
        </el-form>
        
        
        <el-form :model="formData" status-icon :rules="rules" label-width='200px' label-position="right" ref="formData2">
            <el-form-item label="订单类型:" prop="orderTypeValue">
                <el-select v-model="formData.orderTypeValue" placeholder="请选择" size="mini" :disabled="disableIsShow">
                    <el-option v-for="item in orderTypeList" :key="item.orderTypeValue" :label="item.orderTypeName" :value="item.orderTypeValue"></el-option>
                </el-select>
            </el-form-item>
        </ell-form>
        
        <el-form :model="formData" status-icon :rules="rules" label-width='200px' label-position="right" ref="formData3">
            <el-form-item label="收货人:" prop="userName"> 
                <el-input v-model="formData.userName" size="mini" class="box-width" :disabled="disableIsShow" />
            </el-form-item>
        </el-form>
        
        <button class="mini-search-btn" @click="handleSave('formData')"> 保存订单 </button>
        
    </template>

<script>
        export default {
            data() {
                return {
                    formData: {
                        orderTypeValue: '', // 订单类型
                        distributionId: '', // 配送方式
                        invoiceType: '', // 发票类型
                        payWay: '', // 支付方式
                        isInvoice: 0, // 是否开票
                        provinceId: "", // 省份id
                        cityId: "", // 城市id
                        districtId: "", // 区id
                        importOrderId: "",
                        zipCode: '', // 邮编
                    },
                    rules: { // 必填输入提示
                        payWay: [ {required: true, message: '请选择支付方式', trigger: 'change' } ],
                        distributionId: [ {required: true, message: '请选择配送方式', trigger: 'change' } ],
                        orderTypeValue: [ { required: true, message: "请选择订单类型", trigger: "change" } ],
                        userName: [ { required: true, message: "请输入收货人名字", trigger: "blur" } ],
                        provinceId: [ { required: true, message: "请选择地区", trigger: "change" } ],
                        address: [  { required: true,message: "请输入街道地址",trigger: "blur"} ],
                        mobile: [ { required: true,message: "请输入手机号码",trigger: "blur"}, { validator: validatePhone } ],
                    },
                }
            },
            methods: { 
                // 对多个form进行promise封装进行同时验证
                handleSave(formData) { // 保存操作
                    let formArr=['formData1','formData2','formData3']//三个form表单的ref
                    var resultArr=[] //用来接受返回结果的数组
                    var _self=this
                    function checkForm(formName) { //封装验证表单的函数
                        var result = new Promise(function(resolve, reject) {
                            _self.$refs[formName].validate((valid) => {
                                if (valid) {
                                    resolve();
                                } else { reject() }
                            })
                        })
                        resultArr.push(result) //push 得到promise的结果
                    }
                    formArr.forEach(item => { //根据表单的ref校验
                            checkForm(item)
                    })
                    Promise.all(resultArr).then(values => {
                            this.submitForm() // 此时必填完成，做保存后的业务操作
                    }).catch( _ => {
                        console.log('err')
                    })
                },
            }
        }
    </script>