<template>
  <div class="BulkShipment">
        <div class="head-title">
            批量发货
        </div>
        <el-card style="margin-top:10px" class="box-card" shadow="never">
            <el-form class="app-batch" :model="addMsg" :rules="rules" ref="addMsg" label-width="180px">
                <el-form-item label="导入模板" prop="FilePath">
                    <el-input v-model="addMsg.FilePath" size="small" style="width:289px"
                        :disabled="true"
                      class="input-with-select">
                    </el-input>
                    <!-- :http-request="UploadImage" -->
                    <el-upload
                        class="upload-demo"
                        ref="upload"
                        :action="importFileUrl"
                        :multiple="true" 
                        :on-success="successUpload"
                        :show-file-list="false"
                        accept=".csv, .xlsx">
                        <el-button size="small">选择文件</el-button>
                    </el-upload>
                    <el-button size="small" style="margin-left:20px">默认模板下载</el-button>
                </el-form-item>
                <el-form-item label="选择快递公司" prop="ExpressId">
                    <el-select size="small" v-model="addMsg.ExpressId" placeholder="请选择">
                        <el-option v-for="item in ExpressList" :key="item.ID" :label="item.Name" :value="item.ID">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-card>
        <div style="margin-top:10px" >
            <el-button @click="Save('addMsg')" size="small" type="primary">提交</el-button>
        </div>
  </div>
</template>
<script>
export default {
    
    data() {
        return {
            importFileUrl: this.domainManager().UploadFileUrl,
            addMsg:{
                FilePath:'',
                ExpressId:'',
            },
            rules:{
                ExpressId: [
                    { required: true, message: '请选择快递公司', trigger: 'change' }
                ],
                FilePath: [
                    { required: true, message: '请选择导入模板', trigger: 'blur' }
                ],
            },
            ExpressList:[],
        };
    },
    created() {
        this.getExpressInfo();
        
    },
    methods: {
        Save(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.apipost("/api/order/SetOrderBatchSendGoods",this.addMsg,
                        res => {
                            if (res.data.resultCode === 1) {
                                this.addMsg={
                                    FilePath:'',
                                    ExpressId:'',
                                }
                                this.Success(res.data.message);
                            } else {
                                this.Error(res.data.message);
                            }
                            },
                        null
                    );
                } else {
                return false;
                }
            });
        },
        successUpload(file){
            this.addMsg.FilePath=file.data;
        },
        // 快递公司
        getExpressInfo() {
            this.apipost("/api/MallBase/GetExpressInfo", {}, res => {
            if (res.data.resultCode == 1) {
                this.ExpressList = res.data.data;
            } else {
                this.Info(res.data.message);
            }
            })
        },
        
    },
    mounted() {

    }
};
</script>
<style>
.BulkShipment .upload-demo{
    display: inline-block;
    position: relative;
    left:-5px;
}
</style>
