<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import { useMessage } from 'naive-ui';
import RightIconn from '@/assets/imgs/Right.png';
import StopIcon from '@/assets/imgs/执行中.png';
import inIcon from '@/assets/imgs/盘库.png';
import { fetchAddInvManageTaskToWCS, fetchGetInvManageTask } from '@/service/api/taskmg';
import TodoWork from '../formulate/modules/formulate-search.vue';

const message = useMessage();

// 父组件的查询参数
const searchParams = ref<Api.InventoryTask.InventorySearchParams>({
  TaskStatus: null, // 任务状态
  CreateUser: '', // 创建任务的用户名
  CreateTimeStart: '', // 创建时间
  CreateTimeEnd: '' // 创建时间
});

// 重置搜索参数的方法
function resetSearchParams() {
  searchParams.value = {
    TaskStatus: null, // 任务状态
    CreateUser: null, // 创建任务的用户名
    CreateTimeStart: null, // 创建时间
    CreateTimeEnd: null // 创建时间
  };
}

const TodoWorkManageTask = ref<Api.InventoryTask.Inventory[] | undefined>([]);

async function GetTodoWorkList() {
  const datas = await fetchGetInvManageTask(searchParams.value);
  TodoWorkManageTask.value = datas.data?.data;
}

// 获取分页数据的方法
function getDataByPage() {
  // 使用 searchParams 获取数据逻辑，例如发送 API 请求
  // console.log('获取数据：', searchParams.value);
  GetTodoWorkList();
}

async function AddManageTaskList(selectedTasks: Api.InventoryTask.Inventory) {
  const response = await fetchAddInvManageTaskToWCS(selectedTasks);
  if (response.data?.Status === 1) {
    await GetTodoWorkList();
    message.info(response.data?.msg, { duration: 5000 });
  }
}

const formatTaskStatus = (status: number | null) => {
  if (status === null) return '未知';
  switch (status) {
    case 0:
      return '待执行';
    case 1:
      return '执行中';
    case 2:
      return '已完成';
    case 3:
      return '异常';
    default:
      return '未知';
  }
};
function getStackerName(code: string) {
  switch (code) {
    case '11001':
      return '一号堆垛机';
    case '11002':
      return '二号堆垛机';
    default:
      return code; // 或者返回 '未知堆垛机'
  }
}
// onMounted(async () => {
//   await GetTodoWorkList();
// });
onMounted(() => {
  GetTodoWorkList(); // 先立即执行一次

  const intervalId = setInterval(() => {
    GetTodoWorkList();
  }, 3000); // 每隔1000ms执行一次

  // 如果你需要在组件卸载时清除定时器，记得加上：
  onUnmounted(() => {
    clearInterval(intervalId);
  });
});
</script>

<template>
  <div class="flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <TodoWork v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
    <NInfiniteScroll :distance="10">
      <NCard v-for="item in TodoWorkManageTask" :key="item.TaskID" class="item">
        <div class="card-content">
          <div class="left">
            <NAvatar class="avatars" :src="inIcon" />
            <span class="title">单号:{{ item.TaskID }}</span>
          </div>
          <div class="center">
            <p class="line data-row">
              <span :title="item.TaskID" class="wide">
                <span class="task-quantity">单号ID:</span>
                {{ item.TaskID }}
              </span>
              <span>
                <span class="task-quantity">创建人:</span>
                {{ item.CreateUser }}
              </span>
              <span>
                <span class="task-quantity">任务状态:</span>
                {{ formatTaskStatus(item.TaskStatus) }}
              </span>
              <span>
                <span class="task-quantity">任务类型:</span>
                盘点
              </span>
              <span class="wide">
                <span class="task-quantity">堆垛机:</span>
                {{ getStackerName(item.Ex1) }}
              </span>
              <span class="wide">
                <span class="task-quantity">创建时间:</span>
                {{ item.CreateTime }}
              </span>
            </p>
          </div>
          <div class="right">
            <!-- <NButton class="btn" icon-placement="right" ghost :render-icon="renderIcon">删除</NButton> -->
            <div class="btn left">
              <NPopconfirm v-if="item.TaskStatus === 0" :show-icon="false" @positive-click="AddManageTaskList(item)">
                <template #trigger>
                  <div class="left">
                    <span class="right_title">执&nbsp;&nbsp;&nbsp;行</span>
                    <NAvatar class="avatars2" :src="RightIconn" />
                  </div>
                </template>
                确认执行当前任务？
              </NPopconfirm>
              <span v-if="item.TaskStatus === 1" class="right_title">执行中</span>
              <NAvatar v-if="item.TaskStatus === 1" class="avatars2" :src="StopIcon" />
            </div>
          </div>
        </div>
      </NCard>
    </NInfiniteScroll>
  </div>
</template>

<style scoped>
.center {
  flex-grow: 1;
  padding: 0 50px;
}

.line {
  margin-top: 2vh;
  margin-bottom: 2vh;
  font-size: 14px;
}

.data-row {
  display: flex;
  gap: 10px;
  margin-top: 2vh;
}

.data-row span {
  flex: 1 1 20%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}

/* 增加宽度权重 */
.data-row span.wide {
  flex: 2 1 30%; /* 或者你可以尝试 3 1 40% 之类的，根据需要调 */
}
.task-quantity {
  color: #868686;
  margin-right: 10px;
}
.card-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-container {
  display: flex;
  justify-content: space-between; /* 将子元素分散在两端 */
  align-items: center; /* 垂直居中对齐 */
}
.left {
  display: flex;
  align-items: center;
}
.icon {
  font-size: 24px;
  margin-right: 8px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}
.right_title {
  font-size: 18px;
  font-weight: bold;
}

.right {
  display: flex;
  justify-content: space-between;
  width: 140px;
}

.btn {
  cursor: pointer;
  margin-right: 1vw;
  margin-left: 1vw;
}

.avatars {
  background-color: transparent;
  margin-right: 10px;
  margin-left: 10px;
  min-width: 30px;
  min-height: 30px;
}
.avatars2 {
  background-color: transparent;
  margin-left: 10px;
  min-width: 30px;
  min-height: 30px;
}
.item {
  margin-bottom: 15px;
}

.outin {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 30px;
  background-color: #43b36b;
  border-bottom-left-radius: 10px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  /* font-weight: bold; */
}
</style>
