<template>
  <div class="app-container">
    <div v-show="viewState == 1">
      <button-bar ref="btnbar" view-title="订单发货导出工具" :btndisabled="btndisabled" @btnhandle="btnHandle" />
      <div class="main-content">
        <!-- Start 项目列表头部 -->
        <div class="listtop">
          <div class="tit">导入订单，导出批量订单发货</div>
        </div>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>导入订单</span>
          </div>
          <div>
            <el-upload
              ref="upload"
              class="upload-demo"
              :action="updateAction"
              :on-change="handleChange"
              :on-progress="handleProgress"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :headers="headers"
              :file-list="fileList"
              :auto-upload="false"
              :multiple="false"
              :limit="1"
            >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
              <div slot="tip" class="el-upload__tip">上传 从微信商户平台导出的订单Excel文件</div>
            </el-upload>
          </div>
          <!--          <div>
            <h3>文件上传结果</h3>
            <el-card class="box-card">
              <div>{{ uploadResultMesssage }}</div>
            </el-card>
          </div> -->
          <div>
            <h3>库存汇总数据</h3>
            <el-card class="box-card">
              <div>{{ hzResultMesssage }}</div>
              <div>
                <el-button :disabled="!hzFilePath" size="small" type="primary" @click="doDownloadHz">下载 批量订单发货文件</el-button>
                <!-- <el-button :disabled="!ychzFilePath" size="small" type="primary" @click="doDownloadHzYc">下载烟草汇总文件</el-button> -->
              </div>
            </el-card>
          </div>
        </el-card>
      </div>
    </div>
    <!-- End 查询和其列表部分 -->
    <!-- 新增修改部分组件 -->
  </div>
</template>

<script>
  import req from '@/api/lpk/ordertools.js'
  import ButtonBar from '@/components/ButtonBar'
  import {
    getStorage
  } from '@/utils/auth'

  export default {
    name: 'OrdertoolsIndex',
    components: {
      ButtonBar
    },
    data() {
      return {
        updateAction: process.env.VUE_APP_BASE_API + '/adminapi/ordertools/uploadExcelFile',
        headers: {
        token: getStorage()
      },
        fullscreenloading: null,
        hzFilePath: '',
        hzResultMesssage: '',
        fileList: [],
        btndisabled: false,
        viewState: 1, // 1、列表 2、添加 3、修改 4、查看
        isSearchShow: false,
        searchxianshitit: '显示查询条件',
        tableLoading: false,
        dataList: [],
        btnList: [
          // {
          //   type: 'success',
          //   size: 'small',
          //   icon: 'export',
          //   btnKey: 'build',
          //   btnLabel: '导出'
          // },
          {
            type: 'info',
            size: 'small',
            icon: 'cross',
            btnKey: 'doClose',
            btnLabel: '关闭'
          }
        ],
        page: {
          total: 0, // 默认数据总数
          current: 1, // 默认开始页面
          size: 10, // 每页的数据条数
          params: {
            startDate: '',
            endDate: '',
            store: '',
            bankSid: '',
            cardType: ''
          }
        },
        brandList: [],
        bankList: [],
        storeList: []
      }
    },
    mounted() {
      this.$refs['btnbar'].setButtonList(this.btnList)
    },
    created() {
      // this.getAllStore()
      // this.loadList()
      // this.getBankList()
    },
    methods: {
      // 搜索条件效果
      clicksearchShow() {
        this.isSearchShow = !this.isSearchShow
        if (this.isSearchShow) {
          this.searchxianshitit = '隐藏查询条件'
        } else {
          this.searchxianshitit = '显示查询条件'
        }
      },
      btnHandle(btnKey) {
        switch (btnKey) {
          case 'build': // 导出
            this.doBuild()
            break
          case 'doClose':
            this.doClose()
            break
          default:
            break
        }
      },
      bankSelect(val) {
        console.log('>>>>>>>>>bankSelect', val)
        this.page.params.bankSid = val
        this.page.params.store = ''
        this.initStore()
      },
      loadList() {
        this.tableLoading = true
        req.pageOfCustomer(this.page).then((resp) => {
          this.tableLoading = false
          if (resp.success) {
            const data = resp.data
            this.page.total = data.total
            this.dataList = data.records
          } else {
            // 根据resp.code进行异常情况处理
            this.dataList = []
            this.page.total = 0
          }
        }).catch(() => {
          this.tableLoading = false
        })
      },
      // 序号
      indexMethod(index) {
        var pagestart = (this.page.current - 1) * this.page.size
        var pageindex = index + 1 + pagestart
        return pageindex
      },
      dosearch() {
        this.page.current = 1
        this.loadList()
      },
      resetQuery() {
        this.page = {
          current: 1,
          size: 10,
          total: 0,
          params: {
            startDate: '',
            endDate: '',
            store: '',
            bankSid: '',
            cardType: ''
          }
        }
        this.loadList()
      },
      toRelevancy(row) {
        this.viewState = 3
        this.$refs['divadd'].showEdit(row)
      },
      resetState() {
        this.viewState = 1
      },
      doClose() {
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.go(-1)
      },
      submitUpload() {
        this.$refs.upload.submit()
      },
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePreview(file) {
        console.log('handlePreview', file)
      },
      handleChange(file) {
        console.log(this.fileList)
      },
      handleProgress(event, file, fileList) {
        // this.progressFlag = true; // 显示进度条
        // this.loadProgress = parseInt(event.percent); // 动态获取文件上传进度
        // if (this.loadProgress >= 100) {
        //     this.loadProgress = 100
        //     setTimeout( () => {this.progressFlag = false}, 1000) // 一秒后关闭进度条
        // }
        const _this = this
        this.fullscreenloading = this.$loading({
          lock: true,
          text: '文件正在上传',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        console.log('111', event.percent)
        if (event.percent >= 100) {
          _this.fullscreenloading.text = '上传完成，正在解析并生成发货单文件'
        }
      },
      handleSuccess(resp, file, fileList) {
        if (this.fullscreenloading) this.fullscreenloading.close()
        this.fullscreenloading = null
        console.log('222', resp)
        // const rdata = resp.data
        const _this = this
        _this.hzFilePath = resp.data
        // _this.fullscreenloading.text = '数据导入完成'
        // _this.uploadResultMesssage = '共导入数据：' + rdata.allNum + ' 条；符合监管条件的数据：' + rdata.validNum + ' 条；用时：' + rdata.durations + ' 毫秒。'

        // kchz()
        //   .then(res => {
        //     if (this.fullscreenloading) this.fullscreenloading.close()
        //     this.fullscreenloading = null
        //     console.log('333', res)
        //     _this.hzFilePath = res.data
        //   })
        //   .catch(e => {
        //     if (this.fullscreenloading) this.fullscreenloading.close()
        //     this.fullscreenloading = null
        //   })
        // kchzyc()
        //   .then(res => {
        //     if (this.fullscreenloading) this.fullscreenloading.close()
        //     this.fullscreenloading = null
        //     console.log('444', res)
        //     _this.ychzFilePath = res.data
        //   })
        //   .catch(e => {
        //     if (this.fullscreenloading) this.fullscreenloading.close()
        //     this.fullscreenloading = null
        //   })
      },
      doDownloadHz() {
        window.open(this.hzFilePath, '_blank')
        //   downloadhz({ filepath: this.hzFilePath })
        //     .then(res => {
        //       console.log('xxx', res)
        //       const blob = new Blob([res.data])
        //       const url = window.URL.createObjectURL(blob) // 创建 url 并指向 blob
        //       const a = document.createElement('a')
        //       a.href = url
        //       a.download = '导出数据.xlsx'
        //       a.click()
        //       window.URL.revokeObjectURL(url) // 释放该 ur
        //     })
        //     .catch(e => {
        //       console.log(e)
        //     })
      }

    }
  }
</script>
<style scoped>
</style>
