<template>
	<view class="stored-record-pages" style="background-color: #ffffff;min-height:calc(100vh)">
		<fixed>
			<view class="list-time flex-center f-paragraph c-title fill-base b-1px-b">
				<view @tap.stop="toChangeItem(index,'rankInd')" class="item-child flex-center"
					:style="{color: rankInd == index ? primaryColor : ''}" v-for="(item,index) in rankList"
					:key="index">{{item}}
					<i class="iconfont icon-right rotate-90 ml-sm" v-if="item == '日期筛选'"></i>
				</view>
			</view>
		</fixed>

		<view class="cate-item-area" @tap.stop="toChangeItem(index,'curInd')"
			v-for="(item,index) in list.data" :key="index">
			<view class="contentItem">
				<view class="chongzhiTitle">
					<text>充值</text>
					<view class="c-success">+{{item.true_price}}</view>
				</view>
				<view class="middleCz">
					<text>充值单号</text>
					<view class="jishi" @click="show = true">
						捆绑技师
					</view>
				</view>
				<view class="time">
					<view>{{item.create_time}}</view>
				</view>
			<!-- 	<view class="flex-between">
					<view class="max-446 ellipsis">{{item.title}}</view>
					
				</view>
				<view class="flex-between f-caption c-caption">
					
					<view>余额：{{item.now_balance}}</view>
				</view> -->
			</view>
		</view>

		<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
		</load-more>
		<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>

		<view class="space-footer"></view>

		<uni-popup ref="show_choose_time" type="top" :custom="true" :maskClick="false">
			<view style="height: 95rpx;"></view>
			<view class="popup-choose-time fill-base f-paragraph c-desc pt-lg pb-lg">
				<view class="flex-center">
					<view @tap.stop="toShowTime('start_time')" class="item-child flex-center flex-column">
						<view>开始时间</view>
						<view class="mt-sm" :style="{color:param.start_time ? primaryColor : '#999'}">
							{{param.start_time || '选择时间'}}
						</view>
					</view>
					<view @tap.stop="toShowTime('end_time')" class="item-child flex-center flex-column  b-1px-l">
						<view>结束时间</view>
						<view class="mt-sm" :style="{color:param.end_time ? primaryColor : '#999'}">
							{{param.end_time || '选择时间'}}
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<w-picker mode="date" :startYear="startYear" :endYear="startYear*1 + 100" :value="toDay" :current="false"
			fields="day" @confirm="onConfirm($event)" :disabled-after="false" ref="day" :themeColor="primaryColor"
			:visible.sync="showDate">
		</w-picker>
		<u-popup :show="show" @close="closeHandle" mode="center">
			<view class="slot-content">
				<view class="formItemText">
					充值单号：23097865456789
				</view>
				<view class="formItemText" style="margin:60rpx 0 73rpx 0 ">
					充值金额：<text>￥1000.00</text>
				</view>
				<view class="inputContent">
					<u--input
					    placeholder="请输入技师编号"
					    border="bottom"
					    v-model="value"
					></u--input>
				</view>
				<view class="submit">
					确认充值
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		components: {
			wPicker
		},
		data() {
			return {
				toDay: '',
				value:"",
				startYear: '',
				showKey: '',
				showDate: false,
				rankList: ['本月', '日期筛选'],
				rankInd: 0,
				start_time: '',
				param: {
					page: 1,
					start_time: '',
					end_time: ''
				},
				list: {
					data: [
						
					]
				},
				loading: true,
				curInd: -1,
				startX: 0, //开始坐标
				startY: 0, //开始坐标
				lockTap: false,
				show:false
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
		}),
		onLoad() {
			this.$util.showLoading()
			this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return;
			this.param.page = this.param.page + 1;
			this.loading = true;
			this.getList();
		},
		methods: {
			...mapMutations(['updateUserItem']),
			async initIndex(refresh = false) {
				// #ifdef H5
				if (!refresh && this.$jweixin.isWechat()) {
					await this.$jweixin.initJssdk();
					this.$jweixin.wxReady(() => {
						this.$jweixin.hideOptionMenu()
					})
				}
				// #endif
				let cur_time = new Date(Math.ceil(new Date().getTime()))
				this.toDay = this.$util.formatTime(cur_time, 'YY-M-D')
				this.startYear = this.$util.formatTime(cur_time, 'YY')
				this.start_time = this.$util.formatTime(cur_time, 'YY-M') + '-01'
				await this.getList()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
			},
			initRefresh() {
				this.param.page = 1
				this.initIndex(true)
			},
			async getList() {
				let {
					list: oldList,
					rankInd,
					start_time,
					toDay
				} = this
				let param = this.$util.deepCopy(this.param)
				if (rankInd == 0) {
					param.start_time = start_time
					param.end_time = toDay
				}
				param.start_time = this.$util.DateToUnix(param.start_time)
				param.end_time = this.$util.DateToUnix(param.end_time) + 24 * 3600 - 1
				let newList = await this.$api.mine.balaceOrder(param);

				newList.data.map(item => {
					item.isTouchMove = false
				})
				if (this.param.page == 1) {
					this.list = newList
				} else {
					newList.data = oldList.data.concat(newList.data)
					this.list = newList
				}
				this.loading = false
				this.$util.hideAll()
			},
			async toChangeItem(index, key) {
				this[key] = index
				if (key == 'rankInd') {
					let methodModel = index == 1 ? 'open' : 'close'
					this.$refs.show_choose_time[methodModel]()
					if (index == 1) return
					this.param.page = 1
					await this.getList()
				}
			},
			toShowTime(key) {
				if (key == 'end_time' && !this.param.start_time) {
					this.$util.showToast({
						title: `请选择开始时间`
					})
					return
				}
				this.showKey = key
				this.showDate = true
			},
			async onConfirm(val) {
				let {
					start_time,
					end_time
				} = this.param
				let {
					showKey
				} = this
				if (showKey == 'end_time' && this.$util.DateToUnix(start_time) > this.$util.DateToUnix(val.result)) {
					this.$util.showToast({
						title: `结束时间不能小于或等于开始时间`
					})
					return
				}
				this.param[showKey] = val.result;
				if (showKey == 'end_time') {
					this.showDate = false
					this.$refs.show_choose_time.close()
					this.param.page = 1
					await this.getList()
				}
			},
			async toDel(index) {
				let {
					id,
					title
				} = this.list.data[index]
				let [res_del, {
					confirm
				}] = await uni.showModal({
					content: `请确认是否要删除‘${title}'`,
				})
				if (!confirm) return;
				let param = {
					id,
					status: -1
				}
				await this.$api.master.goodsCateUpdate(param)
				this.$util.showToast({
					title: `删除成功`
				})
				this.list.data.splice(index, 1)
			},
			//手指触摸动作开始 记录起点X坐标
			touchstart(e) {
				//开始触摸时 重置所有删除
				this.list.data.forEach(item => {
					if (item.isTouchMove) //只操作为true的
						item.isTouchMove = false;
				})
				this.startX = e.changedTouches[0].clientX
				this.startY = e.changedTouches[0].clientY
			},
			closeHandle(){
				this.show = false
			},
			//滑动事件处理
			touchmove(e) {
				let {
					startX,
					startY
				} = this
				let {
					index
				} = e.currentTarget.dataset //当前索引

				let {
					clientX,
					clientY
				} = e.changedTouches[0]
				let touchMoveX = clientX
				let touchMoveY = clientY
				//获取滑动角度
				let angle = this.angle({
					X: startX,
					Y: startY
				}, {
					X: touchMoveX,
					Y: touchMoveY
				});
				this.list.data.forEach((v, i) => {
					v.isTouchMove = false
					//滑动超过30度角 return
					if (Math.abs(angle) > 30) return;
					if (i == index) {
						if (touchMoveX > startX) //右滑
							v.isTouchMove = false
						else //左滑
							v.isTouchMove = true
					}
				})
			},
			/**
			 * 计算滑动角度
			 * @param {Object} start 起点坐标
			 * @param {Object} end 终点坐标
			 */
			angle(start, end) {
				var _X = end.X - start.X,
					_Y = end.Y - start.Y
				//返回角度 /Math.atan()返回数字的反正切值
				return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
			},
		}
	}
</script>


<style lang="scss">
.cate-item-area{
	padding:0 24rpx;
	
	.contentItem{
		padding:39rpx 24rpx;
		background-color: #ffffff;
		border-bottom:1px solid #EAEAEA;
		.chongzhiTitle,.middleCz{
			display:flex;
			justify-content: space-between;
			align-items: center;
		}
		.chongzhiTitle{
			text{
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
			.c-success{
				
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #F4563C;
			}
		}
		.middleCz{
			margin-top:19rpx;
			text{
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			.jishi{
				padding:18rpx 28rpx;
				background: #08BF77;
				border-radius: 50rpx;
				color:#ffffff;
			}
			
		}
		.time{
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}
}
/deep/.u-popup__content{
	border-radius: 30rpx;
	overflow: hidden;
}
.slot-content{
	padding:50rpx;
	.formItemText{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		text{
			font-size:28rpx;
			color:#F4563C;
		}
	}
	.submit{
		padding:36rpx 81rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		background: #08BF77;
		border-radius: 60rpx;
		width: fit-content;
		
		margin:0 auto;
		margin-top:41rpx;
	}
	
}
</style>
