<template>
  <div class="flow-node-param-page">
    <BaseTable
      ref="baseTableRef"
      hide-pagination
      tableName="FLOW_NODE_PARAM"
      :tree-config="{
        transform: true,
        expandAll: true,
        rowField: 'formId',
        parentField: 'parentId',
        childrenField: 'children',
      }"
    >

      <template #leftOptions>
        <el-button type="primary">参数入库</el-button>
        <el-button type="primary">保存参数</el-button>
        <el-button type="">引用参数</el-button>
      </template>

      <template #value="{ row, }">
        <div class="pr10 tableCellContent">

          <!-- 输入框 -->
          <div
            class="numInput flex-div"
            v-if="(row.tagType === WIDGET_TYPE.INPUTS || row.tagType === WIDGET_TYPE.INPUT) && row.englishLabel"
          >
            <div
              class="input-grid"
              :style="{
                display: row.total === row.column ? 'flex' : 'grid',
                gridTemplateColumns: 'repeat(' + row.column + ',1fr)',
              }"
            >
              <div class="flex-align-center mr12" >
                <el-input class="span-min80" v-model="row.defaultValue"></el-input>
              </div>
            </div>
          </div>
          <!-- 2下拉框-->
          <el-select
            v-if="row.tagType === WIDGET_TYPE.SELECT"
            :multiple="row.isMultiple === '1'"
            :title="row.defaultValue"
            v-model="row.defaultValue"
            class="w70p"
            collapse-tags
            :allow-create="row.importability === '1'"
            filterable
            default-first-option
          >
            <el-option
              v-for="(item, index) in row?.options || []"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <!-- 4单选框 -->
          <el-checkbox v-if="row.tagType === WIDGET_TYPE.CHECKBOX" v-model="row.defaultValue" true-value="1" false-value="0" />
          <!-- 多选框 -->
          <div v-if="row.tagType === WIDGET_TYPE.CHECKBOXS">
            <el-checkbox-group v-model="row.defaultValue">
              <el-checkbox v-for="item in row.options " :key="item.value" :label="item.label" :value="item.value" />

            </el-checkbox-group>
          </div>

          <!-- 计数器 -->
          <div
            class="numInput "
            v-if="row.tagType === WIDGET_TYPE.NUMBER_INPUTS || row.tagType === WIDGET_TYPE.NUMBER_INPUT"
          >
            <div
              class="input-grid"
            >

              <el-input-number
                class="mr10"
                controls-position="right"
                v-model="row.defaultValue"
              ></el-input-number>
              <span
                class="over-ellipsis span-fommat"
                :title="row?.units "
              >{{ row?.unit }}</span>

            </div>
          </div>
          <!-- 6单纯显示内容，无法编辑 -->
          <div v-if="row.tagType === WIDGET_TYPE.VIEW && row.tagIcon === 'input'">
            {{ row.defaultValue }}
          </div>
          <!-- 滑块 -->
          <div v-if="row.tagType === WIDGET_TYPE.SLIDER" class="slider" >
            <span class="value">{{ row.defaultValue }}</span>
            <el-slider v-model="row.defaultValue" :min="row.min" :max="row.max" size="small" />
          </div>

          <!-- 9 模型文件选择 local + server-->
          <div
            class="localServer"
            v-if="
              row.tagType === WIDGET_TYPE.FILE || row.tagType === NODE_TYPE.SCRIPT || row.tagType === NODE_TYPE.PPT
            "
          >

          </div>

          <!-- 行容器 -->

          <div v-if="row.tagType === WIDGET_TYPE.VIEW && row.tagIcon === 'row'">
            {{ '' }}
          </div>
        </div>

      </template>

      <template #label="{row}">

        <span v-if="row.tagType === WIDGET_TYPE.VIEW && row.tagIcon === 'row'">
          {{ row.componentName }}
        </span>
        <span v-else>{{ row.label }}</span>
      </template>

    </BaseTable>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, nextTick } from 'vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import { NODE_TYPE, WIDGET_TYPE } from '@/utils/enum/flow';

const props = defineProps({
  nodeParams: {
    type: Array,
    default: () => [],
  },
  pageInfo: {
    type: Object,
  },
  currentNode: {
    type: Object,
  },
});

const baseTableRef = ref();
const tableData = ref<any>([]);

const formatDataFun = (list:any, parentId:any) => {

  for (let i = 0;i < list.length;i++) {
    list[i].parentId = parentId;
    if (list[i]?.children?.length) {
      formatDataFun(list[i]?.children, list[i].renderKey);
    }
  }

};

watch(() => props.nodeParams, (newVal) => {
  if (newVal) {
    tableData.value = newVal;
    formatDataFun(tableData.value, 0);
    console.log(tableData.value, 'tableData.value');

    nextTick(() => {
      baseTableRef.value.setDataFun(tableData.value);
    });
  }
}, {
  immediate: true,
  deep: true,
});

</script>

<style lang="scss" scoped>
.flow-node-param-page {
  width: 100%;
  height: 100%;

  .span-fommat {
    max-width: 50px;
    text-align: right;
    flex-shrink: 0;
  }

  .span-min80{
    min-width: 80px
  }

  .span-3{
    width: calc(100% / 3)
  }

  .spanw100{
    width: 100px
  }
}

.slider{
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
}

.value{
  padding-right: 15px;
}

.mr10{
  margin-right: 10px;
}
</style>
