<script setup lang="ts">
import type { AxiosRequestConfig } from 'axios';
import { ref } from 'vue';
import request, { download } from '~/utils/request';


const props = defineProps<{ url: string, importKey?: string, exportKey?: string }>()
// console.log(props)
const emits = defineEmits(["success"])
const loading = ref(false)
const percentage = ref(0)

const handleTableRowBtns_import = ({ file }: { file: File }) => {
  loading.value = true
  return request({
    $type: 'import',
    url: props.importKey ? `${props.url}/import?${props.importKey}` : `${props.url}/import`,
    data: { file },
    onUploadProgress(progressEvent: { loaded: number, total: number }) {
      percentage.value = ~~((progressEvent.loaded / progressEvent.total * 100 - 1) | 0)
    },
  } as AxiosRequestConfig).then((res: any) => {
    loading.value = false
    emits("success")
    return res
  })
}
const handleTableRowBtns_export = () => {
  if (props.exportKey) {
    let name = props.exportKey.split('=')[0];
    let id = props.exportKey.split('=')[1];
    let data: any = {};
    data[name] = id;
    data.limit = 1;
    if (id == '837') {
      download(`/template/xls/报修类别导入模版.xls`, data);
    }

  } else {
    download(`${props.url}/index`, { limit: 1 });
  }
}
</script>

<!-- <script>
import request, { download } from '~/utils/request';

export default defineComponent({
  props: {
    url: {
      required: true,
      type: String,
    }
  },
  data() {
    return {
      loading: false,
      percentage: 0
    }
  },
  methods: {
    handleTableRowBtns_import({ file }) {
      this.loading = true
      return request({
        $type: 'import',
        url: `${this.url}/import`,
        data: { file },
        onUploadProgress(progressEvent) {
          this.percentage = ~~(progressEvent.loaded / progressEvent.total * 100 | 0)
        },
      }).then((res) => {
        this.loading = false
        return res
      })
    },
    handleTableRowBtns_export() {
      download(`${this.url}/index`, { limit: 1 })
    }
  }
})
</script> -->

<template>
  <el-popover width="330px" trigger="click">
    <template #reference>
      <el-button :loading="loading" type="primary">
        <template #loading>
          <el-progress class="mr-4px" :width="26" :stroke-width="2" status="success" type="circle"
            :percentage="percentage">
            <template #default="{ percentage }">
              <span class="percentage-value">{{ percentage }}</span>
            </template>
          </el-progress>
        </template>
        <slot>导 入</slot>
      </el-button>
    </template>
    <p>
      <slot name="tips">请上传正确的格式</slot>
    </p>
    <div class="flex justify-end">
      <el-button type="primary" text class="mr-20px" @click="handleTableRowBtns_export">下载模板</el-button>
      <el-upload :http-request="handleTableRowBtns_import" class="inline-block">
        <el-button>选择文件</el-button>
        <template #file><span></span></template>
      </el-upload>
    </div>
  </el-popover>
</template>

<style lang="scss" scoped>
:deep(.el-progress) {
  .el-progress__text {
    color: var(--el-color-white);
    min-width: min-content;
  }
}
</style>
