<template>
	<div>
		<div class="container">
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="操作日志" name="first">
					<div class="handle-box">
						<el-input v-model="query.operateName" size="small" :clearable="true" placeholder="用户名"
							class="handle-input mr10 wRem3"></el-input>
						<el-input v-model="query.operModul" size="small" :clearable="true" placeholder="操作模块"
							class="handle-input mr10 wRem3"></el-input>
						<el-input v-model="query.operUrl" size="small" :clearable="true" placeholder="操作路径"
							class="handle-input mr10 wRem3"></el-input>
            <el-date-picker v-model="query.datePicker[0]" class="wRem3" size="small" type="datetime" placeholder="选择开始日期时间"
              default-time="12:00:00">
            </el-date-picker>
            <el-date-picker v-model="query.datePicker[1]" class="wRem3" size="small" type="datetime" placeholder="选择结束日期时间"
              default-time="12:00:00">
            </el-date-picker>
						<el-select v-model="query.operType" size="small" placeholder="请求类型" class="handle-select mr10">
							<el-option key="1" label="查询" value="查询"></el-option>
							<el-option key="2" label="删除" value="删除"></el-option>
							<el-option key="3" label="添加" value="添加"></el-option>
							<el-option key="4" label="更新" value="更新"></el-option>
						</el-select>
						<el-button type="primary" size="small" @click="reset" style="background: #FA8E00; border: none;">重置</el-button>
						<el-button type="primary" size="small" icon="el-icon-search" @click="searchPrame" style="background: #FA8E00; border: none;">搜索</el-button>
					</div>
					<el-table :data="tableData" border class="table" ref="multipleTable"
						header-cell-class-name="table-header" height="500">
            <el-table-column label="序号" type="index" width="80">
              <template slot-scope="scope">
                {{pageTotal - ((query.pageNum-1)*query.pageSize) - scope.$index}}
              </template>
            </el-table-column>
						<el-table-column prop="operateName" label="用户"></el-table-column>
						<el-table-column prop="ip" label="IP"></el-table-column>
						<el-table-column prop="operDesc" label="操作描述" :show-overflow-tooltip="true"></el-table-column>
						<el-table-column prop="operMethod" label="操作方法" :show-overflow-tooltip="true"></el-table-column>
						<el-table-column prop="operModul" label="操作模块"></el-table-column>
						<el-table-column label="请求参数" :show-overflow-tooltip="true">
							<template slot-scope="scope">
								<div class="tooltip">{{scope.row.operRequ}}</div>
							</template>
						</el-table-column>
						<el-table-column label="返回参数" :show-overflow-tooltip="true">
							<template slot-scope="scope">
								<div class="tooltip">{{scope.row.operResp}}</div>
							</template>
						</el-table-column>
						<el-table-column prop="operType" label="请求类型"></el-table-column>
						<el-table-column prop="operUrl" label="请求路径"></el-table-column>
						<el-table-column prop="createAt" label="操作时间"></el-table-column>
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <el-tooltip class="item" effect="dark" content="详情" placement="top">
                  <i class="iconfont httpicon-chaxun detail" @click="showDetail(scope.$index, scope.row)"></i>
                </el-tooltip>
              </template>
            </el-table-column>
					</el-table>
					<div class="pagination">
						<el-pagination background layout="total, sizes, prev, pager, next, jumper"  @size-change="handleSizeChange"
							:current-page="query.pageNum" :page-size="query.pageSize" :total="pageTotal"
							@current-change="handlePageChange"></el-pagination>
					</div>
				</el-tab-pane>
				<el-tab-pane label="异常日志" name="second">
					<div class="handle-box">
						<el-input v-model="queryOne.operateName" size="small" :clearable="true" placeholder="用户名"
							class="handle-input mr10"></el-input>
						<el-button type="primary" size="small" icon="el-icon-search" @click="searchPrameOne" style="background: #FA8E00; border: none;">搜索</el-button>
					</div>
					<el-table :data="tableDataOne" border class="table" ref="multipleTable"
						header-cell-class-name="table-header"  height="500">
						<el-table-column prop="id" label="ID"></el-table-column>
						<el-table-column prop="operateName" label="用户"></el-table-column>
						<el-table-column prop="ip" label="IP"></el-table-column>
						<el-table-column label="错误信息" :show-overflow-tooltip="true">
							<template slot-scope="scope">
								<div class="tooltip">{{scope.row.excMessage}}</div>
							</template>
						</el-table-column>
						<el-table-column prop="excName" label="错误名称" :show-overflow-tooltip="true"></el-table-column>
						<el-table-column prop="operMethod" label="操作方法" :show-overflow-tooltip="true"></el-table-column>
						<el-table-column label="请求参数" :show-overflow-tooltip="true">
							<template slot-scope="scope">
								<div class="tooltip">{{scope.row.excRequ}}</div>
							</template>
						</el-table-column>
						<el-table-column prop="operUrl" label="请求路径"></el-table-column>
						<el-table-column prop="createAt" label="操作时间"></el-table-column>
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <el-tooltip class="item" effect="dark" content="详情" placement="top">
                  <i class="iconfont httpicon-chaxun detail" @click="showDetailOne(scope.$index, scope.row)"></i>
                </el-tooltip>
              </template>
            </el-table-column>
					</el-table>
					<div class="pagination">
						<el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page="queryOne.pageNum" @size-change="handleSizeChangeOne"
							:page-size="queryOne.pageSize" :total="pageTotalOne" @current-change="handlePageChangeOne">
						</el-pagination>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
    <el-dialog title="提示" :visible.sync="detailDialogVisible" width="40%" center>
      <el-form ref="form4" :model="detailMode" label-width="80px" class="formBox">
        <el-form-item label="用户:">
          <span>{{detailMode.operateName}}</span>
        </el-form-item>
        <el-form-item label="IP:">
          <span>{{detailMode.ip}}</span>
        </el-form-item>
        <el-form-item label="操作模块:">
          <span>{{detailMode.operModul}}</span>
        </el-form-item>
        <el-form-item label="操作描述:">
          <span>{{detailMode.operDesc}}</span>
        </el-form-item>
        <el-form-item label="请求路径:">
          <span>{{detailMode.operUrl}}</span>
        </el-form-item>
        <el-form-item label="请求类型:">
          <span>{{detailMode.operType}}</span>
        </el-form-item>
        <el-form-item label="请求参数:">
          <span>{{detailMode.operRequ}}</span>
        </el-form-item>
        <el-form-item label="返回参数:">
          <span>{{detailMode.operResp}}</span>
        </el-form-item>
        <el-form-item label="操作时间:">
          <span>{{detailMode.createAt}}</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="detailDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="detailDialogVisibleOne" width="40%" center>
      <el-form ref="form4" :model="detailModeOne" label-width="80px" class="formBox">
        <el-form-item label="用户:">
          <span>{{detailModeOne.operateName}}</span>
        </el-form-item>
        <el-form-item label="IP:">
          <span>{{detailModeOne.ip}}</span>
        </el-form-item>
        <el-form-item label="请求路径:">
          <span>{{detailModeOne.operUrl}}</span>
        </el-form-item>
        <el-form-item label="请求参数:">
          <span>{{detailModeOne.excRequ}}</span>
        </el-form-item>
        <el-form-item label="操作方法:">
          <span>{{detailModeOne.operMethod}}</span>
        </el-form-item>
        <el-form-item label="错误名称:">
          <span>{{detailModeOne.excName}}</span>
        </el-form-item>
        <el-form-item label="错误信息:">
          <span>{{detailModeOne.excMessage}}</span>
        </el-form-item>
        <el-form-item label="操作时间:">
          <span>{{detailModeOne.createAt}}</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="detailDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
	</div>
</template>

<script>
	import {
		httpGet,httpPost
	} from '../api';
	export default {
		name: "journal",
		data() {
			return {
        detailDialogVisible:false,
        detailDialogVisibleOne:false,
				query: {
					operType: "",
					operateName: "",
					operModul: "",
          pageSize:10,
          pageNum:1,
          datePicker: ['', '']
				},
				queryOne: {
					operType: "",
					operateName: "",
					operModul: "",
          pageSize:10,
          pageNum:1,
				},
				activeName: 'first',
				tableData: [],
				tableDataOne: [],
				multipleSelection: [],
				delList: [],
				editVisible: false,
				pageTotal: 0,
				pageTotalOne: 0,
				form: {},
				idx: -1,
				id: -1,
        detailMode:{},
        detailModeOne:{}
			};
		},
    beforeCreate() {
      // var tenantId = JSON.parse(localStorage.getItem('tenantId'))
      // if (tenantId == 400) {
      //   this.$store.commit('defaultsettenantid')
      // }
    },
		created() {
			this.getOperates()
			this.getOperatesOne()
		},
		methods: {
      // 显示详情
      showDetail(index, row) {
        this.detailMode = row
        this.detailDialogVisible = true
      },
      // 显示详情
      showDetailOne(index, row) {
        this.detailModeOne = row
        this.detailDialogVisibleOne = true
      },
			reset() {
				this.query = {
					operType: "",
					operateName: "",
					operModul: "",
          pageSize:10,
          pageNum:1,
          datePicker: ['', '']
				}
        this.searchPrame()
			},
			handleClick(tab, event) {
				console.log(tab, event);
			},
			time(time = +new Date()) {
				var date = new Date(time + 8 * 3600 * 1000); // 增加8小时
				return date.toJSON().substr(0, 19).replace('T', ' ');
			},
      searchPrame(){
        this.query.pageNum=1
        this.getOperates()
      },
      searchPrameOne(){
        this.queryOne.pageNum=1
        this.getOperatesOne()
      },
      searchParaProcess(obj) {
        var myObj = new Object();
        for (var key in obj) {
          if (obj[key] != "" && obj[key] != 'Invalid date' && obj[key] != null) {
            myObj[key] = obj[key]
          }
        }
        return JSON.stringify(myObj);
      },
			//   获取操作日志
			getOperates() {
				var q = this.searchParaProcess({
					operType: this.query.operType,
					operateName: this.query.operateName,
					operModul: this.query.operModul,
          operUrl:this.query.operUrl,
          startTime: this.query.datePicker[0],
          endTime:this.query.datePicker[1],
				})
				var data = {
					pageNum: this.query.pageNum,
					pageSize: this.query.pageSize,
					q: q,
					orderType: "desc",
					orderBy: "createAt"
				}
				httpPost(data, this.$api.getOperateList).then(res => {
					res.data.list.map(li => {
						li.createAt = this.time(+new Date(li.createAt))
					})
					this.tableData = res.data.list
					this.pageTotal = res.data.total
				})
			},
			//   获取操作日志
			getOperatesOne() {
				var q = {
					operateName: this.queryOne.operateName
				}
				var data = {
					pageNum: this.queryOne.pageNum,
					pageSize: this.queryOne.pageSize,
					orderType: "desc",
					orderBy: "createAt",
					q: JSON.stringify(q)
				}
				httpGet(data, this.$api.getExceptionList).then(res => {
					res.data.list.map(li => {
						li.createAt = this.time(+new Date(li.createAt))
					})
					this.tableDataOne = res.data.list
					this.pageTotalOne = res.data.total
				})
			},
			// 分页导航
			handlePageChange(val) {
        this.query.pageNum=val
        this.getOperates()
			},
      handleSizeChange(val){
        this.query.pageNum=1
        this.query.pageSize=val
        this.getOperates()
      },
			handlePageChangeOne(val) {
        this.queryOne.pageNum=val
        this.getOperatesOne()
			},
      handleSizeChangeOne(val){
        this.queryOne.pageNum=1
        this.queryOne.pageSize=val
        this.getOperatesOne()
      },
		},
	};
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 300px;
		display: inline-block;
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}
  .formBox{
    height: 400px;
    overflow-y: auto;
  }
</style>
