{$layout}

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

	<div class="config-section">
		<div class="section-title">{{t("settings_ui_index@界面设置")}}</div>

		<div class="config-item">
			<div class="item-label">{{t("settings_ui_index@产品名称")}} *</div>
			<div class="item-content">
				<input type="text" name="productName" v-model="config.productName" maxlength="100"/>
                <p class="comment">{{t("settings_ui_index@可以使用变量${product.name}在网页里展示此名称，建议仅包含英文和数字字符。")}}</p>
			</div>
		</div>

		<div class="config-item">
			<div class="item-label">{{t("settings_ui_index@管理员系统名称")}} *</div>
			<div class="item-content">
				<input type="text" name="adminSystemName" v-model="config.adminSystemName" maxlength="100"/>
                <p class="comment">{{t("settings_ui_index@当前管理系统界面上显示的名称。")}}</p>
			</div>
		</div>

		<div class="config-item">
			<div class="item-label">{{t("settings_ui_index@显示底部开源信息")}}</div>
			<div class="item-content">
				<checkbox name="showOpenSourceInfo" v-model="config.showOpenSourceInfo"></checkbox>
			</div>
		</div>

		<div class="config-item">
			<div class="item-label">{{t("settings_ui_index@显示版本号")}}</div>
			<div class="item-content">
				<checkbox name="showVersion" v-model="config.showVersion"></checkbox>
                <p class="comment">{{t("settings_ui_index@选中后，在界面中显示系统版本号。")}}</p>
			</div>
		</div>

		<div class="config-item">
			<div class="item-label">{{t("settings_ui_index@定制版本号")}}</div>
			<div class="item-content">
				<input type="text" name="version" v-model="config.version" maxlength="100"/>
				<p class="comment">{{t("settings_ui_index@定制自己的版本号，留空表示使用系统自带的版本号。")}}</p>
			</div>
		</div>

        <div class="config-item" v-show="teaIsPlus">
            <div class="item-label">{{t("settings_ui_index@显示模块")}}</div>
            <div class="item-content">
                <checkbox name="supportModuleCDN" v-model="supportModuleCDN">CDN</checkbox> &nbsp; &nbsp; &nbsp;
                <checkbox name="supportModuleNS" v-model="supportModuleNS" v-show="nsIsVisible">{{t("settings_ui_index@智能DNS")}}</checkbox>
                <p class="comment">{{t("settings_ui_index@当前管理系统中可以显示的模块，不能为空。")}}</p>
            </div>
        </div>

        <div class="config-item">
            <div class="item-label">{{t("settings_ui_index@显示财务相关功能")}}</div>
            <div class="item-content">
                <checkbox name="showFinance" v-model="config.showFinance"></checkbox>
                <p class="comment">{{t("settings_ui_index@选中后，表示在菜单中显示财务管理功能。")}}</p>
            </div>
        </div>

        <div class="config-item">
            <div class="item-label">{{t("settings_ui_index@浏览器图标")}}</div>
            <div class="item-content">
                <div v-if="config.faviconFileId > 0">
                    <a :href="'/ui/image/' + config.faviconFileId" target="_blank"><img alt="" :src="'/ui/image/' + config.faviconFileId" style="width:32px;border:1px #ccc solid; padding: 2px; background: #f8f8f8; border-radius: 4px;"/></a>
                </div>
                <div v-else>
                    <span class="disabled">{{t("settings_ui_index@还没有上传。")}}</span>
                </div>
                <div style="margin-top: 0.8em">
                    <file-upload name="faviconFile" accept=".png" />
                </div>
                <p class="comment">{{t("settings_ui_index@在浏览器标签栏显示的图标，请使用PNG格式。")}}</p>
            </div>
        </div>

        <div class="config-item">
            <div class="item-label">{{t("settings_ui_index@Logo")}}</div>
            <div class="item-content">
                <div v-if="config.logoFileId > 0">
                    <a :href="'/ui/image/' + config.logoFileId" target="_blank"><img :src="'/ui/image/' + config.logoFileId" style="width:32px;border:1px #ccc solid; padding: 2px; background: #f8f8f8; border-radius: 4px;"/></a>
                </div>
                <div v-else>
                    <span class="disabled">{{t("settings_ui_index@还没有上传。")}}</span>
                </div>
                <div style="margin-top: 0.8em">
                    <file-upload name="logoFile" accept=".png" />
                </div>
                <p class="comment">{{t("settings_ui_index@显示在系统界面上的图标，请使用PNG格式。")}}</p>
            </div>
        </div>
	</div>

    <div class="config-section">
		<div class="section-title">{{t("settings_ui_index@其他设置")}}</div>

        <div class="config-item">
            <div class="item-label">{{t("settings_ui_index@每页显示数")}}</div>
            <div class="item-content">
                <input type="text" name="defaultPageSize" v-model="config.defaultPageSize" maxlength="3" style="width: 4em"/>
                <p class="comment">{{t("settings_ui_index@在有分页的地方每页显示数量；不能超过100。")}}</p>
            </div>
        </div>

        <div class="config-item">
            <div class="item-label">{{t("settings_ui_index@时区")}}</div>
            <div class="item-content">
                <div class="ui fields inline">
                    <div class="ui field">
                        <b-select
                            v-model="timeZoneGroupCode"
                            :options="[
                                ...timeZoneGroups.map(timeZoneGroup => ({
                                    label: timeZoneGroup.name,
                                    value: timeZoneGroup.code,
                                }))
                            ]"
                        ></b-select>
                    </div>
                    <div class="ui field">
                        <b-select
                            name="timeZone"
                            v-model="config.timeZone"
                            :options="[
                                ...timeZoneLocations.filter(timeZoneLocation=>timeZoneLocation.group == timeZoneGroupCode).map(timeZoneLocation => ({
                                    label: (timeZoneLocation.name??'') + '（' + (timeZoneLocation.offset??'') + '）',
                                    value: timeZoneLocation.name,
                                }))
                            ]"
                        ></b-select>
                    </div>
                </div>
                <p class="comment">{{t("settings_ui_index@当前管理系统显示时间使用的时区。")}}</p>
            </div>
        </div>

        <div class="config-item">
            <div class="item-label">{{t("settings_ui_index@使用的DNS解析库")}}</div>
            <div class="item-content">
                <b-select
                    name="dnsResolverType"
                    v-model="config.dnsResolver.type"
                    auto-width
                    :options="[
                        {label: t('settings_ui_index@默认'), value: 'default'},
                        {label: 'CGO', value: 'cgo'},
                        {label: t('settings_ui_index@Go原生'), value: 'goNative'},
                    ]"
                ></b-select>
                <p class="comment">{{t("settings_ui_index@当前管理系统使用的DNS解析库；修改此项配置后，需要重启管理系统进程才会生效；通常不需要修改；如要修改，请在专家指导下进行。")}}</p>
            </div>
        </div>
    </div>

	<div class="margin"></div>
	<submit-btn></submit-btn>
</form>