<template>
	<view class="bg-page">
		<u-sticky z-index="99" :h5NavHeight="h5NavHeightP">
		<view class="secreen-section" style="background-color: #fff;">
			<u-dropdown class="dropdown-box" :class="[!dropDownShow?'downClose':'']" ref="uDropdown"
			 @close="dropdownClose" @open="dropdownOpen">
				<u-dropdown-item v-model="typevalue" title="动作" 
				:options="typeList" @change="change"></u-dropdown-item>
				<u-dropdown-item title="时间范围">
					<view class="slot-content" style="background-color: #FFFFFF;">
						<view class="select-date u-border-bottom" style="margin-bottom: 0;">
							<view class="name" @click="pickerTimeFn('start')">
								<u-icon name="calendar" color="#333" size="32"></u-icon>
								<text style="margin-left: 6rpx;">开始时间：</text>
							</view>
							<view class="time_box">
								<view class="tip_txt" v-if="!start_date_c"
								@click="pickerTimeFn('start')">请选择开始时间</view>
								<view class="tile_val" v-else
								@click="pickerTimeFn('start')">{{start_date_c}}</view>
								<view class="delete_btn" v-if="start_date_c" @click="deleteDateFn('start');">
									<u-icon name="close-circle" color="#333" size="34"></u-icon>
								</view>
							</view>
							
						</view>
						<view class="select-date u-border-bottom" style="margin-bottom: 0;">
							<view class="name" @click="pickerTimeFn('end')">
								<u-icon name="calendar" color="#333" size="32"></u-icon>
								<text style="margin-left: 6rpx;">结束时间：</text>
							</view>
							<view class="time_box">
								<view class="tip_txt" v-if="!end_date_c"
								@click="pickerTimeFn('end')">请选择结束时间</view>
								<view class="tile_val" v-else
								@click="pickerTimeFn('end')">{{end_date_c}}</view>
								<view class="delete_btn" v-if="end_date_c" @click="deleteDateFn('end')">
									<u-icon name="close-circle" color="#333" size="34"></u-icon>
								</view>
								
							</view>
						</view>
						<view class="btn_group">
							<u-button class="btn" @click="resetSecreen()">重置</u-button>
							<u-button class="btn" type="primary" @click="selectedDateConform()">查询</u-button>
						</view>
					</view>
				</u-dropdown-item>
				
			</u-dropdown>
		</view>
		</u-sticky>
		<u-calendar v-model="calendarShow" :mode="'range'" 
		@change="calendarChange"></u-calendar>
		<view class="content-box" style="padding-bottom: 60rpx;">
			<view class="tb_swipe_list" 
				 v-for="(item, index) in loglist" 
				 :show="item.show" :index="index":key="item.id" 
				>
				<view class="tb_body" @click="showInfo(index)">
					<view class="index_num">{{item.snumber}}</view>
					<view class="row_box">
						<view class="text">操作人：{{ item.user_name }}</view>
					</view>
					<view class="row_box">
						<view class="text">动作：{{ item.type|typename }}</view>
					</view>
					<view class="row_box">
						<view class="text">详情：{{ item.message }}</view>
					</view>
					<view class="row_box">
						<view class="text">时间：{{ item.created_at|timeFormat}}</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="loading" margin-top="60"/>
		</view>
	</view>
</template>

<script>
	import {showLoading,toast,formatDate} from '@/com/utils.js'
	export default {
		data() {
			return {
				per_page:15,
				page:1,
				loglist:[],
				loading:'loadmore',
				typeList:[
					{
						label: '全部',
						value: '',
					},
					{
						label: '创建',
						value: 'create',
					},
					{
						label: '修改',
						value: 'update',
					},
					{
						label: '删除',
						value: 'delete',
					}
				],
				typevalue:'',
				calendarShow:false,
				start_date_c:'',
				end_date_c:'',
				q_start_date:'',
				q_end_date:'',
				dropDownShow:false,
				
			};
		},
		filters:{
			timeFormat(val){
				return formatDate(val*1000, 'yyyy-MM-dd hh:mm');
			},
			typename(val){
				let keys = {
					delete:'删除',
					create:'创建',
					update:'修改'
				}
				let name = keys[val]?keys[val]:'其它'
				return name;
			},
			
		},
		onLoad() {
			this.queryloglist();
			
		},
		methods: {
			showInfo(){
				
			},
			dropdownClose(){
				this.dropDownShow = false;
			},
			dropdownOpen(){
				this.dropDownShow = true;
			},
			change(val){
				console.log(val);
				this.queryloglist(true);
			},
			selectedDateConform(){
				this.q_start_date = this.start_date_c;
				this.q_end_date = this.end_date_c;
				this.queryloglist(true);
				this.calendarShow = false;
			},
			pickerTimeFn(){
				this.start_date_c = this.q_start_date;
				this.end_date_c = this.q_end_date;
				this.calendarShow = true;
			},
			//日期范围
			calendarChange(e){
				console.log(e,'日期范围')
				this.start_date_c = e.startDate;
				this.end_date_c = e.endDate;
			},
			deleteDateFn(){
				this.resetSecreen();
			},
			resetSecreen(){
				this.start_date_c = '';
				this.end_date_c = '';
			},
			queryloglist(refresh){
				if(refresh){
					this.loading = 'loadmore';
					this.loglist = [];
					this.page = 1;
				}
				if(this.loading=='nomore'){//超出最大页
					return false;
				}
				let params = {
					per_page:this.per_page,
					page: this.page ++,
					_t: new Date().getTime()
				}
				if(this.typevalue){
					params['type'] = this.typevalue;
				}
				if(this.q_start_date){
					params['start_time'] = this.q_start_date+' 00:00:00';
					params['end_time'] = this.q_end_date+' 23:59:59';
				}
				this.loading = 'loading';
				this.$http.get('/api/operation-logs',{params:params}).then(({data})=>{
					
					console.log(data)
					this.loading = 'loadmore';
					if(data.code==200){
						let _list = data.data|| [];
						let {current_page,per_page,last_page} = data.meta;
						for(let [index,item] of _list.entries()){
							console.log(item,index)
							item.snumber = parseInt(per_page*(current_page-1)+(index+1));
						}
						this.loglist = this.loglist.concat(_list);
						console.log(this.loglist);
						if(current_page >= last_page){
							this.loading ='nomore';
						}
						
					}
				}).catch(()=>{
					this.loading = 'loadmore';
				})
			},
		},
		//触底加载
		onReachBottom() {
			if(this.loading=='loadmore'){
				this.queryloglist();
			}
		},
	}
</script>

<style lang="scss" scoped>
.content-box{
	padding: 30rpx 30rpx 60rpx 30rpx;
}

.tb_swipe_list{
	.tb_body{
		position: relative;
		padding-left: 100rpx;
		.index_num{
			width: 100rpx;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			font-size: 34rpx;
			text-align: center;
			word-break: break-all;
		}
	}
}
.row_box{
	.text{
		word-break: break-all;
	}
}
.top-title-box{
	display: flex;
	align-items: center;
	padding: 24rpx 30rpx;
	background-color: #fff;
	justify-content: space-between;
	margin-top: 12rpx;
	.title{
		font-size: 32rpx;
		font-weight: bold;
	}
	.handle-option{
		.btn{
			font-size: 32rpx;
			height: 60rpx;
			padding: 0 40rpx;
			background-color: rgb(42, 125, 201);
		}
	}
}
</style>
