<template>
  <div class="list-box">
    <div class="opr-box">
      <NodeHead :nodeName="t('参数赋值列表')" />
      <div class="button-box">
        <a-button type="primary" @click="add" class="!rounded">{{ t('添加') }}</a-button>
      </div>
    </div>
    <div class="list">
      <div :class="prefixCls">
        <a-table
          :dataSource="formInfo.assignmentConfig.paramAssignmentConfigs"
          :columns="configColumns"
          :pagination="false"
          size="middle"
        >
          <template #headerCell="{ column }">
            <div class="header-cell__custom-title">{{ column.title }}</div>
          </template>
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.key === 'type'">
              <a-select v-model:value="record.type" :placeholder="t('请选择')" style="width: 100%">
                <a-select-option :value="ParamType.VALUE"> {{ t('值') }} </a-select-option>
                <a-select-option :value="ParamType.VARIABLE"> {{ t('变量') }} </a-select-option>
                <a-select-option v-if="props.needFromData" :value="ParamType.FORM_DATA">
                  {{ t('表单数据') }}
                </a-select-option>
                <a-select-option :value="ParamType.API"> API </a-select-option>
              </a-select>
            </template>
            <template v-if="column.key === 'target'">
              <a-input
                v-if="record.type == ParamType.VALUE"
                v-model:value="record.value"
                :placeholder="t('请填写参数值')"
              />
              <a-tree-select
                v-if="record.type == ParamType.VARIABLE"
                v-model:value="record.varValue"
                autoExpandParent
                treeDefaultExpandAll
                :tree-data="variableTree"
                style="width: 100%"
                :field-names="{
                  children: 'children',
                  label: 'title',
                  value: 'key',
                }"
              />

              <ScriptApiSelect
                style="width: 100%"
                v-if="record.type == ParamType.API"
                v-model="record.apiConfig"
                :need-hide-components="true"
              />
              <FormTargetItem
                v-if="record.type == ParamType.FORM_DATA"
                v-model:target="record.formConfig"
                :formSettingTree="props.formSettingTree"
              />
            </template>
            <template v-if="column.key === 'config'">
              <a-tree-select
                v-model:value="record.target"
                autoExpandParent
                treeDefaultExpandAll
                :tree-data="props.processParameter"
                style="width: 100%"
                :field-names="{
                  children: 'children',
                  label: 'name',
                  value: 'id',
                }"
            /></template>
            <template v-if="column.key === 'operation'">
              <div @click="deleteItem(index)" class="text-[#FF5461]">删除</div>
            </template>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { NodeHead } from '/@/components/ModalPanel/index';

  //import ScriptApiSelect from '/@bpmn/components/arguments/ApiSelect.vue';  //之前是调的这个，现在换成ScriptApiSelect.vue
  import ScriptApiSelect from '/@bpmn/components/arguments/ScriptApiSelect.vue';
  import FormTargetItem from './FormTargetItem.vue';
  import { ProcessArgumentTreeData } from '/@bpmn/config/rules';
  import { ParamType } from '/@/enums/workflowEnum';
  import { useBpmnStore } from '/@bpmn/store/bpmn';
  import { storeToRefs } from 'pinia';
  import { ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useDesign } from '/@/hooks/web/useDesign';
  const { prefixCls } = useDesign('basic-table');
  const { t } = useI18n();
  const props = defineProps({
    formSettingTree: Array,
    processParameter: Array,
    needFromData: Boolean,
  });

  const store = useBpmnStore();
  const { infoId } = store;
  const { info } = storeToRefs(store);
  const formInfo = ref();

  formInfo.value = info.value.get(infoId);

  const variableTree = ProcessArgumentTreeData;
  const configColumns = [
    {
      title: t('赋值来源'),
      dataIndex: 'type',
      key: 'type',
      align: 'center',
      width: 100,
    },
    {
      title: t('赋值配置'),
      dataIndex: 'target',
      key: 'target',
      align: 'center',
    },
    {
      title: t('目标参数'),
      dataIndex: 'config',
      key: 'config',
      align: 'center',
      width: 160,
    },
    {
      title: t('操作'),
      dataIndex: 'operation',
      key: 'operation',
      align: 'center',
      width: 60,
    },
  ];
  // 新增
  function add() {
    formInfo.value.assignmentConfig.paramAssignmentConfigs.push({
      type: ParamType.VARIABLE,
      value: '',
      varValue: '',
      apiConfig: {
        id: '',
        name: '',
        method: '',
        requestParamsConfigs: [], //Query Params
        requestHeaderConfigs: [], //Header
        requestBodyConfigs: [], //Body
      },
      formConfig: { key: '', formId: '', formField: '' },
      target: '',
    });
  }
  //删除
  function deleteItem(index: number) {
    formInfo.value.assignmentConfig.paramAssignmentConfigs.splice(index, 1);
  }
</script>

<style lang="less" scoped>
  .list-box {
    .opr-box {
      display: flex;
      justify-content: space-between;
      margin: 0 10px 10px;
    }
  }

  .list {
    .row {
      height: 40px;
      line-height: 30px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      span {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .source {
        flex-basis: 120px;
        margin: 0 4px;
      }

      .config {
        min-width: 120px;
        margin: 0 4px;
      }

      .target {
        flex: 1;
        margin: 0 4px;
      }

      .small {
        flex-basis: 10%;
      }
    }

    .head {
      background-color: #f9f9f9;
    }

    .item {
      border-bottom: 1px solid #f9f9f9;
    }

    .delete-icon {
      color: @clear-color;
    }
  }
</style>
