<template>
	<view class="pageWrapper">
		<CustomNavbar :title="navBarTitle" @gobackDeal="gobackDeal">
		</CustomNavbar>

		<view class="body-wrapper">
			<view class="demo-uni-row">
				<uni-row class="demo-uni-row mb-10">
					<uni-col :span="6" class="_title">
						<view>测量员</view>
					</uni-col>
					<uni-col :span="16">
						<input class="uni-input inputEle" v-model="searchForm.operationPerson" placeholder="请输入" />
					</uni-col>
				</uni-row>
			</view>
			
			<view class="demo-uni-row row-date">
				<uni-row class="demo-uni-row mb-10">
					<uni-col :span="6" class="_title">
						<view>记录时间</view>
					</uni-col>
					<uni-col :span="16">
						<picker style="width: 200rpx;" mode="date" :value="searchForm.startTime" :start="startDate" :end="endDate" @change="bindDateChange4start">
							<view class="uni-input">{{searchForm.startTime}}</view>
						</picker>
						<picker style="width: 200rpx;" mode="date" :value="searchForm.endTime" :start="startDate" :end="endDate" @change="bindDateChange4end">
							<view class="uni-input">{{searchForm.endTime}}</view>
						</picker>
					</uni-col>
				</uni-row>
				<view class="funcBtn end" @tap="search">
					搜索
				</view>
			</view>
		</view>


		<view class="table-wrapper">
			<uni-table ref="table" :loading="loading" emptyText="暂无更多数据" @selection-change="selectionChange">
				<uni-tr>
					<uni-th width="50" align="center"><span class="tableTh">序号</span></uni-th>
					<uni-th width="100" align="center"><span class="tableTh">操作模块</span></uni-th>
					<uni-th width="80" align="center"><span class="tableTh">操作类型</span></uni-th>
					<uni-th width="120" align="center"><span class="tableTh">操作人</span></uni-th>
					<uni-th width="200" align="center"><span class="tableTh">操作时间</span></uni-th>
					<uni-th width="200" align="center"><span class="tableTh">操作内容</span></uni-th>
					
				</uni-tr>
				<uni-tr v-for="(item, index) in dataList" :key="index">
					<uni-td align="center"><span class="tableTd">{{index+1}}</span></uni-td>
					<uni-td align="center"><span class="tableTd">{{ item.operationModule }}</span></uni-td>
					<uni-td align="center"><span class="tableTd">{{ item.operationType }}</span></uni-td>
					<uni-td align="center"><span class="tableTd">{{ item.operationPerson }}</span></uni-td>
					<uni-td align="center"><span class="tableTd">{{ item.operationTime }}</span></uni-td>
					<uni-td align="center"><span class="tableTd">{{ item.operationRemark }}</span></uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
</template>

<script>
	import CustomNavbar from '@/pages/component/CustomNavbar.vue';
	import {
		getCurrentTime,
		showCustomToast,
		showCustomModal,
		dater
	} from '../../common/util.js'
	import {
		getDataList,
		getselectList4productName,
		getselectList4tester,
	} from '../../api/operatorLog.js'
	export default {
		components: {
			CustomNavbar,
		},
		data() {
			const currentDate = dater.getDate({
				format: true
			})
			return {
				loading: false,
				searchForm: {
					startTime: currentDate,
					endTime: currentDate,
					operationPerson: ''
				},
				dataList: [],
				navBarTitle: '操作日志',
			};
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			uni.hideLoading()
			this.getData()
		},
		computed: {
			startDate() {
				return dater.getDate('start');
			},
			endDate() {
				return dater.getDate('end');
			}
		},
		methods: {
			gobackDeal(){ // 返回上一页的处理逻辑
				uni.reLaunch({
					url: '/pages/home/home',
				});
			},
			// 搜索
			search() {
				this.getData(1, this.searchVal)
			},
			// 获取数据
			async getData() {
				this.loading = true
				let res = await getDataList({
					...this.searchForm
				})
				if (res) {
					this.loading = false
					this.dataList = res.rows
					this.loading = false
				}
			},
			bindDateChange4start: function(e) {
				this.searchForm.startTime = e.detail.value
			},
			bindDateChange4end: function(e) {
				this.searchForm.endTime = e.detail.value
			},
			
		}
	};
</script>

<style lang="scss">
	.tableTh{
		color:#3a74ba;font-size:30rpx;
		font-family: Source Han Sans SC;
	}
	.tableTd{
		color:#000;font-size:30rpx;
		font-family: Source Han Sans SC;
		font-weight: bold;
	}
	::v-deep .uni-select__input-placeholder {
		// placeholder样式调整
		font-size: 30rpx !important;
	}
	.inputEle{
		height: 110rpx;
		display: flex;
		align-items: center;
	}
	.uni-col-6 {
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
		line-height: 110rpx;
	}
	.row-date{
		.uni-col-16 {
			display: flex;
			height: 110rpx;
			line-height: 110rpx;
			position: relative;
			&::after{
				content: '-';
				width: 70rpx;
				height: 70rpx;
				position: absolute;
				right: 232rpx;
				top: 50%;
				transform: translateY(-50%);
				text-align: center;
				line-height: 70rpx;
				font-size: 29rpx;
				color: #000000;
			}
		}
	}
	
	

	.demo-uni-row {
		line-height: 70rpx;
		padding-left: 15rpx;

		.uni-select {
			height: 108rpx;
			height: 110rpx;
			line-height: 110rpx;
		}
	}

	::v-deep .uni-row::after {
		clear: both;
		width: 608rpx;
		border-bottom: 1rpx solid #E3E6EC;
		transform: translateX(18rpx);
	}


	.pageWrapper {
		width: 100vw;
		height: calc(100vh-44rpx);
		padding-top: 44rpx;
		background: linear-gradient(180deg, #007AFF 0%, #419AFF 16%, #EFF1F4 43%);
	}

	.body-wrapper {
		margin: 0 auto;
		width: 690rpx;
		padding-top: 20rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		overflow: hidden;
	}


	.funcBtn {
		width: 560rpx;
		height: 74rpx;
		line-height: 74rpx;
		background: #007AFF;
		border-radius: 37rpx;
		text-align: center;
		font-size: 32rpx;
		color: #FFFFFF;
		margin: 33rpx auto;
		// border: 2px solid #007AFF;

		&.loading {
			opacity: 0.5;
		}
	}
</style>