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

<script setup lang="ts">
import Icon from "@/components/Module/Icon/index.vue";
import { Form, FormItem, Select, SelectOption, Input, InputNumber, Textarea } from "ant-design-vue";
import { ref, onMounted } from "vue";

interface PropsType {
  optionsGroup: Record<string, any>;
  formData: Record<string, any>;
  task?: Record<string, any>;
  options: Record<string, any>;
  // state: Record<string, any>;
  // api: Record<string, any>;
  // requestMap: Record<string, any>;
}

const props = withDefaults(defineProps<PropsType>(), {
  task: () => {
    return {};
  },
  options: () => {
    return {};
  },

  optionsGroup: () => ({
    modelOptions: [], // 模型
    trainDataOptions: [], // 训练数据集
    testDataOptions: [], // 测试数据集
    frameworkOptions: [], // 框架集合
    // optimizerOptions: [], // 优化器选项
    exportTypeOptions: [], // 导出格式集合
  }),
  formData: () => {
    return {};
  },
});

const onModelChange = async (e: string | any, ...args: any) => {
  console.log("modelChange", props.optionsGroup.modelOptions);
  if (e) {
    // const res = await props.options.api.getPlatform(e);
    // props.formData.frameworkId = res.data.platform;
    // props.formData.code = "这是模型相关的自定义脚本";
    props.formData.frameworkId = "PYTORCH";
  }
};

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

const formRef = ref();

// 代码锁定
const codeDisabled = ref(true);

const onCodeDsiabledToggle = () => {
  codeDisabled.value = !codeDisabled.value;
};

// 导出类型切换
const onExportTypeChange = (e: string) => {
  const i = props.formData.exportType.findIndex((item: Record<string, any>) => item == e);
  if (i == -1) {
    props.formData.exportType.push(e);
  } else {
    props.formData.exportType.splice(i, 1);
  }
};

defineExpose({
  formRef,
});

onMounted(() => {
  emits("init", formRef.value);
});

const prefix = "model-train-form";
</script>

<template>
  <div :class="prefix">
    <Form :model="props.formData" ref="formRef" layout="vertical">
      <div :class="`${prefix}-wrapper`">
        <div :class="`${prefix}-title`">选择模型</div>
        <FormItem label="" name="modelId">
          <Select
            placeholder="请选择模型类型"
            v-model:value="props.formData.modelId"
            @change="onModelChange"
          >
            <SelectOption v-for="item in props.optionsGroup.modelOptions" :value="item.value">
              {{ item.label }}
            </SelectOption>
          </Select>
        </FormItem>
      </div>
      <div :class="`${prefix}-wrapper`">
        <div :class="`${prefix}-title`">选择数据集</div>
        <div :class="`${prefix}-row`">
          <div :class="`${prefix}-grid--half`">
            <FormItem label="" name="trainDataId">
              <Select placeholder="请选择训练数据集" v-model:value="props.formData.trainDataId">
                <SelectOption
                  v-for="item in props.optionsGroup.trainDataOptions"
                  :value="item.value"
                >
                  {{ item.label }}
                </SelectOption>
              </Select>
            </FormItem>
          </div>
          <div :class="`${prefix}-grid--half`">
            <FormItem label="" name="testDataId">
              <Select placeholder="请选择测试数据集" v-model:value="props.formData.testDataId">
                <SelectOption
                  v-for="item in props.optionsGroup.testDataOptions"
                  :value="item.value"
                >
                  {{ item.label }}
                </SelectOption>
              </Select>
            </FormItem>
          </div>
        </div>
      </div>
      <div :class="`${prefix}-wrapper`">
        <div :class="`${prefix}-title`">任务描述</div>
        <FormItem label="">
          <div :class="`${prefix}-row`">
            <div :class="`${prefix}-grid--full`">
              <Textarea
                v-model:value="props.formData.description"
                placeholder="请输入"
                :autoSize="{
                  minRows: 3,
                  maxRows: 3,
                }"
              />
            </div>
          </div>
        </FormItem>
      </div>
      <div :class="`${prefix}-wrapper`">
        <div :class="`${prefix}-title`">训练框架</div>
        <FormItem label="">
          <div :class="`${prefix}-row`">
            <template v-if="props.optionsGroup.frameworkOptions?.length && props.formData.modelId">
              <div
                :class="`${prefix}-grid--full`"
                v-for="item in props.optionsGroup.frameworkOptions"
              >
                <a-button type="primary" class="custom-btn" block>{{ item.label }}</a-button>
              </div>
            </template>
            <template v-else>
              <div
                :class="`${prefix}-grid--full`"
                v-if="!props.optionsGroup.frameworkOptions?.length || !props.formData.modelId"
              >
                <a-button type="default" class="custom-btn" block>请选择模型</a-button>
              </div>
            </template>
          </div>
        </FormItem>
      </div>
      <div :class="`${prefix}-wrapper`">
        <div :class="`${prefix}-row`">
          <div :class="`${prefix}-grid--half`">
            <div :class="`${prefix}-title`">选择配置文件</div>
            <FormItem label="" name="config">
              <Select placeholder="请选择配置文件" v-model:value="props.formData.config">
                <SelectOption v-for="item in props.optionsGroup.configOptions" :value="item.value">
                  {{ item.label }}
                </SelectOption>
              </Select>
            </FormItem>
          </div>
          <div :class="`${prefix}-grid--half`">
            <div :class="`${prefix}-title`">选择预训练权重</div>
            <FormItem label="" name="weight">
              <Select placeholder="请选择预训练权重" v-model:value="props.formData.weight">
                <SelectOption v-for="item in props.optionsGroup.weightOptions" :value="item.value">
                  {{ item.label }}
                </SelectOption>
              </Select>
            </FormItem>
          </div>
        </div>
      </div>
      <div :class="`${prefix}-wrapper`">
        <div :class="`${prefix}-title`">训练参数配置</div>
        <div :class="`${prefix}-row no-row-gap`">
          <!-- <div :class="`${prefix}-grid--half`">
            <FormItem label="学习率" name="learningRate">
              <InputNumber
                style="width: 100%"
                placeholder="请输入"
                v-model:value="props.formData.learningRate"
              />
            </FormItem>
          </div> -->
          <div :class="`${prefix}-grid--half`">
            <FormItem label="批次大小" name="batch">
              <InputNumber
                style="width: 100%"
                placeholder="请输入"
                v-model:value="props.formData.batch"
              />
            </FormItem>
          </div>
          <div :class="`${prefix}-grid--half`">
            <FormItem label="训练轮数" name="round">
              <InputNumber
                style="width: 100%"
                placeholder="请输入"
                v-model:value="props.formData.round"
              />
            </FormItem>
          </div>
          <!-- <div :class="`${prefix}-grid--half`">
            <FormItem label="优化器" name="optimizerId">
              <Select placeholder="请选择优化器" v-model:value="props.formData.optimizerId">
                <SelectOption
                  v-for="item in props.optionsGroup.optimizerOptions"
                  :value="item.value"
                >
                  {{ item.label }}
                </SelectOption>
              </Select>
            </FormItem>
          </div> -->
        </div>
      </div>
      <div :class="`${prefix}-wrapper`">
        <div :class="`${prefix}-title`">模型导出配置</div>
        <FormItem label="导出格式">
          <div :class="`${prefix}-row`">
            <div
              :class="`${prefix}-grid--third`"
              v-for="item in props.optionsGroup.exportTypeOptions"
            >
              <a-button
                @click="onExportTypeChange(item.value)"
                :type="props.formData.exportType.includes(item.value) ? 'primary' : 'default'"
                class="custom-btn"
                block
              >
                {{ item.label }}
              </a-button>
            </div>
          </div>
        </FormItem>
      </div>
      <div :class="`${prefix}-wrapper`">
        <!-- <FormItem>
          <template #label>
            <span> 执行代码</span>
            <span class="edit-btn" @click="onCodeDsiabledToggle">
              <template v-if="codeDisabled"> 编辑<Icon name="edit" /> </template>
              <template v-else> 锁定<Icon name="correct" /> </template>
            </span>
          </template>
          <div :class="`${prefix}-row`">
            <div :class="`${prefix}-grid--full`">
              <Textarea
                v-model:value="props.formData.code"
                :disabled="codeDisabled"
                placeholder="请输入"
                :autoSize="{
                  minRows: 3,
                }"
              />
            </div>
          </div>
        </FormItem> -->
      </div>

      <!-- <div :class="`${prefix}-wrapper`">
        <FormItem label="保存路径">
          <div :class="`${prefix}-row`">
            <div :class="`${prefix}-grid--full`">
              <Input v-model:value="props.formData.savePath" placeholder="请输入" />
            </div>
          </div>
        </FormItem>
      </div> -->
    </Form>
  </div>
</template>

<style lang="scss" scoped>
$prefix: "model-train-form";

.#{$prefix} {
  width: 100%;
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
  &-wrapper {
    width: 100%;
    &:last-child {
      :deep(.ant-form-item) {
        margin-bottom: 0;
      }
    }
  }
  &-title {
    font-family:
      Source Han Sans,
      Source Han Sans;
    font-weight: 400;
    font-size: 14px;
    color: #374151;
    line-height: 20px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: 8px;
  }
  :deep(.ant-form-item) {
    .ant-form-item-label {
      padding: 0;
      margin-bottom: 4px;
      label {
        font-family:
          Source Han Sans,
          Source Han Sans;
        font-weight: 350;
        font-size: 12px;
        color: #4b5563;
        line-height: 16px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }
  }
  &-row {
    display: flex;
    align-items: start;
    justify-content: start;
    gap: 16px;
    flex-wrap: wrap;
  }
  &-grid {
    &--full {
      width: 100%;
    }
    &--half {
      width: calc((100% - 16px) / 2);
    }
    &--third {
      width: calc((100% - 16px * 2) / 3);
    }
  }
  .no-row-gap {
    row-gap: 0;
  }
  .edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    cursor: pointer;
    color: #979797;
    &:hover {
      color: #2563eb;
    }
  }
}
</style>
