<template>
  <div class="app-container connection-detail">
    <el-card>
      <template #header>
        <svg-icon icon-class="pause" style="width:20px;height:20px;" />
        互联协议信息</template>
      <table style="width:100%" class="tb-base-info">
        <tr>
          <td style="width: 50%;">
            <span class="sp-title">模型名称:</span>
            <span class="sp-text">{{ info.data.model_name }}</span>
          </td>
          <td style="width: 50%;">
            <span class="sp-title">模型版本:</span>
            <span class="sp-text">{{ info.data.connection_version }}</span>
          </td>
        </tr>
        <tr>
          <td style="width: 50%;">
            <span class="sp-title">互联名称:</span>
            <span class="sp-text">{{ info.data.connection_name }}</span>
          </td>
          <td style="width: 50%;">
            <span class="sp-title">创建用户:</span>
            <span class="sp-text">{{ info.data.user_name }}</span>
          </td>
        </tr>
        <tr>

          <td style="width: 50%;">
            <span class="sp-title">创建时间:</span>
            <span class="sp-text">{{ info.data.create_time }}</span>
          </td>
          <td style="width: 50%;" colspan="2">
            <span class="sp-title">互联说明:</span>
            <span class="sp-text">{{ info.data.connection_desc }}</span>
          </td>
        </tr>

      </table>
    </el-card>
    <el-card style="margin-top: 12px;margin-bottom: 60px;">
      <template #header>
        <svg-icon icon-class="pause" style="width:20px;height:20px;" />
        算子互联信息</template>
      <div class="detail-content" style="position: relative;">
        <detailFlow ref="operFlow" @nodeClick="doNodeClick" />

        <div class="item" v-if="1 == 2">
          <div class="div-title">
            <i-ep-setting /><span>互联设置</span>
          </div>
          <div class="div-chart">

          </div>
        </div>
        <div class="item node-info" style="margin-left: 100px;" v-if="info.selNode">
          <div class="div-title">
            <i-ep-document /><span>算子基本信息</span>
          </div>
          <div class="div-info">

            <div class="row">
              <span class="sp-label">算子名称:</span>
              <span class="sp-text">{{ info.selNode.operator_name }}</span>
            </div>
            <div class="row">
              <span class="sp-label">算子版本:</span>
              <span class="sp-text">{{ info.selNode.operator_version }}</span>
            </div>
            <div class="row">
              <span class="sp-label">算子说明:</span>
              <span class="sp-text">{{ info.selNode.operator_desc }}</span>
            </div>
            <div class="row" v-if="info.param.inputs.length > 0">
              <span class="sp-label">输入参数:</span>
              <div class="div-param">
                <div v-if="info.param.inputs.length > 1" class="div-navs">
                  <span v-for="(it, idx) in info.param.inputs" @click="doInputSelected(idx)" :key="idx" class="sp-nav"
                    :class="it.selected ? 'active' : ''">{{ it.input_id }}</span>
                </div>
                <span class="sp-text  sp-paramter scroll">
                  <span v-for="(it, idx) in info.param.inputs " :key="idx" v-show="it.selected" class="param-item">
                    <paramShow :paramInfo="it"></paramShow>
                  </span>
                </span>
              </div>
            </div>
            <div class="row" style="margin-top:4px;" v-if="info.param && info.param.outputs">
              <span class="sp-label">输出参数:</span>
              <div class="div-param">
                <div v-if="info.param.outputs.length > 1" class="div-navs">
                  <span v-for="(it, idx) in info.param.outputs" @click="doOutputSelected(idx)" :key="idx" class="sp-nav"
                    :class="it.selected ? 'active' : ''">{{ it.output_id
                    }}</span>
                </div>
                <span class="sp-text sp-paramter scroll">
                  <span v-for="(it, idx) in info.param.outputs " :key="idx" v-show="it.selected" class="param-item">
                    <paramShow :paramInfo="it"></paramShow>
                  </span>
                </span>
              </div>
            </div>
            <div class="row" style="margin-top:4px;" v-if="info.param && info.param.process">
              <span class="sp-label">处理参数:</span>
              <span class="sp-text  sp-paramter scroll" v-if="info.param.process">
                <paramShow :paramInfo="info.param.process"></paramShow>
              </span>
            </div>

          </div>
        </div>
      </div>
    </el-card>
    <el-card class="card-footer">
      <el-button type="primary" @click="doBack">返回</el-button>
    </el-card>
  </div>
</template>

<script setup>
import detailFlow from './detailFlow.vue';
import ConnApi from '@/api/connection'
import paramShow from './paramShow.vue'
const router = useRouter();
const route = useRoute()
const info = reactive({
  data: {},
  selNode: null,
  param: null,
})
const operFlow = ref();

const doBack = () => {
  router.push({ path: "/connection/index" })
}
const mapToArray = obj => {
  let arr = [];
  for (let k in obj) {
    arr.push({
      key: k, value: obj[k]
    })
  };
  return arr;
}
const loadData = () => {
  let id = route.query.id;
  ConnApi.detail(id).then(d => {
    info.data = d.data?.data || {};
    operFlow.value.showFlow(info.data)
  });
};
const doNodeClick = (node) => {
  info.selNode = node?.properties?.data || {};
  info.param = node?.properties?.data?.parameters || { inputs: [], outputs: [], process: {} }
  info.param.inputs.forEach((d, idx) => {
    d.selected = idx == 0;
  });
  info.param.outputs.forEach((d, idx) => {
    d.selected = idx == 0;
  });
}
onMounted(() => {
  loadData();
});
const doInputSelected = idx => {
  info.param.inputs.forEach((it, i) => {
    it.selected = i == idx;
  });
}
const doOutputSelected = idx => {
  info.param.outputs.forEach((it, i) => {
    it.selected = i == idx;
  });
}
</script>
<style scoped lang='scss'>
.connection-detail {
  :deep(.el-card__header) {
    padding: 8px 4px;
    display: flex;
    align-items: center
  }

  .detail-content {
    .sp-text {
      display: inline-block;
      margin-left: 4px;
    }

    .sp-paramter {
      height: 100px;
      border: solid 1px #409EFF;
      overflow-y: auto;
      padding: 4px;
      cursor: pointer;

      .param-item {
        display: block;
      }
    }

    .item {
      width: 300px;

      &.node-info {
        position: absolute;
        right: 10px;
        top: 10px;

        .div-chart {
          min-height: unset;
          height: auto;
        }

        .div-info {
          min-height: unset;
          height: auto;
        }
      }

      .div-title {
        color: #409EFF;
        display: flex;
        align-items: center;
        font-size: 12px;
      }

      .div-chart {
        border: solid 1px #409EFF;
        min-height: 400px;
        height: 400px;
      }

      .div-info {
        border: dotted 1px #409EFF;
        min-height: 600px;
        height: 600px;
        padding: 10px;
        font-size: 12px;

        .row {
          display: flex;

          .sp-label {
            color: #888;
            display: block;
            white-space: nowrap;
          }

          .sp-text {
            flex-grow: 1;
            display: block;
            margin-left: 4px;
          }

          .div-param {
            .div-navs {
              .sp-nav {
                display: inline-block;
                line-height: 24px;
                padding: 0px 12px;
                cursor: pointer;

                &.active {
                  background-color: #409EFF;
                  color: #fff;
                }
              }
            }
          }
        }
      }
    }
  }
}

.tb-base-info {
  line-height: 30px;

  :deep(span) {
    font-size: 14px;
  }
}

: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>
