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

<script setup lang="ts">
import TrainTable from "@/views/modelTraining/index/components/Module/TrainTableModule.vue";
import { useMain } from "@/views/modelTraining/index/services/index.ts";

import { onMounted, ref, unref } from "vue";

const { trainServices } = useMain();

const init = () => {
  trainServices.task.api.getTaskList();
  trainServices.options.api.getOptions();
};

onMounted(() => {
  init();
});

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

<template>
  <div :class="prefix">
    <div :class="`${prefix}-container`">
      <TrainTable v-bind="trainServices" />
    </div>
  </div>
</template>

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

.#{$prefix} {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  &-container {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(231, 239, 251, 0.5);
    border-radius: 10px;
    // background-color: #fff;
    border-radius: 12px;
    // padding: 24px;
    display: flex;
    align-items: start;
    justify-content: start;
  }
  &-form {
    flex: 1;
    height: 100%;
    overflow: auto;
    :deep(.module-card) {
      padding: 0;
    }
  }
  &-log {
    flex: 1;
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    height: 100%;
    &-title {
      width: 100%;
      margin-bottom: 14px;
    }
    &-content {
      border-radius: 12px;
      width: 100%;
      flex: 1;
      overflow: auto;
      display: flex;
      align-items: start;
      justify-content: start;
      flex-direction: column;
      padding: 20px;
      background-color: #f9fafb;
    }
    &-desc {
      font-family:
        Source Han Sans,
        Source Han Sans;
      font-weight: 350;
      font-size: 14px;
      color: #4b5563;
      line-height: 20px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
  .custom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 4px 4px 4px 4px;
    padding: 8px 16px;
  }
  .grey-btn {
    background: #aab5c4;
  }
}
</style>
