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

<script setup lang="ts">
import ModelTable from "@/views/setting/model/index/components/Module/ModelTableModule.vue";
import { useMainServer } from "@/views/setting/model/index/services/main.ts";

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

const { modelServer } = useMainServer();

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

const pageRef = ref();

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

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

<template>
  <div :class="prefix" ref="pageRef">
    <div :class="`${prefix}-container`">
      <ModelTable v-bind="modelServer" :pageRef="pageRef" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
$prefix: "model-manage-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;
  }
  :deep(.wrapper) {
    display: flex;
    gap: 10px;
    max-width: 330px;
    // width: 470px;
    flex-wrap: wrap;
  }
  :deep(.index-box) {
    width: 100%;
    // width: 150px;
    // width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px;
    .index-box-circle {
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 1px solid#1677ff;
      color: #1677ff;
      font-size: 12px;
    }
    .index-box-text {
      line-height: 16px;
      font-size: 14px;
    }
    .index-box-danger {
      color: #dd524c;
      flex-shrink: 0;
      margin-left: auto;
      cursor: pointer;
      font-size: 14px;
    }
  }
}
</style>
