//组件
var Logcomponent = {
	template: `
		<div>
			<div id="" style="display: inline-block;width: 100%;">
				<div  style="float: left; width: 20%;">
					<!-- <el-input v-model="input" placeholder="请输入用户" clearable @change="input_change"></el-input>-->
					<!-- <el-autocomplete v-model="input" :fetch-suggestions="querySearch" placeholder="请输入内容" clearable @change="input_change" style="width: 100%;"></el-autocomplete>-->
					<el-select v-model="input" filterable multiple placeholder="请选择用户" clearable @change="input_change" style="width: 100%;">
						<el-option
							v-for="item in options"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</div>
				<div style="float: left;">
					<el-button id ="bt_search" plain type="primary" icon="el-icon-search" @click="getLogsByName">搜索</el-button>
					<el-button id ="bt_search" plain type="primary" icon="el-icon-document" @click="exportLogs">导出</el-button>
				</div>
			</div>
			<div class="span">
				<el-table
				    :data="tableData"
				    style="width: 100%"
				    :height="tHeight"
					:cell-style="{background:'#fff'}"
					border
					>
				    <el-table-column
				      prop="username"
				      label="用户名"
				     :width="flexColumnWidth('username', tableData,3)">
				    </el-table-column>
					<el-table-column
						prop="operation_time"
						label="操作时间"
						width="140">
					</el-table-column>
					<el-table-column
						prop="operation"
						label="操作记录"
						:width="flexColumnWidth('operation', tableData,4)"
						class-name="left-aligned-column">
					</el-table-column>
					<!-- <el-table-column
					  label="操作"
					  width="50">
					  <template slot-scope="scope">
						<el-button @click="delLogs(scope.row)" type="text" size="medium" >删除</el-button>
					  </template>
					</el-table-column>
				  </el-table> -->
			</div>
			
			<div class="block">
			    <span class="demonstration"></span>
			    <el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="currentPage"
			      :page-sizes="[50,100, 200, 300]"
			      :page-size="pagesize"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="recordTotal">
			    </el-pagination>
			</div>
		</div>
		`,
	data() {
		// 获取当前屏幕的分辨率
		let screenW = window.screen.width;
		let screenH = window.innerHeight;
		console.log("screen width:", screenW);
		console.log("screen height:", screenH);
		return {
			tHeight: screenH - 40 - 232,
			tableData: [],
			input: '', //搜索框
			currentPage: 1, //当前页码
			pagesize: 50, //每页条数
			recordTotal: 0,//记录总数
			options: [], //搜索框下拉选项
		}
	},
	mounted() {
		this.getLogs();
		this.getUserNames();
	},
	methods: {
		//获取日志
		getLogs(input = '') {
			var _this = this;
			var objs;
			axios.post('/pp/get_operation_log', {
				opuser: localStorage.getItem("online_user"),
				opuser_uuid: localStorage.getItem("uuid"),
				username: input,
				index: this.$data.currentPage,
				count: this.$data.pagesize
			}).then(function (response) {
				console.log(response.data);
				objs = response.data.data;
				rcnt = response.data.total;
				_this.$data.tableData = objs;
				_this.$data.recordTotal = rcnt;
			}).catch(function (error) {
				console.log(error);
			});
		},
		getLogsByName() {
			// console.log("getLogsByName");
			// this.getLogs(this.$data.input);
			let str = '('
			for (var i = 0; i < this.$data.input.length; i++) {
			    str += "'" + this.$data.input[i] + "',"
			}
			str = str.substring(0, str.length - 1)
			str += ')'
			if (str == '()' || str == ')') {
				str = ''
			}
			console.log(str);
			this.getLogs(str);
		},
		//获取输入联想用户名
		getUserNames() {
			var _this = this;
			axios.post('/pp/get_operation_log_user', {
				opuser: localStorage.getItem("online_user"),
				opuser_uuid: localStorage.getItem("uuid"),
			}).then(function (response) {
				console.log(response.data.data);
				var objs = response.data.data;
				for (var i = 0; i < objs.length; i++) {
					_this.$data.options.push({ value: objs[i] });
				}
			}).catch(function (error) {
				console.log(error);
			});
		},

		// 获取建议列表的方法
		querySearch(queryString, cb) {
			// 过滤匹配的选项
			const results = queryString ? this.options.filter(option =>
				option.value.toLowerCase().includes(queryString.toLowerCase())
			) : this.options;
			// 调用回调函数返回结果
			cb(results || []);
		},
		//删除日志
		delLogs(row) {
			var _this = this;
			axios.post('/pp/del_operation_log', {
				opuser: localStorage.getItem("online_user"),
				opuser_uuid: localStorage.getItem("uuid"),
				ID: row.id
			}).then(function (response) {
				console.log(response.data);
				//刷新页面
				_this.getLogs();
			}).catch(function (error) {
				console.log(error);
			})
		},
		input_change() {
			console.log("input_change");
			this.getLogs();
		},


		//分页
		//每页条数改变时触发
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.pagesize = val;
			this.getLogs(this.$data.input);
		},
		//当前页码改变时触发
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			this.currentPage = val;
			this.getLogs(this.$data.input);
		},


		// 根据内容设置列表宽度
		flexColumnWidth(str, arr1, fontNum = 4, flag = 'max') {
			return window.flexColumnWidth(str, arr1, fontNum, flag);
		},

		//导出日志
		exportLogs() {
			var _this = this;
			var _this = this;
			let str = '('
			for (var i = 0; i < this.$data.input.length; i++) {
			    str += "'" + this.$data.input[i] + "',"
			}
			str = str.substring(0, str.length - 1)
			str += ')'
			if (str == '()' || str == ')') {
				str = ''
			}
			axios.post('/pp/export_operation_log', {
				opuser: localStorage.getItem("online_user"),
				opuser_uuid: localStorage.getItem("uuid"),
				username: str,
			}).then(function (response) {

				var date = new Date();
				//年 getFullYear()：四位数字返回年份
				var year = date.getFullYear() % 2000; //getFullYear()代替getYear()
				console.log(year.toString());
				//月 getMonth()：0 ~ 11
				var month = date.getMonth() + 1;
				if (month < 10) {
					month = '0' + month
				}
				//日 getDate()：(1 ~ 31)
				var day = date.getDate();
				if (day < 10) {
					day = '0' + day;
				}
				//时 getHours()：(0 ~ 23)
				var hour = date.getHours();
				if (hour < 10) {
					hour = '0' + hour;
				}
				//分 getMinutes()： (0 ~ 59)
				var minute = date.getMinutes();
				if (minute < 10) {
					minute = '0' + minute;
				}
				//秒 getSeconds()：(0 ~ 59)
				var second = date.getSeconds();
				if (second < 10) {
					second = '0' + second;
				}

				var filename = year.toString() + month.toString() + day.toString() + " " + hour.toString() + minute.toString() + second.toString();
				filename = "用户日志 " + filename + ".csv"
				console.log(response.data);
				var fileid = response.data.fileId;

				var downUrl = '/pp/download_file' + "?id=" + fileid;
				downloadUrl(filename, downUrl);
			}).catch(function (error) {
				console.log(error);
			});
		}
	}
}