<script setup lang="ts">
import ahTable from "@/components/hTable/index.vue";
import {
  ComboModel,
  ConditionalType,
  intTableData,
  SearchConditions,
  TableColumnSearch,
  TableConfig,
} from "@/components/hTable/hTable";
import { onMounted, ref } from "vue";
import { de, fa } from "element-plus/es/locales.mjs";
import { hTableAPI } from "@/api/hTable";
import { getenum } from "@/api/enum";
import { ruleRequired, ruleRequiredNumber } from "@/utils/rules";
import { ElMessage } from "element-plus";
import { ReStart, RowRload } from "@/api/videoTask";
import { Refresh } from "@element-plus/icons-vue";
import { message } from "@/utils/message";
import { json } from "stream/consumers";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";

import { useRouter } from "vue-router";

const ControllerName = "VideoTask";

defineOptions({
  name: ControllerName,
});

const props = defineProps<{
  searchCallback?: (
    s: SearchConditions,
    tv: TableConfig
  ) => boolean | Promise<boolean> | void;
}>();
const route = useRouter();
const table = ref<{ initTable: (config: TableConfig) => void }>();
const tableData: TableConfig = intTableData({
  apiUrl: ControllerName,
  expandColumn: true,
  selectColumn: false, // 列表选择
  border: false, // 是否显示表格边框
  searchCallback: props.searchCallback,
  expandChange: expandChange,
  search: {
    // 查询条件
    show: true,
    PageSize: 10,
    showPage: true,
  },
  operationColumn: true, // 显示操作按钮
  operationColumnData: [],
  column: {
    // 行数据
    id: {
      label: "ID",
      width: "140px",
      search: new TableColumnSearch(true),
    },
    tagId: {
      label: "标签ID",
      width: "140px",
      search: new TableColumnSearch(true),
    },
    videoType: {
      label: "任务类型",
      width: "100px",
      type: "dropdown",
      search: new TableColumnSearch(true),
    },
    lastEnum: {
      label: "最后状态",
      width: "200px",
      type: "dropdown",
      search: new TableColumnSearch(true),
    },
    subject: {
      label: "学科",
      width: "100px",
      type: "dropdown",
      search: new TableColumnSearch(true),
    },
    comeFrom: {
      label: "IP",
      width: "120px",
    },
    mediaUrl: {
      label: "媒体地址",
      width: "300px",
    },
    createTime: {
      label: "创建时间",
    },
  },
  data: [],
  pageData: {
    total: 0,
  },
  selectRows: [],
});
const dialogRef = ref({
  visible: false,
  value: null as any,
  data: Object as any,
});
let redisChannelEnum = ref<ComboModel[]>([]);
const showTable = ref(false);
onMounted(async () => {
  //初始化数据

  tableData.column.videoType.setting.datasource = await getenum("AttachmentsInfoType");
  tableData.column.lastEnum.setting.datasource = await getenum("RedisChannelEnum");
  tableData.column.subject.setting.datasource = await getenum("SubjectEnum");
  redisChannelEnum.value = tableData.column.lastEnum.setting.datasource;
  showTable.value = true;
});

async function showDialog(row) {
  dialogRef.value.data = row;
  dialogRef.value.value = row.lastEnum;
  dialogRef.value.visible = true;
}
async function submitRowRload() {
  await ReStart(dialogRef.value.data.id, dialogRef.value.value);
  dialogRef.value.visible = false;
  message("重试任务", { type: "success" });
}
async function expandChange(row: any, expandedRows: any[]) {
  if (expandedRows.find((s) => s == row)) RloadTaskInfo(row);
}
function previewTask(row: any) {
  let pageName = "showTask";
  let queryData = { id: row.id.toString() };
  useMultiTagsStoreHook().handleTags("push", {
    path: `/welcome/showTask_` + row.id,
    name: pageName,
    query: queryData,
    meta: {
      title: `任务预览` + row.id.toString().slice(-4),
      dynamicLevel: 3,
    },
  });
  // 路由跳转
  route.push({ name: pageName, query: queryData });
}
function firstLetterToLower(str) {
  if (typeof str !== "string" || !str) return str;
  return str[0].toLowerCase() + str.slice(1);
}
async function RloadTaskInfo(row: any) {
  let res = await RowRload(row.id);
  row.TaskInfo = res;
  row.TaskInfo.stepData = JSON.parse(JSON.stringify(stepData.value));
  row.TaskInfo.active = row.TaskInfo.stepData.findIndex(
    (s) => s.title == row.TaskInfo.lastEnum
  );
  if (row.TaskInfo.startTime != null) {
    for (const element of row.TaskInfo.stepData) {
      element.time = formatDateToChinese(
        row.TaskInfo.startTime[firstLetterToLower(element.title)]
      );
      let i = row.TaskInfo.stepData.indexOf(element);
      if (i < row.TaskInfo.active) {
        element.status = "finish";
      } else if (element.value == 60) {
        element.status = "success";
      } else if (i == row.TaskInfo.active) {
        element.status = "process";
      } else {
        element.status = "wait";
      }
    }
  }
}
function formatDateToChinese(dateString) {
  const date = new Date(dateString);
  if (isNaN(date.getTime())) return "";

  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
interface StepData {
  status: "" | "wait" | "process" | "finish" | "error" | "success";
  time: string | null;
  title: string;
  value: number;
}
const stepData = ref<StepData[]>([
  { status: "wait", time: null, title: "下载文件", value: 5 },
  { status: "wait", time: null, title: "分离音频", value: 10 },
  { status: "wait", time: null, title: "解析字幕", value: 20 },
  { status: "wait", time: null, title: "AI课程类型", value: 30 },
  { status: "wait", time: null, title: "AI模型分析", value: 40 },
  { status: "wait", time: null, title: "AI分析试题", value: 50 },
  { status: "wait", time: null, title: "结束任务", value: 60 },
]);
</script>

<template>
  <div>
    <ahTable v-if="showTable" ref="table" :tableConfig="tableData">
      <template #expandSlot="{ props }">
        <!-- 拓展内容 -->
        <div class="expanded-content expandSlot">
          <h3>任务详情</h3>
          <div class="InfoEx" v-if="props.row.TaskInfo != null">
            <div>
              <span>进度</span>
              <div class="content">
                {{ props.row.TaskInfo.lastEnum }} {{ props.row.TaskInfo.progress }}
              </div>
            </div>
            <div>
              <span>操作</span>
              <div class="content">
                <el-button
                  type="primary"
                  :icon="Refresh"
                  @click="RloadTaskInfo(props.row)"
                  circle
                />
                <el-button type="danger" @click="showDialog(props.row)">重试</el-button>
                <el-button type="primary" @click="previewTask(props.row)">预览</el-button>
              </div>
            </div>

            <div class="grid_item_full_width" v-if="props.row.TaskInfo != null">
              <span>步骤</span>
              <el-steps
                class="content"
                style="max-width: 100%"
                :active="props.row.TaskInfo?.active"
                align-center
              >
                <el-step
                  v-for="s in props.row.TaskInfo.stepData"
                  :title="s.title"
                  :description="s.time"
                  :status="s.status"
                />
              </el-steps>
            </div>
            <div
              v-if="
                props.row.TaskInfo?.errorMessage != null &&
                props.row.TaskInfo?.errorMessage.length > 0
              "
            >
              <span>错误信息</span>
              <div class="content">{{ props.row.TaskInfo?.errorMessage }}</div>
            </div>
          </div>
        </div>
      </template>
    </ahTable>

    <el-dialog v-model="dialogRef.visible" title="重试任务" width="430">
      <h3>ID : {{ dialogRef.data.id }}</h3>
      <p></p>
      <p>将从哪个步骤重试?</p>
      <el-select
        v-model="dialogRef.value"
        clearable
        placeholder="Select"
        style="width: 240px"
      >
        <el-option
          v-for="item in redisChannelEnum"
          :key="item.value"
          :label="item.text"
          :value="item.value"
        />
      </el-select>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogRef.visible = false">取消</el-button>
          <el-button type="primary" @click="submitRowRload()"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped>
.expandSlot {
  padding: 10px 20px;
  background: #f5f7fa;
}

.container {
  width: 100%;
  max-width: 1200px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.InfoEx {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.InfoEx span {
  font-weight: bold;
  margin-right: 10px;
}
.InfoEx .content {
  padding: 5px;
}
/* 关键：让某个网格项占满一行（跨所有列） */
.grid_item_full_width {
  grid-column: 1 / -1; /* 从第1列跨到最后一列 */
}
/* :deep(.el-step__description) {
  font-size: 16px !important;
} */
</style>
