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

<script>
import { Modal } 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-drafts-import'
export default {
  name: 'SdDrafts',
  metaInfo: {
    title: '草稿箱',
  },
  components,
  mixins: [flowcenter],
  data() {
    const columns = [
      {
        title: '业务类型',
        dataIndex: 'appCat',
        sdCandidate: true,
      },
      {
        title: '标题',
        dataIndex: 'title',
        sdClickable: true,
        customRender: this.pjobRender,
      },

      {
        title: '创建时间',
        dataIndex: 'draftDate',
        sdRender: TableColumnTypes.dateTime,
        sorter: true,
        width: '180px',
        // defaultSortOrder: 'desc',
      },
    ]
    return {
      activeKey: 'draft',
      columns,

      expressions: { draft: [] },
      treeId: { draft: '' },
      defaultFilter: {
        draft: [{ dataType: 'str', name: 'status', op: 'ne', stringValue: '2' }],
      },
      actions: [
        {
          label: '删除',
          id: 'delete',
          type: TableActionTypes.batch, // 批处理按钮，选中文档时才能点击
          permission: null,
          callback: (keys) => {
            this.deleteRows(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.draft.clearSelection(true)
              this.refresh() // 刷新列表
            }
          })
        },
      })
    },
  },
}
</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>
