<script setup lang="ts">
import { defineEmits, h, onMounted, ref, watch } from 'vue';
import { NIcon } from 'naive-ui';
import { CheckmarkDoneCircleOutline as CheckIcon } from '@vicons/ionicons5';
import { fetchGetInvTaskDetailItem } from '@/service/api/taskmg';
import outIcon from '@/assets/imgs/出库2.png';
import outIcon2 from '@/assets/imgs/盘库2.png';
import outIcon3 from '@/assets/imgs/盘库3.png';
// ✅ 正确接收 props
const props = defineProps<{
  taskData: Api.InventoryTask.Inventory;
}>();
const emit = defineEmits<{
  (e: 'submitted'): void;
}>();

const checkIcon = () => {
  return h(NIcon, null, {
    default: () => h(CheckIcon)
  });
};
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 '未知';
  }
};
const CloseTaskDetail = () => {
  emit('submitted'); // 通知父组件关闭
};

const taskData_Chidl = ref<Api.InventoryTask.InventoryItem[]>([]);
async function GetTaskDetailItem() {
  const datas = await fetchGetInvTaskDetailItem({ TaskNo: props.taskData.TaskID });
  taskData_Chidl.value = datas.data?.data ?? [];
}

onMounted(async () => {
  if (props.taskData) {
    await GetTaskDetailItem();
  }
});

watch(
  () => props.taskData,
  newVal => {
    if (newVal) {
      GetTaskDetailItem();
    }
  },
  { immediate: false, deep: true }
);
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <NCard :bordered="false" size="small" class="card-wrapper">
      <NPageHeader>
        <template #title>
          <a class="asize">盘点任务作业明细</a>
        </template>
        <template #avatar>
          <NAvatar class="avatars" :src="outIcon" />
        </template>
        <template #extra>
          <NSpace>
            <NButton strong :render-icon="checkIcon" size="medium" @click="CloseTaskDetail">返回</NButton>
          </NSpace>
        </template>
      </NPageHeader>
      <div>
        <p class="data-row">
          <span>
            <span class="task-quantity">任务ID:</span>
            {{ taskData.TaskID }}
          </span>
          <span>
            <span class="task-quantity">创建人:</span>
            {{ taskData.CreateUser }}
          </span>
          <span>
            <span class="task-quantity">任务状态:</span>
            {{ formatTaskStatus(taskData.TaskStatus) }}
          </span>
          <span>
            <span class="task-quantity">创建时间:</span>
            {{ taskData.CreateTime }}
          </span>
        </p>
      </div>
    </NCard>
    <NCard :bordered="false" size="small" class="card-wrapper">
      <div class="container">
        <!-- 盘平 -->
        <div class="section surplus">
          <NAvatar class="icon" :src="outIcon" />
          <div class="text">
            <div v-if="taskData_Chidl.length > 0" class="value">{{ taskData_Chidl[0].BreakEven }} 件</div>
            <div class="label">盘平</div>
          </div>
        </div>

        <!-- 盘盈 -->
        <div class="section normal">
          <NAvatar class="icon" :src="outIcon2" />
          <div class="text">
            <div v-if="taskData_Chidl.length > 0" class="value">+{{ taskData_Chidl[0].Profit }} 件</div>
            <div class="label">盘盈</div>
          </div>
        </div>

        <!-- 盘亏 -->
        <div class="section deficit">
          <NAvatar class="icon" :src="outIcon3" />
          <div class="text">
            <div v-if="taskData_Chidl.length > 0" class="value">-{{ taskData_Chidl[0].Loss }} 件</div>
            <div class="label">盘亏</div>
          </div>
        </div>
      </div>
    </NCard>
    <NInfiniteScroll :distance="110">
      <NCard v-for="item in taskData_Chidl" :key="item.InvTaskID" class="item"></NCard>
    </NInfiniteScroll>
  </div>
</template>

<style scoped>
.data-row {
  display: flex;
  gap: 10px; /* 控制间距 */
  margin-top: 2vh;
}
.data-row span {
  flex: 1 1 20%; /* 平分宽度，给每个 span 设置相同的宽度，确保每个 span 占 20% */
  box-sizing: border-box;
}
.task-quantity {
  color: #868686;
  margin-right: 10px;
}
.data-row2 {
  margin-bottom: 1vh;
}
.avatars {
  background-color: transparent;
}
.item {
  margin-bottom: 10px;
}
.extra-container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 10px; /* 控制间距，可以根据需要调整 */
}
.extra-container a {
  font-size: 18px; /* 根据需要调整文字大小 */
  font-weight: bold; /* 设置为粗体 */
}

.asize {
  font-size: 18px; /* 根据需要调整文字大小 */
  font-weight: bold; /* 设置为粗体 */
}

.container {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.section {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 4px;
}

.icon {
  width: 100px;
  height: 100px;
  object-fit: contain;
  background-color: transparent;
}

.text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.value {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

.label {
  font-size: 14px;
  color: #666;
}

/* 颜色区分 */
.surplus .value {
  color: #18a058;
}
.normal .value {
  color: #4d62a3;
}
.deficit .value {
  color: #d03050;
}

/* 可选分隔线 */
.section:not(:last-child) {
  border-right: 1px solid #eee;
}
</style>
