{$layout}
{$template "menu"}

<div class="right-box">
    <div class="config-section">
         <div class="section-title">{{t('finance_orders_methods_method_update@修改支付方式')}}</div>
         <form class="ui form" data-tea-action="$" data-tea-success="success">
            <csrf-token></csrf-token>
            <input type="hidden" name="methodId" :value="method.id"/>

            <div class="config-item">
                <div class="item-label">{{t('finance_orders_methods_createPopup@支付方式名称')}} *</div>
                <div class="item-content">
                    <input type="text" name="name" maxlength="30" ref="focus" v-model="method.name" class="ui input"/>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('finance_orders_methods_createPopup@类型')}}</div>
                <div class="item-content">
                    <span v-if="method.parentName.length == 0">{{t('finance_orders_methods_method_index@自定义')}}</span>
                    <span v-else>{{method.parentName}}</span>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('finance_orders_methods_createPopup@支付方式代号')}} *</div>
                <div class="item-content">
                    <input type="text" name="code" maxlength="60" v-model="method.code" class="ui input"/>
                    <p class="comment">{{t('finance_orders_methods_createPopup@只能包含数字字母和下划线自定义支付页面可以根据此代号判断订单来自哪种支付方式')}}</p>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('finance_orders_methods_createPopup@支付方式说明')}} *</div>
                <div class="item-content">
                    <textarea rows="3" name="description" maxlength="100" v-model="method.description" class="ui input"></textarea>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('finance_orders_methods_createPopup@支持终端')}}</div>
                <div class="item-content">
                    <b-select
                        name="clientType"
                        v-model="method.clientType"
                        auto-width
                        :options="[
                            ...clientTypes.map(clientType => ({
                                label: clientType.name,
                                value: clientType.code,
                            }))
                        ]"
                    ></b-select>
                    <p class="comment" v-for="clientType in clientTypes" v-if="clientType.code == method.clientType">{{clientType.description}}</p>
                </div>
            </div>
            <div class="config-item" v-show="method.clientType == 'mobile'">
                <div class="item-label">{{t('finance_orders_methods_createPopup@二维码扫描提示')}}</div>
                <div class="item-content">
                    <input type="text" name="qrcodeTitle" maxlength="100" v-model="method.qrcodeTitle" class="ui input"/>
                    <p class="comment">{{t('finance_orders_methods_createPopup@用来提示用户使用App扫描二维码类似于请使用支付宝APP扫描下方二维码完成支付')}}</p>
                </div>
            </div>

            <!-- 自定义 -->
            <div v-if="method.parentCode == ''">
                <div class="config-item">
                    <div class="item-label">{{t('finance_orders_methods_createPopup@自定义支付URL')}} *</div>
                    <div class="item-content">
                        <input type="text" name="url" maxlength="200" v-model="method.url" class="ui input"/>
                        <p class="comment">{{t('finance_orders_methods_createPopup@用户选择此支付方式后系统会将订单信息放在此URL参数中')}}</p>
                    </div>
                </div>
            </div>

            <!-- 支付宝 -->
            <div v-if="method.parentCode == 'alipay'">
                <div class="config-item">
                    <div class="item-label">APPID *</div>
                    <div class="item-content">
                        <input type="text" name="paramsAlipayAppId" maxlength="20" v-model="method.params.appId" class="ui input"/>
                        <p class="comment">{{t('finance_orders_methods_createPopup@签约的支付宝应用ID为一组数字')}}</p>
                    </div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('finance_orders_methods_createPopup@私钥')}} *</div>
                    <div class="item-content">
                        <textarea name="paramsAlipayPrivateKey" v-model="method.params.privateKey" spellcheck="false" rows="5" class="ui input"></textarea>
                        <p class="comment">{{t('finance_orders_methods_createPopup@如果你获得的是证书文件你需要将文件内容拷贝到这里')}}</p>
                    </div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('finance_orders_methods_createPopup@应用公钥证书')}} *</div>
                    <div class="item-content">
                        <textarea name="paramsAlipayAppPublicCert" v-model="method.params.appPublicCert" spellcheck="false" rows="5" class="ui input"></textarea>
                        <p class="comment">{{t('finance_orders_methods_createPopup@如果你获得的是证书文件你需要将文件内容拷贝到这里')}}</p>
                    </div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('finance_orders_methods_createPopup@支付宝公钥证书')}} *</div>
                    <div class="item-content">
                        <textarea name="paramsAlipayPublicCert" v-model="method.params.alipayPublicCert" spellcheck="false" rows="5" class="ui input"></textarea>
                        <p class="comment">{{t('finance_orders_methods_createPopup@如果你获得的是证书文件你需要将文件内容拷贝到这里')}}</p>
                    </div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('finance_orders_methods_createPopup@支付宝根证书')}} *</div>
                    <div class="item-content">
                        <textarea name="paramsAlipayRootCert" v-model="method.params.alipayRootCert" spellcheck="false" rows="5" class="ui input"></textarea>
                        <p class="comment">{{t('finance_orders_methods_createPopup@如果你获得的是证书文件你需要将文件内容拷贝到这里')}}</p>
                    </div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('finance_orders_methods_createPopup@产品代号')}} *</div>
                    <div class="item-content">
                        <input type="text" name="paramsAlipayProductCode" v-model="method.params.productCode" maxlength="100" value="" class="ui input"/>
                        <p class="comment">{{t('finance_orders_methods_createPopup@和支付宝签约的产品代号')}}</p>
                    </div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('finance_orders_methods_createPopup@沙箱应用')}}</div>
                    <div class="item-content">
                        <checkbox name="paramsAlipayIsSandbox" v-model="method.params.isSandbox"></checkbox>
                        <p class="comment">{{t('finance_orders_methods_createPopup@选中后表示当前支付宝应用为沙箱应用仅用来模拟测试')}}</p>
                    </div>
                </div>
            </div>

            <!-- Crypto -->
            <div v-if="method.parentCode == 'usdt' || method.parentCode == 'usdc'">
                <div class="config-item">
                    <div class="item-label">{{t('finance_orders_methods_createPopup@交易类型')}} *</div>
                    <div class="item-content">
                        <b-select
                        name="paramsCryptoTradeType"
                        v-model="method.params.tradeType"
                        auto-width
                        :options="[
                            ...tradeTypes.map(tradeType => ({
                                label: tradeType.name,
                                value: tradeType.code,
                            }))
                        ]"
                    ></b-select>
                    </div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('finance_orders_methods_createPopup@收款地址')}} *</div>
                    <div class="item-content">
                        <input type="text" name="paramsCryptoWalletAddress" maxlength="100" v-model="method.params.walletAddress" class="ui input"/>
                    </div>
                </div>

                <div class="config-item">
                    <div class="item-label">{{t('finance_orders_methods_createPopup@支付页面HTML')}}</div>
                    <div class="item-content">
                        <textarea name="paramsCryptoPaymentPageHtml" v-model="method.params.PaymentPageHtml" spellcheck="false" rows="5" class="ui input"></textarea>
                    </div>
                </div>
            </div>

            <div class="config-item">
                <div class="item-label">{{t('finance_orders_methods_method_update@更多选项')}}</div>
                <div class="item-content">
                     <a href="" @click.prevent="moreOptionsVisible = !moreOptionsVisible" class="more-options-toggle">
						<i class="icon angle" :class="{down:!moreOptionsVisible, right:moreOptionsVisible}"></i>
						<span v-if="!moreOptionsVisible">{{t('finance_orders_methods_method_update@显示更多选项')}}</span>
						<span v-if="moreOptionsVisible">{{t('finance_orders_methods_method_update@收起选项')}}</span>
					</a>
                </div>
            </div>
            <div v-show="moreOptionsVisible">
                <div class="config-item">
                    <div class="item-label">{{t('finance_orders_methods_method_update@启用')}}</div>
                    <div class="item-content">
                        <checkbox name="isOn" v-model="method.isOn"></checkbox>
                    </div>
                </div>
            </div>

             <div class="config-item">
                 <div class="item-label"></div>
                 <div class="item-content">
                     <submit-btn></submit-btn>
                 </div>
            </div>
        </form>
    </div>
</div>