<template>
  <div class="basic-box">
    <div class="form-box">
      <a-form :model="state.formState" :label-col="labelCol" layout="vertical">
        <a-row :gutter="50">
          <a-col :span="12">
            <a-form-item
              :label="t('名称')"
              :rules="[{ required: true, message: t('请填写名称!') }]"
            >
              <a-input v-model:value="state.formState.name" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :label="t('编号')"
              :rules="[{ required: true, message: t('请填写编号!') }]"
            >
              <a-input v-model:value="state.formState.code" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="备注" name="remark">
              <a-textarea v-model:value="state.formState.remark" :rows="4" />
            </a-form-item>
          </a-col>
          <div class="param-box">
            <div class="head-box">
              <NodeHead nodeName="变量配置" />
              <div class="opr-box">
                <div class="button-box">
                  <a-button type="primary" @click="add" class="!rounded">{{
                    t('添加变量')
                  }}</a-button>
                </div>
              </div>
            </div>
            <div class="list-box">
              <div :class="prefixCls">
                <a-table
                  :dataSource="state.paramConfigs"
                  :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-input v-model:value="record.name" :placeholder="t('变量名称')" />
                    </template>
                    <template v-if="column.key === 'type'">
                      <a-select
                        v-model:value="record.type"
                        :placeholder="t('请选择类型')"
                        style="width: 120px"
                        @change="
                          () => {
                            record.value = null;
                          }
                        "
                      >
                        <a-select-option
                          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('请填写参数值')"
                      />
                      <SelectConfigApi
                        style="width: 100%"
                        :isGlobalParams="true"
                        v-if="record.type == OperationType.API"
                        v-model="record.apiConfig"
                        :need-hide-components="true"
                      />
                    </template>
                    <template v-if="column.key === 'operation'">
                      <div class="text-[#FF5461]" @click="deleteItem(index)">删除</div>
                    </template>
                  </template>
                </a-table>
              </div>
            </div>
          </div>
        </a-row>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, reactive } from 'vue';
  import {
    OperationManagementListModel,
    OperationManagementToRuleType,
  } from '/@/api/operationManagement/model';
  import message from 'ant-design-vue/lib/message';
  import { NodeHead } from '/@/components/ModalPanel/index';
  import { t } from '/@/hooks/web/useI18n';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { OperationType } from '/@/enums/workflowEnum';
  import { randomNum } from '../../workflow/design/bpmn/util/random';
  import SelectConfigApi from './SelectConfigApi.vue';
  const labelCol = { style: { lineHeight: '14px', paddingBottom: '14px' } };
  let props = withDefaults(
    defineProps<{
      formState?: OperationManagementListModel;
      paramConfigs?: Array<any>;
    }>(),
    {
      paramConfigs: () => {
        return [];
      },
      formState: () => {
        return {
          code: '',
          name: '',
          remark: '',
        };
      },
    },
  );
  const state: {
    paramConfigs: any;
    formState: OperationManagementListModel;
  } = reactive({
    formState: {
      code: '',
      name: '',
      remark: '',
    },
    paramConfigs: [],
  });
  const { prefixCls } = useDesign('basic-table');
  let typeOptions = [
    {
      id: OperationManagementToRuleType.VALUE,
      name: t('值'),
    },
    {
      id: OperationManagementToRuleType.API,
      name: 'API',
    },
  ];
  const configColumns = [
    {
      title: t('变量名称'),
      dataIndex: 'name',
      key: 'name',
      width: 120,
      align: 'center',
    },
    {
      title: t('类型'),
      dataIndex: 'type',
      key: 'type',
      width: 120,
      align: 'center',
    },
    {
      title: t('默认值'),
      dataIndex: 'value',
      key: 'value',
      align: 'center',
    },
    {
      title: t('操作'),
      dataIndex: 'operation',
      key: 'operation',
      width: 88,
      align: 'center',
    },
  ];
  onMounted(() => {
    state.formState = props.formState;
    state.paramConfigs = props.paramConfigs;
  });
  function add() {
    if (state.paramConfigs) {
      state.paramConfigs.push({
        id: randomNum(),
        name: '',
        type: OperationType.API,
        value: '',
        apiConfig: {
          id: '',
          name: '',
          method: '',
          requestParamsConfigs: [], //Query Params
          requestHeaderConfigs: [], //Header
          requestBodyConfigs: [], //Body
        },
      });
    }
  }
  //删除
  function deleteItem(index: number) {
    if (state.paramConfigs) state.paramConfigs.splice(index, 1);
  }
  async function validateForm() {
    if (state.formState.code == '') {
      message.error(t('请填写编号'));
      return false;
    }
    if (state.formState.name == '') {
      message.error(t('请填写名称'));
      return false;
    }

    return true;
  }
  function getFormData() {
    return { ...state.formState, paramConfigs: state.paramConfigs };
  }
  defineExpose({
    validateForm,
    getFormData,
  });
</script>

<style scoped lang="less">
  .basic-box {
    height: 100%;
    overflow: hidden auto;
    background-color: #fff;
    border-radius: 16px;
    padding: 24px;
  }

  .form-box {
    width: 70%;
    height: 100%;
    margin: 0 auto;
  }

  .ant-form-item {
    margin-bottom: 30px;
  }

  .ant-input,
  :deep(.ant-select:not(.ant-select-customize-input) .ant-select-selector),
  :deep(.ant-input-affix-wrapper),
  .ant-input-number {
    border-radius: 4px;
  }

  :deep(.ant-input-group > .ant-input:first-child) {
    border-radius: 4px 0 0 4px;
  }

  :deep(.ant-input-group-addon:last-child) {
    border-radius: 0 4px 4px 0;
  }

  html[data-theme='dark'] {
    .basic-box {
      background-color: #000;
    }

    .form-box {
      background-color: #151515;
    }
  }

  .param-box {
    width: 100%;
    padding: 0 20px;

    .head-box {
      display: flex;
      justify-content: space-between;

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