<template>
  <el-dialog
    custom-class="center-dialog"
    :title="__('商品信息导入')"
    top="0vh"
    :visible.sync="dialogFormVisible"
    width="30%"
    @close="close"
  >
    <el-form label-width="0">
      <el-form-item>
        <el-dropdown>
          <el-button type="primary" @click="expTemp()">
            {{ __('导出模版') }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
        </el-dropdown>
      </el-form-item>
      <el-form-item>
        <el-upload
          ref="upload"
          :action="action"
          :data="params"
          :limit="1"
          :multiple="false"
          :on-success="handleSuccess"
        >
          <el-button size="small" type="primary">
            {{ __('导入模版') }}
          </el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">{{ __('关闭') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import { URL as configUrl } from '@/config'
  import { getToken } from '@/utils/token'
  import { mapGetters } from 'vuex'
  import { expProductTemp } from '@/api/product/base'

  export default {
    name: 'ExcelExeImport',
    data() {
      return {
        params: {
          authorization: '',
        },
        action: configUrl.shop.product.base.impProductTemp,
        dialogFormVisible: false,
      }
    },
    computed: {
      ...mapGetters({
        token: 'user/token',
      }),
    },
    created() {
      this.params.authorization = getToken()
    },

    methods: {
      __,
      async expTemp() {
        expProductTemp().then((data) => {
          const link = document.createElement('a')
          let blob = new Blob([data], {
            type: 'application/msexcel;charset=utf-8',
          })
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          link.download = '商品导入模版.xlsx'
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        })
      },

      showEdit() {
        this.dialogFormVisible = true
      },
      close() {
        this.$refs.upload.clearFiles()
        this.params.topic_type = 0
        this.dialogFormVisible = false
      },
      handleSuccess(response, file, fileList) {
        let status = response.status
        let msg = response.msg
        if (status === 200) {
          if (200 == status) {
            this.$baseMessage(msg, 'success')
          } else {
            this.$baseMessage(msg, 'error')
          }
          this.$emit('fetch-data')
          this.close()
        } else {
          this.$refs.upload.clearFiles()
          this.$baseMessage(msg, 'error')
        }
      },
    },
  }
</script>
