<script setup lang="ts">
import {
  ElButton,
  ElOption,
  TableInstance,
  UploadInstance,
  UploadProps,
  UploadRawFile,
} from "element-plus";
import dayjs from "dayjs";
import {
  ElLoading,
  ElMessage,
  ElMessageBox,
  ElNotification,
  genFileId,
} from "element-plus";
import SparkMD5 from "spark-md5";
import { set } from "vue"; // 引入 Vue 的 set 方法
import { useI18n } from "vue-i18n";
import {
  add,
  deleteData,
  edit,
  getData,
  getTaskLog,
  resume,
  pinToTopOrUnpin,
} from "@/utils/axios/tqyb/task";
import log from "@/pages/symn/log/index.vue";

import { getHcQxData } from "@/utils/axios/fskjk";

const emit = defineEmits(["playback"]);
const { t } = useI18n();
const upload = ref<UploadInstance>();
const configVisible = ref(false);
const configType = ref("");
/* 新增、编辑表单 */
const configForm = ref<any>({});

// 定义 ref 的类型
const fileInput: Ref<HTMLInputElement | null> = ref(null);

const taskList = ref<any[]>([]);
const logData = ref<any>([]);

const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);

// 存储当前选中项
const currentSelection = ref<any>([]);
const multipleTableRef = ref<TableInstance>();
const logVisible = ref(false);

/* drawer侧边栏表单 */
const form = ref<any>({});

/* 任务列表搜索表单 */
const searchForm = reactive({});

interface OptionItem {
  label: string;
  value: number;
}
const taskStatusList = ref<OptionItem[]>([
  // -1执行失败，0未开始，1等待中，2运行中，3已完成，4检查未通过
  { label: "执行失败", value: -1 },
  { label: "未开始", value: 0 },
  { label: "等待中", value: 1 },
  { label: "运行中", value: 2 },
  { label: "已完成", value: 3 },
  { label: "检查未通过", value: 4 },
]);

function search() {
  console.log("搜索条件：", searchForm);
  getList();
}
function getList() {
  let startDate, endDate;
  if (searchForm.createTime && searchForm.createTime.length) {
    startDate = searchForm.createTime[0];
    endDate = searchForm.createTime[1];
  }
  getData(
    {
      ...searchForm,
      startDate,
      endDate,
      pageSize: pageSize.value,
      pageNum: currentPage.value,
    },
    (res) => {
      taskList.value = res.rows;
      total.value = res.total;
    }
  );
}

// 置顶和取消置顶
const pinToTopTask = (row: any) => {
  pinToTopOrUnpin({ id: row.id }, (res) => {
    if (res.code === 200) {
      ElMessage.success("操作成功！");
      getList();
    }
  });
};

function start(task: any) {
  console.log("开始运行", task);

  resume({ taskId: task.id }, () => {
    ElNotification({
      title: "Tips",
      message: "Execution Successful",
      type: "success",
      duration: 1800,
    });
    getList();
  });
}

function saveConfigForm() {
  console.log("保存或新增");
  if (configForm.value.leadTime % 6 !== 0) {
    return ElNotification({
      title: "Tips",
      message: "预测时长需为6的倍数",
      type: "error",
      duration: 1800,
    });
  }
  if (!configForm.value.taskName) {
    return ElNotification({
      title: "Tips",
      message: "请填写任务名称",
      type: "error",
      duration: 1800,
    });
  }
  if (!configForm.value.predictionModel) {
    return ElNotification({
      title: "Tips",
      message: "请填写预测模型",
      type: "error",
      duration: 1800,
    });
  }
  if (!configForm.value.startDate) {
    return ElNotification({
      title: "Tips",
      message: "请选择预测日期",
      type: "error",
      duration: 1800,
    });
  }
  if (!configForm.value.startTime && configForm.value.startTime !== 0) {
    return ElNotification({
      title: "Tips",
      message: "请填写预测时间",
      type: "error",
      duration: 1800,
    });
  }
  if (!configForm.value.leadTime && configForm.value.leadTime !== 0) {
    return ElNotification({
      title: "Tips",
      message: "请填写预测时长",
      type: "error",
      duration: 1800,
    });
  }
  if (!configForm.value.dataSources) {
    return ElNotification({
      title: "Tips",
      message: "请选择数据来源",
      type: "error",
      duration: 1800,
    });
  }
  // const loading = ElLoading.service({
  //   background: 'rgba(0, 0, 0, 0.7)',
  //   fullscreen: true,
  //   text: 'Loading...',
  //   target: document.querySelector('.base-layout'),
  // });

  if (configType.value === "add") {
    const addForm = new FormData();
    console.log(
      "???",
      configForm.value.dataSources,
      typeof configForm.value.dataSources
    );
    if (configForm.value.dataSources === 2 && configForm.value.file) {
      addForm.append("file", configForm.value.file);
    }
    addForm.append("taskName", configForm.value.taskName);
    addForm.append("predictionModel", configForm.value.predictionModel);
    addForm.append("startDate", configForm.value.startDate);
    addForm.append("startTime", configForm.value.startTime);
    addForm.append("leadTime", configForm.value.leadTime);
    addForm.append("dataSources", configForm.value.dataSources);

    add(addForm, () => {
      // loading.close();
      ElNotification({
        title: "Tips",
        message: "Added successfully",
        type: "success",
        duration: 1800,
      });
      getList();
    });
  }
  if (configType.value === "edit") {
    // const editValue = configForm.value = {
    //   id: configForm.value.id,
    //   taskName: configForm.value.taskName,
    //   predictionModel: configForm.value.predictionModel,
    //   startDate: configForm.value.startDate,
    //   startTime: configForm.value.startTime,
    //   leadTime: configForm.value.leadTime,
    //   dataSources: configForm.value.dataSources,
    //   inputFile: configForm.value.dataSources === 2 ? configForm.value.inputFile : '',
    //
    // };
    const editForm = new FormData();
    editForm.append("id", configForm.value.id);
    if (configForm.value.dataSources === 2 && configForm.value.file) {
      editForm.append("file", configForm.value.file);
    }
    editForm.append("taskName", configForm.value.taskName);
    editForm.append("predictionModel", configForm.value.predictionModel);
    editForm.append("startDate", configForm.value.startDate);
    editForm.append("startTime", configForm.value.startTime);
    editForm.append("leadTime", configForm.value.leadTime);
    editForm.append("dataSources", configForm.value.dataSources);
    edit(editForm, () => {
      // loading.close();
      ElNotification({
        title: "Tips",
        message: "Saved successfully",
        type: "success",
        duration: 1800,
      });
      getList();
    });
  }

  configVisible.value = false;
}

function addTask() {
  console.log("新增任务");
  configForm.value = {};
  configVisible.value = true;
  configType.value = "add";
}

function editTask(task: any, $index?: any) {
  console.log("编辑任务", task, $index);
  const serveType = task.serveId
    ? task.serveId.includes("/")
      ? "服务名"
      : "SID"
    : "";
  console.log("serveType", serveType, task.serveId);
  configForm.value = {
    ...task,
    $index,
    serveType,
  };
  console.log("编辑任务", configForm.value);

  configVisible.value = true;
  configType.value = "edit";
}

function deleteTask(task: any) {
  console.log("删除任务", task);
  ElMessageBox.confirm(t("isSureDelete"), "Warning", {
    confirmButtonText: t("sure"),
    cancelButtonText: t("cancel"),
    type: "warning",
  })
    .then(() => {
      let arr = [];
      arr.push(task.id);
      deleteData(arr, (res) => {
        getList();
      });
    })
    .catch(() => {
      // ElMessage({
      //     type: 'info',
      //     message: `取消操作`,
      // });
    });
}

function refresh() {
  console.log("刷新任务列表");
  getList();
}

function showLog(task: any) {
  getTaskLog({ taskId: task.id }, (res) => {
    logData.value = res;
    logVisible.value = true;
  });
}

function cancle() {
  console.log("取消运行", form);
  ElMessageBox.confirm(t("isSureCancelTask"), "Warning", {
    confirmButtonText: t("sure"),
    cancelButtonText: t("cancel"),
    type: "warning",
  })
    .then(() => {
      form.value = {
        ...form.value,
        taskMode: "未开始",
      };
      ElMessage({
        type: "success",
        message: `Cancelled successfully`,
      });
    })
    .catch(() => {});
}

function handleSelectionChange(selection: any[]) {
  // multipleTableRef.value!.clearSelection()
  // multipleSelection.value = val
  // 如果选中项长度大于1，说明是新选择了一项
  if (selection.length > 1) {
    // 清除之前的选择，只保留最新选中的项
    const latestSelection = selection[selection.length - 1];
    multipleTableRef.value?.clearSelection(); // 清空所有选择
    multipleTableRef.value?.toggleRowSelection(latestSelection, true); // 选中最新项
    currentSelection.value = [latestSelection];
  } else {
    // 正常选择或取消选择
    currentSelection.value = selection;
  }

  console.log("当前选中项:", currentSelection.value);
}
function playback() {
  console.log("当前选中项:", currentSelection.value);
  if (Object.keys(currentSelection.value).length === 0) {
    ElMessage({
      type: "warning",
      message: t(`isSelect`),
    });
  } else {
    const startTime = dayjs(currentSelection.value[0].startDate)
      .add(0, "hour")
      .format("YYYY-MM-DD HH:mm:ss");
    const params = {
      dataType: currentSelection.value[0].predictionModel,
      startTime,
      endTime: dayjs(startTime)
        .add(currentSelection.value[0].leadTime, "hour")
        .format("YYYY-MM-DD HH:mm:ss"),
    };
    EventBusTool.getEventBus().publish("playData", {
      key: "setTaishiParam",
      dataType: currentSelection.value[0].predictionModel,
      weatherType: 3,
      startTime,
      hour: 0,
      endTime: dayjs(startTime)
        .add(currentSelection.value[0].leadTime, "hour")
        .format("YYYY-MM-DD HH:mm:ss"),
    });

    // 更新湿度、温度、气压的图标状态
    EventBusTool.getEventBus().publish("upRightHfOrylIcon");

    // 更新第一帧是否需要调用接口的状态
    EventBusTool.getEventBus().publish("updateHfKsFlag", false);

    getHcQxData(params, (res: any) => {
      if (res.code == 200) {
        EventBusTool.getEventBus().publish("playData", {
          key: "show",
        });

        emit("playback");
      }
    });
  }
}

function handleClick(): void {
  if (fileInput.value) {
    fileInput.value.value = "";
    fileInput.value.click();
  }
}
// 处理文件选择事件
function handleFileChange(event: Event): void {
  const target = event.target as HTMLInputElement;
  const file = target.files?.[0];
  if (!file) {
    console.warn("未选择文件");
    return;
  }

  configForm.value.file = file;
  configForm.value.inputFile = file.name;
  // const formData = new FormData();
  //   // 创建 FormData 对象
  //   formData.append('inputFile', file.name);
  //   formData.append('file', file);

  // 调用接口，现在importTask只需要formData和callback
  // importFile(formData, (res:any) => {
  //   console.log('接口响应:', res);
  //   getList();
  // });
}

function handleSizeChange(val: number) {
  console.log(`${val} items per page`);
  pageSize.value = val;
  getList();
}
function handleCurrentChange(val: number) {
  console.log(`current page: ${val}`);
  currentPage.value = val;
  getList();
}
getList();
</script>

<template>
  <div class="ycrw">
    <Dialog
      v-model="logVisible"
      :title="t('operationLog')"
      width="56vw"
      class="child-custom"
      style="top: 50%; left: 50%; transform: translate(-50%, -50%)"
    >
      <log :data="logData" />
    </Dialog>

    <!-- 增、改 -->
    <Dialog
      v-model="configVisible"
      :title="configType === 'add' ? t('add') : t('edit')"
      width="40vw"
      style="top: 230px; left: 30vw"
      class="config-dialog"
    >
      <ElForm
        label-position="top"
        label-width="120px"
        :model="configForm"
        class="config-custom-form"
      >
        <ElFormItem :label="t('taskName')">
          <ElInput
            v-model="configForm.taskName"
            :placeholder="t('pleaseEnter')"
            class="config-custom-input"
          />
        </ElFormItem>
        <ElFormItem :label="t('predictionModel')">
          <ElSelect
            v-model="configForm.predictionModel"
            :placeholder="t('pleaseSelect')"
            popper-class="custom-select-dropdown"
            class="config-custom-select"
          >
            <ElOption label="盘古" :value="1" />
            <ElOption label="Graphcast" :value="2" />
          </ElSelect>
        </ElFormItem>
        <ElFormItem
          :label="t('predictionStartDate')"
          class="config-custom-date"
        >
          <el-date-picker
            v-model="configForm.startDate"
            value-format="YYYY-MM-DD"
            width="100%"
            type="date"
            :placeholder="t('pleaseSelect')"
          />
        </ElFormItem>
        <ElFormItem :label="t('predictionStartTime')">
          <!--          <ElInput v-model="configForm.startTime" :placeholder="t('pleaseEnter')" class="config-custom-input" /> -->
          <ElSelect
            v-model="configForm.startTime"
            :placeholder="t('pleaseSelect')"
            popper-class="custom-select-dropdown"
            class="config-custom-select"
          >
            <ElOption :value="0" />
            <ElOption :value="6" />
            <ElOption :value="12" />
            <ElOption :value="18" />
          </ElSelect>
        </ElFormItem>
        <ElFormItem :label="t('predictionDuration')">
          <ElInput
            v-model="configForm.leadTime"
            :placeholder="t('pleaseEnter')"
            class="config-custom-input"
          />
        </ElFormItem>
        <ElFormItem :label="t('dataSource')">
          <ElSelect
            v-model="configForm.dataSources"
            :placeholder="t('pleaseSelect')"
            popper-class="custom-select-dropdown"
            class="config-custom-select"
          >
            <ElOption label="cds" :value="1" />
            <ElOption label="本地文件" :value="2" />
          </ElSelect>
        </ElFormItem>
        <ElFormItem
          v-if="configForm.dataSources === 2"
          :label="t('uploadFile')"
        >
          <!--          <el-upload -->
          <!--            ref="upload" class="upload-demo" :data="configForm" action="/api/weatherTask/create" -->
          <!--            :before-upload="beforeUpload" :limit="1"  :auto-upload="false" -->
          <!--          > -->
          <!--            <template #trigger> -->
          <ElInput
            v-model="configForm.inputFile"
            :placeholder="t('clickToUploadFile')"
            class="config-custom-input"
            @click="handleClick"
          />
          <input
            ref="fileInput"
            type="file"
            style="display: none"
            @change="handleFileChange"
          />

          <!--            </template> -->
          <!--          </el-upload> -->
        </ElFormItem>
      </ElForm>

      <template #footer>
        <div class="config-custom-btn">
          <el-button v-if="configType === 'add'" @click="saveConfigForm">
            {{ t("add") }}
          </el-button>
          <el-button v-if="configType === 'edit'" @click="saveConfigForm">
            {{ t("save") }}
          </el-button>
          <el-button type="warning" @click="configVisible = false">
            {{ t("cancel") }}
          </el-button>
        </div>
      </template>
    </Dialog>
    <!-- 主表 -->
    <ElForm :inline="true" :model="searchForm" class="custom-form">
      <ElFormItem label="">
        <ElInput
          v-model="searchForm.taskName"
          :placeholder="`${t('keyword')}...`"
          class="custom-input"
        />
      </ElFormItem>
      <ElFormItem :label="t('taskStatus')">
        <ElSelect
          v-model="searchForm.taskStatus"
          :placeholder="t('pleaseSelect')"
          clearable
          class="custom-select"
        >
          <ElOption
            v-for="item in taskStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </ElSelect>
      </ElFormItem>
      <ElFormItem :label="t('predictionDate')">
        <ElDatePicker
          v-model="searchForm.createTime"
          value-format="YYYY-MM-DD"
          type="daterange"
          range-separator="--"
          :start-placeholder="t('startDate')"
          :end-placeholder="t('endDate')"
          class="custom-date-picker"
        />
      </ElFormItem>
      <ElFormItem>
        <ElButton
          type="primary"
          class="custom-btn"
          icon="Search"
          @click="search"
        >
          {{ t("search") }}
        </ElButton>
      </ElFormItem>
    </ElForm>
    <ElTable
      ref="multipleTableRef"
      :data="taskList"
      width="100%"
      max-height="60vh"
      class="custom-table"
      @selection-change="handleSelectionChange"
    >
      <ElTableColumn type="selection" width="55" />
      <ElTableColumn type="index" :label="t('serialNumber')" width="80" />
      <ElTableColumn prop="taskName" :label="t('taskName')" />
      <ElTableColumn :label="t('taskStatus')">
        <template #default="scope">
          <div v-if="scope.row.taskStatus === -1" style="color: #f5222d">
            执行失败
          </div>
          <div v-if="scope.row.taskStatus === 0" style="color: #8c8c8c">
            未开始
          </div>
          <div v-if="scope.row.taskStatus === 1" style="color: #faad14">
            等待中
          </div>
          <div v-if="scope.row.taskStatus === 2" style="color: #1677ff">
            运行中
          </div>
          <div v-if="scope.row.taskStatus === 3" style="color: #52c41a">
            已完成
          </div>
          <div v-if="scope.row.taskStatus === 4" style="color: #f5222d">
            检查未通过
          </div>
        </template>
      </ElTableColumn>
      <ElTableColumn prop="model" :label="t('predictionModel')">
        <template #default="scope">
          <div v-if="scope.row.predictionModel === 1">
            {{ "盘古" }}
          </div>
          <div v-if="scope.row.predictionModel === 2">
            {{ "Graphcast" }}
          </div>
        </template>
      </ElTableColumn>
      <ElTableColumn prop="time" :label="t('predictionDate')">
        <!--  预测日期 -->
        <template #default="scope">
          <div>
            {{ scope.row.startDate }}
          </div>
        </template>
      </ElTableColumn>
      <ElTableColumn prop="startTime" :label="t('predictionStartTime')">
        <!--  预测时间 -->
        <template #default="scope">
          <div>
            {{ scope.row.startTime }}
          </div>
        </template>
      </ElTableColumn>
      <ElTableColumn prop="leadTime" :label="t('predictionDuration')">
        <!--  预测时长 -->
        <template #default="scope">
          <div>{{ scope.row.leadTime }}小时</div>
        </template>
      </ElTableColumn>
      <ElTableColumn prop="hours" :label="t('timeConsuming')">
        <!--  耗时 -->
        <template #default="scope">
          <div>{{ scope.row.timeConsuming }}分钟</div>
        </template>
      </ElTableColumn>
      <!--<ElTableColumn prop="creator" :label="t('creator')">
        <template #default="scope">
          {{ scope.row.createBy || '暂无信息' }}
        </template>
      </ElTableColumn>-->
      <ElTableColumn prop="createTime" :label="t('creationTime')" width="220" />
      <ElTableColumn :label="t('operation')" width="280">
        <template #default="scope">
          <ElButton
            v-if="scope.row.taskStatus === 1"
            type="text"
            class="table-btn"
            @click="pinToTopTask(scope)"
          >
            {{ true ? t("pinToTop") : t("unpin") }}
          </ElButton>
          <ElButton v-else type="text" style="color: #588589; cursor: no-drop">
            {{ true ? t("pinToTop") : t("unpin") }}
          </ElButton>
          <!-- -1执行失败，0未开始，1等待中，2运行中，3已完成，4检查未通过-->
          <!--任务处于等待中，运行中状态时，不能编辑和删除；处于未开始，已完成，检查未通过时可以删除；处于已完成状态时也不能编辑-->
          <ElButton
            v-if="scope.row.taskStatus === 0 || scope.row.taskStatus === -1"
            type="text"
            class="custom-text-btn"
            @click="start(scope.row, scope.$index)"
          >
            {{ t("start") }}
          </ElButton>
          <ElButton v-else type="text" style="color: #588589; cursor: no-drop">
            {{ t("start") }}
          </ElButton>
          <ElButton
            type="text"
            class="custom-text-btn"
            @click="showLog(scope.row)"
          >
            {{ t("operationLog") }}
          </ElButton>

          <ElButton
            v-if="
              scope.row.taskStatus !== 1 &&
              scope.row.taskStatus !== 2 &&
              scope.row.taskStatus !== 3
            "
            type="text"
            class="custom-text-btn"
            @click="editTask(scope.row, scope.$index)"
          >
            {{ t("edit") }}
          </ElButton>
          <ElButton v-else type="text" style="color: #588589; cursor: no-drop">
            {{ t("edit") }}
          </ElButton>
          <ElButton
            v-if="
              scope.row.taskStatus == 0 ||
              scope.row.taskStatus === 3 ||
              scope.row.taskStatus === 4
            "
            type="text"
            class="custom-text-btn"
            @click="deleteTask(scope.row)"
          >
            {{ t("delete") }}
          </ElButton>
          <ElButton v-else type="text" style="color: #588589; cursor: no-drop">
            {{ t("delete") }}
          </ElButton>
        </template>
      </ElTableColumn>
    </ElTable>
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100, 200]"
        size="small"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <div class="dialog-footer">
      <el-button class="custom-btn" icon="VideoPlay" @click="playback">
        {{ t("playback") }}
      </el-button>
      <el-button class="custom-btn" icon="Plus" @click="addTask">
        {{ t("add") }}
      </el-button>
      <el-button
        type="primary"
        class="custom-btn"
        icon="Refresh"
        @click="refresh"
      >
        {{ t("refresh") }}
      </el-button>
    </div>
  </div>
</template>

<style  lang="less">
.ycrw {
  .config-dialog {
    margin-top: 35vh;

    .config-custom-form {
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .config-custom-select,
      .config-custom-input {
        width: calc(20vw - 80px) !important;
      }

      .custom-select-dropdown {
        max-width: 200px;
        /* 根据实际需求调整 */
      }
    }

    .config-custom-btn {
      .el-button {
        width: 92px;
        height: 32px;
        background-color: #08a7cf;
        border-radius: 0;
        border: 0;
        color: #fff;

        &:hover {
          filter: brightness(1.3);
        }

        &:last-child {
          background-color: #b98326;
        }
      }
    }
  }

  .el-table__header-wrapper {
    .el-checkbox {
      display: none;
    }
  }

  .config-custom-date {
    .el-date-editor.el-input,
    .el-date-editor.el-input__wrapper {
      width: calc(20vw - 80px) !important;
    }
  }

  .pagination {
    width: 100%;
    display: flex;
    justify-content: left;
    margin-top: 10px;
  }
}
</style>
