<template>
  <el-dialog v-model="info.show" title="工具链运行参数列表" :close-on-press-escape="false" :close-on-click-modal="false"
    align-center append-to-body width="960px" modal-class="choice-tool-param-dlg">
    <el-table v-loading="info.loading" :data="info.tableData" stripe @row-click="doRowClick" max-height="400px">
      <el-table-column align="center" width="55" label="选择">
        <template #default="scope">
          <el-radio v-model="info.selData" :label="scope.row.params_id + ''"
            @change="handleChange(scope.row)">&nbsp;</el-radio>
        </template>
      </el-table-column>
      <el-table-column label="运行参数名称" align="left" prop="params_name" />
      <el-table-column label="参数描述信息" align="left" prop="params_desc" />
      <el-table-column label="适用模型类型" align="left" prop="modl_sub_type_name" width="120" />

      <el-table-column label="创建用户" align="left" prop="user_name" />
      <el-table-column label="创建时间" align="left" prop="create_time" width="120" />
      <el-table-column label="操作" align="left" prop="user_id">
        <template #default="scope">
          <span class="command blue" @click.stop="showParam(scope.row)">查看参数</span>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div style="text-align: center">
        <el-button type="primary" @click="doOk">确定</el-button>
        <el-button @click="doCancel">取消</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="info.showJsonDlg" title="查看工具链运行参数" :close-on-press-escape="false" :close-on-click-modal="false"
    align-center append-to-body width="800px" modal-class="show-tool-param-dlg">
    <pre v-html="info.showItem.params_content"></pre>
    <template #footer>
      <div style="text-align: center">
        <el-button type="primary" @click="info.showJsonDlg = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import toolApi from '@/api/tool'
let info = reactive({
  loading: false,
  show: false,
  data: null,
  selData: "",
  tableData: [],
  showItem: null,
  showJsonDlg: false
});
const emit = defineEmits(["success"]);
const doRowClick = (row) => {
  info.selData = row.params_id + "";
}

const showParam = row => {
  info.showItem = row;
  info.showJsonDlg = true;
}
const doOk = () => {
  if (info.selData) {
    let items = info.tableData.filter(d => d.params_id == info.selData);
    if (items.length > 0) {
      emit("success", items[0]);
      info.show = false;
      return;
    }
  }
  ElMessage.error("请选择工具链运行参数!");
}
const doCancel = () => {
  info.show = false;
}
const showDialog = (opt) => {
  info.show = true;
  info.data = opt;
  info.selData = opt.tool_params_id;
  loadData();
}
const loadData = () => {
  info.loading = true;
  toolApi.paramsList({ page_num: 1, page_size: 100, tool_id: info.data.tool_id }).then(d => {
    info.tableData = d.data.data.ParamsList || [];
    info.loading = false;
  });
}
defineExpose({
  showDialog
})
</script>
<style scoped lang='scss'>
.choice-tool-param-dlg {}
</style>
<style lang='scss'>
.choice-tool-param-dlg {}
</style>