<script setup lang="tsx">
import { h, ref } from 'vue';
import { NButton, NIcon } from 'naive-ui';
import { AddCircleOutline as CashIcon } from '@vicons/ionicons5';
import { useTable, useTableOperate } from '@/hooks/common/table';
import { useAppStore } from '@/store/modules/app';
import { fetchGetFinishManageTask } from '@/service/api/taskmg';
import inIcon from '@/assets/imgs/入库.png';
import outIcon from '@/assets/imgs/出库.png';
import PlanentrySearch from '@/views/planmg/planentry/modules/planentry-search.vue'; // 表格数据初始化import

// 控制是否显示子组件
const showTaskDetail = ref(false);
const currentTaskData = ref<Api.PlanManage.TaskDetails>({} as Api.PlanManage.TaskDetails);
// 显示组件
const showTaskDetail_Click = (task: Api.PlanManage.TaskDetails) => {
  showTaskDetail.value = true;
  currentTaskData.value = task;
};
// 供子组件调用的回调，用于隐藏子组件
const onTaskDetailSubmitted = () => {
  showTaskDetail.value = false;
};
const handleTaskIDClick = (task: Api.PlanManage.TaskDetails) => {
  showTaskDetail_Click(task);
};

const appStore = useAppStore();
const {
  columns,
  columnChecks,
  data,
  getData,
  getDataByPage,
  loading,
  mobilePagination,
  searchParams,
  resetSearchParams
} = useTable({
  apiFn: fetchGetFinishManageTask,
  showTotal: true,
  apiParams: {
    current: 1,
    size: 10,
    PalletNo: null, // 托盘号
    OrderLine: null, // 订单+行号
    TaskQty: null, // 任务数量
    RFID: null, // RFID编号
    TaskStatus: null, // 任务状态
    TaskType: null, // 任务类型
    CreateUser: null, // 创建任务的用户名
    CreateTimeStart: null, // 创建时间
    CreateTimeEnd: null // 创建时间
  },
  columns: () => [
    {
      key: 'index',
      title: '序号',
      align: 'center',
      width: 48
    },
    {
      key: 'TaskID',
      title: '任务ID',
      align: 'center',
      width: 150,
      render: row => {
        if (row.TaskID === null) {
          return '未知';
        }
        return (
          <a
            style={{
              color: '#359469',
              cursor: 'pointer' // 鼠标悬浮时变为指针样式
            }}
            onClick={() => handleTaskIDClick(row)} // 点击时触发事件
          >
            {row.TaskID}
          </a>
        );
      }
    },
    {
      key: 'PalletNo',
      title: '托盘号',
      align: 'center',
      width: 80
    },
    {
      key: 'TaskQty',
      title: '任务数量',
      align: 'center',
      width: 50
    },
    {
      key: 'RFID',
      title: 'RFID编号',
      align: 'center',
      width: 120
    },
    {
      key: 'TaskStatus',
      title: '任务状态',
      align: 'center',
      width: 60,
      render: row => {
        if (row.TaskStatus === null) {
          return '未知';
        }
        switch (row.TaskStatus) {
          case 0:
            return '待执行';
          case 1:
            return '执行中';
          case 2:
            return '已完成';
          case 3:
            return '异常';
          default:
            return '未知';
        }
      }
    },
    {
      key: 'TaskType',
      title: '任务类型',
      align: 'center',
      width: 50,
      render: row => {
        if (row.TaskType === null) {
          return '未知';
        }
        switch (row.TaskType) {
          case 1:
            return '入库';
          case 2:
            return '出库';
          case 3:
            return '盘库';
          default:
            return '未知';
        }
      }
    },
    {
      key: 'CreateUser',
      title: '创建用户',
      align: 'center',
      width: 120
    },
    {
      key: 'CreateTime',
      title: '创建时间',
      align: 'center',
      width: 120
    }
  ]
});
const { checkedRowKeys } = useTableOperate(data, getData);

const renderIcon = () => {
  return h(NIcon, null, {
    default: () => h(CashIcon)
  });
};

// 控制是否显示入库任务页面
const showInboundPlanning = ref(false);
// 显示组件
const showPlanning = () => {
  showInboundPlanning.value = true;
};
// 供子组件调用的回调，用于隐藏子组件
const onPlanningSubmitted = () => {
  showInboundPlanning.value = false;
};

// 控制是否显示出库任务页面
const showOutboundPlanning = ref(false);
// 显示组件
const showOutPlanning = () => {
  showOutboundPlanning.value = true;
};
// 供子组件调用的回调，用于隐藏子组件
const onOutPlanningSubmitted = () => {
  showOutboundPlanning.value = false;
};
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <NCard v-if="!showInboundPlanning && !showTaskDetail && !showOutboundPlanning">
      <NPageHeader subtitle="制定入库任务计划">
        <template #title>
          <a>入库任务</a>
        </template>
        <template #avatar>
          <NAvatar class="avatars" :src="inIcon" />
        </template>
        <template #extra>
          <NSpace>
            <NButton strong :render-icon="renderIcon" @click="showPlanning">创建入库任务</NButton>
          </NSpace>
        </template>
      </NPageHeader>
    </NCard>
    <NCard v-if="!showInboundPlanning && !showTaskDetail && !showOutboundPlanning">
      <NPageHeader subtitle="制定出库任务计划">
        <template #title>
          <a>出库任务</a>
        </template>
        <template #avatar>
          <NAvatar class="avatars" :src="outIcon" />
        </template>
        <template #extra>
          <NSpace>
            <NButton strong :render-icon="renderIcon" @click="showOutPlanning">创建出库任务</NButton>
          </NSpace>
        </template>
      </NPageHeader>
    </NCard>
    <NCard v-if="showInboundPlanning" class="amin">
      <InboundPlanning @submitted="onPlanningSubmitted" />
    </NCard>
    <NCard v-if="showOutboundPlanning" class="amin">
      <OutboundPlanning @submitted="onOutPlanningSubmitted" />
    </NCard>
    <PlanentrySearch
      v-if="!showInboundPlanning && !showTaskDetail && !showOutboundPlanning"
      v-model:model="searchParams"
      @reset="resetSearchParams"
      @search="getDataByPage"
    />
    <NCard
      v-if="!showInboundPlanning && !showTaskDetail && !showOutboundPlanning"
      title="历史完成任务"
      :bordered="false"
      size="small"
      class="sm:flex-1-hidden card-wrapper"
    >
      <template #header-extra>
        <TableHeaderOperationintask
          v-model:columns="columnChecks"
          :disabled-delete="checkedRowKeys.length === 0"
          :loading="loading"
          @refresh="getData"
        />
      </template>
      <NDataTable
        v-model:checked-row-keys="checkedRowKeys"
        :columns="columns"
        :data="data"
        size="small"
        :flex-height="!appStore.isMobile"
        :scroll-x="1500"
        :loading="loading"
        remote
        :row-key="row => row.OrderLineNumber"
        :pagination="mobilePagination"
        class="sm:h-full"
      />
    </NCard>
    <TaskDetail v-if="showTaskDetail" :task-data="currentTaskData" @submitted="onTaskDetailSubmitted"></TaskDetail>
  </div>
</template>

<style scoped>
.amin {
  height: 100%;
}
.amin_div {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 2vh;
}
.avatars {
  background-color: transparent;
}
</style>
