<template>
  <div class="test_page">
    <div class="searchArea">
        <el-form ref="searchForm"
                 :model="searchForm"
                 label-width="80px">
            <el-form-item label="开始时间" prop="startTime" class="form_item">
                <el-date-picker
                    size="small"
                    v-model="searchForm.startTime"
                    type="datetime"
                    placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="endTime" class="form_item">
                <el-date-picker
                    size="small"
                    v-model="searchForm.endTime"
                    type="datetime"
                    placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="操作类型" prop="actionType" class="form_item">
                <el-select v-model="searchForm.actionType" placeholder="请选择" size="small">
                    <el-option
                        v-for="item in actTypeList"
                        :key="item.value"
                        :label="item.type"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="操作类型" prop="operStatus" class="form_item">
                <el-select v-model="searchForm.operStatus" placeholder="请选择" size="small">
                    <el-option
                        v-for="item in operStatusList"
                        :key="item.value"
                        :label="item.type"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item class="form_button">
                <el-button type="primary" icon="el-icon-search" size="small" @click="searchData">查询</el-button>
                <el-button size="small">取消</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>
        <el-table-column fixed
                         :show-overflow-tooltip="true"
                         prop="containName"
                         label="容器名"
                         align="center">
        </el-table-column>
        <el-table-column fixed
                         :show-overflow-tooltip="true"
                         prop="ipAddr"
                         label="ip地址"
                         align="center">
        </el-table-column>
        <el-table-column prop="serviceName"
                         :show-overflow-tooltip="true"
                         label="微服务名称"
                         align="center">
        </el-table-column>
        <el-table-column prop="servicePort"
                         :show-overflow-tooltip="true"
                         label="微服务端口"
                         align="center">
        </el-table-column>
        <el-table-column prop="resourceCode"
                         :show-overflow-tooltip="true"
                         label="业务模块id"
                         align="center">
        </el-table-column>
        <el-table-column prop="resourceName"
                         :show-overflow-tooltip="true"
                         label="业务模块名称"
                         align="center">
        </el-table-column>
        <el-table-column prop="pkValue"
                         :show-overflow-tooltip="true"
                         label="主键值"
                         align="center">
        </el-table-column>
        <el-table-column label="操作内容"
                         align="center">
            <template slot-scope="scope">
                <span @click="showContent(scope.row.logContent,'操作内容')">查看</span>
            </template>
        </el-table-column>
        <el-table-column label="异常日志"
                         align="center">
            <template slot-scope="scope">
                <span @click="showContent(scope.row.exptionContent,'异常日志')">查看</span>
            </template>
        </el-table-column>
        <el-table-column prop="operStatus"
                         :show-overflow-tooltip="true"
                         label="执行状态"
                         align="center">
        </el-table-column>
        <el-table-column prop="operType"
                         :show-overflow-tooltip="true"
                         label="操作类型"
                         align="center">
        </el-table-column>
        <el-table-column prop="status"
                         :show-overflow-tooltip="true"
                         label="状态"
                         align="center">
        </el-table-column>
        <el-table-column prop="crtUserCode"
                         :show-overflow-tooltip="true"
                         label="创建人"
                         align="center">
        </el-table-column>
        <el-table-column prop="updUserCode"
                         :show-overflow-tooltip="true"
                         label="修改人"
                         align="center">
        </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 v-if="dialogFormVisible"
               width="800px"
               :title="title"
               :visible.sync="dialogFormVisible">
        <span>{{dialogContent}}</span>
    </el-dialog>
  </div>
</template>
<script>
export default {
    name: 'testPage',
    data () {
        return {
            dialogFormVisible: false,
            tableLoading: false,
            tableData: [{
                containName: '1',
                ipAddr: '2',
                serviceName: '3',
                servicePort: '4',
                resourceCode: '5',
                resourceName: '6',
                pkValue: '7',
                logContent: '8',
                exptionContent: '9',
                operStatus: '10',
                operType: '11',
                status: '12',
                crtUserCode: '13',
                updUserCode: '14'
            }],
            searchForm: {
                startTime: '',
                endTime: '',
                actionType: '',
                operStatus: ''
            },
            actTypeList: [
                {
                    value: 1,
                    type: '新增'
                }, {
                    value: 2,
                    type: '修改'
                }, {
                    value: 3,
                    type: '删除'
                }, {
                    value: 4,
                    type: '查询'
                }
            ],
            operStatusList: [
                {
                    value: 1,
                    type: '成功'
                }, {
                    value: 2,
                    type: '异常'
                }
            ],
            title: '',
            dialogContent: '',
            tableHeight: null,
            pageSize: 20,
            pageIndex: 1,
            total: 0
        }
    },
    mounted: function () {
        let h = document.body.clientHeight;
        this.tableHeight = h - 270;
        // this.queryData();
        this.$nextTick(() => {
            this.tableHeight = this.getRoleHeight(this.$refs['singleTable'].$el) - 90;
        });
    },
    methods: {
        //  计算树区域高度
        getRoleHeight (dom) {
            return window.innerHeight - dom.offsetTop;
        },
        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.searchNameSpace = null;
            this.searchServiceName = null;
            this.queryData();
        },
        // 查询数据
        queryData: function (url, status) {
        let that = this,
            defaultParms = {
            pageSize: that.pageSize,
            currentPage: that.pageIndex
            },
            params = status || defaultParms,
            searchUrl = url || '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.searchNameSpace,
                currentPage: this.pageIndex,
                pageSize: this.pageSize,
                blurServiceName: this.searchServiceName
                };
            if (searchData.blurNamespace || searchData.searchServiceName) {
                that.queryData('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()
        },
        showContent (val, title) {
            this.dialogFormVisible = true;
            this.title = title;
            this.dialogContent = val;
        }
    }
}
</script>
<style lang="less" scoped>
.test_page {
  padding: 10px;
}
.searchArea {
    width: 70%;
    margin:  auto;
    padding: 0px 0px 10px 0px;
    text-align: left;
    .form_item {
        width: 49%;
        display: inline-block;
        .el-select,.el-input {
            width: 100%;
        }
    }
    .form_button {
        width: 100%;
        text-align: center;
    }
}
.foot-style {
    margin: 5px 0 0;
    text-align: right;
}

</style>
