<script setup lang="ts">
import { getProgress } from '../api'
import AppList from '@/components/base/AppList.vue'

defineEmits<{
  (e: 'update'): void
  (e: 'update:modelValue', visible: boolean): void
}>()

// 列表配置
const listOptions = computed(() => {
  return {
    remote: {
      httpRequest: getProgress,
      params: {},
    },
    limit: 10,
    columns: [
      { label: '文件名', prop: 'name' },
      {
        label: '大小',
        prop: 'size',
        computed: (row: any) => {
          return bytesToSize(row.row.size)
        },
      },
      { label: '来源链接', prop: 'connection_name' },
      {
        label: '状态',
        prop: 'status_name',
        computed: (row: any) => {
          return row.row.status === '4'
            ? `<p><span style="color: rgb(170, 2, 49)">${row.row.status_name}</span><br/><span style="font-size: 12px">${row.row.message}</span></p>`
            : `<span style="color: #00ac27">${row.row.status_name}</span>`
        },
      },
      { label: '更新人', prop: 'updated_operator_name' },
      { label: '导入时间', prop: 'created_time' },
      { label: '操作', slots: 'table-x', width: '100' },
    ],
  }
})

const bytesToSize = (bytes: number) => {
  if (bytes === 0) return '0 B'
  const k = 1000, // or 1024
    sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
    i = Math.floor(Math.log(bytes) / Math.log(k))

  return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]
}

const appList = $ref<InstanceType<typeof AppList> | null>(null)

const refetch = function () {
  appList?.refetch()
}
</script>
<template>
  <el-dialog
    class="connect-form"
    title="导入用户数据"
    :close-on-click-modal="false"
    width="900px"
    @closed="$emit('update:modelValue', false)">
    <AppList v-bind="listOptions" ref="appList">
      <template #table-x>
        <el-button type="primary" plain @click="refetch" v-permission="'v1-experiment-member-delete'">刷新</el-button>
      </template>
    </AppList>
  </el-dialog>
</template>
