<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="下载模板" :showOkBtn="false">
    <a-button type="primary" @click="downloadFile(0)">下载Excel模板</a-button>
    <a-button type="primary" @click="downloadFile(1)">下载Shp模板</a-button>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { getAppEnvConfig } from '@/utils/env';
  import axios from 'axios';

  const { VITE_GLOB_API_URL } = getAppEnvConfig();
  defineOptions({ name: 'MenuDrawer' });

  const props = defineProps(['tableName']);

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false });
  });
  const downloadFile = (type) => {
    const fileName = type == 0 ? 'Excel模板.xls' : 'Shp模板.zip';
    const params = {
      type,
      tableName: props.tableName,
    };
    axios({
      method: 'get',
      url: VITE_GLOB_API_URL + '/api/Layer/TempeleteByTableName',
      params: params,
      headers: {
        'X-Token': localStorage.getItem('X-Token'),
      },
      responseType: 'blob',
    }).then((res) => {
      const elink = document.createElement('a');
      elink.download = fileName;
      elink.style.display = 'none';
      elink.href = URL.createObjectURL(res.data);
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href);
      document.body.removeChild(elink);
    });
  };
</script>
<style lang="less" scoped>
  button {
    margin: 10px;
  }
</style>
