<!--
  盛付通： 【参数配置】 页面内容

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/11/03 08:35
-->
<template>
  <AppConfigCommonPage ref="appConfigCommonPageRef">
    <template #advancedConfigPage>
      <a-col :span="24">
        <a-collapse>
          <a-collapse-panel key="k1" header="高级设置">
            <a-form-item label="商户简称更改（支付公司侧）">
              <div class="jeepay-m-pz-box">
                <a-input v-model:value.trim="vdata.mchShortName" class="form-item-content" />
                <a-button
                  class="jeepay-m-btn"
                  data-type="text"
                  size="small"
                  style="margin-left: 20px;"
                  type="primary"
                  @click="configInterfaceFunc('MCH_SHORT_NAME', vdata.mchShortName)"
                >
                  <save-outlined />更改
                </a-button>
              </div>
              <p class="jeepay-tip-text">最大长度20,商户简称会同时作为经营名称使用，不要频繁修改（以支付公司接口为准）</p>
            </a-form-item>
          </a-collapse-panel>
        </a-collapse>
      </a-col>
    </template>
  </AppConfigCommonPage>
</template>

<script lang="ts" setup>

import { ref, reactive } from 'vue'
import AppConfigCommonPage from '../../commons/AppConfigCommonPage.vue'

const appConfigCommonPageRef = ref()
const vdata : any = reactive({
   mchShortName: '' // 商户简称
})

// 对外暴露的 页面渲染函数  也用作初始化
function pageRender (applyId){
  appConfigCommonPageRef.value.pageRender(applyId) // 直接调用通用组件
}
// 参数配置公共组件【高级设置】插槽方法覆写
function configInterfaceFunc(configType, configVal) {
  appConfigCommonPageRef.value.configInterfaceFunc(configType, configVal)
}

defineExpose({ pageRender })
</script>
<style scoped>
  .form-item-content{
    width: 70%
  }
</style>
