<template>
  <a-card :class="$style.sysmangeCard">
    <h2 :class="$style.title">系统管理地址配置</h2>
    <sd-form
      v-if="formData.pageFormData"
      ref="form"
      :init-values="formData.pageFormData.pageFieldInfos"
    >
      <template>
        <sd-form-item name="sysManageUrl" />
        <div :class="$style.button">
          <a-button type="primary" :loading="isSubmitting" @click="btnClick">
            保存
          </a-button>
        </div>
      </template>
    </sd-form>
  </a-card>
</template>

<script>
import { Message } from 'ant-design-vue'
import WorkbenchService from '@/workbench/workbench-service'
import components from './_import-components/sd-sys-manage-config-import'
export default {
  name: 'SdSysManageConfig',
  metaInfo: {
    title: '系统管理配置',
  },
  components,
  data() {
    return {
      formData: {},
      isSubmitting: false,
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      WorkbenchService.getSysmanageConfig().then((res) => {
        this.formData = res
      })
    },
    btnClick() {
      this.$refs.form.validateFields().then(() => {
        const sysManageUrl = this.$refs.form.getFieldValue('sysManageUrl')
        if (sysManageUrl.lastIndexOf('/') === sysManageUrl.length - 1) {
          this.$refs.form.setFieldValue(
            'sysManageUrl',
            sysManageUrl.substring(0, sysManageUrl.length - 1)
          )
        }
        this.isSubmitting = true
        const beanId = parseInt(this.formData.pageFormData.beanId)
        const newid = [{ name: 'id', value: beanId }]
        // 提交表单
        const input = newid.concat(this.$refs.form.getBackendValues())
        const data = {
          eventId: 'save',
          inputs: input,
          pageFlowId: this.formData.attrs.pageflowId,
          pagePath: this.formData.attrs.pagePath,
        }
        WorkbenchService.saveSysmanageConfig(data).then((res) => {
          if (res && res.data) {
            Message.success('保存成功')
            this.isSubmitting = false
          }
        })
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.sysmange-card {
  .title {
    text-align: center;
  }
  :global(.ant-form) {
    :global(.ant-form-item-label) {
      float: left;
      width: 30%;
    }
    :global(.ant-form-item-control-wrapper) {
      float: left;
      width: 60%;
    }
  }
  .button {
    display: flex;
    justify-content: center;
  }
}
</style>
