<template>
  <a-card>
    <a-tabs v-if="leaderList.length > 0" v-model="activeKey">
      <a-tab-pane v-for="leader in leaderList" :key="leader.leaderAccount" :tab="leader.leaderName">
        <sd-data-table
          :ref="leader.leaderAccount"
          data-url="api/framework/v1/user-tasks/todo/taskinfos"
          :columns="columns"
          :row-key="'id'"
          :filter-expressions="expressions"
          :search-fields="['title']"
          :process-req="processReq"
        >
          <a
            slot="bt"
            slot-scope="text, record"
            target="_blank"
            rel="opener"
            :class="record.seen ? '' : $style.unread"
            @click="openTaskItem(record, 'todo')"
          >
            <a-badge v-if="!record.seen" dot title="未查看" />{{ text }}
          </a>
          <a-switch
            slot="isTop"
            slot-scope="text, record"
            :checked="text === 1"
            :loading="topTodolist.indexOf(record.id) > -1"
            @change="
              (checked) => {
                checkTop(checked, record, leader.leaderAccount)
              }
            "
          />
        </sd-data-table>
      </a-tab-pane>
    </a-tabs>
    <a-empty v-else />
  </a-card>
</template>

<script>
import TableColumnTypes from '@/common/services/table-column-types'
import leaderOfficeMixins from './leader-office-mixins'
import components from './_import-components/sd-leadertodolist-import'
import LeaderscheduleService from './leaderschedule-service'

export default {
  name: 'SdLeadertodolist',
  metaInfo: {
    title: '领导待批文件',
  },
  components,
  mixins: [leaderOfficeMixins],
  data() {
    return {
      leaderList: [], // 领导列表
      activeKey: '',
      columns: [
        {
          title: '业务类型',
          dataIndex: 'appCat',
        },
        {
          title: '标题',
          dataIndex: 'title',
          scopedSlots: { customRender: 'bt' },
        },
        {
          title: '发起人',
          dataIndex: 'creatorName',
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '发起部门',
          dataIndex: 'creatorDeptName',
        },
        {
          title: '创建时间',
          sdRender: TableColumnTypes.dateTime, // 特殊处理的数据类型，时间戳会自动调用sdDateFormat处理
          dataIndex: 'creationTime',
          width: '20%',
        },
        {
          title: '接收时间',
          sdRender: TableColumnTypes.dateTime, // 特殊处理的数据类型，时间戳会自动调用sdDateFormat处理
          defaultSortOrder: 'descend', // 没有点击任何排序列时，默认的排序列
          dataIndex: 'sentDate',
          width: '20%',
          sorter: true,
        },
        {
          title: '是否置顶',
          dataIndex: 'isTop',
          scopedSlots: { customRender: 'isTop' },
        },
      ],
      topTodolist: [],
      expressions: [
        {
          dataType: 'str',
          name: 'openMode',
          op: 'ne',
          stringValue: '31',
        },
      ],
    }
  },
  methods: {
    checkTop(checked, record, leader) {
      this.topTodolist.push(record.id)
      const params = {
        todoId: record.id,
        isTop: checked,
      }
      LeaderscheduleService.setTop(params)
        .then((res) => {
          if (res) {
            this.$refs[leader][0].refresh(true)
          }
        })
        .finally(() => {
          const index = this.topTodolist.indexOf(record.id)
          if (index > -1) {
            this.topTodolist.splice(index, 1)
          }
        })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.unread {
  :global(.ant-badge) {
    margin-right: 6px;
    vertical-align: baseline;
  }

  font-weight: 600;
}
</style>
