<template>
  <BasicTable @register="registerTable">
    <template #toolbar>
      <a-button type="primary" @click="deleteTask">删除</a-button>
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <TableAction
          :actions="[
            {
              label: '更新',
              onClick: () => {
                updateTask(record)
              },
            },
          ]"
        />
      </template>
    </template>
  </BasicTable>
</template>

<script setup lang="ts">
import { defineProps, ref } from "vue"
import { BasicTable,useTable,TableAction } from "@/components/Table";
import { columns } from './util'
import { GetTaskList, DeleteTaskByIds, UpdateTask } from '@/api/demo/casetypemodification'
import { message } from "ant-design-vue";

const props = defineProps(['processId'])

const [registerTable, { getSelectRowKeys, reload, setLoading }] =
  useTable({
    title: '任务列表',
    beforeFetch: (params) => {
      return {
        ...params,
        processId: props.processId,
      }
    },
    api: GetTaskList,
    columns,
    rowKey: 'id',
    // 使用搜索表单
    useSearchForm: false,
    showTableSetting: true,
    rowSelection: {
      //多选框
      type: 'checkbox',
      // type: 'radio',
    },
    actionColumn: {
      width: 120,
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
    },
  });
const updateTask = (record) => {
  let params = {...record}
  params.state = 1
  setLoading(true)
  UpdateTask(params).then(res => {
    if(res){
      message.success('更新成功')
      reload()
    }
  }).finally(() => {
    setLoading(false)
  })
}
const deleteTask = () => {
  if(getSelectRowKeys().length <= 0){
    message.warning('请选择要删除的数据')
    return
  }
  let ids = getSelectRowKeys().join(',')
  setLoading(true)
  DeleteTaskByIds(ids).then(res => {
    if(res){
      message.success('删除成功')
      reload()
    }
  }).finally(() => {
    setLoading(false)
  })
}
</script>

<style lang="scss" scoped></style>
