{$layout}
{$template "menu"}

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

    <!-- 注册设置 Section -->
    <div class="config-section">
        <div class="section-title">{{t('users_setting_index@注册设置')}}</div>

        <div class="config-item">
            <div class="item-label">{{t('users_setting_index@允许注册')}}</div>
            <div class="item-content">
                <checkbox name="isOn" v-model="config.isOn"></checkbox>
                <p class="comment">{{t('users_setting_index@选中表示允许用户自行注册。')}}</p>
            </div>
        </div>

        <div v-show="config.isOn">
            <div class="config-item">
                <div class="item-label">{{t('users_setting_index@必须使用复杂密码')}}</div>
                <div class="item-content">
                    <checkbox name="complexPassword" v-model="config.complexPassword"></checkbox>
                    <p class="comment">{{t('users_setting_index@选中表示用户注册时必须使用复杂密码，即长度不能低于6位，且必须包含大小写字母。')}}</p>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('users_setting_index@需要审核')}}</div>
                <div class="item-content">
                    <checkbox name="requireVerification" v-model="config.requireVerification"></checkbox>
                    <p class="comment">{{t('users_setting_index@选中后，表示用户注册后需要审核才能创建服务。')}}</p>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('users_setting_index@需要实名认证')}}</div>
                <div class="item-content">
                    <checkbox name="requireIdentity" v-model="config.requireIdentity"></checkbox>
                    <p class="comment">{{t('users_setting_index@选中后，表示用户注册后需要实名认证后才能创建服务。')}}</p>
                </div>
            </div>
        </div>
    </div>


    <!-- 登录设置 Section -->
    <div class="config-section">
        <div class="section-title">{{t('users_setting_index@登录设置')}}</div>
        <div class="config-item">
            <div class="item-label">{{t('users_setting_index@检查客户端区域')}}</div>
            <div class="item-content">
                <checkbox name="checkClientRegion" v-model="config.checkClientRegion"></checkbox>
                <p class="comment">{{t('users_setting_index@选中后，表示每次用户访问时都检查客户端所在地理区域是否和登录时一致，以提升安全性；如果当前系统下游有反向代理设置，请在')}}<a href="/settings/user-ui#client-ip-header-names" target="_blank">[{{t('users_setting_index@用户界面设置')}}]</a>{{t('users_setting_index@中设置')}}<code-label>"{{t('users_setting_index@自定义客户端IP报头')}}"</code-label>{{t('users_setting_index@选项')}}。</p>
            </div>
        </div>
    </div>

    <!-- 套餐相关 Section -->
    <div class="config-section">
        <div class="section-title">套餐相关</div>
        <div class="config-item">
            <div class="item-label">试用套餐</div>
            <div class="item-content">
                <b-select
                    name="planTrialPlanId"
                    v-model="config.planTrialPlanId"
                    auto-width
                    :options="[
                        {label: t('选择套餐'), value: '0'},
                        ...plans.map(plan => ({
                            label: plan.name,
                            value: plan.id,
                        }))
                    ]"
                ></b-select>
                <p class="comment">当用户注册后自动获得此试用套餐；只有在使用套餐计费时才有效，可以在 <a href="/finance/fee" target="_blank">[计费设置]</a> 中修改计费方式。</p>
            </div>
        </div>
        <div class="config-item">
            <div class="item-label">试用套餐有效期</div>
            <div class="item-content">
                <input type="text" name="planTrialPlanPeriodCount" v-model="config.planTrialPlanPeriodCount" placeholder="30" style="width: 4em;"/>
                <b-select
                    name="planTrialPlanPeriodUnit"
                    v-model="config.planTrialPlanPeriodUnit"
                    auto-width
                    :options="[
                {label: '天', value: 'd'},
                {label: '周', value: 'w'},
                {label: '月', value: 'm'},
                ]"
                ></b-select>
            </div>
        </div>
    </div>
    <!-- 电子邮箱相关 Section -->
    <div class="config-section">
        <div class="section-title">{{t('users_setting_index@电子邮箱相关')}}</div>
        <div class="config-item">
            <div class="item-label">{{t('users_setting_index@启用电子邮箱绑定功能')}}</div>
            <div class="item-content">
                <checkbox name="emailVerificationIsOn" v-model="config.emailVerification.isOn"></checkbox>
                <p class="comment">{{t('users_setting_index@选中后，电子邮箱需要激活之后可以使用邮箱登录、找回密码等。此功能需要事先设置')}} <a href="/users/setting/email" target="_blank">[{{t('users_setting_index@激活邮件设置')}}]</a>。</p>
            </div>
        </div>
        <div v-show="config.emailVerification.isOn">
            <div class="config-item">
                <div class="item-label">{{t('users_setting_index@提示用户未绑定')}}</div>
                <div class="item-content">
                    <checkbox name="emailVerificationShowNotice" v-model="config.emailVerification.showNotice"></checkbox>
                    <p class="comment">{{t('users_setting_index@选中后将在页面上提示用户尚未绑定电子邮箱')}}</p>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('users_setting_index@允许使用电子邮箱登录')}}</div>
                <div class="item-content">
                    <checkbox name="emailVerificationCanLogin" v-model="config.emailVerification.canLogin"></checkbox>
                    <p class="comment">{{t('users_setting_index@选中后，表示允许用户使用激活后的邮箱登录。')}}</p>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('users_setting_index@强制绑定电子邮箱')}}</div>
                <div class="item-content">
                    <checkbox name="emailVerificationForce" v-model="config.emailVerification.force"></checkbox>
                    <p class="comment">{{t('users_setting_index@选中后，表示强制用户必须绑定电子邮箱后才能使用其他功能。')}}</p>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('users_setting_index@更多选项')}}</div>
                <div class="item-content"><more-options-indicator v-model="emailVerificationMoreOptions"></more-options-indicator></div>
            </div>
            <div v-show="emailVerificationMoreOptions">
                <div class="config-item">
                    <div class="item-label">{{t('users_setting_index@激活邮件标题')}}</div>
                    <div class="item-content">
                        <input type="text" name="emailVerificationSubject" v-model="config.emailVerification.subject"/>
                        <p class="comment">{{t('users_setting_index@其中')}}<code-label>${product.name}</code-label>{{t('users_setting_index@为当前设置的产品名称')}}。</p>
                    </div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('users_setting_index@激活邮件内容')}}</div>
                    <div class="item-content">
                        <textarea name="emailVerificationBody" rows="8" v-model="config.emailVerification.body"></textarea>
                        <p class="comment">{{t('users_setting_index@可以使用简单的HTML，其中')}}<code-label>${product.name}</code-label>{{t('users_setting_index@为当前设置的产品名称，')}}<code-label>${url.verify}</code-label>{{t('users_setting_index@为生成的激活地址，')}}<code-label>${url.home}</code-label>{{t('users_setting_index@为用户平台主页地址，由用户节点访问地址组合而成')}}。</p>
                    </div>
                </div>
            </div>
            <p style="padding:0 1em;" class="comment" v-if="config.emailVerification.isOn">{{t('users_setting_index@修改邮箱相关设置后，请记得自行注册新用户测试。')}}</p>
        </div>
    </div>

    <!-- 通过邮箱找回密码 Section -->
    <div class="config-section" v-show="config.emailVerification.isOn">
        <div class="section-title">{{t('users_setting_index@通过邮箱找回密码')}}</div>
        <div class="config-item">
            <div class="item-label">{{t('users_setting_index@启用找回密码功能')}}</div>
            <div class="item-content">
                <checkbox name="emailResetPasswordIsOn" v-model="config.emailResetPassword.isOn"></checkbox>
                <p class="comment">{{t('users_setting_index@选中后，用户可以通过已绑定的电子邮箱找回密码；此功能需要同时开启电子邮箱绑定功能。')}}</p>
            </div>
        </div>
        <div v-show="config.emailResetPassword.isOn">
            <div class="config-item">
                <div class="item-label">{{t('users_setting_index@更多选项')}}</div>
                <div class="item-content"><more-options-indicator v-model="emailResetPasswordMoreOptions"></more-options-indicator></div>
            </div>
            <div v-show="emailResetPasswordMoreOptions">
                <div class="config-item">
                    <div class="item-label">{{t('users_setting_index@找回密码邮件标题')}}</div>
                    <div class="item-content">
                        <input type="text" name="emailResetPasswordSubject" v-model="config.emailResetPassword.subject" maxlength="100"/>
                        <p class="comment" v-html="t('users_setting_index@其中{productName}为当前设置的产品名称。', {
                            'productName': "<code-label>${product.name}</code-label>"
                        })"></p>
                    </div>
                </div>
                <div class="config-item">
                    <div class="item-label">{{t('users_setting_index@找回密码邮件内容')}}</div>
                    <div class="item-content">
                        <textarea name="emailResetPasswordBody" v-model="config.emailResetPassword.body" rows="5"></textarea>
                        <p class="comment" v-html="t('users_setting_index@可以使用简单的HTML，其中{productName}为当前设置的产品名称，{code}为找回密码时用到的验证码，{homeUrl}为用户平台主页地址，由用户节点访问地址组合而成。', {
                            'productName': "<code-label>${product.name}</code-label>",
                            'code': "<code-label>${code}</code-label>",
                            'homeUrl': "<code-label>${url.home}</code-label>"
                        })"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 手机号码相关 Section -->
    <div class="config-section">
        <div class="section-title">{{t('users_setting_index@手机号码相关')}}</div>
        <div class="config-item">
            <div class="item-label">{{t('users_setting_index@启用手机号码绑定功能')}}</div>
            <div class="item-content">
                <checkbox name="mobileVerificationIsOn" v-model="config.mobileVerification.isOn"></checkbox>
                <p class="comment" v-html="t('users_setting_index@选中后，手机号码需要激活之后可以使用手机号码、找回密码等。此功能需要事先设置激活短信设置。')"></p>
            </div>
        </div>
        <div v-show="config.mobileVerification.isOn">
            <div class="config-item">
                <div class="item-label">{{t('users_setting_index@提示用户未绑定')}}</div>
                <div class="item-content">
                    <checkbox name="mobileVerificationShowNotice" v-model="config.mobileVerification.showNotice"></checkbox>
                    <p class="comment">{{t('users_setting_index@选中后将在页面上提示用户尚未绑定手机号码')}}</p>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('users_setting_index@允许使用手机号码登录')}}</div>
                <div class="item-content">
                    <checkbox name="mobileVerificationCanLogin" v-model="config.mobileVerification.canLogin"></checkbox>
                    <p class="comment">{{t('users_setting_index@选中后，表示允许用户使用激活后的手机号码登录。')}}</p>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('users_setting_index@强制绑定手机号')}}</div>
                <div class="item-content">
                    <checkbox name="mobileVerificationForce" v-model="config.mobileVerification.force"></checkbox>
                    <p class="comment">{{t('users_setting_index@选中后，表示强制用户必须绑定手机号后才能使用其他功能。')}}</p>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('users_setting_index@更多选项')}}</div>
                <div class="item-content"><more-options-indicator v-model="mobileVerificationMoreOptions"></more-options-indicator></div>
            </div>
            <div v-show="mobileVerificationMoreOptions">
                <div class="config-item">
                    <div class="item-label">{{t('users_setting_index@激活短信内容')}}</div>
                    <div class="item-content">
                        <textarea name="mobileVerificationBody" rows="8" v-model="config.mobileVerification.body"></textarea>
                        <p class="comment">{{t('users_setting_index@其中使用') }}<code-label>{code}</code-label>{{ t('users_setting_index@表示验证码') }}。</p>
                    </div>
                </div>
            </div>
            <p style="padding: 1em;" class="comment" v-if="config.mobileVerification.isOn">{{t('users_setting_index@修改手机号码相关设置后，请记得自行注册新用户测试。')}}</p>
        </div>
    </div>

     <!-- CDN服务 Section -->
     <div class="config-section">
        <div class="section-title">{{t('users_setting_index@CDN服务')}}</div>
        <div class="config-item">
            <div class="item-label">{{t('users_setting_index@开通CDN服务')}}</div>
            <div class="item-content">
                <checkbox name="cdnIsOn" v-model="config.cdnIsOn"></checkbox>
                <p class="comment">{{t('users_setting_index@选中表示自动为用户开通CDN服务。 ')}}</p>
            </div>
        </div>
        <div v-show="config.cdnIsOn">
            <div class="config-item">
                <div class="item-label">{{t('users_setting_index@CDN集群分配 *')}}</div>
                <div class="item-content">
                    <cluster-selector :v-cluster-id="config.clusterId"></cluster-selector>
                    <p class="comment">{{t('users_setting_index@选择用户新创建服务自动分配的集群。')}}</p>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('users_setting_index@默认开通功能')}}</div>
                <div class="item-content">
                    <!-- 已选中功能 -->
                    <div>
                        <div v-if="selectedFeatureNames().length > 0">
                            <span>{{selectedFeatureNames()}}</span>
                        </div>
                        <b-empty v-else>{{t('users_setting_index@暂时还没有开通任何功能。')}}</b-empty>
                        <div style="margin-top: 0.1em">
                            <a href="" @click.prevent="showFeatures">{{t('users_setting_index@修改')}}<i class="icon angle" :class="{up: featuresVisible, down: !featuresVisible}"></i></a>
                        </div>
                    </div>
                    <div class="feature-boxes" v-show="featuresVisible" style="margin-top: 1em">
                        <div class="feature-box" v-for="feature in features">
                            <checkbox name="features" :v-value="feature.code" v-model="feature.isChecked">{{feature.name}}</checkbox>
                            <p class="comment">{{feature.description}}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('users_setting_index@对已有用户功能操作')}}</div>
                <div class="item-content">
                    <b-select
                        name="featureOp"
                        v-model="featureOp"
                        auto-width
                        :options="[
                            {label: t('users_setting_index@覆盖'), value: 'overwrite'},
                            {label: t('users_setting_index@追加'), value: 'append'},
                            {label: t('users_setting_index@保持'), value: 'keep'},
                        ]"
                    ></b-select>
                    <p class="comment" v-if="featureOp == 'overwrite'">{{t('users_setting_index@覆盖用户已经有的功能设置。')}}</p>
                    <p class="comment" v-if="featureOp == 'append'">{{t('users_setting_index@只追加用户功能，不减少。')}}</p>
                    <p class="comment" v-if="featureOp == 'keep'">{{t('users_setting_index@保持原有用户功能不变，功能修改只对新用户生效。')}}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- DDoS高防 Section -->
    <div class="config-section" v-show="adIsVisible">
        <div class="section-title">{{t('users_setting_index@DDoS高防')}}</div>
        <div class="config-item">
            <div class="item-label">{{t('users_setting_index@开通DDoS高防管理')}}</div>
            <div class="item-content">
                <checkbox name="adIsOn" v-model="config.adIsOn"></checkbox>
                <p class="comment">{{t('users_setting_index@选中表示自动为用户开通DDoS高防IP使用服务。')}}</p>
            </div>
        </div>
    </div>

     <!-- 智能DNS服务 Section -->
    <div class="config-section" v-show="nsIsVisible">
         <div class="section-title">{{t('users_setting_index@智能DNS服务')}}</div>
        <div class="config-item">
            <div class="item-label">{{t('users_setting_index@开通智能DNS服务')}}</div>
            <div class="item-content">
                <checkbox name="nsIsOn" v-model="config.nsIsOn"></checkbox>
                <p class="comment">{{t('users_setting_index@选中表示自动为用户开通智能DNS服务。')}}</p>
                <p class="comment" v-show="config.nsIsOn"><a href="/ns/settings/user">{{t('users_setting_index@智能DNS相关功能设置')}}</a></p>
            </div>
        </div>
    </div>

    <!-- 提交按钮 Section -->
    <div class="config-item">
        <div class="item-label"></div> <!-- 占位 -->
        <div class="item-content">
            <submit-btn></submit-btn>
        </div>    
    </div>
</form>