<template>
  <div @click.stop="open">
    <InputModel
      :value="props.modelValue.name"
      :placeholder="t('配置运维信息')"
      style="width: 100%; min-width: 100px"
    />
    <ModalPanel
      :visible="visible"
      :width="1000"
      :title="t('运维配置')"
      @submit="submit"
      @close="close"
    >
      <NodeHead :nodeName="t('运维信息')" class="ml-4 my-4" />
      <div class="form-box">
        <a-form :model="data.info">
          <a-form-item
            :label="t('运维名称')"
            :rules="[{ required: true, message: t('请填写运维名称!') }]"
          >
            <a-select
              v-model:value="data.info.id"
              :placeholder="t('请选择运维名称')"
              style="width: 100%"
              @change="changeName"
            >
              <a-select-option
                style="font-size: 12px"
                v-for="item in data.list"
                :key="item.id"
                :value="item.id"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
        <div :class="[prefixCls, 'px-4', '!h-50']">
          <a-table
            size="middle"
            :dataSource="data.info.configs"
            :columns="configColumns"
            :pagination="false"
            :scroll="{ y: '400px' }"
            ><template #headerCell="{ column }">
              <div class="header-cell__custom-title">{{ column.title }}</div>
            </template>
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'assignmentType'">
                <a-select
                  v-model:value="record.assignmentType"
                  style="width: 100%"
                  :placeholder="t('请选择变量类型')"
                  allowClear
                >
                  <a-select-option
                    style="font-size: 12px"
                    :value="item.id"
                    v-for="item in paramTree"
                    :key="item.id"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </template>
              <template v-else-if="column.key === 'assignmentValue'">
                <a-select
                  v-if="record.assignmentType == OperationManagementToRuleType.RULE"
                  v-model:value="record.assignmentValue"
                  :placeholder="t('请选择流程变量')"
                  style="width: 100%"
                >
                  <a-select-option
                    style="font-size: 12px"
                    v-for="item in data.processParamConfigs"
                    :key="item.id"
                    :value="item.id"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
                <a-input
                  v-else
                  v-model:value="record.assignmentValue"
                  :placeholder="t('请填写值')"
                />
              </template>
            </template>
          </a-table>
        </div>
      </div>
    </ModalPanel>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { NodeHead, ModalPanel } from '/@/components/ModalPanel/index';
  import { InputModel } from '/@/components/ApiConfig';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { cloneDeep } from 'lodash-es';

  import { useDesign } from '/@/hooks/web/useDesign';
  import {
    OperationManagementToRule,
    OperationManagementToRuleType,
  } from '/@/api/operationManagement/model';
  import {
    getOperationManagementInfo,
    getOperationManagementList,
  } from '/@/api/operationManagement';
  import { useRuleProcessStore } from '../../store';
  import { storeToRefs } from 'pinia';
  import { RuleProcessParamItem } from '/@/api/ruleProcess/model';
  const { prefixCls } = useDesign('basic-table');
  const { t } = useI18n();
  const emit = defineEmits(['update:modelValue']);
  const defaultParams = {
    id: '',
    name: '',
    configs: [],
  };
  const props = withDefaults(defineProps<{ modelValue: OperationManagementToRule }>(), {
    modelValue: () => {
      return {
        id: '',
        name: '',
        configs: [],
      };
    },
  });
  const visible = ref<boolean>(false);
  let data = reactive({
    info: defaultParams as OperationManagementToRule,
    list: [] as Array<{ id: string; name: string }>,
    processParamConfigs: [] as Array<RuleProcessParamItem>,
  });
  const store = useRuleProcessStore();
  const { processInfo } = storeToRefs(store);
  async function open() {
    let res = await getOperationManagementList();
    if (res && Array.isArray(res)) {
      data.list = res;
    }
    if (processInfo.value.processParamConfigs) {
      data.processParamConfigs = processInfo.value.processParamConfigs;
    }

    if (props.modelValue.id) {
      data.info = cloneDeep(props.modelValue);
    }

    visible.value = true;
  }
  function close() {
    visible.value = false;
  }
  async function changeName() {
    data.info.configs = [];
    let res = await getOperationManagementInfo(data.info.id);
    if (res && res.configJson) {
      data.info.name = res.name;
      let jsonStr = res.configJson;
      if (jsonStr) {
        let jsonData = JSON.parse(jsonStr);
        if (jsonData.paramConfigs) {
          data.info.configs = cloneDeep(jsonData.paramConfigs);
        }
      }
    }
  }
  function submit() {
    emit('update:modelValue', cloneDeep(data.info));
    close();
  }

  const paramTree = [
    {
      id: OperationManagementToRuleType.VALUE,
      name: t('值'),
    },
    {
      id: OperationManagementToRuleType.RULE,
      name: '规则流程变量',
    },
  ];
  let configColumns = [
    {
      title: t('变量名称'),
      dataIndex: 'name',
      key: 'name',
      align: 'center',
    },
    {
      title: t('变量类型'),
      dataIndex: 'assignmentType',
      key: 'assignmentType',
      align: 'center',
    },
    {
      title: t('变量配置'),
      dataIndex: 'assignmentValue',
      key: 'assignmentValue',
      align: 'center',
    },
  ];
</script>

<style lang="less" scoped>
  :deep(.ant-btn-primary) {
    margin: 0 0 0 10px;
    border-radius: 4px;
  }

  .button-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0 10px 10px 0;
  }

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

  .form-box {
    padding: 20px;
  }
</style>
