<template>
  <div class="store-content">
    <div class="left-content">
      <el-select v-model="storeType" placeholder="请选择" @change="handleChange">
        <el-option label="所有自提点" :value="0" />
        <el-option label="门店分组" :value="2" />
        <el-option label="门店区域" :value="1" />
        <el-option label="部分自提点" :value="3" />
        <el-option label="批量导入" :value="4" />
      </el-select>
    </div>
    <div class="right-content">
      <store-group v-if="storeType === 2" :selectData="selectData" @getSelectList="getSelectList" />
      <store-area v-if="storeType === 1" :selectData="selectData" @getSelectList="getSelectList" />
      <store-part v-if="storeType === 3" :selectData="selectData" @getSelectList="getSelectList" />
      <div v-if="storeType === 4">
        <div class="upload-box">
          <el-upload
            :action="action"
            :data="uploadData"
            with-credentials
            :before-upload="uploadFileBefore"
            :on-success="uploadFile"
            :show-file-list="showList"
            class="upload-content"
          >
            <el-button size="small" plain class="upload-btn">
              <i class="iconfont icon-shangchuan" />点击上传
            </el-button>
          </el-upload>
          <el-button type="text" class="download-btn" @click="downLoad">
            点击下载模板
            <el-popover placement="top-start" width="260" trigger="hover">
              <p>1.自提点code请至配送设置中导出；</p>
              <p>2.仅支持.xlsx .xls文件的导入，文件大小不超过2M；</p>
              <p>3.每个sheet数据最多可导入2000条，超出则导入失败，门店过多建议使用多张sheet填充；</p>
              <el-button slot="reference" type="text" icon="iconfont icon-xinxixianshi" />
            </el-popover>
          </el-button>
        </div>
        <div class="upload-text" v-if="uploadNum + errorNum > 0">
          <div v-if="isAdd">
            本次共上传 {{ uploadNum + errorNum }} 个自提点，其中成功 <span class="file-num">{{ uploadNum }}</span>个，失败 <span class="error-num"> {{ errorNum }} </span>个。
            <el-button
              type="text"
              class="error-list"
              @click="dialogVisible = true"
              v-if="errorNum > 0"
            >
              查看失败原因
            </el-button>
          </div>
          <div v-else>
            本次共成功上传 {{ uploadNum }} 个自提点
          </div>
          <div class="file-name">
            <span>{{ uploadFileName }}</span>
            <el-button type="text" icon="iconfont icon-xiazai" @click="downLoadFile" />
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="导入失败原因" :visible.sync="dialogVisible" width="420px">
      <div class="info-content" style="height:400px;overflow-y:auto">
        <div v-for="(item, index) in errorList" :key="index" class="list-content">
          <span class="reason-info">{{ item.orderNumber }}</span>
          <span class="sku-info">{{ item.errorMessage }}</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import storeGroup from './store-group';
import storeArea from './store-area';
import storePart from './store-part';
// import request from '../../service/request.js';
// import qs from 'qs';
export default {
  components: {
    storeGroup,
    storeArea,
    storePart,
  },
  props: {
    pickUpPointType: {
      type: Number,
      default () {
        return 0;
      },
    },
    selectData: {
      type: Array,
      default () {
        return [];
      },
    },
    isAdd: {
      type: Boolean,
      default () {
        return true;
      },
    },
  },
  data () {
    return {
      action: window.location.origin + '/api-integral-mall/upload-pick-up-points',
      // action: 'http://gicdev.demogic.com/api-integral-mall/upload-pick-up-points',
      uploadData: {
        requestProject: 'integral-mall',
      },
      showList: false,
      uploadNum: 0,
      errorNum: 0,
      uploadFileName: '',
      downloadUrl: '',
      pickUpPointStr: '',
      storeType: 0,
      dialogVisible: false,
      errorList: [],
    };
  },
  mounted () {
    this.storeType = this.pickUpPointType || 0;
    if (this.storeType === 4) {
      this.uploadNum = this.selectData.correctNumber;
      this.uploadFileName = this.selectData.fileId;
      this.downloadUrl = this.selectData.downloadUrl;
    }
  },
  methods: {
    // 获取数据
    getSelectList (arr) {
      this.$emit('getArr', arr, this.storeType);
    },
    // 下载模板
    downLoad () {
      const url = 'static/礼品自提点导入模版.xlsx';
      window.open(url);
    },
    // 上传之前
    uploadFileBefore (file) {
      const fileType = file.name.split('.')[file.name.split('.').length - 1];
      if (fileType !== 'xlsx' && fileType !== 'xls') {
        this.$message.error('文件格式错误，请导入.xlsx或.xls格式的文件');
        return false;
      }
      if (file.size > 2 * 1024 * 1024) {
        this.$message.error('请上传小于2MB的文件');
        return false;
      }
    },
    uploadFile (file, fileList) {
      if (file.errorCode === 0) {
        this.uploadFileName = file.result.picUploadResDTO.fileId;
        this.uploadNum = file.result.orderErrorDTO.correctNumber;
        this.errorNum = file.result.orderErrorDTO.errornumber;
        this.errorList = file.result.orderErrorDTO.list || [];
        this.downloadUrl = file.result.picUploadResDTO.url;
        this.pickUpPointStr = file.result.pickUpPointStr;
        let obj = {};
        obj = {
          downloadUrl: this.downloadUrl,
          fileId: this.uploadFileName,
          pickUpPointStr: this.pickUpPointStr,
          correctNumber: this.uploadNum,
        };

        this.$emit('getArr', obj, this.storeType);
      } else {
        this.$message.error(file.message);
      }
    },
    // 下载上传的文件
    downLoadFile () {
      window.location.href = this.downloadUrl;
      // let params = {
      //   projectCode: 'integral-mall'
      // };
      // request.post('/api-admin/download-report', qs.stringify(params)).then(res => {
      //   var data = res.data;
      //   if (data.errorCode == 0) {
      //     window.location.href = data.result;
      //   } else {
      //     this.$message.error(res.data.message);
      //   }
      // });
    },
    // 门店类型切换
    handleChange () {
      this.selectData = [];
      // if (this.storeType === 0 || this.storeType === 3) {
      this.$emit('getArr', this.selectData, this.storeType);
      // }
    },
  },
};
</script>
<style scoped>
.store-content {
  font-size: 0;
}
.left-content {
  display: inline-block;
  font-size: 14px;
}
.right-content {
  display: inline-block;
  margin-left: 10px;
  vertical-align: top;
}
.upload-text {
  font-size: 14px;
  color: #606266;
  line-height: 20px;
  margin-top: 12px;
}
.file-num {
  font-weight: 600;
  margin: 0 5px;
}
.error-num {
  color: #ff5152;
}
.error-list {
  margin-left: 10px;
}
.file-name {
  width: 220px;
  height: 37px;
  line-height: 37px;
  padding: 0 10px;
  background: #f2f3f7;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.right-content /deep/ .upload-btn {
  width: 240px;
}
.right-content /deep/ .upload-btn .icon-shangchuan {
  margin-right: 5px;
  font-size: 14px;
}
.upload-box {
  display: flex;
}
.download-btn {
  margin-left: 16px;
}
.upload-content {
  width: 240px;
}
.sku-info {
  font-size: 13px;
  color: #606266;
  margin-left: 10px;
  vertical-align: top;
  width: 280px;
  display: inline-block;
  word-break: break-all;
}
.reason-info {
  color: #303133;
  font-size: 14px;
  font-weight: 500;
  word-break: break-all;
  width: 80px;
  display: inline-block;
}
.list-content {
  margin-bottom: 15px;
}
</style>
