<template>
  <DesktopLayout v-if="show">
    <template #head>
      <DesignHead :title="t('运维信息设计')">
        <template #steps
          ><a-steps :current="current">
            <a-step v-for="item in steps" :key="item.title" :title="item.title" />
          </a-steps>
        </template>
        <template #buttons>
          <div class="design-button">
            <a-button
              :type="current == 0 ? '' : 'primary'"
              :disabled="current == 0"
              @click="prev"
              class="common-button"
            >
              {{ t('上一步') }} >
            </a-button>
            <a-button
              :type="current == steps.length - 1 ? '' : 'primary'"
              :disabled="current == steps.length - 1"
              class="common-button"
              @click="next"
              >{{ t('下一步') }} ></a-button
            >
            <a-button
              :type="current == 0 ? '' : 'warning'"
              class="common-button"
              :disabled="current == 0"
              @click="save"
              >{{ t('保存') }}</a-button
            >
            <a-button type="error" class="clean-icon" @click="close">{{ t('关闭') }}</a-button>
          </div>
        </template>
      </DesignHead>
    </template>
    <Basic
      v-if="current == 0"
      ref="basicRef"
      :formState="state.formState"
      :paramConfigs="state.paramConfigs"
    />
    <Config
      v-if="current == 1"
      ref="configRef"
      :paramConfigs="state.paramConfigs"
      :eventConfigs="state.eventConfigs"
    />

    <LoadingBox v-if="showLoading" />
  </DesktopLayout>
</template>

<script setup lang="ts">
  import DesignHead from '/@/views/generator/desktop/components/designer/layout/Head.vue';
  import DesktopLayout from '/@/views/generator/desktop/components/designer/layout/Desktop.vue';
  import Basic from './Basic.vue';
  import Config from './Config.vue';
  import { onMounted, reactive, ref } from 'vue';
  import { LoadingBox } from '/@/components/ModalPanel/index';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { OperationManagementListModel } from '/@/api/operationManagement/model';
  import {
    addOperationManagement,
    getOperationManagementInfo,
    updateOperationManagement,
  } from '/@/api/operationManagement';
  import { notification } from 'ant-design-vue';
  const props = withDefaults(
    defineProps<{
      id: string;
    }>(),
    {
      id: '',
    },
  );
  const current = ref<number>(0);
  const basicRef = ref();
  const configRef = ref();
  let show = ref(false);
  const state = reactive({
    id: '',
    formState: {
      code: '',
      name: '',
      remark: '',
    } as OperationManagementListModel,
    paramConfigs: [],
    eventConfigs: [],
  });
  const { t } = useI18n();
  const showLoading = ref(false);
  const steps = [
    {
      title: t('基本配置'),
      content: t('基本配置'),
    },
    {
      title: t('运维配置'),
      content: t('运维配置'),
    },
  ];

  let emits = defineEmits(['close']);

  onMounted(async () => {
    if (props.id) {
      let res = await getOperationManagementInfo(props.id);
      state.id = props.id;
      state.formState.name = res.name;
      state.formState.code = res.code;
      state.formState.remark = res.remark;
      let jsonStr = res.configJson;
      if (jsonStr) {
        let jsonData = JSON.parse(jsonStr);
        if (jsonData.paramConfigs && Array.isArray(jsonData.paramConfigs)) {
          state.paramConfigs = jsonData.paramConfigs;
        }
        if (jsonData.eventConfigs && Array.isArray(jsonData.eventConfigs)) {
          state.eventConfigs = jsonData.eventConfigs;
        }
      }
    }
    show.value = true;
  });
  const next = async () => {
    let validate = await basicRef.value.validateForm();
    if (validate) {
      let getFormData = await basicRef.value.getFormData();
      let { paramConfigs, ...formState } = getFormData;
      state.formState = formState;
      state.paramConfigs = paramConfigs;
      current.value = 1;
    }
  };
  const prev = async () => {
    let eventConfigs = await configRef.value.getFormData();
    state.eventConfigs = eventConfigs;
    current.value = 0;
  };
  function close() {
    emits('close');
  }
  async function save() {
    try {
      let validate2 = await configRef.value.validateForm();
      if (validate2) {
        let eventConfigs = await configRef.value.getFormData();
        let Json = { paramConfigs: state.paramConfigs, eventConfigs };
        let saveData = { ...state.formState, configJson: JSON.stringify(Json) };
        try {
          let res = false;
          let str = '';
          if (state.id) {
            str = '编辑';
            res = await updateOperationManagement({ ...saveData, id: state.id });
          } else {
            str = '新增';
            res = await addOperationManagement(saveData);
          }
          if (res) {
            notification.success({
              message: t(str + '提示'),
              description: t('成功'),
            }); //提示消息
            close();
          }
        } catch (error) {}
      }
    } catch (error) {}
  }
</script>

<style scoped lang="less">
  .iframe-box {
    width: 100%;
    height: 100%;
  }

  .common-button {
    margin-right: 16px;
    width: 82px;
    border-radius: 4px;
  }

  .ant-btn-warning:not(.ant-btn-link, .is-disabled) {
    background-color: #f70;
    border-color: #f70;
  }

  .clean-icon {
    width: 82px;
    border-radius: 4px;
  }

  .ant-steps {
    width: 464px;
  }
</style>
