<template>
	<view class="mine-stored-record">
		<fixed>
			<view class="fill-base b-1px-b">
				<view class="pl-lg pr-lg">
					<view class="space-lg"></view>
					<uni-segmented-control :current="typeInd" :values="typeList"
						@clickItem="handerTabChange($event,'typeInd')" style-type="button" :active-color="primaryColor">
					</uni-segmented-control>
				</view>
				<tab @change="handerTabChange($event,'activeIndex')" :list="tabList"
					:lockTap="activeIndex==2&&tabList[2].start_time&&tabList[2].end_time ? false : true"
					:activeIndex="activeIndex" :activeColor="primaryColor" :width="100/tabList.length + '%'"
					height="100rpx"></tab>
			</view>
		</fixed>

		<view class="fill-base pd-lg b-1px-b" v-for="(item,index) in list.data" :key="index">
			<view class="flex-between">
				<view class="max-446 ellipsis">{{typeType[item.type]}}</view>
				<view class="text-bold" :style="{color:primaryColor}">{{item.add?'+':'-'}} {{item.price}}</view>
			</view>
			<view class="flex-between f-caption c-desc mt-sm">
				<view class="c-caption">{{item.create_time}}</view>
				<view>余额：{{item.after_balance}}</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: 184rpx;"></view>
			<view class="popup-choose-time fill-base f-paragraph c-desc pt-lg pb-lg radius-bottom-34">
				<view class="time-item flex-center pt-lg">
					<view @tap.stop="toShowTime('start_time')" class="item-child flex-center flex-column">
						<view>开始时间</view>
						<view class="mt-sm" :style="{color:tabList[2].start_time ? primaryColor : '#999'}">
							{{tabList[2].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:tabList[2].end_time ? primaryColor : '#999'}">
							{{tabList[2].end_time || '选择时间'}}
						</view>
					</view>
				</view>
				<view class="button-item flex-center">
					<view @tap.stop="toConfirm(1)" class="item-child disabled flex-center"> 取消 </view>
					<view @tap.stop="toConfirm(2)" class="item-child flex-center"
						:style="{background: primaryColor,color:'#fff'}"> 确定
					</view>
				</view>
			</view>
		</uni-popup>

		<w-picker mode="date" :startYear="startYear" :endYear="endYear" :value="tabList[0].end_time" :current="false"
			fields="day" @confirm="onConfirm($event)" :disabled-after="false" ref="day" :themeColor="primaryColor"
			:visible.sync="showDate">
		</w-picker>

	</view>
</template>

<script>
	import {
		mapState,
	} from "vuex"
	import uniSegmentedControl from "@/components/uni-segmented-control.vue"
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		components: {
			uniSegmentedControl,
			wPicker
		},
		data() {
			return {
				startYear: '',
				endYear: '',
				showKey: '',
				showDate: false,
				typeType: {
					1: '购买储值卡',
					2: '认养订单',
					3: '认养配送订单',
					4: '配送订单退款',
					5: '养殖订单',
					6: '土地订单',
					7: '商城交易支付',
					8: '提现',
					9: '土地配送订单',
					10: '商城订单退款',
					11: '商城交易收入',
					12: '拒绝提现',
					13: '认养订单退款',
					14: '',
					15: ''
				},
				typeList: [{
					id: 1,
					title: '收入记录'
				}, {
					id: 0,
					title: '支出记录'
				}],
				typeInd: 0,
				activeIndex: 0,
				tabList: [{
					id: 1,
					title: '本周',
					start_time: '',
					end_time: ''
				}, {
					id: 2,
					title: '本月',
					start_time: '',
					end_time: ''
				}, {
					id: 3,
					title: '自定义',
					start_time: '',
					end_time: ''
				}],
				preTime: {
					start_time: '',
					end_time: ''
				},
				param: {
					page: 1,
					start_time: '',
					end_time: ''
				},
				list: {
					data: []
				},
				loading: true,
				lockTap: 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: {
			initIndex() {
				let cur_time = new Date(Math.ceil(new Date().getTime()))
				const currentDate = new Date()
				//返回date是一周中的某一天
				const week = currentDate.getDay()
				//一天的毫秒数
				const millisecond = 1000 * 60 * 60 * 24
				//减去的天数
				const minusDay = week != 0 ? week - 1 : 6
				//本周 周一
				const monday = new Date(currentDate.getTime() - minusDay * millisecond)
				//本周 周日
				const sunday = new Date(monday.getTime() + 6 * millisecond)

				this.tabList[0].start_time = this.$util.formatTime(monday, 'YY-M-D')
				this.tabList[0].end_time = this.$util.formatTime(sunday, 'YY-M-D')
				this.tabList[1].start_time = this.$util.formatTime(cur_time, 'YY-M') + '-01'
				this.tabList[1].end_time = this.$util.formatTime(cur_time, 'YY-M-D')
				let year = this.$util.formatTime(cur_time, 'YY') * 1
				this.startYear = year - 5
				this.endYear = year
				this.getList()
			},
			initRefresh() {
				this.param.page = 1
				this.initIndex()
			},
			async getList() {
				let {
					list: oldList,
					activeIndex,
					tabList,
					typeInd,
					typeList,
				} = this
				let {
					start_time,
					end_time
				} = tabList[activeIndex]
				let param = this.$util.deepCopy(this.param)
				param.add = typeList[typeInd].id
				param.start_time = this.$util.DateToUnix(start_time)
				param.end_time = this.$util.DateToUnix(end_time) + 24 * 3600 - 1
				let newList = await this.$api.mine.userConsumeWater(param);

				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()
			},
			handerTabChange(index, key, ind = 2) {
				this[key] = index;
				if (key == 'activeIndex') {
					let methodModel = index == ind ? 'open' : 'close'
					this.$refs.show_choose_time[methodModel]()
					if (index == ind) return
				} else {
					this.$refs.show_choose_time.close()
				}
				this.$util.showLoading()
				this.param.page = 1
				this.list.data = []
				this.getList()
			},
			toShowTime(key, ind = 2) {
				if (key == 'end_time' && !this.tabList[ind].start_time) {
					this.$util.showToast({
						title: `请选择开始时间`
					})
					return
				}
				this.showKey = key
				this.showDate = true
			},
			async onConfirm(val, ind = 2) {
				let {
					start_time,
					end_time
				} = this.tabList[ind]
				let {
					showKey
				} = this
				if ((end_time && showKey == 'start_time' && this.$util.DateToUnix(end_time) < this.$util.DateToUnix(val
						.result)) || (
						showKey == 'end_time' && this.$util.DateToUnix(start_time) > this.$util.DateToUnix(val.result)
					)) {
					this.$util.showToast({
						title: `结束时间不能小于开始时间`
					})
					return
				}
				this.tabList[ind][showKey] = val.result;
				if (showKey == 'end_time') {
					this.showDate = false
				}
			},
			toConfirm(type, ind = 2) {
				let {
					start_time = '',
						end_time = ''
				} = type == 1 ? this.preTime : this.tabList[ind]
				if (type == 1) {
					this.tabList[ind].start_time = start_time
					this.tabList[ind].end_time = end_time
				} else {
					if (!start_time || !end_time) {
						this.$util.showToast({
							title: !start_time ? `请选择开始时间` : `请选择结束时间`
						})
						return
					}
					this.preTime.start_time = start_time
					this.preTime.end_time = end_time
				}
				this.activeIndex = start_time && end_time ? ind : 0
				this.$refs.show_choose_time.close()
				this.param.page = 1
				this.getList()
			}
		}
	}
</script>


<style lang="scss">
</style>
