<template>
  <a-modal
    centered
    class="importGuide-modal"
    :footer="null"
    :maskClosable="false"
    title="导入"
    v-model="isShow"
    @cancel="isShow=false"
    :width="750">
    <div class="importGuide-con">
      <div class="explain-con">
        <div class="explain-item">
          <div class="explain-tit">
            <span>1</span>准备导入
          </div>
          <ul>
            <li>1) 请先下载导入模板，模板中已标示出必填项</li>
            <li>2) 产品编码具有唯一性，{{ guideType=='1'?'系统中已存在的无法导入':(guideType=='2'?'下线导入':'上线导入')+'，必须是系统中已存在的产品编码' }}</li>
            <li v-if="guideType=='1'">3) 产品品牌、产品分类、单位、包装数单位、出库仓库、退货仓库，必须是系统中已经存在的值，否则无法导入</li>
            <li v-if="guideType=='2'||guideType=='3'"><a :href="guideType=='3' ? fileOnlinPath : filePath" style="margin: 5px 0 0 15px;display: block;">
              <a-icon type="download" style="padding-right: 5px;" />下载导入模板
            </a></li>
          </ul>
          <a-button
            v-if="guideType=='1'"
            id="importGuide-export"
            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>
          <div style="overflow: hidden;padding-left: 23px;">
            <Upload
              id="importGuide-attachList"
              ref="importUpload"
              :maxNums="1"
              fileType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
              :uploadType="guideType=='3' ? 'attach' : 'import'"
              :action="guideType=='3' ? attachOnlinAction : attachAction"
              :uploadParams="uploadParams"
              upText="添加文件"
              @remove="resetSearchForm"
              @change="changeImport"></Upload>
          </div>
        </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="isShow=false"
          style="padding: 0 60px;margin-left: 15px;">取消</a-button>
      </div>
    </div>
    <!-- 导入 -->
    <chooseImportModal :openModal="openImportModal" :paramsData="paramsData" @close="handleClose" @ok="hanldeOk" />
    <offlineImportModal :openModal="openOfflineImportModal" :paramsData="paramsData" @close="handleClose" @ok="hanldeOk" />
    <onlineImportModal :openModal="openOnlineImportModal" :paramsData="paramsData" @close="handleClose" @ok="hanldeOk" />
  </a-modal>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
// 组件
import ChooseImportModal from './chooseImportModal.vue'
import offlineImportModal from './offlineImportModal.vue'
import onlineImportModal from './onlineImportModal.vue'
import { Upload } from '@/components'
export default {
  name: 'SalesImportGuideModal',
  mixins: [commonMixin],
  components: { ChooseImportModal, offlineImportModal, onlineImportModal, Upload },
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    guideType: {// 产品导入类型  1 新增产品导入 2下线产品导入
      type: String,
      default: ''
    }
  },
  data () {
    return {
      isShow: this.openModal, //  是否打开弹框
      openImportModal: false, //  打开新增产品导入弹框
      openOfflineImportModal: false, // 打开下线产品导入弹框
      openOnlineImportModal: false, // 打开下线产品导入弹框
      attachAction: process.env.VUE_APP_API_BASE_URL + '/upload', // 上传地址
      attachOnlinAction: process.env.VUE_APP_API_BASE_URL + '/product/importOnline',
      paramsData: null, // 导入参数
      uploadParams: {// 上传参数
        savePathType: 'local'
      },
      exportLoading: false, // 导出按钮加载状态
      filePath: location.protocol + '//' + location.host + '/templ/批量下线导入模板.xlsx', // 模板地址
      fileOnlinPath: location.protocol + '//' + location.host + '/templ/批量上线导入模板.xlsx'
    }
  },
  methods: {
    // 清空数据
    resetSearchForm () {
      this.$refs.importUpload.setFileList() //  清空导入文件
      this.paramsData = null //  清空上传数据
    },
    // 下一步
    handlerNextStep () {
      const _this = this
      if (_this.paramsData) {
        if (_this.guideType == 1) {
          _this.openImportModal = true
        } else if (_this.guideType == 2) {
          _this.openOfflineImportModal = true
        } else {
          _this.openOnlineImportModal = true
        }
      } else {
        _this.$message.warning('添加文件后再进行下一步操作！')
      }
    },
    // 上传文件  change
    changeImport (file) {
      if (file && this.guideType != 3) {
        this.paramsData = {
          path: file
        }
      } else {
        if (file && JSON.parse(file).length > 0) {
          this.paramsData = Object.assign({}, JSON.parse(file)[0] || null)
        } else {
          this.paramsData = null
        }
      }
    },
    // 导入
    hanldeOk (obj) {
      if (obj) {
        this.$emit('ok', obj)
        this.isShow = false
      }
    },
    // 关闭
    handleClose () {
      this.openImportModal = false
      this.openOfflineImportModal = false
      this.openOnlineImportModal = false
      this.isShow = false
    },
    // 下载模板
    handleExport () {
      this.exportLoading = true
      setTimeout(() => {
        this.exportLoading = false
      }, 1000)
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = location.protocol + '//' + location.host + '/templ/产品批量导入模板.xlsx'
      link.setAttribute('download', '产品批量导入模板' + '.xlsx')
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
        this.paramsData = null
        this.$refs.importUpload.setFileList('')
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .importGuide-modal{
    .importGuide-con{
      .explain-con{
        .explain-item{
          margin-bottom: 10px;
          .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;
            }
          }
        }
        #importGuide-attachList{
          width: 100%;
        }
      }
      .btn-con{
        margin: 10px 0 20px;
        text-align: center;
        .button-cancel{
          font-size: 12px;
        }
      }
    }
  }
</style>
