<script setup lang="ts">
import { getScheduleList, scheduleDelete } from '../api'
import { ElMessage } from 'element-plus'
import AppList from '@/components/base/AppList.vue'

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

const listOptions = computed(() => {
  return {
    remote: {
      httpRequest: getScheduleList
    },
    columns: [
      { label: '数据属性', prop: 'type_name' },
      { label: '来源链接', prop: 'connect_name' },
      { label: '数据量', prop: 'size' },
      {
        label: '状态',
        prop: 'status_name',
        computed: (row: any) => {
          let sName = row.row.status_name
          if (row.row.message !== '') {
            sName = `<span>${row.row.status_name}</span><br/><span style="margin-top:10px">${row.row.message}</span>`
          }
          return sName
        }
      },
      { label: '生成时间', prop: 'created_time' },
      { label: '操作', slots: 'table-x', width: '200' }
    ]
  }
})

const handleDelete = function (item: any) {
  scheduleDelete({ id: item.id }).then(res => {
    if (res.data) {
      refetch()
      ElMessage({
        message: '删除成功',
        type: 'success'
      })
    }
  })
}

const refetch = function () {
  appList?.refetch()
}
</script>

<template>
  <el-dialog
    style="width: 800px"
    class="data-form"
    title="数据生成进度"
    :close-on-click-modal="false"
    @closed="$emit('update:modelValue', false)">
    <AppList v-bind="listOptions" ref="appList">
      <template #table-x="{ row }">
        <el-button type="primary" plain @click="refetch" v-permission="'v1-experiment-member-delete'">刷新</el-button>
        <el-button type="primary" plain @click="handleDelete(row)" v-permission="'v1-experiment-member-delete'"
          >删除</el-button
        >
      </template></AppList
    >
  </el-dialog>
</template>
<style lang="scss">
.connect-form {
  .el-dialog__body {
    padding-top: 10px;
  }
}
.button-flex {
  // margin-top: 40px;
  display: flex;
  justify-content: center;
}
</style>
