<div id="app" v-cloak>
    <div class="form-search">
        <el-form ref="vm" :model="vm" :inline="true" :label-width="'70px'">
            <el-form-item label="主机标题" prop="title" size="mini">
                <el-input v-model="vm.title" @keyup.enter.native="onSearch" clearable size="mini" placeholder="请输入主机标题"></el-input>
            </el-form-item>
                <el-form-item label="主机标题" prop="titleLike" size="mini">
                    <el-input v-model="vm.titleLike" @keyup.enter.native="onSearch" clearable size="mini" placeholder="请输入主机标题模糊查询"></el-input>
                </el-form-item>
            <el-form-item label="主机域名" prop="domain" size="mini">
                <el-input v-model="vm.domain" @keyup.enter.native="onSearch" clearable size="mini" placeholder="请输入主机域名"></el-input>
            </el-form-item>
            <el-form-item label="服务类型" prop="type" size="mini">
                <el-select v-model="vm.type" clearable size="mini" filterable placeholder="请输入服务类型">
                    <el-option key="反向代理" label="反向代理" value="反向代理"></el-option>
                    <el-option key="负载均衡" label="负载均衡" value="负载均衡"></el-option>
                    <el-option key="正向代理" label="正向代理" value="正向代理"></el-option>
                    <el-option key="文件代理" label="文件代理" value="文件代理"></el-option>
                    <el-option key="端口转发" label="端口转发" value="端口转发"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="服务端口" prop="port" size="mini">
                <el-input v-model="vm.port" @keyup.enter.native="onSearch" type="number" clearable size="mini" placeholder="请输入服务端口" min="-2147483648" max="2147483647" step="1"></el-input>
            </el-form-item>
            <el-form-item label="是否启用" prop="valid" size="mini">
                <el-select v-model="vm.valid" clearable size="mini" placeholder="请选择是否启用">
                    <el-option key="true" label="是" :value="true"></el-option>
                    <el-option key="false" label="否" :value="false"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="启用过滤" prop="filter" size="mini">
                <el-select v-model="vm.filter" clearable size="mini" placeholder="请选择启用过滤">
                    <el-option key="true" label="是" :value="true"></el-option>
                    <el-option key="false" label="否" :value="false"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="开始日期" prop="startDate" size="mini">
                <el-date-picker v-model="vm.startDate" clearable size="mini" placeholder="请输入开始日期" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期" prop="endDate" size="mini">
                <el-date-picker v-model="vm.endDate" clearable size="mini" placeholder="请输入结束日期" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
            <el-form-item size="mini">
                <el-button-group>
                    <el-button type="primary" size="mini" icon="el-icon-search" @click="onSearch">搜索</el-button>
                    <el-button type="warning" size="mini" icon="el-icon-refresh-left" @click="onReset('vm')">重置</el-button>
                </el-button-group>
            </el-form-item>
        </el-form>
    </div>

    <div class="form-table">
        <el-row type="flex" justify="space-between">
            <el-button-group>
            <#if token.hasRes("/ajax/admin/services/create")>
                <el-button type="success" size="mini" icon="el-icon-plus" @click="onCreate">新增</el-button>
            </#if>
            <#if token.hasRes("/ajax/admin/services/delete")>
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="onBitchDelete">删除</el-button>
            </#if>
            </el-button-group>

            <el-button-group style="float: right;">
                <#if token.hasRes("/ajax/admin/services/template")>
                <el-tooltip effect="dark" content="Excel导入模板下载" placement="bottom">
                    <el-button size="mini" icon="el-icon-date" @click="onTemplate"></el-button>
                </el-tooltip>
                </#if>

                <#if token.hasRes("/ajax/admin/services/imports")>
                <el-tooltip effect="dark" content="Excel导入" placement="bottom">
                    <el-button size="mini" icon="el-icon-upload2" @click="onImport"></el-button>
                </el-tooltip>
                </#if>

                <#if token.hasRes("/ajax/admin/services/exports")>
                <el-tooltip effect="dark" content="Excel导出" placement="bottom">
                    <el-button size="mini" icon="el-icon-download" @click="onExport"></el-button>
                </el-tooltip>
                </#if>

                <el-tooltip effect="dark" content="刷新" placement="bottom">
                    <el-button size="mini" icon="el-icon-refresh" @click="onFind"></el-button>
                </el-tooltip>
            </el-button-group>
        </el-row>

        <el-table
                :data="result"
                :size="'mini'"
                :border="true"
                :stripe="true"
                :empty-text="'无数据'"
                @selection-change="onSelectionChange">
            <el-table-column
                    align="center"
                    width="45"
                    type="selection">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="140"
                    prop="id"
                    label="主键">
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="180"
                    prop="title"
                    label="主机标题"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="180"
                    prop="domain"
                    label="主机域名"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="100"
                    prop="type"
                    label="服务类型">
                <template slot-scope="scope">
                    <el-tag size="mini" v-if="scope.row.type == '反向代理'">反向代理</el-tag>
                    <el-tag size="mini" v-if="scope.row.type == '负载均衡'">负载均衡</el-tag>
                    <el-tag size="mini" v-if="scope.row.type == '正向代理'">正向代理</el-tag>
                    <el-tag size="mini" v-if="scope.row.type == '文件代理'">文件代理</el-tag>
                    <el-tag size="mini" v-if="scope.row.type == '端口转发'">端口转发</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="80"
                    prop="port"
                    label="服务端口">
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="80"
                    prop="valid"
                    label="是否启用">
                <template slot-scope="scope">
                    <el-tag size="mini" effect="dark" type="success" v-if="scope.row.valid">是</el-tag>
                    <el-tag size="mini" effect="dark" type="danger" v-if="!scope.row.valid">否</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="80"
                    prop="filter"
                    label="启用过滤">
                <template slot-scope="scope">
                    <el-tag size="mini" effect="dark" type="success" v-if="scope.row.filter">是</el-tag>
                    <el-tag size="mini" effect="dark" type="danger" v-if="!scope.row.filter">否</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="140"
                    prop="createTime"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="120"
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <wb-table-ops :arg="scope.row">
                    <#if token.hasRes("/ajax/admin/location.html")>
                        <wb-table-op slot="menu" icon="el-icon-edit" @click="addTab({title: '路径配置', name: 'LOCATIONS', url: '${context}/admin/locations.htm'})">配置</wb-table-op>
                    </#if>
                        <#if token.hasRes("/ajax/admin/services/update")>
                        <wb-table-op slot="menu" icon="el-icon-edit" @click="onEdit">编辑</wb-table-op>
                        </#if>
                        <#if token.hasRes("/ajax/admin/services/delete")>
                        <wb-table-op slot="menu" icon="el-icon-delete" @click="onDelete">删除</wb-table-op>
                        </#if>
                    </wb-table-ops>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                background
                v-if="vm.totalCount > vm.pageSize"
                style="margin-top: 10px"
                @current-change="onPageChange"
                @size-change="onPageSizeChange"
                :current-page="vm.pageNumber"
                :page-size="vm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="vm.totalCount">
        </el-pagination>
    </div>

    <el-dialog
            :fullscreen="false"
            :title="form.formTitle"
            :custom-class="'form-dialog'"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :modal-append-to-body="true"
            :visible.sync="form.formShow">

        <el-page-header slot="title" @back="form.formShow = false" :content="form.formTitle"></el-page-header>

        <el-form
                :ref="'form'"
                :model="form"
                :inline="true"
                :rules="formRules"
                :label-width="'85px'"
                :label-position="'right'">
            <el-form-item label="主机标题" prop="title" size="mini">
                <el-input v-model="form.title" clearable size="mini" placeholder="请输入主机标题" maxlength="50"></el-input>
            </el-form-item>
            <el-form-item label="主机域名" prop="domain" size="mini">
                <el-input v-model="form.domain" clearable size="mini" placeholder="请输入主机域名" maxlength="50"></el-input>
            </el-form-item>
            <el-form-item label="服务类型" prop="type" size="mini">
                <el-select v-model="form.type" clearable size="mini" filterable placeholder="请输入服务类型">
                        <el-option key="反向代理" label="反向代理" value="反向代理"></el-option>
                        <el-option key="负载均衡" label="负载均衡" value="负载均衡"></el-option>
                        <el-option key="正向代理" label="正向代理" value="正向代理"></el-option>
                        <el-option key="文件代理" label="文件代理" value="文件代理"></el-option>
                        <el-option key="端口转发" label="端口转发" value="端口转发"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="服务端口" prop="port" size="mini">
                <el-input-number v-model="form.port" clearable size="mini" placeholder="请输入服务端口" :min="-2147483648" :max="2147483647" :step="1" step-strictly></el-input-number>
            </el-form-item>
            <el-form-item label="是否启用" prop="valid" size="mini">
                <el-select v-model="form.valid" clearable size="mini" placeholder="请选择是否启用">
                    <el-option key="true" label="是" :value="true"></el-option>
                    <el-option key="false" label="否" :value="false"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="启用过滤" prop="filter" size="mini">
                <el-select v-model="form.filter" clearable size="mini" placeholder="请选择启用过滤">
                    <el-option key="true" label="是" :value="true"></el-option>
                    <el-option key="false" label="否" :value="false"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="过滤配置" prop="filterConf" size="mini" class="full">
                <el-input v-model="form.filterConf"
                          rows="10"
                          clearable
                          size="mini"
                          maxlength="500"
                          type="textarea"
                          show-word-limit
                          placeholder="请输入过滤配置"></el-input>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
			<el-button size="mini" @click="form.formShow = false">取消</el-button>
			<el-button size="mini" type="primary" @click="onSave">保存</el-button>
		</span>
    </el-dialog>
</div>
<script>
    var app = new Vue({
        mixins: [mixinForMgr],
        el: "#app",
        data: {
            module: 'admin',
            target: 'services',
            vm: {//条件及分页参数
                title: null,
                titleLike: null,
                domain: null,
                type: null,
                port: null,
                valid: null,
                filter: null,
                startDate: null,
                endDate: null,
                pageNumber: 1,
                pageSize: 10,
                totalCount: 0,
                sortKey:'CREATE_TIME',
                sortType:'DESC'
            },
            form: {//待提交表单
                formTitle: "",
                formShow: false,
                id: null,
                title: null,
                domain: null,
                type: null,
                port: null,
                valid: null,
                filter: null,
                filterConf: null,
                rowVersion: null
            },
            formRules: {
                title: [
                    {required: true, message: '主机标题不能为空', trigger: 'blur'},
                    {min: 1, max: 50, message: '主机标题长度在 1 到 50 个字符', trigger: 'blur'}
                ],
                domain: [
                    {required: true, message: '主机域名不能为空', trigger: 'blur'},
                    {min: 1, max: 50, message: '主机域名长度在 1 到 50 个字符', trigger: 'blur'}
                ],
                type: [
                    {required: true, message: '服务类型不能为空', trigger: 'blur'},
                ],
                port: [
                    {required: true, message: '服务端口不能为空', trigger: 'blur'},
                ],
                valid: [
                ],
                filter: [
                    {required: true, message: '启用过滤不能为空', trigger: 'blur'},
                ],
                filterConf: [
                    {min: 1, max: 500, message: '过滤配置长度在 1 到 500 个字符', trigger: 'blur'}
                ]
            }
        },
        methods: {
            onCreate: function () {
                this.form.formTitle = "虚拟主机新增";
                this.form.formShow = true;
                this.form.id = "";
                this.form.title = "";
                this.form.domain = "localhost";
                this.form.type = "";
                this.form.port = 80;
                this.form.valid = "";
                this.form.filter = "";
                this.form.filterConf = "";
            },
            onEdit: function (item) {
                this.form.formTitle = "虚拟主机编辑";
                this.form.formShow = true;
                this.form.id = item.id;
                this.form.title = item.title;
                this.form.domain = item.domain;
                this.form.type = item.type;
                this.form.port = item.port;
                this.form.valid = item.valid;
                this.form.filter = item.filter;
                this.form.filterConf = item.filterConf;
                this.form.rowVersion = item.rowVersion;
            }
        },
        mounted: function () {
            this.onFind();
        },
    })
</script>
