{$layout}
{$template "menu"}

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

    <input type="hidden" name="methodId" :value="method.id"/>

    <table class="ui table selectable definition">
        <tr>
            <td class="title">支付方式名称 *</td>
            <td>
                <input type="text" name="name" maxlength="30" ref="focus" v-model="method.name"/>
            </td>
        </tr>
        <tr>
            <td>类型</td>
            <td>
                <span v-if="method.parentName.length == 0">自定义</span>
                <span v-else>{{method.parentName}}</span>
            </td>
        </tr>
        <tr>
            <td>支付方式代号 *</td>
            <td>
                <input type="text" name="code" maxlength="60" v-model="method.code"/>
                <p class="comment">只能包含数字、字母和下划线；自定义支付页面可以根据此代号判断订单来自哪种支付方式。</p>
            </td>
        </tr>
        <tr>
            <td>支付方式说明 *</td>
            <td>
                <textarea rows="3" name="description" maxlength="100" v-model="method.description"></textarea>
            </td>
        </tr>
        <tr>
            <td>支持终端</td>
            <td>
                <b-select
                    name="clientType"
                    v-model="method.clientType"
                    auto-width
                    :options="[
                        ...clientTypes.map(clientType => ({
                            label: clientType.name,
                            value: clientType.code,
                        }))
                    ]"
                ></b-select>

                <!-- <select class="ui dropdown auto-width" name="clientType" v-model="method.clientType">
                    <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 == method.clientType">{{clientType.description}}</p>
            </td>
        </tr>
        <tr v-show="method.clientType == 'mobile'">
            <td>二维码扫描提示</td>
            <td>
                <input type="text" name="qrcodeTitle" maxlength="100" v-model="method.qrcodeTitle"/>
                <p class="comment">用来提示用户使用App扫描二维码，类似于"请使用支付宝APP扫描下方二维码完成支付："。</p>
            </td>
        </tr>

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

        <!-- 支付宝 -->
        <tbody v-if="method.parentCode == 'alipay'">
            <tr>
                <td>APPID *</td>
                <td>
                    <input type="text" name="paramsAlipayAppId" maxlength="20" v-model="method.params.appId"/>
                    <p class="comment">签约的支付宝应用ID，为一组数字。</p>
                </td>
            </tr>
            <tr>
                <td>私钥 *</td>
                <td>
                    <textarea name="paramsAlipayPrivateKey" v-model="method.params.privateKey" spellcheck="false"></textarea>
                    <p class="comment">如果你获得的是证书文件，你需要将文件内容拷贝到这里。</p>
                </td>
            </tr>
            <tr>
                <td>应用公钥证书 *</td>
                <td>
                    <textarea name="paramsAlipayAppPublicCert" v-model="method.params.appPublicCert" spellcheck="false"></textarea>
                    <p class="comment">如果你获得的是证书文件，你需要将文件内容拷贝到这里。</p>
                </td>
            </tr>
            <tr>
                <td>支付宝公钥证书 *</td>
                <td>
                    <textarea name="paramsAlipayPublicCert" v-model="method.params.alipayPublicCert" spellcheck="false"></textarea>
                    <p class="comment">如果你获得的是证书文件，你需要将文件内容拷贝到这里。</p>
                </td>
            </tr>
            <tr>
                <td>支付宝根证书 *</td>
                <td>
                    <textarea name="paramsAlipayRootCert" v-model="method.params.alipayRootCert" spellcheck="false"></textarea>
                    <p class="comment">如果你获得的是证书文件，你需要将文件内容拷贝到这里。</p>
                </td>
            </tr>
            <tr>
                <td>产品代号 *</td>
                <td>
                    <input type="text" name="paramsAlipayProductCode" v-model="method.params.productCode" maxlength="100" value=""/>
                    <p class="comment">和支付宝签约的产品代号。</p>
                </td>
            </tr>
            <tr>
                <td>沙箱应用</td>
                <td>
                    <checkbox name="paramsAlipayIsSandbox" v-model="method.params.isSandbox"></checkbox>
                    <p class="comment">选中后，表示当前支付宝应用为沙箱应用，仅用来模拟测试。</p>
                </td>
            </tr>
        </tbody>
        <tr>
            <td colspan="2"><more-options-indicator></more-options-indicator></td>
        </tr>
        <tbody v-show="moreOptionsVisible">
            <tr >
                <td>启用</td>
                <td>
                    <checkbox name="isOn" v-model="method.isOn"></checkbox>
                </td>
            </tr>
        </tbody>
    </table>

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