<template>
  <a-card>
    <a-tabs>
      <a-tab-pane v-for="x in tabs" :key="x.key" :tab="x.title">
        <sd-data-table
          :ref="x.key"
          :data-url="`api/flow-mobile/v1/user-tasks/${x.key}-with-trustor`"
          :columns="x.columns"
          :row-key="'id'"
          :search-fields="['title']"
          :process-req="
            (req) => {
              if (x.key === 'todo') {
                req.data.creatorDeptLevel = 'GROUP'
              }
              return req
            }
          "
          :filter-expressions="[
            {
              dataType: 'str',
              stringValue: $route.query.businessTypeId,
              name: 'appId',
              op: 'in',
            },
          ]"
          @rowClick="(record) => rowClick(record, x.key)"
        />
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
import TableColumnTypes from '@/common/services/table-column-types'
import todoListService from '@/todo/todo-list-service'
import components from './_import-components/sd-task-list-import'
export default {
  name: 'SdTaskList',
  metaInfo() {
    return {
      title: '',
    }
  },
  components,
  data() {
    const todoColumns = [
      {
        title: '业务类型',
        dataIndex: 'appCat',
        sdCandidate: true,
      },
      {
        title: '标题',
        dataIndex: 'title',
        sdClickable: true,
      },
      {
        title: '发起人',
        dataIndex: 'creatorName',
      },
      {
        title: '发起部门',
        dataIndex: 'creatorDeptName',
      },
      {
        title: '创建时间',
        dataIndex: 'creationTime',
        sdRender: TableColumnTypes.dateTime,
        // sorter: true,  后台不支持待处理按创建时间排序
        width: '180px',
      },
      {
        title: '接收时间',
        dataIndex: 'sentDate',
        sdRender: TableColumnTypes.dateTime,
        sorter: true,
        defaultSortOrder: 'desc',
        width: '180px',
      },
    ]
    const processedColumns = [
      {
        title: '业务类型',
        dataIndex: 'appCat',
        sdCandidate: true,
      },
      {
        title: '标题',
        dataIndex: 'title',
        sdClickable: true,
      },
      {
        title: '发起人',
        dataIndex: 'creatorName',
      },
      {
        title: '发起部门',
        dataIndex: 'creatorDeptName',
      },
      {
        title: '创建时间',
        dataIndex: 'startDate',
        sdRender: TableColumnTypes.dateTime,
        sorter: true,
        width: '180px',
      },
      {
        title: '办理时间',
        dataIndex: 'processDate',
        sdRender: TableColumnTypes.dateTime,
        sorter: true,
        defaultSortOrder: 'desc',
        width: '180px',
      },
      {
        title: '当前状态',
        dataIndex: 'activeStepNames',
      },
      {
        title: '当前处理人',
        dataIndex: 'activeOperatorUsers',
      },
    ]
    const completedColumns = [
      {
        title: '业务类型',
        dataIndex: 'appCat',
        sdCandidate: true,
      },
      {
        title: '标题',
        dataIndex: 'title',
        sdClickable: true,
      },
      {
        title: '发起人',
        dataIndex: 'creatorName',
      },
      {
        title: '发起部门',
        dataIndex: 'creatorDeptName',
      },
      {
        title: '创建时间',
        dataIndex: 'startDate',
        sdRender: TableColumnTypes.dateTime,
        sorter: true,
        width: '180px',
      },
      {
        title: '办结时间',
        dataIndex: 'finishDate',
        sdRender: TableColumnTypes.dateTime,
        sorter: true,
        defaultSortOrder: 'desc',
        width: '180px',
      },
    ]
    return {
      tabs: [
        { key: 'todo', columns: todoColumns, title: '待处理' },
        { key: 'processed', columns: processedColumns, title: '已处理' },
        { key: 'completed', columns: completedColumns, title: '已办结' },
      ],
    }
  },
  computed: {},
  // 查看详情
  methods: {
    rowClick(record, activeKey) {
      todoListService.openTaskItem(record, activeKey).then((refreshFlag) => {
        if (refreshFlag) {
          this.$refs[activeKey][0].refresh()
        }
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>
