<template>
    <div class="test_page">
        <div class="searchArea">
            <el-form
                v-model="searchForm"
                inline
            >
                <el-form-item>
                    <el-input
                        v-model="searchForm.searchNameSpace"
                        size="small"
                        placeholder="命名空间"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input
                        v-model="searchForm.searchServiceName"
                        size="small"
                        placeholder="服务名称"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        @click="searchData"
                        size="small"
                        icon="el-icon-search"
                    >查询</el-button>
                    <el-button
                        type="primary"
                        @click="refresh"
                        size="small"
                        icon="el-icon-refresh"
                    >重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="tableArea">
            <el-table
                v-loading="tableLoading"
                ref="singleTable"
                :data="tableData"
                :height="tableHeight"
                border
                drag-column
                class="yt-table-no-srcoll"
                highlight-current-row
                style="width: 100%"
            >
                <el-table-column
                    fixed
                    :show-overflow-tooltip="true"
                    prop="namespace"
                    label="命名空间"
                    width="200"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    fixed
                    :show-overflow-tooltip="true"
                    prop="serviceName"
                    label="服务名称"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="clusterNum"
                    :show-overflow-tooltip="true"
                    label="集群数目"
                    align="center"
                    width="100"
                >
                </el-table-column>
                <el-table-column
                    prop="instacneNum"
                    :show-overflow-tooltip="true"
                    label="实例数"
                    align="center"
                    width="100"
                >
                </el-table-column>
                <el-table-column
                    prop="healthyInstanceNum"
                    :show-overflow-tooltip="true"
                    label="健康实例数"
                    align="center"
                    width="100"
                >
                </el-table-column>
                <el-table-column
                    prop="status"
                    :show-overflow-tooltip="true"
                    label="状态"
                    align="center"
                    width="100"
                >
                </el-table-column>
                <el-table-column
                    label="操作"
                    :show-overflow-tooltip="true"
                    width="180"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            @click="editRow(scope.row)"
                        >详情</el-button>
                        <el-button
                            type="primary"
                            size="mini"
                            v-show="scope.row.homePageUrl"
                            @click="goPage(scope.row)"
                        >查询接口</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="foot-style">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page='pageIndex'
                :page-sizes="[10, 20, 30, 40, 100, 200]"
                :page-size='pageSize'
                layout="total, sizes, prev, pager, next, jumper"
                :total='total'
            >
            </el-pagination>
        </div>
        <el-dialog
            :close-on-click-modal="closeFlag"
            v-if="dialogFormVisible"
            width="800px"
            :title="title"
            :visible.sync="dialogFormVisible"
        >
            <el-table
                ref="singleTable"
                :data="childTableData"
                :height="tableHeight - 150"
                border
                drag-column
                class="yt-table-no-srcoll"
                highlight-current-row
                style="width: 100%"
            >
                <el-table-column
                    fixed
                    :show-overflow-tooltip="true"
                    prop="app"
                    label="隶属服务"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    fixed
                    :show-overflow-tooltip="true"
                    prop="instanceId"
                    label="实例ID"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="ipAddr"
                    :show-overflow-tooltip="true"
                    label="IP"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="hostName"
                    :show-overflow-tooltip="true"
                    label="主机名"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="status"
                    :show-overflow-tooltip="true"
                    label="状态"
                    width="50"
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="port"
                    :show-overflow-tooltip="true"
                    label="端口"
                    width="50"
                    align="center"
                >
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: 'testPage',
    data () {
        return {
            editId: false,
            closeFlag: false,
            dialogFormVisible: false,
            tableLoading: false, // 表格loading
            tableData: [{
                checkMode: '',
                serviceName: '服务1',
                clusterNum: '100',
                instacneNum: '100',
                healthyInstanceNum: '80',
                namespace: '',
                protectedThreshold: '',
                serviceId: '',
                source: '',
                status: 'UP'
            }],
            spaceList: [],
            search: '',
            form: {
                serviceName: '',
                clusterNum: '',
                instacneNum: '',
                healthyInstanceNum: ''
            },
            tableHeight: '750px',
            title: '',
            formLabelWidth: '80px',
            pageSize: 20,
            pageIndex: 1,
            total: 0,
            childTableData: '',
            searchForm: {
                searchServiceName: '',
                searchNameSpace: ''
            }
        }
    },
    mounted: function () {
        let h = document.body.clientHeight;
        this.tableHeight = h - 110;
        this.queryData();
    },
    methods: {
        editRow: function (row) {
            let that = this;
            that.title = '实例信息';
            that.dialogFormVisible = true;
            that.childTableData = row.instanceList;
        },
        setForm: function () {
            let that = this,
                formData = {};
            formData.serveName = that.form.serveName;
            formData.clusterNumber = that.form.clusterNumber;
            formData.instances = that.form.instances;
            formData.healthInstance = that.form.healthInstance;
            if (that.editId) {
                formData.id = that.editId;
                for (let i = 0; i < that.tableData.length; i++) {
                    if (that.tableData[i].id === that.editId) {
                        that.tableData.splice(i, 1, formData)
                    }
                }
                console.log(formData, that.tableData)
                that.editId = false;
            } else {
                formData.id = that.tableData.length + 1;
                that.tableData.push(formData);
            }
            that.dialogFormVisible = false;
            that.cleraForm();
        },
        cleraForm: function () {
            let that = this;
            that.form = {
                id: '',
                serveName: '',
                clusterNumber: '',
                instances: '',
                healthInstance: ''
            }
        },
        // 重置搜索
        refresh: function () {
            this.searchForm.searchNameSpace = '';
            this.searchForm.searchServiceName = '';
        },
        // 查询数据
        queryData: function (url, status) {
            let that = this,
                defaultParms = {
                    pageSize: that.pageSize,
                    currentPage: that.pageIndex
                },
                params = status || defaultParms,
                searchUrl = url || 'pass/serviceCenter/service/queryByPage';
            that.tableLoading = true;
            that.axios.get(searchUrl, {
                params: params
            }
            ).then(function (response) {
                if (response) {
                    let data = response.data;
                    that.tableData = data;
                    that.total = data.length;
                    for (let i = 0; i < that.tableData.length; i++) {
                        if (that.tableData[i].homePageUrl[0].indexOf('swagger-ui') > 0) {
                            that.tableData[i].homePageUrl = that.tableData[i].homePageUrl[0];
                        } else {
                            that.tableData[i].homePageUrl = ''
                        }
                    }
                }
                that.tableLoading = false;
            }).catch(function () {
                that.tableLoading = false;
            });
        },
        // 搜索
        searchData () {
            let that = this,
                searchData = {
                    blurNamespace: this.searchForm.searchNameSpace,
                    currentPage: this.pageIndex,
                    pageSize: this.pageSize,
                    blurServiceName: this.searchForm.searchServiceName
                };
            // if (searchData.blurNamespace || searchData.searchServiceName) {
            that.queryData('pass/serviceCenter/service/queryByBlur', searchData);
            // } else {
            //     that.$message.error('搜索参数不能为空')
            // }
        },
        // 切换id
        changeOption (value) {
            let namespaceId = '';
            for (let i = 0; i < this.spaceList.length; i++) {
                if (this.spaceList[i].namespaceName === value) {
                    namespaceId = this.spaceList[i].namespaceId
                }
            }
            this.search.namespaceId = namespaceId;
            // this.search.namespaceName = value;
        },
        handleCurrentChange (pageIndex) {
            this.pageIndex = pageIndex
            this.searchData();
        },
        handleSizeChange (pageSize) {
            this.pageIndex = 1
            this.pageSize = pageSize;
            this.searchData()
        },
        goPage (row) {
            window.open(row.homePageUrl)
        }
    }
}
</script>
<style>
.test_page {
    padding: 15px;
}
.foot-style {
    margin: 5px 0 0;
    text-align: right;
}
</style>
