<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="50" placeholder="请输入货站名称">
                    </el-input>
                </el-form-item>
                <el-form-item label="品名" prop="goodsList">
                    <el-input type="textarea" v-model="formData.goodsList" rows="4" maxlength="254"
                        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 { batchAddGoods } from "@/api/goodsStation"

export default {
    name: '',
    props: {
        open: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            formData: {
                goodsStation: null,
                goodsList: null
            },
            rules: {
                goodsStation: [
                    {
                        required: true,
                        message: "货站名称不能为空",
                        trigger: "blur",
                    },
                ],
                goodsList: [
                    {
                        required: true,
                        message: "品名不能为空",
                        trigger: "blur",
                    },
                ],
            },
            loading: false,
        }
    },
    watch: {
    },
    methods: {
        //提交
        submit() {
            let obj = {}
            obj.goodsStation = this.formData.goodsStation
            this.formData.goodsList = this.formData.goodsList.replace(/；/g, ";")
            if (this.formData.goodsList != null && this.formData.goodsList != '') {
                obj.goodsList = this.formData.goodsList.split(';')
            }
            this.$refs['addForm'].validate(val => {
                if (val) {
                    this.loading = true
                    batchAddGoods(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,
                goodsList: null
            }
            this.$refs["addForm"].clearValidate();
            this.$emit('close')
        }

    }
}

</script>

<style lang="scss" scoped>

</style>