<template>
  <div class="list-box" v-if="showPanel">
    <div class="opr-box">
      <div class="button-box">
        <a-button type="primary" size="small" @click="add" class="!rounded">{{
          t('添加赋值')
        }}</a-button>
      </div>
    </div>
    <div :class="prefixCls" v-if="formInfo.variableAssignmentConfigs">
      <a-table
        :dataSource="formInfo.variableAssignmentConfigs"
        :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 === 'name'">
            <a-select v-model:value="record.name" :placeholder="t('请选择')" style="width: 80px">
              <a-select-option
                style="font-size: 12px"
                v-for="item in state.variableSelectOptions"
                :key="item?.id"
                :value="item?.id"
              >
                {{ item?.name }}
              </a-select-option>
            </a-select>
          </template>
          <template v-if="column.key === 'type'">
            <a-select
              v-model:value="record.type"
              :placeholder="t('请选择类型')"
              style="width: 80px"
              @change="
                () => {
                  record.value = null;
                }
              "
            >
              <a-select-option
                style="font-size: 12px"
                v-for="item in typeOptions"
                :key="item.id"
                :value="item.id"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </template>
          <template v-if="column.key === 'value'">
            <a-input
              v-if="record.type == OperationType.VALUE"
              v-model:value="record.value"
              :placeholder="t('请填写参数值')"
            />
            <a-tree-select
              v-if="record.type == OperationType.VARIABLE"
              v-model:value="record.value"
              autoExpandParent
              treeDefaultExpandAll
              :tree-data="variableTree"
              style="width: 100%"
              :placeholder="t('请选择参数值')"
              :field-names="{
                children: 'children',
                label: 'title',
                value: 'key',
              }"
            />
            <ScriptApiSelect
              style="width: 100%"
              v-if="record.type == OperationType.API"
              v-model="record.apiConfig"
            />
          </template>
          <template v-if="column.key === 'operation'">
            <div class="text-[#FF5461]" @click="deleteItem(index)">删除</div>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
  import ScriptApiSelect from './SelectScriptApiSelect.vue';
  import { ProcessArgumentTreeData } from '/@bpmn/config/rules';
  import { OperationType } from '/@/enums/workflowEnum';
  import { randomNum } from '/@bpmn/util/random';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useDesign } from '/@/hooks/web/useDesign';
  import useStateInfo from './../../hooks/useStateInfo';
  import { onMounted, reactive } from 'vue';
  import { useRuleProcessStore } from '../../store';
  import { storeToRefs } from 'pinia';
  import { RuleProcessParamItem } from '/@/api/ruleProcess/model';
  const { showPanel, formInfo } = useStateInfo();
  const store = useRuleProcessStore();
  const { processInfo } = storeToRefs(store);
  const { prefixCls } = useDesign('basic-table');
  const { t } = useI18n();
  const configColumns = [
    {
      title: t('变量选择'),
      dataIndex: 'name',
      key: 'name',
      width: 120,
      align: 'center',
    },
    {
      title: t('类型'),
      dataIndex: 'type',
      key: 'type',
      width: 100,
      align: 'center',
    },
    {
      title: t('参数值'),
      dataIndex: 'value',
      key: 'value',
      align: 'center',
    },
    {
      title: t('操作'),
      dataIndex: 'operation',
      key: 'operation',
      width: 88,
      align: 'center',
    },
  ];
  let typeOptions = [
    {
      id: OperationType.VALUE,
      name: t('值'),
    },
    {
      id: OperationType.VARIABLE,
      name: t('变量'),
    },
    {
      id: OperationType.API,
      name: 'API',
    },
  ];
  let variableTree = ProcessArgumentTreeData;
  const state = reactive({
    variableSelectOptions: [] as Array<RuleProcessParamItem>,
  });
  onMounted(() => {
    if (processInfo.value.processParamConfigs)
      state.variableSelectOptions = processInfo.value.processParamConfigs;
  });
  // 新增
  function add() {
    formInfo.value.variableAssignmentConfigs.push({
      id: randomNum(),
      name: '',
      type: OperationType.VALUE,
      value: '',
      apiConfig: {
        id: '',
        name: '',
        method: '',
        requestParamsConfigs: [], //Query Params
        requestHeaderConfigs: [], //Header
        requestBodyConfigs: [], //Body
      },
    });
  }
  //删除
  function deleteItem(index: number) {
    formInfo.value.variableAssignmentConfigs.splice(index, 1);
  }
</script>

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

  .delete-icon {
    color: @clear-color;
  }

  .pop-desc {
    font-size: 12px;
    color: rgb(0 0 0 / 40%);
  }
</style>
