<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>