<!--
 * @Description : 产品目录清单 -- 导入模块下载
 * @Author      : jinxin
 * @Date        : 2022-10-29 16:36:14
-->

<template>
  <div>
    <el-dialog :model-value="isDownloadShow" :close-on-click-modal="false" :close-on-press-escape="false"
      :show-close="true" @close="closeDialog" :title="data.title" width="440px" center>
      <el-button type="primary" @click="clickCom('inner')">下载国内导入模版</el-button>
      <el-button type="primary" @click="clickCom('out')">下载国外导入模版</el-button>
    </el-dialog>
  </div>
</template>
<script>
import { defineComponent, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
import Request from '@/utils/request.js'
import { ElMessage } from 'element-plus'
export default defineComponent({
  name: 'BatchEdit',
  props: {
    isDownloadShow: Boolean,
  },
  emits: ['update:isDownloadShow'],
  setup (props, context) {
    const request = new Request();
    // 生命周期
    onMounted(() => {
      // 获取下载模板
      request.get('v1/product/import_template', { language_id: 1 }).then(res => {
        console.log("下载模板:", res)
        data.url = res.data.url
      })
    })
    // 获取vuex
    let store = useStore()
    // 关闭
    const closeDialog = () => {
      context.emit('update:isDownloadShow', false)
    }
    // 变量
    let data = reactive({
      title: '请选择模版下载',
      url: ""
    })
    // 点击下载模版
    const clickCom = (type) => {
      if (type == 'inner') {
        let path = data.url
        let tag_A = document.createElement('a')
        tag_A.style.display = 'none'
        tag_A.href = path
        tag_A.download = ''
        tag_A.click()
        // 判断是否存在说 body
        if (document.body.contains(tag_A)) {
          document.body.removeChild(tag_A)
        }
        context.emit('update:isDownloadShow', false)
      }
      if (type == 'out') {
        ElMessage({
          type: 'error',
          message: "暂无国外模板下载"
        })
        console.log('下载国外模版')
      }
    }
    return {
      data,
      props,
      closeDialog,
      clickCom
    }
  }
})
</script>