<template>
  <div>
    <el-dialog :visible.sync="visible" title="批量发货" width="510px" @closed="onClose">
      <div style="display:flex;position:relative">
        <span style="flex-shrink:0;margin-top:10px;color:#303133"><span style="color:#FF5152;margin-right:5px">*</span>导入文件：</span>
        <dm-upload-file
          class="ml10 upload"
          action="/api-welfare/delivery-order/batch-delivering"
          :file-list="fileList"
          :on-success="onSuccess"
          :limit="1"
          width="380px"
          accept=".xls,.xlsx"
          with-credentials
          :headers="uploadHeader"
          style="display:inline-block;">
          <span slot="tip"></span>
          <el-button icon="iconfont-components4 icon-cp-shangc upload-icon">上传</el-button>
        </dm-upload-file>
        <el-button type="text" class="btn-download" @click="downloadFile">下载批量发货的模版</el-button>
      </div>
      <div v-if="showTip" class="mt10" style="margin-left:90px">
        成功<span style="color:#2f54eb"> {{successCount}} </span>条，失败<span style="color:#F5222d"> {{failedCount}} </span>条
        <el-button class="ml10" type="text" @click="errorInfoDialog.visible = true">查看详情</el-button>
      </div>
      <el-divider></el-divider>
      <div style="color:#909399;font-size:12px">1.填入需要发货的发货单号、物流公司名称、物流公司编码、物流单号；</div>
      <div style="color:#909399;font-size:12px;margin-top:8px">2.仅支持.xlsx .xls的文件导入，最多1000条信息，文件大小不超过2M；</div>
      <div slot="footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="errorInfoDialog.visible" title="上传信息" width="510px">
      <ul>
        <li style="display:flex" v-for="(item, index) in errorInfos" :key="index">
          <span>第{{item.line}}行</span>
          <span class="ml10">{{item.errorMsg}}</span>
        </li>
      </ul>
      <div slot="footer">
        <el-button type="primary" @click="errorInfoDialog.visible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      visible: false,
      successCount: 0,
      failedCount: 0,
      uploadHeader: {
        isControl: true,
      },
      fileList: [],
      errorInfoDialog: {
        visible: false
      },
      errorInfos: [],
      showTip: false
    };
  },
  mounted() {
    let header = axios.defaults.headers.common;
    this.uploadHeader = {
      ...this.uploadHeader,
      project: header.project,
      route: header.route,
      sign: header.sign
    };
    this.visible = true;
  },
  methods: {
    downloadFile() {
      const prev = process.env['NODE_ENV'] === 'development' ? '' : '/welfare'; // eslint-disable-line
      location.href = `${prev}/static/批量发货模板.xlsx`;
    },
    handleConfirm() {
      this.visible = false;
    },
    onSuccess(res, fileList) {
      this.fileList.push(fileList);
      const { result } = res;
      this.successCount = result.success;
      this.failedCount = result.failure;
      this.errorInfos = result.errorInfos || [];
      this.showTip = true;
      this.$emit('refresh');
    },
    onClose() {
      this.$emit('close');
      this.showTip = false;
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/ .el-divider--horizontal {
  margin: 16px 0;
  margin-top: 20px;
  border-bottom: 1px dashed #DCDFE6;
  background-color: transparent;
}
.upload {
  /deep/ .el-button {
    border-style: dashed;
  }
}
.btn-download {
  position: absolute;
  left: 180px;
  top: 9px;
}
</style>
