<template>
    <div>
        <el-dialog :title="openStatus == 'add' ? '新 增' : openStatus == 'downloadExcel' ? '导出Excel' : '导入Excel'"
            :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>
                <div v-if="openStatus == 'add'">
                    <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="goodsList">
                        <el-input type="textarea" v-model="formData.goodsList" rows="4" maxlength="125"
                            placeholder="请输入品名，多个用“;”隔开">
                        </el-input>
                    </el-form-item>
                </div>
                <div v-else-if="openStatus == 'downloadExcel'">
                    <el-form-item label="货站名称" prop="goodsStation">
                        <el-select class="selectWidth100" v-model.lazy="formData.goodsStation" filterable
                            :loading="goodsStationLoading" placeholder="不限">
                            <el-option v-for="(item, index) in goodsStationList" :label="item" :value="item"
                                :key="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div v-else>
                    <el-form-item label="货站名称" prop="uploadGoodsStation">
                        <el-input type="text" v-model="formData.uploadGoodsStation" maxlength="25"
                            placeholder="请输入货站名称">
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="file" label-width="0px">
                        <el-upload ref="upload" action="/goods/uploadGoodsExcel" name="file" :http-request="uploadExcel"
                            :on-remove="handleRemove" :limit="1" :on-exceed="handleExceed" accept=".xlsx"
                            class="upload-demo">
                            <el-button type="primary" icon="el-icon-upload2" size="small">选择文件</el-button>
                        </el-upload>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-if='openStatus == "add"' type="primary" size="small" :loading="loading" @click="submit">确 定
                </el-button>
                <el-button v-else-if="openStatus == 'downloadExcel'" type="primary" size="small" :loading="downloading"
                    @click="download">导出Excel</el-button>
                <el-button v-else type="primary" :loading="loading" size="small" @click="upload">导入Excel
                </el-button>
                <el-button style="margin-top:10px" size="small" @click="close">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { batchAddGoods, findStationName, uploadGoodsExcel } from "@/api/goodsStation"
import { downLoadXlsx } from "@/utils/zipdownload";

export default {
    name: '',
    props: {
        open: {
            type: Boolean,
            default: false
        },
        openStatus: {
            type: String,
            default: 'add'
        }
    },
    data() {
        return {
            formData: {
                goodsStation: null,
                uploadGoodsStation: null,
                goodsList: '',
                file: null
            },
            goodsStationList: [],
            rules: {
                goodsStation: [
                    {
                        required: true,
                        message: "货站名称不能为空",
                        trigger: "change",
                    },
                ],
                goodsList: [
                    {
                        required: true,
                        message: "品名不能为空",
                        trigger: "blur",
                    },
                ],
                uploadGoodsStation: [
                    {
                        required: true,
                        message: "货站名称不能为空",
                        trigger: "change",
                    },
                ],
                // file: [
                //     {
                //         required: true,
                //         message: "文件不能为空",
                //         trigger: "change",
                //     },
                // ]
            },
            fileList: [],
            errorData: [],
            goodsStationLoading: false,
            downloading: false,
            loading: false,
        }
    },
    watch: {
        open(val) {
            if (val && this.openStatus == 'downloadExcel') {
                this.getgoods()
            }
        }
    },
    methods: {
        //查询货站
        getgoods() {
            this.goodsStationLoading = true
            findStationName().then(res => {
                this.goodsStationLoading = false
                if (res.code === 200) {
                    this.goodsStationList = res.data.list
                } else {
                    this.msgWarning(res.msg)
                }
            }).catch(err => {
                this.goodsStationLoading = false
                console.log(err)
            })
        },
        //提交
        submit() {
            let obj = {
                goodsList: []
            }
            obj.goodsStation = this.formData.goodsStation
            this.formData.goodsList = this.formData.goodsList.replace(/；/g, ";")
            if (this.formData.goodsList != null && this.formData.goodsList != '') {
                this.formData.goodsList.split(';').forEach(item => {
                    if (item != null && item != '') {
                        obj.goodsList.push(item)
                    }
                })
            }
            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)
                    })
                }
            })
        },
        //选择文件
        uploadExcel(option) {
            this.formData.file = option.file
        },
        //导入Excel
        upload() {
            this.loading = true;
            if (this.formData.file != null && this.formData.file != '') {
                this.$refs['addForm'].validate(val => {
                    if (val) {
                        const file = this.formData.file;
                        let goodsStation = this.formData.uploadGoodsStation
                        uploadGoodsExcel(file, goodsStation).then((res) => {
                            this.loading = false;
                            if (res.code != 200) {
                                if (res.code == 603) {
                                    this.$alert(res.msg, "提示", {
                                        confirmButtonText: "确定",
                                        type: "warning",
                                    });
                                } else if (res.code === 201) {
                                    this.$message.warning(res.msg);
                                    if (res.data) {
                                        this.errorData = res.data;
                                        this.$router.push({ name: 'UpDateResult', params: { data: this.errorData, from: 'FlightInformationImport' } })
                                    }
                                } else {
                                    this.$message.warning(res.msg);
                                }
                            } else {
                                this.$message.success(res.msg);
                            }
                            setTimeout(() => {
                                this.close()
                            }, 1000);
                        });
                    } else {
                        this.loading = false;
                    }
                })
            } else {
                this.loading = false;
                this.msgWarning('请选择文件后再导入！')
            }
        },
        //导出Excel
        download() {
            this.$refs['addForm'].validate(val => {
                if (val) {
                    this.downloading = true
                    let data = { goodsStation: this.formData.goodsStation }
                    downLoadXlsx("/goods/exportGoods", data, "货站表")
                        .then(() => {
                            this.downloading = false
                            this.close()
                        })
                        .catch(() => {
                            this.downloading = false
                        });
                }
            })

        },
        handleRemove(file, fileList) {
            //清掉上传的文件
            this.errorData = [];
            this.fileList = [];
            this.formData.file = null
        },
        handleExceed(files) {
            //重复上传文件
            let file = {};
            file.file = files[0];
            file.name = files[0].name;
            this.fileList = [];
            this.fileList.push(file);
            this.formData.file = file
            this.uploadExcel(file);
        },
        //取消
        close() {
            this.formData = {
                goodsStation: null,
                goodsList: null
            }
            if (this.openStatus == 'uploadExcel') {
                this.$refs['upload'].clearFiles()
            }
            this.$refs["addForm"].clearValidate();
            this.$emit('close')
        }

    }
}

</script>

<style lang="scss" scoped>
.upload-demo {

    .el-upload-list__item:first-child {
        margin-top: 5px !important;
    }

    .el-upload-list {
        display: inline-block;
        margin-left: 10px;
    }
}
</style>