<template>
  <div :class="$style.wrapHeight">
    <div :class="$style.rowHeight">
      <sd-worktree
        ref="attentionworktree"
        :data-type="activeKey"
        @treeSelectd="treeSelectd"
        @foldFirstTime="foldFirstTime"
      ></sd-worktree>
      <div :class="$style.rightcard">
        <a-card>
          <sd-data-table
            ref="attention"
            :key="treeId.attention"
            data-url="api/framework/v1/user-tasks/attention-with-trustor"
            :columns="columns"
            :actions="actions"
            :row-key="'id'"
            :search-fields="['title']"
            :filter-expressions="expressions.attention"
            @rowClick="rowClick"
            @dataLoaded="tableDataLoaded"
          >
            <span slot="users" slot-scope="text" :title="text.toString()">
              {{ text.toString() }}
            </span>
          </sd-data-table>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script>
import { Message } from 'ant-design-vue'
import FlowService from '@/webflow/flow-service'
import TableColumnTypes from '../common/services/table-column-types'
import TableActionTypes from '../common/services/table-action-types'
import flowcenter from './sd-flowcenter-mixins'
import components from './_import-components/sd-collect-import'

const duration = 1

export default {
  name: 'SdCollect',
  metaInfo: {
    title: '我的关注',
  },
  components,
  mixins: [flowcenter],
  data() {
    const columns = [
      {
        title: '业务类型',
        dataIndex: 'appCat',
        sdCandidate: true,
      },
      {
        title: '标题',
        dataIndex: 'title',
        sdClickable: true,
        customRender: this.pjobRender,
      },
      {
        title: '发起人',
        dataIndex: 'creatorName',
        sdCandidate: true,
        width: '130px',
      },
      {
        title: '发起部门',
        dataIndex: 'flowInstanceInfo.creatorOrgName',
        sdCandidate: true,
        width: '260px',
      },
      {
        title: '创建时间',
        sorter: true,
        dataIndex: 'sentDate',
        sdRender: TableColumnTypes.dateTime,
        sdCandidate: true,
      },
      {
        title: '关注时间',
        sorter: true,
        dataIndex: 'seenDate',
        sdRender: TableColumnTypes.dateTime,
        sdCandidate: true,
        // defaultSortOrder: 'desc',
      },
      {
        title: '当前状态',
        dataIndex: 'flowInstanceInfo.currentStepNames',
        width: '260px',
      },
      {
        title: '处理时间',
        sorter: true,
        dataIndex: 'instLastRunDate',
        sdRender: TableColumnTypes.dateTime,
        defaultSortOrder: 'desc',
        width: '180px',
      },
      {
        title: '当前处理人',
        dataIndex: 'flowInstanceInfo.users',
        scopedSlots: { customRender: 'users' },
        width: '130px',
      },
    ]
    return {
      activeKey: 'attention',
      columns,
      actions: [
        {
          label: '取消关注',
          id: 'collect',
          type: TableActionTypes.inline, // 数据行内的按钮，回调参数为record, rowIndex
          callback: this.cancleCol,
        },
      ],
      expressions: { attention: [] },
      treeId: { attention: '' },
    }
  },

  methods: {
    // 取消关注
    cancleCol(record) {
      const key = Symbol.for()
      Message.loading({ content: '处理中...', key })
      FlowService.attention(record.instId, '', 'retract', record.srcTrustId).then(
        () => {
          Message.success({ content: '取消关注成功', key, duration })
          this.refresh()
        },
        () => {
          Message.error({ content: '取消关注失败', key, duration })
        }
      )
    },
  },
}
</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>
