<template>
  <div id="ExpGuide" v-if="expCompile">
    <h-modal
      :visible="expCompile"
      @ok="handleOk"
      @cancel="cancel"
      closable
      centered
      :title="t('ImpExp.common.Exp')"
      style="width: 450px"
      :footer="null"
      :destroyOnClose="true"
      :maskClosable="false"
    >
      <div id="ExpGuide">
        <h-spin class="loading" v-if="!succeed" />
        <div v-if="succeed" class="succeed">文件导出成功</div>
      </div>
      <div style="float: right; margin: 0 -10px -15px">
        <h-button @click="cancel">{{ t('ImpExp.common.Cancel') }}</h-button>
      </div>
    </h-modal>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, watch, computed } from 'vue';
import { ExpDataAPI } from '@/api/platform/ImpExp/expGuide';
import { getInfo, ICP_CONFIG } from '@remote/icpx-platform/utils';
/* import { getInfo, ICP_CONFIG } from '@/utils/commMethods'; */
import { downloadUrlAPI } from '@/api/platform/ImpExp/upload';
import { useI18n } from '@crami/locale';
import { message } from '@crami/ui';
import { useHttp } from '@crami/http';
export default defineComponent({
  name: 'TestExpGuide',
  props: ['expCompile', 'searchParams', 'pageParams', 'dataEids'],
  setup(props, options) {
    const { t } = useI18n();
    const commonParams = computed(() => {
      return getInfo(ICP_CONFIG);
    });
    // console.log(commonParams);

    const visible = ref<boolean>(false);
    const handleOk = () => {
      cancel();
    };
    const cancel = () => {
      options.emit('expCompiles', false);
    };
    const succeed = ref<boolean>(false);
    watch(
      () => props.expCompile,
      () => {
        if (props.expCompile == true) {
          const data = JSON.parse(localStorage.getItem('dataExp'));
          // console.log(data);
          useHttp({
            url: '/exportservice/export/getTestData',
          }).then(res => {
            if (res.code === 200) {
              ExpDataAPI({
                companyId: commonParams.value.companyId,
                connect: commonParams.value.connect,
                filter: props.searchParams, //
                lang: commonParams.value.lang,
                objectType: '',
                page: props.pageParams.page, //
                pageNo: props.pageParams.page, //
                pageSize: props.pageParams.pageSize, //
                ...data,
                eids: props.dataEids || [],
                exportData: res.data,
              }).then(res => {
                // console.log(res);
                if (res.code == 200) {
                  downloadUrlAPI(res.data.fileIds)
                    .then(res => {
                      var xz = new XMLHttpRequest();
                      console.log(xz);
                      xz.open('GET', res.data.templateUrl, true);
                      xz.responseType = 'blob';
                      xz.onload = function (e) {
                        // console.log(e);
                        var url = window.URL.createObjectURL(xz.response);
                        var a = document.createElement('a');
                        a.href = url;
                        a.download = res.data.fileName;
                        a.click();
                      };
                      xz.send();

                      setTimeout(() => {
                        succeed.value = true;
                      }, 300);
                    })
                    .catch();
                } else {
                  message.warning(res.msg);
                  return;
                }
              });
            }
          });
        }
      },
    );
    return { t, visible, handleOk, succeed, cancel };
  },
});
</script>

<style lang="less" scoped>
#ExpGuide {
  width: 100%;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.succeed {
  font-size: 18px;
}
</style>
