<template>
  <div class="store-content">
    <div class="left-content">
      <el-select v-model="storeType" placeholder="请选择" @change="handleChange">
        <el-option label="所有自提点" :value="0"></el-option>
        <el-option label="门店分组" :value="1"></el-option>
        <el-option label="门店区域" :value="2"></el-option>
        <el-option label="部分自提点" :value="3"></el-option>
        <el-option label="批量导入" :value="4"></el-option>
      </el-select>
    </div>
    <div class="right-content">
      <store-group v-if="storeType === 1" :selectData="selectData" @getSelectList="getSelectList"></store-group>
      <store-area v-if="storeType === 2" :selectData="selectData" @getSelectList="getSelectList"></store-area>
      <store-part v-if="storeType === 3" :selectData="selectData" @getSelectList="getSelectList"></store-part>
      <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"></i>点击上传</el-button>
          </el-upload>
          <el-button type="text" class="download-btn" @click="downLoad">点击下载模板</el-button>
        </div>
        <div class="upload-text" v-if="uploadNum > 0">
          本次成功上传
          <span class="file-num">{{ uploadNum }}</span
          >个自提点
          <span class="file-name">{{ uploadFileName }}</span>
          <el-button type="text" icon="iconfont icon-xiazai" @click="downLoadFile"></el-button>
        </div>
      </div>
    </div>
  </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 {
  props: {
    pickUpPointType: {
      type: Number,
      default() {
        return 0;
      }
    },
    selectData: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  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,
      uploadFileName: '',
      downloadUrl: '',
      pickUpPointStr: '',
      storeType: 0
    };
  },
  mounted() {
    this.storeType = this.pickUpPointType || 0;
  },
  methods: {
    //获取数据
    getSelectList(arr) {
      this.$emit('getArr', arr, this.storeType);
    },
    //下载模板
    downLoad() {
      let url = 'static/礼品自提点导入模版.xlsx';
      window.open(url);
    },
    // 上传之前
    uploadFileBefore(file) {
      let 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.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.$emit('getArr', this.selectData, this.storeType);
      }
    }
  },
  components: {
    storeGroup,
    storeArea,
    storePart
  }
};
</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;
}
.file-name {
  margin-left: 20px;
}
.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;
}
</style>
