<template>
  <div class="intelligentReplenishmentSet-wrap">
    <a-spin :spinning="spinning" tip="Loading...">
      <a-page-header :ghost="false" :backIcon="false" class="intelligentReplenishmentSet-back">
        <!-- 自定义的二级文字标题 -->
        <template slot="subTitle">
          <a id="intelligentReplenishmentSet-back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" /> 返回列表</a>
        </template>
      </a-page-header>
      <a-card size="small" :bordered="false" class="intelligentReplenishmentSet-cont">
        <div class="importGuide-con">
          <div class="explain-con">
            <div class="explain-item">
              <div class="explain-tit">
                <span>1</span>准备导入
              </div>
              <p>所有允许导入的数据字段请参考模板，数据字段不符合规则，整条不予以导入。</p>
              <ul>
                <li>1) 下载导入模板得到的excel中，是目前系统中全部的产品信息，请修改变化的字段（该行的其他字段保持不变），并删除没有变化的行</li>
                <li>2) “产品编码”字段为必填项</li>
                <li>3) “订货周期”字段只能输入正整数，如果没有订货周期，保持为空即可</li>
                <li>4) “是否淘汰”字段，如果确定淘汰，则输入“是”，如果不淘汰，则不需要输入，保持为空即可</li>
                <li>5) “淘汰描述”字段，只有当是否淘汰为“是”时，才能录入淘汰描述，否则，淘汰描述只能保持为空</li>
              </ul>
              <a-button type="link" icon="download" style="padding: 0 0 0 23px;" :loading="exportLoading" @click="handleExport">下载导入模板</a-button>
            </div>
            <div class="explain-item">
              <div class="explain-tit">
                <span>2</span>上传数据文件
              </div>
              <p>目前支持的文件类型*.xls，*.xlsx.</p>
              <p>
                <Upload
                  id="importGuide-attachList"
                  ref="importUpload"
                  :maxNums="1"
                  fileType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
                  uploadType="import"
                  :action="attachAction"
                  :uploadParams="uploadParams"
                  @remove="resetForm"
                  upText="添加文件"
                  @change="changeImport"></Upload>
              </p>
            </div>
          </div>
          <!-- 按钮 -->
          <div class="btn-con">
            <a-button
              type="primary"
              id="importGuide-nextStep"
              size="large"
              class="button-primary"
              @click="handlerNextStep"
              style="padding: 0 60px;">下一步</a-button>
            <a-button
              id="importGuide-cancel"
              size="large"
              class="button-cancel"
              @click="handleBack"
              style="padding: 0 60px;margin-left: 15px;">取消</a-button>
          </div>
        </div>
      </a-card>
    </a-spin>
  </div>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
import moment from 'moment'
import VueCookies from 'vue-cookies'
import { Upload } from '@/components'
import { predictProductInfoExport } from '@/api/predict'
import debounce from 'lodash/debounce'
export default {
  name: 'IntelligentReplenishmentSet',
  mixins: [commonMixin],
  components: { Upload },
  data () {
    this.handleExport = debounce(this.handleExport, 2200)
    return {
      spinning: false,
      filePath: 'javascript:;',
      attachAction: process.env.VUE_APP_API_BASE_URL + '/upload',
      paramsData: null,
      uploadParams: {
        savePathType: 'local'
      },
      exportLoading: false
    }
  },
  methods: {
    // 返回
    handleBack () {
      this.$router.push({ path: `/inventoryManagement/intelligentReplenishment/list`, query: { closeLastOldTab: true } })
    },
    // 下一步
    handlerNextStep () {
      if (this.paramsData) {
        this.$router.push({ path: `/inventoryManagement/intelligentReplenishment/import` })
      } else {
        this.$message.warning('添加文件后再进行下一步操作！')
      }
    },
    // 上传文件  change
    changeImport (file) {
      this.paramsData = file
      VueCookies.set('REPLENISHMENT_PATH', JSON.stringify(file))
    },
    //  导出
    handleExport () {
      const _this = this
      _this.spinning = true
      _this.exportLoading = true
      predictProductInfoExport({}).then(res => {
        _this.spinning = false
        _this.exportLoading = false
        if (res.type == 'application/json') {
          var reader = new FileReader()
          reader.addEventListener('loadend', function () {
            const obj = JSON.parse(reader.result)
            _this.$notification.error({
              message: '提示',
              description: obj.message
            })
          })
          reader.readAsText(res)
        } else {
          this.download(res)
        }
      })
    },
    download (data) {
      if (!data) { return }
      const url = window.URL.createObjectURL(new Blob([data]))
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      const a = moment().format('YYYYMMDDHHmmss')
      const fname = '智能补货_模板_' + a
      link.setAttribute('download', fname + '.xlsx')
      document.body.appendChild(link)
      link.click()
    },
    resetForm () {
      this.$refs.importUpload.setFileList() //  清空导入文件
      this.paramsData = null //  清空上传数据
      VueCookies.set('REPLENISHMENT_PATH', '')
    }
  },
  mounted () {
    if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
      this.resetForm()
    }
  },
  activated () {
    // 如果是新页签打开或者进入新的子页（例：存在列表第2条数据编辑页页签时再打开第4条数据的编辑页），则重置当前页面
    if (this.$store.state.app.isNewTab || !this.$store.state.app.isNewSubTab) {
      this.resetForm()
    }
  }
}
</script>

<style lang="less">
  .intelligentReplenishmentSet-wrap{
    .intelligentReplenishmentSet-back{
      margin-bottom: 10px;
    }
    .importGuide-con{
      width: 900px;
      margin: 30px auto 50px;
      line-height: 30px;
      .explain-con{
        .explain-item{
          margin-bottom: 40px;
          .explain-tit{
            font-weight: bold;
            span{
              display: inline-block;
              width: 18px;
              height: 18px;
              line-height: 16px;
              text-align: center;
              margin-right: 5px;
              border-radius: 50%;
              border: 1px solid rgba(0, 0, 0, 0.3);
            }
          }
          p{
            margin: 8px 0;
            padding-left: 23px;
          }
          ul{
            list-style: none;
            padding: 0;
            padding-left: 23px;
            margin: 0;
            li{
              line-height: 26px;
            }
          }
        }
      }
      .btn-con{
        margin: 80px 0 20px;
        .button-cancel{
          font-size: 12px;
        }
      }
    }
  }
</style>
