{$layout "layout_popup"}

<!-- <h3>添加支付方式</h3> -->

<form class="ui form" data-tea-action="$" data-tea-success="success">
    <csrf-token></csrf-token>

    <table class="ui table selectable definition">
        <tr>
            <td class="title">{{t('finance_orders_methods_createPopup@支付方式名称')}} *</td>
            <td>
                <input type="text" name="name" maxlength="30" ref="focus"/>
            </td>
        </tr>
        <tr>
            <td>{{t('finance_orders_methods_createPopup@类型')}}</td>
            <td>
                <b-select
                    name="parentCode"
                    v-model="parentCode"
                    auto-width
                    @change="changeParentCode"
                    :options="[
                        {label: `[${t('finance_orders_methods_createPopup@自定义支付方式')}]`, value: ''},
                        ...presetMethods.map(presetMethod => ({
                            label: presetMethod.name,
                            value: presetMethod.code,
                        }))
                    ]"
                ></b-select>

                <!-- <select name="parentCode" class="ui dropdown auto-width" v-model="parentCode">
                    <option value="">[自定义支付方式]</option>
                    <option v-for="presetMethod in presetMethods" :value="presetMethod.code">{{presetMethod.name}}</option>
                </select> -->
            </td>
        </tr>
        <tr>
            <td>{{t('finance_orders_methods_createPopup@支付方式代号')}} *</td>
            <td>
                <input type="text" name="code" maxlength="60"/>
                <p class="comment">{{t('finance_orders_methods_createPopup@只能包含数字字母和下划线自定义支付页面可以根据此代号判断订单来自哪种支付方式')}}</p>
            </td>
        </tr>
        <tr>
            <td>{{t('finance_orders_methods_createPopup@支付方式说明')}} *</td>
            <td>
                <textarea rows="3" name="description" maxlength="100"></textarea>
            </td>
        </tr>
        <tr>
            <td>{{t('finance_orders_methods_createPopup@支持终端')}}</td>
            <td>
                <b-select
                    name="clientType"
                    v-model="clientTypeCode"
                    auto-width
                    :options="[
                        ...clientTypes.map(clientType => ({
                            label: clientType.name,
                            value: clientType.code,
                        }))
                    ]"
                ></b-select>

                <!-- <select class="ui dropdown auto-width" name="clientType" v-model="clientTypeCode">
                    <option v-for="clientType in clientTypes" :value="clientType.code">{{clientType.name}}</option>
                </select> -->
                <p class="comment" v-for="clientType in clientTypes" v-if="clientType.code == clientTypeCode">{{clientType.description}}</p>
            </td>
        </tr>
        <tr v-show="clientTypeCode == 'mobile'">
            <td>{{t('finance_orders_methods_createPopup@二维码扫描提示')}}</td>
            <td>
                <input type="text" name="qrcodeTitle" maxlength="100"/>
                <p class="comment">{{t('finance_orders_methods_createPopup@用来提示用户使用App扫描二维码完成支付类似于请使用支付宝APP扫描下方二维码完成支付')}}</p>
            </td>
        </tr>

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

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

        <!-- Crypto -->
        <tbody v-if="parentCode == 'usdt' || parentCode == 'usdc'">
            <tr>
                <td>{{t('finance_orders_methods_createPopup@交易类型')}} *</td>
                <td v-if="parentCode == 'usdt'">
                    <b-select
                        name="paramsCryptoTradeType"
                        v-model="paramsCryptoTradeType"
                        auto-width
                        :options="[
                            ...usdtTradeTypes.map(tradeType => ({
                                label: tradeType.name,
                                value: tradeType.code,
                            }))
                        ]"
                    ></b-select>
                </td>
                <td v-if="parentCode == 'usdc'">
                    <b-select
                        name="paramsCryptoTradeType"
                        v-model="paramsCryptoTradeType"
                        auto-width
                        :options="[
                            ...usdcTradeTypes.map(tradeType => ({
                                label: tradeType.name,
                                value: tradeType.code,
                            }))
                        ]"
                    ></b-select>
                </td>
            </tr>
            <tr>
                <td>{{t('finance_orders_methods_createPopup@收款地址')}} *</td>
                <td>
                    <input type="text" name="paramsCryptoWalletAddress" maxlength="100"/>
                </td>
            </tr>
            <tr>
                <td>{{t('finance_orders_methods_createPopup@支付页面HTML')}}</td>
                <td>
                    <textarea name="paramsCryptoPaymentPageHtml" spellcheck="false" rows="5" class="ui input"></textarea>
                </td>
            </tr>
        </tbody>
    </table>

    <submit-btn></submit-btn>
</form>