<template>
  <a-card :class="$style.watermarkCard">
    <h2 :class="$style.title">水印配置</h2>
    <sd-form
      v-if="formData.pageFormData"
      ref="form"
      :init-values="formData.pageFormData.pageFieldInfos"
    >
      <template v-slot="{ model }">
        <sd-form-item name="openButton" />
        <div v-if="model.openButton === '1'">
          <sd-form-item name="waterContent" component="a-radio-group" />
          <sd-form-item name="handleRange" />
          <sd-form-item name="handleRole" />
          <sd-form-item name="printRange" />
          <sd-form-item name="printRole" />
          <sd-form-item name="attachmentRange" />
          <sd-form-item name="attachmentRole" />
        </div>
        <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-watermark-config-import'

export default {
  name: 'SdWatermarkConfig',
  metaInfo: {
    title: '水印配置管理',
  },
  components,
  data() {
    return {
      formData: {},
      isSubmitting: false,
    }
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      WorkbenchService.getWatermarkConfig().then((res) => {
        this.formData = res
      })
    },
    btnClick() {
      this.$refs.form.validateFields().then(() => {
        this.isSubmitting = true
        // 提交表单
        const data = {
          eventId: 'save',
          inputs: this.$refs.form.getBackendValues(),
          pageFlowId: this.formData.attrs.pageflowId,
          pagePath: this.formData.attrs.pagePath,
        }
        WorkbenchService.saveWatermarkConfig(data).then((res) => {
          if (res && res.data) {
            Message.success('保存成功')
            this.isSubmitting = false
          }
        })
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.watermark-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>
