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

		<view class="body-wrapper">
			<view class="demo-uni-row">
				<uni-row>
					<uni-col :span="6" class="_title">
						<view>工程名称</view>
					</uni-col>
					<uni-col :span="16">
						<uni-data-select v-model="form.productName" :localdata="selectListLv1" :clear="false"
							@change="changeLv1"></uni-data-select>
					</uni-col>
				</uni-row>
			</view>
			<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">
						<uni-data-select v-model="form.artilleryAreaName" :localdata="selectListLv2" :clear="false"
							@change="changeLv2"></uni-data-select>
					</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="resetForm">
					搜索
				</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 style="color:#3a74ba;font-size:30rpx;">序号</span></uni-th>
					<uni-th width="100" align="center">操作模块</uni-th>
					<uni-th width="80" align="center">操作类型</uni-th>
					<uni-th width="120" align="center">操作人</uni-th>
					<uni-th width="130" align="center">操作时间</uni-th>
					<uni-th width="200" align="center">操作内容</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in dataList" :key="index">
					<uni-td align="center">{{index}}</uni-td>
					<uni-td align="center">{{ item.operationModule }}</uni-td>
					<uni-td align="center">{{ item.operationType }}</uni-td>
					<uni-td align="center">{{ item.operationPerson }}</uni-td>
					<uni-td align="center">{{ item.operationTime }}</uni-td>
					<uni-td align="center">{{ item.operationRemark }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
</template>

<script>
	import CustomNavbar from '@/pages/component/CustomNavbar.vue';
	import {
		getCurrentTime,
		showCustomToast,
		showCustomModal
	} from '../../common/util.js'
	import {
		getDataList,
		getselectList4productName,
		getselectList4tester,
	} from '../../api/operatorLog.js'
	export default {
		components: {
			CustomNavbar,
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				loading: false,
				searchForm: {
					startTime: currentDate,
					endTime: currentDate,
				},
				dataList: [],
	
				navBarTitle: '操作日志',
				redirectUrl: '/pages/home/blueSearch?refer=blueMeasure',
				searchDate: '',
				// 表单数据相关
				zhuangyaoDict: [],
				form: {
					'productName': '',
					'artilleryAreaName': '',
					'cannonHoleArrayNum': '',
					'cannonHoleNum': '',
					'status': '',
					'expectedDepth': '',
					'actualDepth': '',
					'actualWaterLevel': ''
				},
				
				selectList4productName: [],
				selectList4tester: [],
			};
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			uni.hideLoading()
			this.getData()
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.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
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			selectDate() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
			},
			calendarConfirm(e) {
				console.log(e)
				const formattedDates = e.map(date => date.split(' ')[0]);
				this.searchDate = formattedDates
				this.$refs.popup.close()
			},
			dateRangeMaxDeal(e) {
				console.log('超过最大连选天数：', e)
			},
			async getDetailInfo() {
				let res = await getDetailInfo()
				if (res) {
					this.form['status'] = res['status']
					this.form['expectedDepth'] = res['expectedDepth']
					this.form['designInclination'] = res['designInclination']
					return
				}
				showCustomToast({
					title: '暂无详情信息'
				})
			},
		}
	};
</script>

<style lang="scss">
	::v-deep .uni-popup .uni-popup__wrapper {
		display: block;
		position: relative;
		width: 80vw;
	}


	::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;
		}
	}

	.only-read-row {
		background: #E3E6EC !important;
		height: 108rpx;
		align-items: center;
		display: flex;
		line-height: 70rpx;
		position: relative;
		padding-left: 13rpx;

		&:after {
			content: '米';
			width: 70rpx;
			height: 70rpx;
			position: absolute;
			right: 48rpx;
			top: 50%;
			transform: translateY(-50%);
			text-align: center;
			line-height: 70rpx;
			font-size: 29rpx;
			color: #000000;
		}
	}

	::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>