<template>
        <el-form :model="formData" status-icon :rules="rules" label-width='200px' label-position="right" ref="formData1" >
            <el-form-item label="訂單號(hào):" 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="請(qǐng)選擇" 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: '', // 發(fā)票類型
                        payWay: '', // 支付方式
                        isInvoice: 0, // 是否開(kāi)票
                        provinceId: "", // 省份id
                        cityId: "", // 城市id
                        districtId: "", // 區(qū)id
                        importOrderId: "",
                        zipCode: '', // 郵編
                    },
                    rules: { // 必填輸入提示
                        payWay: [ {required: true, message: '請(qǐng)選擇支付方式', trigger: 'change' } ],
                        distributionId: [ {required: true, message: '請(qǐng)選擇配送方式', trigger: 'change' } ],
                        orderTypeValue: [ { required: true, message: "請(qǐng)選擇訂單類型", trigger: "change" } ],
                        userName: [ { required: true, message: "請(qǐng)輸入收貨人名字", trigger: "blur" } ],
                        provinceId: [ { required: true, message: "請(qǐng)選擇地區(qū)", trigger: "change" } ],
                        address: [  { required: true,message: "請(qǐng)輸入街道地址",trigger: "blur"} ],
                        mobile: [ { required: true,message: "請(qǐng)輸入手機(jī)號(hào)碼",trigger: "blur"}, { validator: validatePhone } ],
                    },
                }
            },
            methods: { 
                // 對(duì)多個(gè)form進(jìn)行promise封裝進(jìn)行同時(shí)驗(yàn)證
                handleSave(formData) { // 保存操作
                    let formArr=['formData1','formData2','formData3']//三個(gè)form表單的ref
                    var resultArr=[] //用來(lái)接受返回結(jié)果的數(shù)組
                    var _self=this
                    function checkForm(formName) { //封裝驗(yàn)證表單的函數(shù)
                        var result = new Promise(function(resolve, reject) {
                            _self.$refs[formName].validate((valid) => {
                                if (valid) {
                                    resolve();
                                } else { reject() }
                            })
                        })
                        resultArr.push(result) //push 得到promise的結(jié)果
                    }
                    formArr.forEach(item => { //根據(jù)表單的ref校驗(yàn)
                            checkForm(item)
                    })
                    Promise.all(resultArr).then(values => {
                            this.submitForm() // 此時(shí)必填完成，做保存后的業(yè)務(wù)操作
                    }).catch( _ => {
                        console.log('err')
                    })
                },
            }
        }
    </script>