<template>
	<view class="body">
		<view class="wrapper product-detail">

			<view class="head">
				<view class="month">
					<view @click="selectMonth" style="display: flex;align-items: center; font-size:46rpx;">
						<text class="text">{{currentYear}}</text> 年 <text class="text">{{currentMonth}}</text> 月 <u-icon
							style="padding: 10rpx;" :name="iconName" size="20" color="#555555"></u-icon>
					</view>
					<u-datetime-picker @confirm="timeConfirm" @cancel="timeCancel" :show="show" v-model="defaultDate"
						mode="year-month"></u-datetime-picker>
				</view>
				<view class="data">
					<view class="container">
						<view class="total">
							<text>￥{{report.sum}}元</text>
						</view>
						<view class="ordernum">
							<text class="text " style="padding-top:0">共{{report.count}}笔订单</text>
							<view>
								<text class="text">{{currentYear}}年</text> <text class="text">{{currentMonth}}月</text>
							</view>
						</view>
					</view>

				</view>

			</view>

			<view class="list">
				<view class="card">
					<view class="top">
						<view class="icon" style="width: 60rpx; display: flex;flex-direction: row;">
							<view
								style="height: 25rpx; width: 25rpx; background-color: #ed6d00; border-radius: 13rpx; margin-right: -8rpx; z-index: 10;">
							</view>
							<view style="height: 25rpx; width: 25rpx; background-color: #ed6d00; border-radius: 13rpx;">
							</view>
						</view>
						<view class="order-no">
							收入走势
						</view>
					</view>
					<view class="content">
						<view class="charts-box">
							<qiun-data-charts type="line" :opts="lineConfig" :chartData="chartData" />
						</view>
					</view>

				</view>
			</view>

		</view>

		<view class="bottom">
			<u-button :disabled="false" class="button" @click="go2order">账 单</u-button>
		</view>

	</view>
</template>

<script>
	let that = {}
	export default {
		data() {
			var date = new Date;
			return {
				currentYear: date.getFullYear(),
				currentMonth: date.getMonth() + 1,
				lastDay: 0,
				iconName: 'arrow-down-fill',
				lineConfig: {
					dataLabel: false,
					yAxis: {
						disabled: false,
						disableGrid: true
					},
					"xAxis": {
						"rotateLabel": true,
						disabled: true,
					}
				},
				show: false,
				chartData: {
					categories: [],
					series: [{
						data: [],
						name: "收款金额"
					}, {
						data: [],
						name: "订单数量"
					}]
				},
				report: {
					count: 0,
					sum: 0
				},
			};
		},
		onLoad() {
			that = this
			//获取当月最后一天 
			that.lastDay = new Date(that.currentYear, that.currentMonth, 0).getDate()
			that.defaultDate = that.currentYear + '-' + that.currentMonth
			// that.init()
		},
		methods: {
			init() {
				this.getList()
			},
			getList() {
				uni.showLoading({
					title: '加载中...'
				})
			},
			timeConfirm(time) {
				const date = new Date(time.value);
				const year = date.getFullYear();
				const month = date.getMonth() + 1; // 月份是从0开始的
				that.currentYear = year
				that.currentMonth = month
				this.iconName = 'arrow-down-fill';
				this.show = false
				that.defaultDate = that.currentYear + '-' + that.currentMonth
				// that.getList()
			},
			timeCancel() {
				this.iconName = 'arrow-down-fill';
			},
			selectMonth() {
				this.show = true;
				this.iconName = 'arrow-up-fill';
			},
			go2order() {
				uni.navigateTo({
					url: '/pages/fiance/ledger/ledger'
				})
			},

		}
	}
</script>

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