<!-- 算子程序管理 -->
<template>
  <div class="app-container model-detail">
    <!-- 算子程序详情 -->
    <el-card>
      <template #header
        ><svg-icon icon-class="pause" style="width: 20px; height: 20px" />
        算子参数基本信息
      </template>
      <el-row>
        <el-col :lg="12" :xs="24">
          <el-form v-loading="loading" label-width="100px" size="small">
            <el-form-item label="参数名称" prop="username"> 目标分类模型 </el-form-item>
            <el-form-item label="算子类型" prop="nickname33">
              前处理/缩放算子</el-form-item
            >
            <el-form-item label="参数说明" prop="nickname33">
              <el-input
                v-model="formData.usernamedd1"
                :disabled="true"
                placeholder="请输入数据集名称"
                :rows="3"
                type="textarea"
              />
            </el-form-item>
            <el-form-item label="算子参数" prop="nickname33">
              <el-input
                v-model="formData.usernamedd2"
                :disabled="true"
                placeholder="请输入数据集名称"
                :rows="12"
                type="textarea"
              />
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :lg="12" :xs="24"> </el-col>
      </el-row>
    </el-card>
    <el-card class="card-footer">
      <el-button @click="closeBack"><i-ep-close />取 消</el-button>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import OperatorApi from "@/api/operator";

const route = useRoute();
const router = useRouter();
const loading = ref(false); //  加载状态
// 算子表单数据
const dataInfo = ref({});

// 用户表单数据
const formData = reactive<UserForm>({
  status: 1,
  usernamedd1: "参数说明说明参数",
  usernamedd2: `{
    "name" : "图像缩放算子",
    "uni_id" : "OPER_1234567890",
    "version" : 100,
    "main_type" : "pre_process",
    "sub_type" : "clip",
    "cmpt_hardware_type" : "atlas200i",
    "parameters" : {}
}
{
    "name" : "图像缩放算子",
    "uni_id" : "OPER_1234567890",
    "version" : 100,
    "main_type" : "pre_process",
    "sub_type" : "clip",
    "cmpt_hardware_type" : "atlas200i",
    "parameters" : {}
}
{
    "name" : "图像缩放算子",
    "uni_id" : "OPER_1234567890",
    "version" : 100,
    "main_type" : "pre_process",
    "sub_type" : "clip",
    "cmpt_hardware_type" : "atlas200i",
    "parameters" : {}
}`,
});

/** 返回默认页面 */
function closeBack() {
  router.push({ path: "/operatorLibrary/calculateParam" });
}

/** 初始化数据 */
function initData() {
  let id = route.query.id;
  loading.value = true;
  OperatorApi.findOne(id)
    .then((res) => {
      //JSON转换
      res.data.data.parametersJson = JSON.stringify(res.data.data.parameters);
      dataInfo.value = res.data.data;
    })
    .finally(() => {
      loading.value = false;
    });
}

onMounted(() => {
  initData();
});
</script>
<style scoped lang="scss">
.model-detail {
  :deep(.el-card__header) {
    padding: 8px 4px;
    display: flex;
    align-items: center;
  }
}
.sp-file {
  color: #29d;
}
.tb-base-info {
  line-height: 30px;
}
:deep(.svg-icon) {
  margin-right: 8px;
}
.card-footer {
  position: fixed;
  width: calc(100% - 215px);
  bottom: 0px;
  :deep(.el-card__body) {
    padding: 10px;
    .el-pagination {
      justify-content: end;
    }
  }
}
</style>
router.push