<template>
  <a-card>
    <sd-data-table-sys
      ref="dataTable"
      data-url="api/framework/v1/work-handover/list"
      :columns="columns"
      :actions="actions"
      :ex="false"
      :row-key="'id'"
      :search-fields="['fromUserName', 'toUserName']"
      @rowClick="rowClick"
    >
      <template slot="randerTransferNum" slot-scope="text">
        <div title="">
          <template v-for="(item, index) in parseTransferNum(text)">
            <template v-if="index !== 0">
              ,
            </template>
            {{ item.name }} : {{ item.value }}
          </template>
        </div>
      </template>
    </sd-data-table-sys>
    <sd-handover-action
      ref="startHandOver"
      @feedback="
        (res) => {
          if (res) {
            this.$refs.dataTable.clearSelection(true)
            this.$refs.dataTable.refresh()
          }
        }
      "
    ></sd-handover-action>
    <sd-handover-log ref="handOverLog"></sd-handover-log>
  </a-card>
</template>

<script>
import TableColumnTypes from '../common/services/table-column-types'
import components from './_import-components/sd-handover-list-import'

export default {
  name: 'SdHandoverList',
  metaInfo: {
    title: 'SdHandoverList',
  },
  components,
  data() {
    return {
      keyMap: {
        todoNumber: '待办数量',
        processedNumber: '已办数量',
        toReadNumber: '待阅数量',
        readNumber: '已阅数量',
        roleInfo: '角色数量',
        userGroupInfo: '用户组数量',
      },
      columns: [
        {
          title: '交接人',
          dataIndex: 'fromUserName',
          sdClickable: true,
        },
        {
          title: '承接人',
          dataIndex: 'toUserName',
          sdClickable: true,
        },
        {
          title: '交接时间',
          dataIndex: 'transferDate',
          sdRender: TableColumnTypes.dateTime,
          sdClickable: true,
        },
        {
          title: '交接内容',
          dataIndex: 'transferNum',
          sdClickable: true,
          scopedSlots: {
            customRender: 'randerTransferNum',
          },
          width: '50%',
        },
        {
          title: '创建时间',
          dataIndex: 'transferDate',
          sdHidden: true,
          defaultSortOrder: 'desc',
        },
      ],
      actions: [
        {
          label: '新建',
          id: 'new',
          permission: null,
          type: 'primary',
          callback: () => {
            this.$refs.startHandOver.show('交接设置')
            this.$refs.startHandOver.belongedOrg = this.$refs.dataTable?.getHierarchy()
          },
        },
      ],
    }
  },
  methods: {
    rowClick(record) {
      this.$refs.handOverLog.show(record)
    },
    parseTransferNum(transferNum) {
      if (transferNum === '') return {}
      const oTransferNum = JSON.parse(transferNum)
      return Object.keys(oTransferNum)
        .filter((item) => {
          let blnReturn = false
          if (this.keyMap[item]) {
            blnReturn = true
          }
          if (['roleInfo', 'userGroupInfo'].indexOf(item) > -1) {
            blnReturn = oTransferNum[item] !== 0
          }
          return blnReturn
        })
        .map((item) => {
          if (['roleInfo', 'userGroupInfo'].indexOf(item) > -1) {
            return {
              name: this.keyMap[item],
              value: Object.keys(oTransferNum[item]).length,
            }
          } else {
            return {
              name: this.keyMap[item],
              value: oTransferNum[item],
            }
          }
        })
    },
  },
}
</script>

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