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

<script setup lang="ts">
import Icon from "@/components/Module/Icon/index.vue";
import Modal from "@/components/Module/Modal/index.vue";
import AddForm from "@/views/setting/model/index/components/Form/index.vue";
import DetailForm from "@/views/setting/model/index/components/Form/detailForm.vue";
import { ref, computed, unref } from "vue";
import { FormInstance, Button, Space, message } from "ant-design-vue";

interface PropsType {
  base: Record<string, any>;
}

const props = withDefaults(defineProps<PropsType>(), {});

const emits = defineEmits(["onSuccess"]);

// 表单实例
const formRef = ref();

// 获取表单实例
const formInit = (e: FormInstance) => {
  formRef.value = e;
};

// 表单
const formData = ref<Record<string, any>>({
  file: null,
  path: null,
  name: null,
  script: null,
});

// 上传
const onUpload = () => {};

let open = ref<boolean>(false);

const formType = ref<string>("udpate");

// 重置
const reset = () => {
  formData.value = {
    file: null,
    path: null,
    name: null,
    script: null,
  };
};

const onFilesValid = (
  rule: Record<string, any>,
  value: Record<string, any>,
  callback: Function,
) => {
  console.log("formData.value", formData.value);
  if (formData.value.file) {
    return Promise.resolve();
  } else {
    return Promise.reject("请上传文件");
  }
};

const rules: Record<string, any> = {
  file: [
    {
      required: true,
      validator: onFilesValid,
      message: "请上传模型",
      trigger: "blur",
    },
  ],
  name: [
    {
      required: true,
      message: "请输入模型名称",
      trigger: "blur",
    },
  ],
  script: [
    {
      required: true,
      message: "请输入python环境激活脚本",
      trigger: "blur",
    },
  ],
};

// 打开
const onOpen = (type?: string, info?: Record<string, any>) => {
  formType.value = type || "udpate";
  reset();
  if (info) {
    formData.value = {
      id: info.id || null,
      file: info.file || null,
      path: info.path || null,
      name: info.name || null,
      script: info.script || null,
    };
  }
  open.value = true;
};

// 关闭
const onClose = () => {
  open.value = false;
};

defineExpose({ onOpen, onClose });

const loading = computed(() => {
  return props.base.requestMap.addRequest.loading.value;
});

const onConfirm = () => {
  if (formType.value == "udpate") {
    onSubmit();
  } else {
    onClose();
  }
};

// 提交
const onSubmit = async () => {
  // console.log("onSubmit", formRef);
  await formRef.value.validate();
  const raw = unref(formData);
  const form = new FormData();
  form.append("file", raw.file);
  form.append("name", raw.name);
  form.append("script", raw.script);

  const res = await props.base.api.addModel(form);
  console.log("res", res);
  if (res?.code == 200) {
    emits("onSuccess");
    onClose();
  } else {
    message.error(res?.msg || "创建失败");
  }
  return res;
  // const params = {
  //   file: raw.file,
  // };
  // const res = await props.base.api.createTask(params);
  // if (res?.code == 200) {
  //   emits("onSuccess");
  //   onClose();
  // } else {
  //   message.error(res?.msg || "创建失败");
  // }
  // return res;
};
</script>

<template>
  <Modal
    v-model:open="open"
    title="模型管理"
    width="700px"
    style="top: 80px"
    :loading="loading"
    :onConfirm="onConfirm"
  >
    <template v-if="formType == 'udpate'">
      <AddForm v-if="open" @init="formInit" v-model:formData="formData" :rules="rules" />
    </template>
    <template v-else>
      <DetailForm v-model:formData="formData" @init="formInit" v-bind="props" />
    </template>
  </Modal>
</template>

<style scoped lang="scss">
.grid-box {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  :deep(.ant-form-item) {
    margin-bottom: 0;
  }
}
.grey-text {
  color: #8c8c8c;
}
.upload-row {
  .ant-upload-wrapper {
    display: block;
    :deep(.ant-upload) {
      width: 100%;
    }
  }
  .ant-upload-select {
    width: 100%;
    .upload-box {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 16px;
      color: #8a8a8a;
      width: 100%;
      aspect-ratio: 537 / 91;
      border-radius: 6px 6px 6px 6px;
      border: 1px solid #d9d9d9;
      background: rgba(200, 200, 200, 0.2);
      &-icon {
      }
      &-title {
      }
    }
  }
  .upload-desc {
    font-family:
      Source Han Sans,
      Source Han Sans;
    font-weight: 400;
    font-size: 12px;
    color: #c8c8c8;
    line-height: 26px;
    text-align: justify;
    font-style: normal;
    text-transform: none;
  }
}

.upload-footer {
  padding: 12px 16px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 20px;
}
</style>
