{$layout}

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

    <table class="ui table definition selectable">
        <tr>
            <td class="title">产品名称 *</td>
            <td>
                <input type="text" name="productName" v-model="config.productName" maxlength="100"/>
            </td>
        </tr>
        <tr>
            <td>用户系统名称 *</td>
            <td>
                <input type="text" name="userSystemName" v-model="config.userSystemName" maxlength="100"/>
            </td>
        </tr>
        <tr>
            <td>是否显示底部开源信息</td>
            <td>
                <checkbox name="showOpenSourceInfo" v-model="config.showOpenSourceInfo"></checkbox>
            </td>
        </tr>
        <tr>
            <td>是否显示版本号</td>
            <td>
                <checkbox name="showVersion" v-model="config.showVersion"></checkbox>
            </td>
        </tr>
        <tr v-show="config.showVersion">
            <td>定制版本号</td>
            <td>
                <input type="text" name="version" v-model="config.version" maxlength="100"/>
                <p class="comment">定制自己的版本号，留空表示使用系统自带的版本号。</p>
            </td>
        </tr>
        <tr>
            <td>是否显示财务相关功能</td>
            <td>
                <checkbox name="showFinance" v-model="config.showFinance"></checkbox>
            </td>
        </tr>
        <tr>
            <td>浏览器图标</td>
            <td>
                <div v-if="config.faviconFileId > 0">
                    <a :href="'/ui/image/' + config.faviconFileId" target="_blank"><img :src="'/ui/image/' + config.faviconFileId" style="width:32px;border:1px #ccc solid;"/></a>
                </div>
                <div v-else>
                    <span class="disabled">还没有上传。</span>
                </div>
                <div style="margin-top: 0.8em">
                    <input type="file" name="faviconFile" accept=".png"/>
                </div>
                <p class="comment">在浏览器标签栏显示的图标，请使用PNG格式。</p>
            </td>
        </tr>
        <tr>
            <td>Logo</td>
            <td>
                <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;"/></a>
                </div>
                <div v-else>
                    <span class="disabled">还没有上传。</span>
                </div>
                <div style="margin-top: 0.8em">
                    <input type="file" name="logoFile" accept=".png"/>
                </div>
                <p class="comment">显示在系统界面上的图标，请使用PNG格式。</p>
            </td>
        </tr>
        <tr>
            <td>注册设置</td>
            <td>
                <a href="/users/setting">修改用户注册相关设置 &raquo;</a>
            </td>
        </tr>
    </table>

    <h4>数据看板</h4>
    <table class="ui table definition selectable">
        <tr>
            <td class="title">显示流量相关数据和图表</td>
            <td><checkbox name="showTrafficCharts" v-model="config.showTrafficCharts"></checkbox></td>
        </tr>
        <tr>
            <td class="title">显示带宽相关数据和图表</td>
            <td><checkbox name="showBandwidthCharts" v-model="config.showBandwidthCharts"></checkbox></td>
        </tr>
        <tr>
            <td class="title">带宽单位</td>
            <td>
                <select class="ui dropdown auto-width" name="bandwidthUnit" v-model="config.bandwidthUnit">
                    <option value="bit">比特</option>
                    <option value="byte">字节</option>
                </select>
            </td>
        </tr>
    </table>

    <h4>其他</h4>
    <table class="ui table definition selectable">
        <tr>
            <td class="title">时区</td>
            <td>
                <div class="ui fields inline">
                    <div class="ui field">
                        <select class="ui dropdown" v-model="timeZoneGroupCode">
                            <option v-for="timeZoneGroup in timeZoneGroups" :value="timeZoneGroup.code">{{timeZoneGroup.name}}</option>
                        </select>
                    </div>
                    <div class="ui field">
                        <select class="ui dropdown" name="timeZone" v-model="config.timeZone">
                            <option v-for="timeZoneLocation in timeZoneLocations" :value="timeZoneLocation.name" v-if="timeZoneLocation.group == timeZoneGroupCode">{{timeZoneLocation.name}} ({{timeZoneLocation.offset}})</option>
                        </select>
                    </div>
                </div>
                <p class="comment">显示时间使用的时区；如果你的API节点是独立部署的，需要手动重启API节点后生效。</p>
            </td>
        </tr>
    </table>

    <p class="comment">修改后，在3分钟内生效。</p>

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