<template>
  <div>
    <a-list :class="$style.home" :data-source="data">
      <a-skeleton active :paragraph="{ rows: 5 }" :loading="loading" />
      <a-list-item slot="renderItem" slot-scope="item" :class="$style.items">
        <template>
          <a-list-item-meta>
            <a
              slot="title"
              :class="[$style.title, item.seen ? '' : $style.unread]"
              rel="opener"
              @click="toOpenlink(item)"
            >
              <a-badge v-if="!item.seen" dot title="未查看" /> {{ item.title }}
            </a>
          </a-list-item-meta>
          <div :class="$style.datetime">{{ item.sentDate | sdDateFormat }}</div>
        </template>
      </a-list-item>
      <a-empty v-if="isempty" :class="$style.emptySize">
        <img slot="image" src="@/todo/nodata.png" alt="" />
      </a-empty>
    </a-list>
  </div>
</template>

<script>
import LeaderscheduleService from '@/leader-office/leaderschedule-service'
import components from './_import-components/sd-todo-list-approved-import'

import TodoListService from './todo-list-service'
export default {
  name: 'SdTodoListApproved',
  components,
  props: {
    activeKey: {
      type: String,
      default: '',
    },
    leaderList: {
      type: Array,
      default: undefined,
    },
  },
  data() {
    return {
      loading: true,
      data: [],
      isempty: false,
      listType: 'todo',
      arrMsId: [],
    }
  },
  created() {
    // this.getApproved()
    this.getLeadersApprovedFn()
    // 领导秘书关系一对多后获取秘书本人id
    this.getMsId()
  },
  methods: {
    getMsId() {
      LeaderscheduleService.getMsId().then((res) => {
        this.arrMsId = res
      })
    },

    makePath(task) {
      return TodoListService.makePath(task, this.listType)
    },
    getLeadersApprovedFn() {
      const params = {
        columns: 'processName,title,creatorName,creatorDeptName,creationTime,sentDate',
        maxResults: 5,
        startPosition: 0,
        orderBy: 'sentDate desc',
        expressions: [
          {
            dataType: 'str',
            name: 'openMode',
            op: 'ne',
            stringValue: '31',
          },
        ],
        account: this.activeKey,
      }
      TodoListService.getLeadersApproved(params).then((data) => {
        this.$emit('count', data.total)
        this.data = data.datas
        this.loading = false
        if (data.datas.length < 1) {
          this.isempty = true
        }
      })
    },
    toOpenlink(item) {
      if (!item.seen) {
        item.seen = true
      }
      const leaderSecretaryMapId = this.arrMsId.find(
        (item) => item.leaderAccount === this.activeKey
      ).secretaryId
      LeaderscheduleService.openTaskItem(
        item,
        this.listType,
        this.activeKey,
        leaderSecretaryMapId
      ).then((refreshFlag) => {
        this.loading = true
        this.getLeadersApprovedFn()
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.items {
  padding: 10px 16px;
  :global(.ant-list-item-meta) {
    display: inline-block;
    width: calc(100% - 200px);
    .title {
      display: inline-block;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      :global(.ant-badge) {
        margin-right: 2px;
        vertical-align: baseline;
      }
    }
    .unread {
      font-weight: 600;
    }
  }

  .datetime {
    width: 200px;
    text-align: right;
  }
}
</style>
