<template>
  <sd-data-table
    :ref="listType"
    :data-url="dataUrl"
    :columns="getColumns(listType)"
    :show-header="false"
    :class="$style.list"
    :actions="actions"
    :pagination="{ pageSize: 5, showSizeChanger: false }"
    :row-key="(record) => record.id || record.instId"
    :process-req="processReq"
    :filter-expressions="expressions"
    @dataLoaded="updateTaskNumber"
  >
    <a slot="bt" slot-scope="text, record" :class="$style.title" @click="click(record)">
      <h3 :class="$style.htitle">
        <span
          :class="
            listType === 'todo'
              ? record.seen
                ? ''
                : $style.unread
              : listType === 'inform'
              ? record.opened === 0
                ? $style.unread
                : ''
              : ''
          "
        >
          <a-badge
            v-if="
              listType === 'todo'
                ? !record.seen
                : listType === 'inform'
                ? record.opened === 0
                : false
            "
            dot
            title="未查看"
          />
          <span :title="text">{{ text | ellipsis }}</span>
        </span>
        <a-tag
          v-if="record.urgencyLevel !== 0 && listType === 'todo'"
          color="red"
          :class="$style.tags"
          >{{ record.urgencyLevelName }}
        </a-tag>
        <a-tag v-if="!!record.isCommunicate" color="blue" :class="$style.tags">沟通</a-tag>
        <a-tag v-if="record.reminder && listType === 'todo'" color="orange" :class="$style.tags"
          >催</a-tag
        >
        <a-tooltip>
          <template slot="title">
            {{ record.groupPath }}
          </template>
          <a-tag v-if="record.srcTrustId" color="blue">兼</a-tag>
        </a-tooltip>
        <a-tag v-if="record.trustor" color="blue" :class="$style.tags"
          >代{{ record.trustorName }}</a-tag
        >
      </h3>
      <div>
        <span>发起部门:{{ record.creatorDeptName || record.createDeptName }}</span>
        <span>发起人:{{ record.creatorName }}</span>
        <a-tooltip>
          <template v-if="record.activeOperatorUsers" slot="title">
            {{ record.activeOperatorUsers }}
          </template>
          <span v-if="listType === 'processed'" :class="$style.dealPerson"
            >当前处理人:{{ record.activeOperatorUsers }}</span
          >
        </a-tooltip>
        <span>创建时间:{{ record.creationTime || record.startDate | sdDateFormat }}</span>
      </div>
    </a>
    <div slot="flowTimeToDeadLine" slot-scope="text, record">
      <div
        v-if="record.flowTimeToDeadline"
        :class="{
          [$style.limittime]: record.flowColor === 'blue',
          [$style.expiretime]: record.flowColor === 'orange',
          [$style.overtime]: record.flowColor === 'red',
        }"
      >
        <a-icon type="sd-3-circle" title="全流程限时" :class="$style.remind" />{{
          deadline(record.flowColor)
        }}:
        <div :class="$style.time" :title="record.flowTimeToDeadline"
          >{{ record.flowTimeToDeadline }}
        </div>
      </div>
    </div>
    <div slot="stepTimeToDeadLine" slot-scope="text, record">
      <div
        v-if="record.stepTimeToDeadline"
        :class="{
          [$style.limittime]: record.stepColor === 'blue',
          [$style.expiretime]: record.stepColor === 'orange',
          [$style.overtime]: record.stepColor === 'red',
        }"
      >
        <a-icon type="exclamation-circle" title="本环节限时" :class="$style.remind" />{{
          deadline(record.stepColor)
        }}:
        <div :class="$style.time" :title="record.stepTimeToDeadline"
          >{{ record.stepTimeToDeadline }}
        </div>
      </div>
    </div>
  </sd-data-table>
</template>

<script>
// import loginService from '@/login/login-service'
import { setUserInfo, getUserInfo } from '@/common/store-mixin'
import TodoListService from './todo-list-service'
import components from './_import-components/sd-todo-list-import'
const columns = [
  {
    title: '标题',
    dataIndex: 'title',
    scopedSlots: { customRender: 'bt' },
  },
  {
    title: '业务类型名',
    dataIndex: 'appCat',
    width: '150px',
  },
  {
    title: '超时时间',
    dataIndex: 'alarmDate',
    scopedSlots: { customRender: 'alarmDate' },
    width: '150px',
  },
]

export default {
  name: 'SdTodoList',
  metaInfo: {
    title: '待办',
  },
  filters: {
    // 超过45位显示 ...
    ellipsis: function(value) {
      if (!value) return ''
      if (value.length > 45) {
        return value.slice(0, 45) + '...'
      }
      return value
    },
  },
  components,
  props: {
    listType: {
      default: 'todo',
      type: String,
    },
  },
  data() {
    return {
      columns,
      currdate: new Date().getTime(),
      actions: [],
    }
  },
  computed: {
    expressions() {
      if (this.listType === 'inform') {
        return [
          {
            dataType: 'str',
            name: 'status',
            op: 'ne',
            stringValue: '2',
          },
        ]
      }
      return []
    },
    dataUrl() {
      return `api/framework/v1/user-tasks/${this.listType}-with-trustor`
    },
    deadline() {
      return function(type) {
        let deadline = ''
        switch (type) {
          case 'blue':
            deadline = '限时'
            break
          case 'orange':
            deadline = '快到期'
            break
          case 'red':
            deadline = '已超时'
            break
        }
        return deadline
      }
    },
  },
  created() {
    if (['completed', 'processed', 'replied-inform'].includes(this.listType)) {
      this.expressions = []
    } else {
      this.expressinos = [
        {
          dataType: 'str',
          name: 'status',
          op: 'ne',
          stringValue: '2',
        },
      ]
    }
  },
  methods: {
    updateTaskNumber(data) {
      const userInfo = getUserInfo()
      if (this.listType === 'todo') {
        userInfo.todoNumbers = data.total
      }
      if (this.listType === 'inform') {
        userInfo.toReadNumbers = data.total
      }
      setUserInfo(userInfo)
    },
    click(record) {
      if (this.listType === 'todo' && !record.seen) {
        record.seen = true
      } else if (this.listType === 'inform' && record.opened === 0) {
        record.opened = 1
      }
      TodoListService.openTaskItem(record, this.listType).then((refreshFlag) => {
        if (refreshFlag) this.$refs[this.listType].refresh()
      })
    },
    // 判断传过来的listType是否为已办结列表
    getColumns(listType) {
      if (listType === 'processed') {
        return [
          {
            title: '标题',
            dataIndex: 'title',
            scopedSlots: { customRender: 'bt' },
          },
          {
            title: '业务类型名',
            dataIndex: 'appCat',
            width: '130px',
          },
          {
            title: '当前状态',
            dataIndex: 'activeStepNames',
            width: '130px',
          },
          {
            title: '超时时间',
            dataIndex: 'alarmDate',
            scopedSlots: { customRender: 'alarmDate' },
            width: '130px',
          },
          {
            title: '排序时间',
            dataIndex: 'processDate',
            defaultSortOrder: 'desc',
            sdHidden: true,
            width: '130px',
          },
        ]
      } else if (listType === 'todo') {
        return [
          {
            title: '标题',
            dataIndex: 'title',
            scopedSlots: { customRender: 'bt' },
          },
          {
            title: '业务类型名',
            dataIndex: 'appCat',
            width: '150px',
          },
          {
            title: '全流程限时',
            dataIndex: 'flowTimeToDeadLine',
            scopedSlots: { customRender: 'flowTimeToDeadLine' },
            width: '150px',
          },
          {
            title: '本环节限时',
            dataIndex: 'stepTimeToDeadLine',
            scopedSlots: { customRender: 'stepTimeToDeadLine' },
            width: '150px',
          },
          {
            title: '排序时间',
            dataIndex: 'sentDate',
            sdHidden: true,
            width: '150px',
          },
        ]
      } else if (listType === 'inform') {
        return [
          {
            title: '标题',
            dataIndex: 'title',
            scopedSlots: { customRender: 'bt' },
          },
          {
            title: '业务类型名',
            dataIndex: 'appCat',
            width: '150px',
          },
          {
            title: '超时时间',
            dataIndex: 'alarmDate',
            scopedSlots: { customRender: 'alarmDate' },
            width: '150px',
          },
          {
            title: '排序时间',
            dataIndex: 'sentDate',
            defaultSortOrder: 'desc',
            sdHidden: true,
            width: '150px',
          },
        ]
      } else if (listType === 'completed') {
        return [
          {
            title: '标题',
            dataIndex: 'title',
            scopedSlots: { customRender: 'bt' },
          },
          {
            title: '业务类型名',
            dataIndex: 'appCat',
            width: '150px',
          },
          {
            title: '超时时间',
            dataIndex: 'alarmDate',
            scopedSlots: { customRender: 'alarmDate' },
            width: '150px',
          },
          {
            title: '排序时间',
            dataIndex: 'finishDate',
            defaultSortOrder: 'desc',
            sdHidden: true,
            width: '150px',
          },
        ]
      } else if (listType === 'replied-inform') {
        return [
          {
            title: '标题',
            dataIndex: 'title',
            scopedSlots: { customRender: 'bt' },
          },
          {
            title: '业务类型名',
            dataIndex: 'appCat',
            width: '150px',
          },
          {
            title: '超时时间',
            dataIndex: 'alarmDate',
            scopedSlots: { customRender: 'alarmDate' },
            width: '150px',
          },
          {
            title: '阅读时间',
            dataIndex: 'seenDate',
            sdHidden: true,
            defaultSortOrder: 'desc',
          },
          {
            title: '创建时间',
            dataIndex: 'creationTime',
            defaultSortOrder: 'desc',
            sdHidden: true,
          },
        ]
      } else {
        return [
          {
            title: '标题',
            dataIndex: 'title',
            scopedSlots: { customRender: 'bt' },
          },
          {
            title: '业务类型名',
            dataIndex: 'appCat',
            width: '150px',
          },
          {
            title: '超时时间',
            dataIndex: 'alarmDate',
            scopedSlots: { customRender: 'alarmDate' },
            width: '150px',
          },
        ]
      }
    },
    processReq(req) {
      if (this.listType === 'todo') {
        req.data.creatorDeptLevel = 'GROUP' // 返回创建部门
      }
      return req
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.list table tr {
  td {
    :global(.ant-btn-group) {
      display: none;
    }
    .title {
      div {
        line-height: 100%;
        span {
          display: inline-block;
          margin-right: 15px;
          overflow: hidden;
          color: $text-color;
        }
        .deal-person {
          max-width: 200px;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
    .time {
      overflow: hidden;
      text-indent: 20px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .remind {
      margin-right: 4px;
    }
  }
}

/* 限时 */
.limittime {
  color: $blue-6;
}

/* 快到期 */
.expiretime {
  color: $yellow-6;
}

.overtime {
  color: $red-6;
}
.unread {
  :global(.ant-badge) {
    margin-right: 6px;
  }

  font-weight: 600;
}
.tags {
  margin-top: 2px;
  margin-left: 5px;
}
.htitle {
  display: flex;
  span {
    align-self: center;
  }
  :global(.ant-tag) {
    margin-right: 0;
  }
}
</style>
