<template>
    <div>
        <el-dialog title="新 增" :visible.sync="open" width="25%" :close-on-click-modal="false" :show-close="false"
            append-to-body center>
            <el-form class="form-header" :model="formData" size="small" ref="addForm" label-width="auto"
                label-position="left" style="margin-bottom:10px" :rules="rules" @submit.native.prevent>
                <el-form-item label="货站名称" prop="goodsStation">
                    <el-input type="text" v-model="formData.goodsStation" maxlength="25" placeholder="请输入货站名称">
                    </el-input>
                </el-form-item>
                <el-form-item label="航班号" prop="flightList">
                    <el-input type="textarea" v-model="flightList" rows="4" maxlength="125" placeholder="请输入航班号，多个用“;”隔开">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" :loading="loading" @click="submit">确 定</el-button>
                <el-button @click="close">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { batchAddStationFlight } from '@/api/goodsStationFlight'

export default {
    name: '',
    props: {
        open: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            formData: {
                goodsStation: null,
                flightList: null
            },
            rules: {
                goodsStation: [
                    {
                        required: true,
                        message: "货站名称不能为空",
                        trigger: "blur",
                    },
                ],
                flightList: [
                    {
                        required: true,
                        message: "航班号不能为空",
                        trigger: "blur",
                    },
                ],
            },
            loading: false,
        }
    },
    watch: {
    },
    methods: {
        //提交
        submit() {
            let obj = {}
            obj.goodsStation = this.formData.goodsStation
            if (this.formData.flightList != null && this.formData.flightList != '') {
                this.formData.flightList = this.formData.flightList.toUpperCase()
                obj.flightList = this.formData.flightList.split(';')
            }
            this.$refs['addForm'].validate(val => {
                if (val) {
                    this.loading = true
                    batchAddStationFlight(obj).then(res => {
                        this.loading = false
                        if (res.code === 200) {
                            this.msgSuccess('添加成功！')
                            this.close()
                        } else {
                            this.msgWarning(res.msg)
                        }
                    }).catch(err => {
                        this.loading = false
                        console.log(err)
                    })
                }
            })
        },
        //取消
        close() {
            this.formData = {
                goodsStation: null,
                flightList: null
            }
            this.$refs["addForm"].clearValidate();
            this.$emit('close')
        }
    },
    computed: {
        flightList: {
            get: function () {
                return this.formData.flightList
            },
            set: function (val) {
                const reg = /^([a-zA-Z0-9]{0,20}(\;[a-zA-Z0-9]{0,20})*)$/
                if (reg.test(val)) {
                    this.formData.flightList = val
                }
            },
        },
    }
}

</script>

<style lang="scss" scoped>

</style>