<template>
  <div class="app-container">
    <!-- 操作 -->
    <div class="filter-container">
        <el-form ref="dataForm" :rules="rules" status-icon label-position="right" label-width="150px" :model="importForm"> 
        <el-form-item label="订单渠道" prop="channelId">
          <el-select v-model="importForm.channelId" style="width: 260px" class="filter-item" placeholder="请选择渠道" clearable>
            <el-option v-for="item in channels" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      <el-row>
        <el-col :span="12">
        <el-form-item label="excel导入">
          <input type="file" @change="getFile($event)" ref="file" />
        </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-button v-permission="['POST /admin/order/import']" class="filter-item" type="primary" icon="el-icon-upload2" @click="importConfirm">订单导入</el-button>  
          <el-button v-show="showdownloading" :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导入结果导出</el-button>
          <a href="https://jzlife-oss.oss-cn-shanghai.aliyuncs.com/jzmall/20240528%E8%AE%A2%E5%8D%95%E5%AF%BC%E5%85%A5%E6%A0%BC%E5%BC%8F.xlsx" download="true" style="margin-left: 5px;color:#09afff;">导入格式excel下载</a>
      </el-col>
      </el-row>
      </el-form> 
     
    </div> 
     
        <el-table :data="importResult"  fit highlight-current-row> 
            <el-table-column align="center" label="订单号" prop="orderSn" />
            <el-table-column align="center" label="手机号" prop="mobile" />
            <el-table-column align="center" label="客户姓名" prop="customerName" />
            <el-table-column align="center" label="导入结果" prop="remark" />
         </el-table> 
      
  </div>
</template>

<script> 
import { allChannel } from "@/api/channel";
import { importOrder } from "@/api/order";

export default {
  name: "taskImport",
  data() {
    return {  
      channels: [],
      importForm: { 
        channelId: ""
      },
      file: "",
      failDialogVisible:false,
      importResult:[],
      downloadLoading:false,
      showdownloading:false,

      rules: { 
        channelId: [
          { required: true, message: "渠道不能为空", trigger: "blur" }
        ]
      }
    };
  },
  computed: {},
  created() {
    allChannel().then(res => {
      res.data.data.forEach(element => {
        if(element.name.lastIndexOf("盒马")<0)
        this.channels.push(element)
      });
      //this.channels = res.data.data;
    }); 
  },
  methods: { 
    reset() { 
      if (this.file != "") {
        this.file = "";
        this.$refs.file.value = "";
      }
       this.importForm={ 
        channelId: ""
      }; 
    },
    //获取上传文件
    getFile: function(event) {
      this.file = event.target.files[0];
      console.log(this.file);
    },

    importConfirm() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.confUploadBtn();
        }
      });
    },
    confUploadBtn() {
      if (this.file == "") {
        this.$message.warning("请选择文件！");
        return;
      }
      if(this.file.name.lastIndexOf("xlsx")<0){
        this.$message.warning("请选择excel文件！");
        return;
      } 

      const loading = this.$loading({
        lock: true,
        text: "文件导入中，请耐心等待...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      var formData = new window.FormData(); // vue 中使用 window.FormData(),否则会报 'FormData isn't definded'
      formData.append("file", this.file);
      formData.append("channelId", this.importForm.channelId);  
     
      importOrder(formData)
        .then(res => {
          console.log("导入返回数据", res);
          loading.close();
          if (res.data.errno == 0) {
            this.$message.success(res.data.errmsg); 
             if(res.data.data.length>=1){
               this.failDialogVisible=true;
               this.importResult=res.data.data;
               this.showdownloading=true
             }
          } else {
            this.$message.warning(res.data.errmsg);
          }
        })
        .catch(err => {
          loading.close(); 
          this.$message.warning(err.data.errmsg);
        });
    }, 
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['订单号', '手机号', '客户姓名', '是否成功']
        const filterVal = ['orderSn', 'mobile', 'customerName', 'remark']
        excel.export_json_to_excel2(tHeader, this.importResult, filterVal, 'excel订单导入结果')
        this.downloadLoading = false
      })
    }
  }
};
</script>

<style scoped>
.el-form-item {
  margin-bottom: 24px;
}
</style>
