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

<script setup lang="ts">
import { Form, FormItem, Select, SelectOption, Input, InputNumber, Textarea } from "ant-design-vue";
import { ref, unref, onMounted, watch, computed } from "vue";

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

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

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

const formRef = ref();

const platformName = ref("");

const optionsFormat = (
  value: string,
  opts: Record<string, any>[],
  fieldMap: Record<string, any> = { label: "label", value: "value" },
) => {
  console.log("props.formData", props.formData, opts);
  if (!value) return "";
  const labelField = fieldMap.label || "label";
  const valueField = fieldMap.value || "value";
  const target = (opts || []).find((item) => item[valueField] == value);
  return target ? target[labelField] : `过期数据(${value})`;
};

const modelFormat = (modelId: string) => {
  console.log("props.serviers.options", props.serviers.options.state);
  return optionsFormat(modelId, unref(props.serviers.options.state.models), {
    label: "name",
    value: "id",
  });
  // props.formData.model_id, unref(props.serviers.options.state.models);
};

const testDataformat = (value: string) => {
  return optionsFormat(value, unref(props.serviers.options.state.testDataset), {
    label: "name",
    value: "id",
  });
};

const trainDataFormat = (value: string) => {
  return optionsFormat(value, unref(props.serviers.options.state.trainDataset), {
    label: "name",
    value: "id",
  });
};

const showExportTypeList = computed(() => {
  return props.serviers.options.state.exportOptions || [];
});

// 导出格式
const checkExportTypeSelect = (value: string[], type: string) => {
  // return value.includes(type) ? "primary" : "disabled";

  return (value || [])?.includes(type) ? "primary" : "disabled";
};

defineExpose({
  formRef,
});

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

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">
          <div class="form-value">
            {{ modelFormat(props.formData.model_id) }}
          </div>
        </FormItem>
      </div>
      <div :class="`${prefix}-wrapper`">
        <div :class="`${prefix}-row`">
          <div :class="`${prefix}-grid--half`">
            <div :class="`${prefix}-title`">训练集</div>
            <FormItem label="" name="trainDataId">
              <div class="form-value">
                {{ trainDataFormat(props.formData.train_dataset_id) }}
              </div>
            </FormItem>
          </div>
          <div :class="`${prefix}-grid--half`">
            <div :class="`${prefix}-title`">测试集</div>
            <FormItem label="" name="testDataId">
              <div class="form-value">
                {{ testDataformat(props.formData.test_dataset_id) }}
              </div>
            </FormItem>
          </div>
        </div>
      </div>
      <div :class="`${prefix}-wrapper`">
        <div :class="`${prefix}-title`">任务描述</div>
        <FormItem label="" name="testDataId">
          <div class="form-value">
            {{ props.formData.task_description }}
          </div>
        </FormItem>
      </div>
      <div :class="`${prefix}-wrapper`">
        <div :class="`${prefix}-title`">训练框架</div>
        <FormItem label="">
          <div :class="`${prefix}-row`">
            <div :class="`${prefix}-grid--full`">
              <a-button :type="'primary'" class="custom-btn" block>
                {{ platformName || "PYTORCH" }}
              </a-button>
            </div>
          </div>
        </FormItem>
      </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="batch">
              <div class="form-value">{{ props.formData.batch_size }}</div>
            </FormItem>
          </div>
          <div :class="`${prefix}-grid--half`">
            <FormItem label="训练轮数" name="round">
              <div class="form-value">
                {{ props.formData.epoch }}
              </div>
            </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 showExportTypeList">
              <a-button
                :type="checkExportTypeSelect(props.formData.export_formats, item.value)"
                class="custom-btn"
                block
              >
                <!-- {{ props.formData.export_format }} -->
                {{ item.label }}
              </a-button>
            </div>
          </div>
        </FormItem>
      </div>
      <!-- <div :class="`${prefix}-wrapper`">
        <FormItem label="执行代码">
          <div :class="`${prefix}-row`">
            <div class="form-value">
              <div :class="`${prefix}-grid--full`">
                {{ props.formData.script_command }}
              </div>
            </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;
  }
  .form-value {
    width: 100%;
    border-bottom: 1px solid #d8d8d8;
    font-size: 16px;
    color: #979797;
    padding: 9px 11px;
    box-sizing: border-box;
    min-height: 42px;
    // text-decoration: underline;
  }
}
</style>
