<template>
  <div class="panel-end">
    <common-panel :panel-data="panelData" :target-node="targetNode">
      <template #input-output>
        <div class="content">
          <input-output-tab
            :input-output="panelData.inputOutput"
          ></input-output-tab>
        </div>
      </template>
      <template #function>
        <!-- 功能区域 -->
        <div class="form-item">
          <div class="form-title">
            <h5>子流程</h5>
          </div>
          <common-select
            v-model="panelData.function.datasource"
            class="int-select"
            :props-map="propsMap"
            :options="subflowList"
          ></common-select>
        </div>
        <div class="form-item">
          <div class="form-title">
            <h5>入参映射</h5>
          </div>
        </div>
        <div class="form-item">
          <div class="form-title">
            <h5>出参映射</h5>
          </div>
        </div>
      </template>
    </common-panel>
  </div>
</template>

<script setup>
import { ref, watchEffect, onMounted } from 'vue';
import CommonPanel from './common/CommonPanel.vue';
import InputOutputTab from './sql-components/InputOutputTab.vue';
import { getSubFlowList } from '../../../api/subflow';

const subflowList = ref([]);
const propsMap = ref({
  label: 'name',
  value: 'id'
});
const props = defineProps({
  targetNode: {
    type: Object,
    default: () => {}
  }
});

const nodePanelData = ref(props.targetNode.cell.getData()?.attrsData || null);

// 弹窗数据
const panelData = ref(
  nodePanelData.value || {
    basicData: {
      name: props.targetNode.cell.getData().label,
      desc: ''
    },
    inputOutput: {
      input: {
        header: [
          {
            label: 'ID',
            name: 'id',
            'min-width': '150'
          },
          {
            label: '名称',
            name: 'name',
            'min-width': '150'
          },
          {
            label: '类型',
            name: 'type',
            'min-width': '150'
          },
          {
            label: '别名',
            name: 'alias',
            type: 'input',
            'min-width': '150'
          },
          {
            label: '操作',
            name: 'custom',
            type: 'custom',
            fixed: 'right',
            width: '100'
          }
        ],
        data: []
      },
      output: {
        header: [
          {
            label: 'ID',
            name: 'id',
            'min-width': '150'
          },
          {
            label: '别名',
            name: 'alias',
            type: 'input',
            'min-width': '150'
          },
          {
            label: '操作',
            name: 'custom',
            type: 'custom',
            fixed: 'right',
            width: '100'
          }
        ],
        data: []
      }
    },
    // 功能区域
    function: {
      subflowId: '',
      input: [],
      output: []
    }
  }
);

// 获取子流程列表
function getFlowList() {
  getSubFlowList().then((res) => {
    subflowList.value = res.result;
  });
}

watchEffect(() => {
  props.targetNode.cell.setData({
    attrsData: JSON.parse(JSON.stringify(panelData.value))
  });
});

onMounted(() => {
  getFlowList();
});
</script>

<script>
export default {
  name: 'PanelSubFlow'
};
</script>
<style scoped lang="scss">
.form-item {
  .form-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0 10px 0;
    h5 {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.65);
    }
  }
}
</style>