<template>
	<view class="body">
		<view class="wrapper product-detail">
			<view class="head">
				<u-search placeholder="用户/订单金额/订单号/备注/(模糊搜索)" @change="searchEv" v-model="form.keyword"></u-search>
				<view class="title month">
					<view class="datepicker">
						<text class="pikertext">选择日期:</text>
						<text @click="timePickerShow_start = true">{{ startDate }}</text>
						至
						<text @click="timePickerShow_end = true">{{ endDate }}</text>
					</view>
					<u-calendar monthNum='13' :show='timePickerShow_start' :minDate="minDate" :maxDate='maxDate'
						toolTip="选择开始日期" v-model="startDate" @confirm="timeConfirm_start"></u-calendar>
					<u-calendar monthNum='13' :show='timePickerShow_end' :minDate="minDate" :maxDate='maxDate'
						toolTip="选择结束日期" v-model="endDate" @confirm="timeConfirm_end"></u-calendar>
				</view>

				<view>
					<u-subsection :list="filterArr" :current="current" @change="sectionChange"></u-subsection>
				</view>

				<view class="data" v-if="list.count">
					<view class="container">
						<view class="total">
							<view>共{{ list.count.total }}笔订单</view>
							<!-- 门店选择 -->
							<view class="mdselect">
								<view style="width: 150rpx; text-align: right;">共￥{{ list.count.price_sum ? list.count.price_sum : 0 }}元</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="list">
				<view class="card" v-for="(item, index) in list.items">
					<view class="top">
						<view class="flex-c">
							<view class="icon">
								<view class="image">
									<u-image width="62rpx" height="62rpx"
										:src="'http://yuledui.oss-cn-qingdao.aliyuncs.com/merch_manage/img/' + (item.paytype == 21 ? 'icon_wechat' : 'icon_alipay') + '.png'"></u-image>
								</view>
							</view>
							<view class="order-no">
								<text class="no">{{ item.ordersn }}</text>
								<br />
								<text class="time">{{ item.createtime }}</text>
							</view>
						</view>

						<view class="price">
							<view>
								<view class="text" v-if="item.refundstate > 0">有退款</view>
								<view class="text" v-else-if="item.status == 3">付款成功</view>
								<view class="nopay" v-else>未付款</view>
								<view class="count">
									<text style="font-size: 25rpx;">订单金额:¥</text>
									<text class="orderprice">{{ item.price }}</text>
								</view>
							</view>
						</view>
					</view>
					<u-line></u-line>
					<view class="content">
						<view class="detail">
							<text class="item">用户ID:{{ item.userid }}</text>
							<text class="item">
								<text v-if="item.realname">{{ item.realname }}</text>
								<text v-else-if="item.nickname">{{ item.nickname }}</text>
								<text>{{ item.mobile }}</text>
							</text>
						</view>
					</view>
					<view class="bottom">
						<view class="price" v-if="form.filter == 'online_order'">
							<text>{{ item.goods_name }}</text>
						</view>
						<view class="price" v-else>
							<text>实付:</text>
							<text class="real-price">
								￥
								<text>{{ item.offline_price }}</text>
							</text>
						</view>
						<view class="bottom-btn">
							<u-button size="mini" :ripple="true" @click="showRemark(item)"
								style="margin-right:5px;" ripple-bg-color="#ed6d00">
								备注
							</u-button>
						</view>
					</view>
					<view class="bottom" v-if="item.showRemarkView">
						<view class="bottom-btn">
							<u--input placeholder="请填写订单备注" border="bottom" clearable></u--input>
							<!-- <u-field v-model="item.remark" label="" label-width="1" placeholder="请填写订单备注"> -->
							<u-button size="mini" slot="right" type="success" @click="saveRemark(item)">保存备注</u-button>
							<!-- </u-field> -->
						</view>
					</view>

					<view class="bottom" v-if="item.remark">
						<text class="remarktext">备注:{{ item.remark }}</text>
					</view>
					<!-- 退款 -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let that = {}
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	const date = d.getDate()
	export default {
		data() {
			return {
				maxDate: `${year}-${month}-${date}`, //最大选择日期
				minDate: `${year-1}-${month}-${date}`, //最小选择日期
				startDate: '',
				endDate: '',
				timePickerShow_start: false,
				timePickerShow_end: false,
				current: 0,
				filterArr: ['金豆抵扣', '微信', '支付宝', '未付款'],
				form: {
					page: 1,
					limit: 15,
					keyword: '',
				},
				list: {
					count:2,
					items: [],
				},
				withdraw: {}
			};
		},
		onLoad(opt) {
			that = this
			that.init()
		},
		onPullDownRefresh() {
			that.resetForm()
			that.getList()
			setTimeout(function() {
				uni.showToast({
					title: '刷新成功',
					icon: 'none'
				})
				uni.stopPullDownRefresh({
					success: (result) => {},
					fail: (error) => {}
				})
			}, 688)
		},
		onReachBottom() {
			this.form.page += 1
			that.getList()
		},
		methods: {
			sectionChange(index) {
				this.current = index
			},
			init() {
				let now = new Date()
				let money_1day = now.getFullYear() + '-' + (now.getMonth() + 1) + '-01'
				let today = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate()
				this.startDate = money_1day
				this.endDate = today
				// this.getList()
			},
			getList() {
			},
			showDatePicker() {
				this.timePickerShow = true
			},
			//开始时间
			timeConfirm_start(date) {
				const date2 = new Date(this.endDate);
				const date1 = new Date(date[0]);
				if (date1> date2) {
					uni.showToast({
						title: '不能选择晚于结束时间的日期，请重新选择',
						duration: 2000,
						icon:'none'
					});
				} else {
					this.startDate = date[0]
					this.timePickerShow_start = false
				}
				// this.changeDate4Order()
			},
			//结束时间
			timeConfirm_end(date) {
				const date1 = new Date(this.startDate);
				const date2 = new Date(date[0]);
				if (date1 > date2) {
					uni.showToast({
						title: '不能选择晚于开始时间的日期，请重新选择',
						duration: 2000,
						icon:'none'
					});
				} else {
					this.endDate = date[0]
					this.timePickerShow_end = false
				}
			},
			changeDate4Order() {
				this.resetForm()
				that.getList()
			},
			showRemark(item) {
				item.showRemarkView = true
			},
			/**
			 * 保存订单备注
			 * @param {item} item 
			 */
			saveRemark(item) {
			},
			// 重置form
			resetForm() {
				that.form.page = 1
				that.list = {
					items: []
				}
			},
			// 关键词搜索
			searchEv(value) {
				that.form.keyword = value
				that.resetForm()
				that.getList()
			},
			// 筛选radio
			radioGroupChange(value) {
				that.form.filter = value
				that.resetForm()
				that.getList()
			},
		} // /methods
	}
</script>

<style lang="scss">
	@import './ledger.scss';
</style>