<template>
  <a-card :class="$style.previewCard">
    <sd-form
      v-if="formData.pageFormData"
      ref="form"
      :init-values="formData.pageFormData.pageFieldInfos"
    >
      <template v-slot="{ model }">
        <sd-form-item name="layoutDocFormat">
          <a-radio-group v-model="model.layoutDocFormat">
            <a-radio
              value="PDF"
              :disabled="model.environment && model.environment.indexOf('XC') > -1"
            >
              PDF
            </a-radio>
            <a-radio value="OFD">
              OFD
            </a-radio>
          </a-radio-group>
        </sd-form-item>
        <sd-form-item name="layoutDocFirm" component="a-radio-group" />
        <sd-form-item v-model="environment" name="environment" />
        <fieldset
          v-if="model.environment && model.environment.indexOf('X86') > -1"
          :class="$style.fieldset"
        >
          <legend>X86环境</legend>
          <sd-form-item name="previewMode" component="a-radio-group" />
          <sd-form-item
            v-if="
              model.previewMode === 'EMBED_SINGLE_SCREEN' ||
                model.previewMode === 'EMBED_DUAL_SCREEN'
            "
            name="previewServiceType"
            component="a-radio-group"
          />
          <div v-if="model.previewMode === 'POP_UP'" :class="[$style.warning, $style.download]">
            <a-icon type="warning" />
            <span>需要安装IndiDocX</span>
          </div>
          <div
            v-if="
              model.previewMode !== 'POP_UP' && model.previewServiceType === 'EMBED_SINGLE_SCREEN'
            "
            :class="$style.warning"
          >
            <a-icon type="warning" />
            <span>云文档只支持在线编辑，套打盖章需要使用本地WPS或word客户端</span>
          </div>
          <div v-if="model.previewMode === 'EMBED_SINGLE_SCREEN'">
            <!-- >wps轻阅读、wps在线编辑<-->
            <sd-form-item
              v-for="name in ['wpsPreviewAppId', 'wpsPreviewAppKey', 'wpsPreviewServer']"
              :key="name"
              :hidden="!(model.previewServiceType + '').startsWith('WPS_')"
              :name="name"
            />
            <!-- >福新轻阅读<-->
            <sd-form-item
              v-for="name in [
                'foxitPreviewAppname',
                'foxitPreviewAppid',
                'foxitPreviewAppkey',
                'foxitTurntableAddress',
                'foxitPreviewServer',
              ]"
              :key="name"
              :hidden="model.previewServiceType !== 'FOXIT_LIGHT_READING'"
              :name="name"
            />
            <!-- >树科轻阅读<-->
            <sd-form-item
              v-for="name in ['suwellTurntableAddress', 'suwellPreviewServer']"
              :key="name"
              :hidden="model.previewServiceType !== 'SUWELL_LIGHT_READING'"
              :name="name"
            />
            <!-- >点聚<-->
            <sd-form-item
              v-for="name in ['dianJuAppid', 'dianJuTurntableAddress', 'dianJuPreviewServer']"
              :key="name"
              :hidden="model.previewServiceType !== 'DIANJU_LIGHT_READING'"
              :name="name"
            />
            <!-- >永中<-->
            <sd-form-item
              v-for="name in ['yozoPreviewServer']"
              :key="name"
              :hidden="model.previewServiceType !== 'YOZO_LIGHT_READING'"
              :name="name"
            />
          </div>
        </fieldset>
        <fieldset
          v-if="model.environment && model.environment.indexOf('XC') > -1"
          :class="$style.fieldset"
        >
          <legend>信创环境</legend>
          <sd-form-item name="xcPreviewMode" component="a-radio-group" />
          <sd-form-item
            v-if="
              model.xcPreviewMode === 'EMBED_SINGLE_SCREEN' ||
                model.xcPreviewMode === 'EMBED_DUAL_SCREEN'
            "
            name="standardPreviewMode"
          />
          <sd-form-item
            v-if="model.xcPreviewMode !== 'POP_UP' && model.standardPreviewMode === 'LIGHT_READING'"
            name="xcPreviewServiceType"
            component="a-radio-group"
          />
          <div
            v-if="
              model.xcPreviewMode === 'EMBED_SINGLE_SCREEN' &&
                model.standardPreviewMode === 'LIGHT_READING'
            "
          >
            <!-- >wps轻阅读、wps在线编辑<-->
            <sd-form-item
              v-for="name in ['wpsPreviewAppId', 'wpsPreviewAppKey', 'wpsPreviewServer']"
              :key="name"
              :hidden="!(model.xcPreviewServiceType + '').startsWith('WPS_')"
              :name="name"
            />
            <!-- >福新轻阅读<-->
            <sd-form-item
              v-for="name in [
                'foxitPreviewAppname',
                'foxitPreviewAppid',
                'foxitPreviewAppkey',
                'foxitTurntableAddress',
                'foxitPreviewServer',
              ]"
              :key="name"
              :hidden="model.xcPreviewServiceType !== 'FOXIT_LIGHT_READING'"
              :name="name"
            />
            <!-- >树科轻阅读<-->
            <sd-form-item
              v-for="name in ['suwellTurntableAddress', 'suwellPreviewServer']"
              :key="name"
              :hidden="model.xcPreviewServiceType !== 'SUWELL_LIGHT_READING'"
              :name="name"
            />
            <!-- >点聚<-->
            <sd-form-item
              v-for="name in ['dianJuAppid', 'dianJuTurntableAddress', 'dianJuPreviewServer']"
              :key="name"
              :hidden="model.xcPreviewServiceType !== 'DIANJU_LIGHT_READING'"
              :name="name"
            />
            <!-- >永中<-->
            <sd-form-item
              v-for="name in ['yozoPreviewServer']"
              :key="name"
              :hidden="model.xcPreviewServiceType !== 'YOZO_LIGHT_READING'"
              :name="name"
            />
          </div>
          <div v-if="model.xcPreviewMode === 'POP_UP'" :class="[$style.warning, $style.download]">
            <a-icon type="warning" />
            <span>需要安装WPS</span>
          </div>
        </fieldset>
        <sd-form-item name="localServiceAddress" />
        <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-preview-control-import'

export default {
  name: 'SdPreviewControl',
  metaInfo: {
    title: '预览控件管理',
  },
  components,
  data() {
    return {
      formData: {},
      isSubmitting: false,
      environment: [],
    }
  },
  watch: {
    environment(val) {
      if (val.indexOf('XC') > -1) {
        this.$refs.form.setFieldValue('layoutDocFormat', 'OFD')
      }
    },
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      WorkbenchService.getPreviewControl().then((res) => {
        this.formData = res
      })
    },
    btnClick() {
      // 保存
      this.$refs.form.validateFields().then(() => {
        this.isSubmitting = true
        // 提交表单
        const inputs = this.$refs.form.getBackendValues()
        inputs.forEach((item) => {
          if (item.name.endsWith('Address')) {
            if (item.value?.endsWith('/')) {
              item.value = item.value.substr(0, item.value.length - 1)
              this.$refs.form.setFieldValue(item.name, item.value)
            }
          }
        })
        const data = {
          eventId: 'save',
          inputs,
          pageFlowId: this.formData.attrs.pageflowId,
          pagePath: this.formData.attrs.pagePath,
        }
        WorkbenchService.savePreviewControl(data).then((res) => {
          if (res && res.data) {
            Message.success('保存成功')
            this.isSubmitting = false
          }
        })
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
$warning-fs: 13px;
$legend-color: #e8e8e8;
.preview-card {
  :global(.ant-form) {
    :global(.ant-form-item-label) {
      float: left;
      width: 20%;
    }
    :global(.ant-form-item-control-wrapper) {
      float: left;
      width: 60%;
    }
    .fieldset {
      position: relative;
      left: 20%;
      display: block;
      width: 70%;
      margin-bottom: 10px;
      border: 1px solid $legend-color;
      margin-inline-start: 2px;
      margin-inline-end: 2px;
      padding-block-start: 0.35em;
      padding-inline-start: 0.75em;
      padding-inline-end: 0.75em;
      padding-block-end: 0.625em;
      min-inline-size: min-content;
      legend {
        display: block;
        width: auto;
        border-style: none;
        padding-inline-start: 2px;
        padding-inline-end: 2px;
      }
      .warning {
        margin-left: 15%;
        font-size: $warning-fs;
        &.download {
          position: absolute;
          top: 62px;
          left: 435px;
        }
      }
    }
    .button {
      display: flex;
      justify-content: center;
    }
  }
}
</style>
