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