<template>
  <a-card
    title="待处理工单"
    :bordered="false"
    v-if="hasRole('superAdmin') || hasRole('admin')"
  >
    <template #extra>
      <a href="/oa/task">查看更多</a>
    </template>
    <div class="content">
      <a-space style="margin-bottom: 15px" v-if="editStatus" />
      <table class="ele-table ele-table-stripe ele-table-medium">
        <thead>
          <tr>
            <th width="80">工单号</th>
            <th width="100">工单类型</th>
            <th>问题描述</th>
            <th width="150">创建时间</th>
            <th width="100">状态</th>
          </tr>
        </thead>
        <tbody v-for="(item, index) in list" :key="index">
          <tr>
            <td>{{ item.taskId }}</td>
            <td>{{ item.taskType }}</td>
            <td>
              <div class="user-box">
                <div class="user-info">
                  <a-badge
                    :dot="!item.isRead && item.userId != userStore.info?.userId"
                  >
                    <a-avatar :src="item.lastAvatar" size="large" />
                  </a-badge>
                </div>
                <div
                  class="content"
                  style="display: flex; flex-direction: column"
                >
                  <div class="nickname">
                    <span class="ele-text-secondary">{{
                      item.lastNickname ? item.lastNickname : '未知'
                    }}</span>
                    <span
                      class="ele-text-placeholder"
                      style="padding-left: 10px"
                      >{{ timeAgo(item.updateTime) }}</span
                    >
                  </div>
                  <div class="text">
                    <a
                      class="ele-text-heading"
                      @click="openUrl('/oa/task/detail/' + item.taskId)"
                      >{{ item.content }}</a
                    >
                  </div>
                </div>
                <div class="last-time ele-text-info"> </div>
              </div>
            </td>
            <td>{{ toDateString(item.createTime, 'MM月dd日 HH:mm') }}</td>
            <td>
              <a-tag v-if="item.progress === TOBEARRANGED" color="red"
                >待安排</a-tag
              >
              <a-tag v-if="item.progress === PENDING" color="orange"
                >待处理</a-tag
              >
              <a-tag v-if="item.progress === PROCESSING" color="purple"
                >处理中</a-tag
              >
              <a-tag v-if="item.progress === TOBECONFIRMED" color="cyan"
                >待评价</a-tag
              >
              <a-tag v-if="item.progress === COMPLETED" color="green"
                >已完成</a-tag
              >
              <a-tag v-if="item.progress === CLOSED">已关闭</a-tag>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </a-card>
</template>

<script setup lang="ts">
  import { hasRole } from '@/utils/permission';
  import { ref, watch } from 'vue';
  import { pageTask } from '@/api/oa/task';
  import { Task } from '@/api/oa/task/model';
  import {
    CLOSED,
    COMPLETED,
    PENDING,
    PROCESSING,
    TOBEARRANGED,
    TOBECONFIRMED
  } from '@/api/oa/task/model/progress';
  import { openUrl } from '@/utils/common';
  import { timeAgo, toDateString } from 'ele-admin-pro';
  import { useUserStore } from '@/store/modules/user';

  const props = defineProps<{
    editStatus?: boolean;
    appId?: number;
    companyId?: number;
  }>();

  const list = ref<Task[]>([]);
  const userStore = useUserStore();

  const reload = () => {
    pageTask({ appId: props.appId }).then((res) => {
      if (res?.list) {
        list.value = res?.list;
      }
    });
  };

  watch(
    () => props.appId,
    (options) => {
      if (options) {
        reload();
      }
    },
    {
      immediate: true
    }
  );
</script>

<style scoped lang="less">
  .user-box {
    display: flex;
    align-items: center;
    .user-info {
      display: flex;
      flex-direction: column;
      align-items: start;
      margin-right: 7px;
    }
    .last-time {
      margin-left: 12px;
    }
    .content {
      .text {
        max-width: 90%;
      }
    }
  }
</style>
