<template>
  <div :class="$style.wrapHeight">
    <div :class="$style.rowHeight">
      <sd-worktree
        v-show="activeKey === 'application-inprocess'"
        ref="application-inprocessworktree"
        data-type="application-inprocess"
        @treeSelectd="treeSelectd"
        @foldFirstTime="foldFirstTime"
      ></sd-worktree>
      <sd-worktree
        v-show="activeKey === 'application-completed'"
        ref="application-completedworktree"
        data-type="application-completed"
        @treeSelectd="treeSelectd"
        @foldFirstTime="foldFirstTime"
      ></sd-worktree>
      <div :class="$style.rightcard">
        <a-card>
          <a-tabs v-model="activeKey">
            <a-tab-pane key="application-inprocess" tab="办理中">
              <sd-data-table
                ref="application-inprocess"
                :key="treeId['application-inprocess']"
                data-url="api/framework/v1/user-tasks/application-with-trustor"
                :columns="columns"
                :row-key="'instId'"
                :search-fields="['title']"
                :filter-expressions="expressions['application-inprocess']"
                @rowClick="rowClick"
                @dataLoaded="tableDataLoaded"
              >
              </sd-data-table>
            </a-tab-pane>
            <a-tab-pane key="application-completed" tab="已办结">
              <sd-data-table
                ref="application-completed"
                :key="treeId['application-completed']"
                data-url="api/framework/v1/user-tasks/application-with-trustor"
                :columns="columns2"
                :row-key="'instId'"
                :search-fields="['title']"
                :filter-expressions="expressions['application-completed']"
                @rowClick="rowClick"
                @dataLoaded="tableDataLoaded"
              >
              </sd-data-table>
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script>
import TableColumnTypes from '../common/services/table-column-types'
import flowcenter from './sd-flowcenter-mixins'
import components from './_import-components/sd-apply-import'
export default {
  name: 'SdApply',
  metaInfo: {
    title: '我的申请',
  },
  components,
  mixins: [flowcenter],
  data() {
    const columns = [
      {
        title: '业务类型',
        dataIndex: 'appCat',
        sdCandidate: true,
      },
      {
        title: '标题',
        dataIndex: 'title',
        sdClickable: true,
        customRender: this.pjobRender,
      },
      {
        title: '当前状态',
        dataIndex: 'activeStepNames',
        width: '260px',
      },
      {
        title: '当前处理人',
        dataIndex: 'activeOperatorUsers',
        width: '130px',
      },
      {
        title: '创建时间',
        sorter: true,
        dataIndex: 'startDate',
        sdRender: TableColumnTypes.dateTime,
        defaultSortOrder: 'desc',
        width: '180px',
      },
    ]

    const columns2 = [
      {
        title: '业务类型',
        dataIndex: 'appCat',
        sdCandidate: true,
      },
      {
        title: '标题',
        dataIndex: 'title',
        sdClickable: true,
        customRender: this.pjobRender,
      },
      {
        title: '创建时间',
        sorter: true,
        dataIndex: 'startDate',
        sdRender: TableColumnTypes.dateTime,
        width: '180px',
      },
      {
        title: '办结时间',
        sorter: true,
        dataIndex: 'finishDate',
        sdRender: TableColumnTypes.dateTime,
        defaultSortOrder: 'desc',
        width: '180px',
      },
    ]
    return {
      activeKey: 'application-inprocess',
      columns,
      columns2,

      defaultFilter: {
        'application-inprocess': [
          { dataType: 'str', name: 'status', op: 'ne', stringValue: '5' },
          { dataType: 'str', name: 'stepsn', op: 'ne', stringValue: '1' },
        ],
        'application-completed': [{ dataType: 'str', name: 'status', op: 'eq', stringValue: '5' }],
      },

      // 业务类型树筛选条件
      expressions: {
        'application-inprocess': [],
        'application-completed': [],
      },

      treeId: {
        'application-inprocess': '',
        'application-completed': '',
      },
    }
  },

  methods: {},
}
</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>
