<template>
  <div :class="$style.wrapHeight">
    <div :class="$style.rowHeight">
      <sd-worktree
        v-show="activeKey === 'inform'"
        ref="informworktree"
        data-type="inform"
        @treeSelectd="treeSelectd"
        @foldFirstTime="foldFirstTime"
      ></sd-worktree>
      <sd-worktree
        v-show="activeKey === 'replied-inform'"
        ref="replied-informworktree"
        data-type="replied-inform"
        @treeSelectd="treeSelectd"
        @foldFirstTime="foldFirstTime"
      ></sd-worktree>
      <div :class="$style.rightcard">
        <a-card>
          <a-tabs v-model="activeKey">
            <a-tab-pane key="inform" tab="待阅">
              <sd-data-table
                ref="inform"
                :key="treeId.inform"
                data-url="api/framework/v1/user-tasks/inform-with-trustor"
                :columns="informColumns"
                :row-key="'id'"
                :search-fields="['title']"
                :filter-expressions="expressions.inform"
                :show-selection="
                  (record) => {
                    // 只有部分行有复选框
                    return !record.feedbackOpinionRequired
                  }
                "
                :actions="actions"
                @rowClick="rowClick"
                @dataLoaded="tableDataLoaded"
              >
              </sd-data-table>
            </a-tab-pane>
            <a-tab-pane key="replied-inform" tab="已阅">
              <sd-data-table
                ref="replied-inform"
                :key="treeId['replied-inform']"
                data-url="api/framework/v1/user-tasks/replied-inform-with-trustor"
                :columns="repliedinformColumns"
                :row-key="'id'"
                :search-fields="['title']"
                :filter-expressions="expressions['replied-inform']"
                @rowClick="rowClick"
                @dataLoaded="tableDataLoaded"
              >
              </sd-data-table>
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script>
import { Message } from 'ant-design-vue'
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-toread-import'
import FlowcenterService from './flowcenter-service'
export default {
  name: 'SdToread',
  metaInfo: {
    title: '我的阅件',
  },
  components,
  mixins: [flowcenter],
  data() {
    const informColumns = [
      {
        title: '业务类型',
        dataIndex: 'appCat',
        sdCandidate: true,
      },
      {
        title: '标题',
        dataIndex: 'title',
        sdClickable: true,
        customRender: this.pjobRender,
      },
      {
        title: '发送人',
        dataIndex: 'senderName',
        width: '130px',
      },
      {
        title: '发送时间',
        dataIndex: 'sentDate',
        sdRender: TableColumnTypes.dateTime,
        sorter: true,
        defaultSortOrder: 'desc',
        width: '180px',
      },
      {
        title: '发起人',
        dataIndex: 'creatorName',
        sdCandidate: true,
        width: '130px',
      },
      {
        title: '发起部门',
        dataIndex: 'createDeptName',
        sdCandidate: true,
        width: '260px',
      },
      {
        title: '创建时间',
        dataIndex: 'creationTime',
        sdRender: TableColumnTypes.dateTime,
        width: '180px',
        sdCandidate: true,
      },
    ]
    const repliedinformColumns = [
      {
        title: '业务类型',
        dataIndex: 'appCat',
        sdCandidate: true,
      },
      {
        title: '标题',
        dataIndex: 'title',
        sdClickable: true,
        customRender: this.pjobRender,
      },
      {
        title: '发送人',
        dataIndex: 'senderName',
        width: '130px',
      },

      {
        title: '阅读时间',
        dataIndex: 'seenDate',
        sdRender: TableColumnTypes.dateTime,
        sorter: true,
        width: '180px',
        defaultSortOrder: 'desc',
      },
      {
        title: '发起人',
        dataIndex: 'creatorName',
        sdCandidate: true,
        width: '130px',
      },
      {
        title: '发起部门',
        dataIndex: 'createDeptName',
        sdCandidate: true,
        width: '260px',
      },
      {
        title: '创建时间',
        dataIndex: 'creationTime',
        sdRender: TableColumnTypes.dateTime,
        defaultSortOrder: 'desc',
        sdCandidate: true,
      },
    ]
    return {
      activeKey: 'inform',
      informColumns,
      repliedinformColumns,
      // 业务类型树筛选条件
      expressions: {
        inform: [{ dataType: 'str', name: 'status', op: 'ne', stringValue: '2' }],
        'replied-inform': [],
      },
      treeId: { inform: '', 'replied-inform': '' },
      actions: [
        {
          label: '批量阅毕',
          id: 'batch',
          type: TableActionTypes.batch,
          permission: null,
          callback: this.onBatch,
        },
      ],
    }
  },
  methods: {
    onBatch(keys) {
      return FlowcenterService.saveBatch(keys).then((res) => {
        if (res) {
          // 延迟1s后刷新：待阅是异步更新的，立即刷新列表时可能待阅状态还未改变，故添加延迟刷新
          return new Promise((resolve) => {
            setTimeout(() => {
              Message.success('批量阅批成功')
              this.$refs.inform.clearSelection()
              this.$refs.inform.refresh(true)
              resolve(true)
            }, 1000)
          })
        } else {
          Message.warn(res.message)
        }
      })
    },
  },
}
</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>
