<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "ModelReasoningResult",
});
</script>

<script setup lang="ts">
import Icon from "@/components/Module/Icon/index.vue";
import ModuleCard from "@/views/dataManage/index/components/Card/ModuleCard.vue";
import { ref, h, unref, reactive, onMounted, computed, watch } from "vue";
import {
  Button,
  Table,
  message,
  Modal,
  Space,
  Tooltip,
  Input,
  Select,
  SelectOption,
} from "ant-design-vue";
import { useMain } from "@/views/dataManage/index/hooks/mock.ts";
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration";

dayjs.extend(duration);

interface PropsType {
  state: Record<string, any>;
  api: Record<string, any>;
  requestMap: Record<string, any>;
  // data: Record<string, any>[];
}

const props = withDefaults(defineProps<PropsType>(), {
  state: () => {
    return {};
  },
  api: () => {
    return {};
  },
  requestMap: () => {
    return {};
  },
});

interface TableOptions {
  selectedRowKeys: string[];
  loading: boolean;
  list: Array<Record<string, any>>;
  total: number;
  pageParams: {
    page: number;
    size: number;
  };
}

const { generatorList, sleep } = useMain();

// 表头
const columns = [
  {
    title: "批号",
    dataIndex: "batch",
    width: "130px",
  },
  {
    title: "真值",
    dataIndex: "gt",
  },
  {
    title: "top1",
    dataIndex: "top1",
  },
  {
    title: "top2",
    dataIndex: "top2",
    width: "130px",
  },
  {
    title: "top3",
    dataIndex: "top3",
  },
];

// 表格配置项
const state = reactive<TableOptions>({
  loading: false, // 是否在请求
  selectedRowKeys: [], // 选中的数据
  list: props.state.taskResultList.value[0]?.batch_metrics, // 列表
  total: props.state.taskResultList.value[0]?.batch_metrics?.length, // 总数
  pageParams: {
    //分页
    page: 1,
    size: 5,
  },
});

const showList = computed(() => {
  const list = props.state.taskResultList.value[0]?.batch_metrics || [];
  const { page, size } = state.pageParams;
  const start = (page - 1) * size;
  const end = page * size;
  const listSlice = list.slice(start, end);
  return listSlice;
});

// 推理时间格式化
const workTimeFormat = (time: number | string) => {
  let ms = Number(time);
  const duration = dayjs.duration(ms);
  const hours = duration.hours().toString().padStart(2, "0");
  const minutes = duration.minutes().toString().padStart(2, "0");
  const seconds = duration.seconds().toString().padStart(2, "0");
  return `${hours}:${minutes}:${seconds}`;
};

// loading
const loading = computed(() => {
  return props.requestMap.taskResultRequest.loading.value;
});

// 分页
const onPageChange = async (options: Record<string, any>) => {
  const { current, pageSize } = options;
  state.pageParams.page = current;
  state.pageParams.size = pageSize;
  // if (current) {
  //   getList();
  // }
};

const selectTask = ref(undefined);

// 切换任务
const onSelectTaskChange = async (e: string | any, ...args: any) => {
  const res = await props.api.getTaskResult(e);
};

const sourceLoading = computed(() => {
  return props.requestMap.taskListRequest.loading.value;
});

const sourceOptions = computed(() => {
  return props.state.taskList.value.filter((item: Record<string, any>) => item.status == "success");
});

watch(
  () => sourceOptions.value,
  (val) => {
    console.log("taskListupdate", sourceOptions.value);
    if (sourceOptions.value.length) {
      console.log("taskListupdate", sourceOptions.value);

      onSelectTaskChange(sourceOptions.value[0].task_id);
      selectTask.value = sourceOptions.value[0].task_id;
    }
  },
  { immediate: true },
);

const prefix = "data-import";
</script>

<template>
  <div :class="prefix">
    <ModuleCard title="推理结果">
      <template #head-extra>
        <Select
          :loading="sourceLoading"
          placeholder="请选择数据来源"
          style="width: 200px"
          v-model:value="selectTask"
          @change="onSelectTaskChange"
        >
          <SelectOption v-for="item in sourceOptions" :value="item.task_id">{{
            item.task_description
          }}</SelectOption>
        </Select>
      </template>
      <Table
        :loading="loading"
        rowKey="id"
        :dataSource="showList"
        :columns="columns"
        :pagination="{
          showSizeChanger: true,
          total: props.state.taskResultList.value[0]?.batch_metrics?.length || 0,
          pageSize: state.pageParams.size,
          current: state.pageParams.page,
          pageSizeOptions: ['5', '10', '20', '50', '100'],
        }"
        @change="onPageChange"
      >
        <template #bodyCell="{ column, text, index, record }">
          <!-- 推理时间 -->
          <template v-if="column.dataIndex === 'workTime'">
            {{ workTimeFormat(text) }}
          </template>
          <!-- 时间格式化 -->
          <template v-if="['createTime'].includes(column.dataIndex as string)">
            {{ dayjs(text).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
          <!-- 编辑 -->
          <template v-if="column.dataIndex === 'operate'">
            <Space :size="10">
              <Tooltip title="编辑">
                <Button type="text" class="edit-btn">
                  <template #icon>
                    <Icon name="edit" />
                  </template>
                </Button>
              </Tooltip>
              <Tooltip title="删除" class="delete-btn">
                <!-- <Button type="text" @click="onShowDelete">
                  <template #icon>
                    <Icon name="delete" />
                  </template>
                </Button> -->
              </Tooltip>
            </Space>
          </template>
        </template>
      </Table>
    </ModuleCard>
  </div>
</template>

<style lang="scss" scoped>
$prefix: "data-import";

.#{$prefix} {
  width: 100%;
  height: 100%;
  .custom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 4px 4px 4px 4px;
    padding: 8px 16px;
  }
  .grey-btn {
    background: #aab5c4;
  }
  .edit-btn {
    color: #3662e3;
  }
  .delete-btn {
    color: #dd524c;
  }
  .marker-row {
    width: 100%;
    max-width: 500px;
    display: flex;
    align-items: center;
    justify-self: start;
    gap: 10px;
    &:hover {
      .marker-edit {
        display: block;
      }
    }
  }
  .marker-input {
    flex: 1;
  }
  .marker-operate {
    margin-left: auto;
  }
  .marker-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .marker-edit {
    margin-left: auto;
    display: none;
  }
  :deep(.ant-table-wrapper) {
    .ant-table {
      border-radius: 0;
      background: transparent;
      .ant-table-thead {
        > tr > th {
          border-bottom: none;
          background-color: #fff;
          &::before {
            background-color: #d8d8d8 !important;
          }
        }
        > tr > td {
          border-top: none;
        }
      }
      .ant-table-tbody > tr.ant-table-placeholder:hover > td {
        background-color: transparent;
      }
    }

    .ant-table-container table > thead > tr:first-child > *:first-child {
      border-start-start-radius: 0;
    }
    .ant-table-container table > thead > tr:first-child > *:last-child {
      border-start-end-radius: 0px;
    }
  }
}
</style>
