<template>
  <div :class="$style.wrapHeight">
    <div :class="$style.rowHeight">
      <sd-worktree
        ref="trashworktree"
        :data-type="activeKey"
        @treeSelectd="treeSelectd"
        @foldFirstTime="foldFirstTime"
      ></sd-worktree>
      <div :class="$style.rightcard">
        <a-card>
          <sd-data-table
            ref="trash"
            :key="treeId.trash"
            data-url="api/framework/v1/user-tasks/application-with-trustor"
            :columns="columns"
            :actions="actions"
            show-selection
            :row-key="'instId'"
            :search-fields="['title']"
            :filter-expressions="expressions.trash"
            @rowClick="rowClick"
          >
          </sd-data-table>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script>
import { Modal, Message } from 'ant-design-vue'
import TableColumnTypes from '../common/services/table-column-types'
import TableActionTypes from '../common/services/table-action-types'
import FlowcenterService from './flowcenter-service'
import flowcenter from './sd-flowcenter-mixins'
import components from './_import-components/sd-scrap-import'

export default {
  name: 'SdScrap',
  metaInfo: {
    title: '废件箱',
  },
  components,
  mixins: [flowcenter],
  data() {
    const columns = [
      {
        title: '业务类型',
        dataIndex: 'appCat',
        sdCandidate: true,
      },
      {
        title: '标题',
        dataIndex: 'title',
        sdClickable: true,
        customRender: this.pjobRender,
      },

      {
        title: '创建时间',
        dataIndex: 'startDate',
        sdRender: TableColumnTypes.dateTime,
        sorter: true,
        width: '220px',
        // defaultSortOrder: 'desc',
      },
    ]
    return {
      activeKey: 'trash',
      columns,
      expressions: { trash: [] },
      treeId: { trash: '' },
      defaultFilter: {
        trash: [{ dataType: 'str', name: 'instStatus', op: 'eq', stringValue: '-1' }],
      },
      actions: [
        {
          label: '删除',
          id: 'delete',
          type: TableActionTypes.batch,
          permission: null,
          callback: (keys) => {
            this.deleteRows(keys)
          },
        },
        {
          label: '还原',
          id: 'restore',
          type: TableActionTypes.batch,
          permission: null,
          callback: (keys) => {
            this.resumeData(keys)
          },
        },
      ],
    }
  },
  methods: {
    // 删除数据
    deleteRows(selectedRowKeys) {
      Modal.confirm({
        title: '您确定删除这项内容吗？',
        content: '删除这条数据后，就无法恢复初始的状态。',
        okText: '删除',
        okType: 'danger',
        onOk: () => {
          const params = {
            flowCallbackBeanName: 'formBeanCleanerCallBack',
            processInstanceIds: selectedRowKeys.join(','),
          }
          FlowcenterService.fnDarftsDelete(params).then((res) => {
            if (res.status === 200) {
              this.$refs.trash.clearSelection(true)
              this.refresh()
            }
          })
        },
      })
    },

    // 恢复数据
    resumeData(selectedRowKeys) {
      const params = {
        flowCallbackBeanName: 'subflowDataBinderCallback',
        processInstanceIds: selectedRowKeys.join(','),
      }
      FlowcenterService.fnTrashResumeData(params)
        .then((res) => {
          if (res.status === 200) {
            Message.success('恢复成功')
            this.$refs.trash.clearSelection(true)
            this.refresh()
          }
        })
        .catch((error) => {
          Message.error({ content: error.reponse || '恢复失败' })
        })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.wrap-height {
  height: 100%;
  .row-height {
    display: flex;
    flex: auto;
    height: 100%;
    .rightcard {
      flex: 1;
      width: calc(100% - 20%);
      height: 100%;
      overflow-y: auto;
    }
  }
}
</style>
