<template>
	<view class="operLog">
		<uni-nav-bar :fixed="true" background-color="rgba(214, 240, 255, 0.0)" status-bar rightWidth="300">
			<block slot="left">
				<view class="uni-nav-bar-text" @click="back">
					<text class="iconfont icon-fanhui"></text>
				</view>
			</block>
		</uni-nav-bar>

		<view class="main">
			<!-- 占位---不可删除 -->
			<view class="seize-seat"> </view>

			<view class="container">
				<!-- 搜索区域 -->
				<view class="search-com">
					<view class="search-com-left">
						<uni-data-select class="uni-search-item" v-model="searchFrom.type" :localdata="typeList"
							@change="change" placeholder="操作类型:全部" :key="new Date().getTime()"></uni-data-select>

						<view class="search-com-right">
							<uni-datetime-picker class="uni-datetime-picker" type="daterange"
								v-model="searchFrom.inspectionTime" :border="false" @change="timeChange" />
						</view>
					</view>
				</view>

				<view class="count-tatal">
					<text class="num">{{ tableData.length || 0 }}条</text>
					<text>查询结果</text>
				</view>
				<!-- 展示区域 -->
				<view class="table-main box-shaow-box">
					<view class="log-item" v-for="(item, index) in tableData" :key="index">
						<text class="time bold">{{ item.time }}</text>

						<view class="desc">
							<!-- 不可删除 -->
							<text class="xuxian">......</text>

							<text class="bold"> {{ item.roleName  }} {{ item.user }} </text>
							<text class="text">操作模块</text>
							<text class="bold">{{ item.module }}</text>
							<text v-if="item.detail" class="text">操作详情</text>
							<text v-if="item.detail" class="bold">{{ item.detail }}</text>
							<text v-if="item.type" class="text">操作类型</text>
							<text v-if="item.type"  class="bold">{{ item.type }}</text>
						</view>
					</view>
				</view>
				<uni-pagination class="pagination" :total="total" :show-icon="true" :current="pageCurrent"
					@change="pageChange"></uni-pagination>
			</view>
		
		</view>
		
	</view>
</template>

<script>
	import {
		getLogList
	} from "@/request/index.js";
	import {
		LOG_TYPE_ENUM
	} from "@/utils/IoReadingAndWriting.js";
	export default {
		components: {},
		data() {
			return {
				searchFrom: {
					type: -1,
				},
				searchVal: "",
				allData: [],
				tableData: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,
				typeList: [{
						value: "all",
						text: "全部"
					},

					{
						value: "1",
						text: "巡检"
					},
					{
						value: "2",
						text: "同步"
					},

					{
						text: "其他",
						value: "-1",
					},
				],
				searchForm: {
					type: "",
					startTime: "",
					endTime: "",
				},
				recordData: [],
			};
		},
		created() {},
		onNavigationBarButtonTap(val) {
			uni.navigateBack();
		},
		onLoad() {
			uni.showLoading();

			getLogList()
				.then((res) => {
					this.recordData = res;
					this.getData();
					uni.hideLoading();
				})
				.catch((error) => {
					if (0 == error.code) {
						uni.showToast({
							title: error.msg,
							icon: "none",
							duration: 1000,
						});
					}
					uni.hideLoading();
				});
		},
		methods: {
			pageChange(e) {
				const {
					type,
					current
				} = e
				this.pageCurrent = e.current
				this.getData()
			},
			change(e) {
				this.searchForm.type = e;
				this.getData();
			},

			timeChange(val) {
				let temp = [...val];
				if (val.length && val[0] == val[1]) {
					temp[1] = `${temp[1]} 23:59:59`;
				}

				this.searchForm.startTime = temp[0] || "";
				this.searchForm.endTime = temp[1] || "";

				this.getData();
			},

			back() {
				uni.navigateBack();
			},

			// 获取数据
			async getData() {
				this.loading = true;
				const {
					type,
					startTime,
					endTime
				} = this.searchForm;
				let data = {
					page: 2,
					size: 10
				}
				let res = await this.$logApi.pageSelect({
					page: this.pageCurrent,
					size: this.pageSize
				})
				if (res) {
					this.total = res.total
					this.tableData = res.data
				}
				this.loading = false;
				return
				this.tableData = this.recordData.filter((item) => {
					let matchType = true; // 类型筛选
					let matchTime = true; // 时间筛选
					if (type && type != "all") {
						if (type == -1) {
							// [其他]搜索项
							matchType =
								Object.values(LOG_TYPE_ENUM).indexOf(item.type) > -1 &&
								!item.inspectionType &&
								item.module.indexOf("同步") < 0;
						} else if (type == 1) {
							// [巡检]搜索项
							matchType = (item.inspectionType || 0) > 0;
						} else if (type == 2) {
							// [同步]搜索项
							matchType = item.module.indexOf("同步") > -1;
						}
					}

					if (startTime && endTime) {
						matchTime =
							Date.parse(item.time) <= Date.parse(endTime) &&
							Date.parse(item.time) >= Date.parse(startTime);
					}
					return matchType && matchTime;
				});

			},
		},
	};
</script>

<style scoped lang="less" scoped>
	.operLog {
		background-image: linear-gradient(90deg,
				#e9f7fe 0%,
				#dceffe 40%,
				#d5ebfd 66%,
				#c9e8fe 100%);

		.main {
			margin-top: -44px;
		}

		.container {
			height: 100%;
			padding: 16px 24px;
			height: calc(100vh - 44px );

			.search-com {
				display: flex;
				align-items: center;

				.search-com-left {
					display: flex;
					align-items: center;

					.uni-search-item {
						margin-right: 12px;
						width: 200px;
						background: #fff;
						border-radius: 4px;
						border: none !important;
					}
				}

				.search-com-right {
					width: 300px;

					.uni-datetime-picker {
						background: #fff;
					}
				}
			}

			.count-tatal {
				margin: 16px 0 8px 0;
				font-size: 14px;
				color: #4a4a4a;
				font-weight: 400;

				.num {
					font-size: 18px;
					color: #3774f6;
					line-height: 26px;
					font-weight: 600;
					margin-right: 5px;
				}
			}

			.table-main {
				padding: 28px 24px;
				background: #fff;
				overflow: auto;
				height: calc(100vh - 26px - 16px - 8px - 36px - 62px - 18px - 50px);

				.log-item {
					display: flex;
					align-items: flex-start;
					padding-bottom: 20px;

					&:last-of-type {
						.xuxian {
							display: none;
						}
					}

					.time {
						font-size: 16px;
						color: #000000;
						text-align: right;
						line-height: 24px;
						font-weight: 500;
						position: relative;
						margin-right: 40px;

						&::after {
							position: absolute;
							content: " ";
							right: -22px;
							top: 50%;
							transform: translateY(-50%);
							width: 8px;
							height: 8px;
							border-radius: 50%;
							background: #3774f6;
						}
					}

					.bold {
						font-weight: bold !important;
						color: #000000 !important;
					}

					.desc {
						position: relative;

						.xuxian {
							position: absolute;
							transform: rotate(90deg);
							font-size: 10px;
							color: #3774f6;
							left: -29px;
							top: 24px;
						}

						text {
							font-size: 14px;
							color: #4a4a4a;
							line-height: 22px;
							font-weight: 400;
						}

						.text {
							margin: 0 8px;
						}
					}
				}
			}
		}
		.pagination{
			margin-top: 10px;
			::v-deep .page--active{
				padding: 0 10px; 
			}
		}
		.seize-seat {
			height: 50px;
			width: 100%;
			background-image: linear-gradient(90deg,
					#e9f7fe 0%,
					#dceffe 40%,
					#d5ebfd 66%,
					#c9e8fe 100%);
		}

		// 导航栏样式
		.uni-nav-bar-text {
			height: 36px;
			width: 36px;
			background: #ffffff;
			border: 0.4px solid rgba(224, 224, 224, 1);
			border-radius: 18px;
			border-radius: 50%;
			color: #333;
			text-align: center;

			.iconfont {
				font-size: 20px;
				line-height: 36px;
			}
		}
	}

</style>