<template>
	<view class="p-20 container">
		<view class="search-block flex flex-row items-center justify-between">
			<u-tabs :list="tabs" lineWidth="30" lineColor="#007aff" :activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}" :inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)'
				}" itemStyle="padding-left: 8px; padding-right: 8px; height: 34px;" @change="changePlatformTab">
			</u-tabs>
			<view>
				<sl-filter :ref="'slFilter'" :topFixed="false" :isTransNav="true" :navHeight="0" :color="titleColor"
					:themeColor="themeColor" :tabHeight="30" :menuList="menuList" @result="result"></sl-filter>
			</view>
		</view>
		<view class="tags flex flex-row">
			<view :class="['tag', tagCurrent === index && 'active' ]" v-for="(item, index) in tagList" :key="item.value"
				@click="changeTab(index)">{{item.name}}</view>
		</view>

		<view class="amount flex flex-col">
			<view class="flex flex-row">
				<view class="flex-1 flex flex-col">
					<text class="t1">预估收益</text>
					<text class="m1">¥ {{(topStatics.estimateEarnings/100).toFixed(2)}}</text>
				</view>
				<view class="flex-1 flex flex-col">
					<text class="t1">充值金额</text>
					<text class="m1">¥ {{(topStatics.rechargeMoney/100).toFixed(2)}}</text>
				</view>
				<view class="flex-1 flex flex-col">
					<text class="t1">退款金额</text>
					<text class="m1">¥ {{(topStatics.refundMoney/100).toFixed(2)}}</text>
				</view>
			</view>
			<!-- <view class="flex flex-row" style="margin-top: 20upx;">
				<view class="flex-1 flex flex-col">
					<text class="t1">预估收益</text>
					<text class="m1">¥ 0.00</text>
				</view>
				<view class="flex-1 flex flex-col">
					<text class="t1">点击人数</text>
					<text class="m1">0</text>
				</view>
				<view class="flex-1 flex flex-col">
					<text class="t1">点击次数</text>
					<text class="m1">0</text>
				</view>
			</view> -->
		</view>

		<view class="income p-d-20">
			<view>收益明细</view>
			<view class="flex flex-row">
				<view :class="['type-tag', earningsType === 1 && 'active']" @click="changeEarnType(1)">充值收益</view>
				<view :class="['type-tag',  earningsType === 2 && 'active']" @click="changeEarnType(2)">广告收益</view>
			</view>
		</view>
		<view class="p-d-20">
			<view class="information p-20 flex flex-row">
				<image class="img" src="" mode="widthFix"></image>
				<view class="flex-1 flex flex-col">
					<view class="flex flex-row justify-between items-center">
						<view><text>章章剧场</text></view>
						<text class="red">即将到账</text>
					</view>
					<view class="title ellipsis">老公的金丝雀怀孕后老</view>
					<text>付款时间：20223-23-02 00：00：00</text>
					<view class="wage1 flex flex-row justify-between">
						<text>付款金额：200</text>
						<text>预计收入：16.8</text>
					</view>
				</view>
			</view>
			<view class="information p-20 flex flex-row">
				<image class="img" src="" mode="widthFix"></image>
				<view class="flex-1 flex flex-col">
					<view class="flex flex-row justify-between items-center">
						<view><text>章章剧场</text></view>
						<text class="red">即将到账</text>
					</view>
					<view class="title ellipsis">老公的金丝雀怀孕后老</view>
					<text>付款时间：20223-23-02 00：00：00</text>
					<view class="wage1 flex flex-row justify-between">
						<text>付款金额：200</text>
						<text>预计收入：16.8</text>
					</view>
				</view>
			</view>
			<view class="information p-20 flex flex-row">
				<image class="img" src="" mode="widthFix"></image>
				<view class="flex-1 flex flex-col">
					<view class="flex flex-row justify-between items-center">
						<view><text>章章剧场</text></view>
						<text class="red">即将到账</text>
					</view>
					<view class="title ellipsis">老公的金丝雀怀孕后老</view>
					<text>付款时间：20223-23-02 00：00：00</text>
					<view class="wage1 flex flex-row justify-between">
						<text>付款金额：200</text>
						<text>预计收入：16.8</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		record,
		getTypeList
	} from '@/api/index.js'
	import {
		currentDate
	} from '@/utils/common.js'
	export default {
		data() {
			return {
				themeColor: '#007aff',
				titleColor: '#666666',
				tabs: [{
					name: '全部'
				}, {
					name: '抖音'
				}, {
					name: '快手'
				}, {
					name: '视频号'
				}],
				menuList: [{
					'title': '全部剧场',
					'isMutiple': false,
					'key': 'playSource',
					'defaultSelectedIndex': 0,
					'detailList': []

				}],
				tagList: [{
						name: '今天',
						value: 0
					},
					{
						name: '昨天',
						value: 1
					},
					{
						name: '7天',
						value: 7
					},
					{
						name: '15天',
						value: 15
					},
					{
						name: '本月',
						value: 30
					},
					{
						name: '上月',
						value: 60
					},
				],
				tagCurrent: 0,
				filter: {
					startTime: '',
					endTime: '',
					sourcePlatform: '',
					playletItemId: ''
				},
				topStatics: {
					estimateEarnings: 0,
					rechargeMoney: 0,
					refundMoney: 0
				},
				earningsType:  1,
				list: [],
				height: 200
			}
		},
		// 在页面中使用 ， this是当前页面中的this， arr 是包含dom类名的数组
		async onReady() {
		       //  顶部搜索栏 和 轮播图 的类名
		    let arr = ['.search-block','.tags', '.amount', '.income']
		    this.height = await this.getScrollViewHeight(this, arr)
			this.getList(1)
		},
		created() {
			this.filter.startTime = currentDate() + ' 00:00:00'
			this.filter.endTime = currentDate() + ' 00:00:00'
			this.getPlayType()
			this.getTopStatics()
		},
		methods: {
			getSystemInfo(key) {
			        return new Promise(function(resolve, reject) {
			            uni.getSystemInfo({
			                success(res) {
			                    key ? resolve(res[key]) : resolve(res)
			                }
			            })
			        })
			    },
			    getDomHeight(_this, selector) {
			        return new Promise(function(resolve, reject) {
			            const query = uni.createSelectorQuery().in(_this);
			            query.select(selector).boundingClientRect(data => {
			                resolve(data.height)
			            }).exec();
			        })
			    },
			    async getScrollViewHeight(_this, arr) {
			        let height = 0
			        let windowHeight = await this.getSystemInfo('windowHeight')
			        for (let i = 0; i < arr.length; i++) {
			            let h = await this.getDomHeight(_this, arr[i])
			            height += h
			        }
			        return windowHeight - height
			    },
			async getPlayType() {
				const res = await getTypeList({})
				const getData = res.data.map(i => {
					return {
						title: i.name,
						value: i.id
					}
				})
				this.menuList[0].detailList = [{
						'title': '全部剧场',
						'value': ''
					},
					...getData
				]
			},
			async getTopStatics() {
				const res = await record.statisticsTimeType(this.filter)
				if (!res.success) return
				this.topStatics.estimateEarnings = res.data.estimateEarnings
				this.topStatics.rechargeMoney = res.data.rechargeMoney
				this.topStatics.refundMoney = res.data.refundMoney
			},
			result(val) {
				this.filter.playletItemId = val.playSource
				this.getTopStatics()
			},
			changePlatformTab(e) {
				this.filter.sourcePlatform = e.index ? e.index : ''
				this.getTopStatics()
			},
			changeTab(index) {
				if (this.tagCurrent === index) return;
				this.tagCurrent = index
				const range = this.tagList[this.tagCurrent].value
				this.filter.startTime = currentDate() + ' 00:00:00'
				this.filter.endTime = currentDate(false, -range) + ' 00:00:00'
				this.getTopStatics()
			},
			changeEarnType(index) {
				if(this.earningsType === index) return
				this.earningsType = index;
				this.search()
			},
			search(){
				this.list = [];
				this.mescroll.resetUpScroll();
			},
			async getList(pageNum) {
				const res = await record.getRecordList(pageNum, 10, {
					...this.filter,
					earningsType: this.earningsType
				})
				if(res.success) {
					this.mescroll.endBySize(res.data.list.length, parseInt(res.data.total));
					if (pageNum == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(res.data.list);
				} else {
					this.mescroll.endErr();
				}
			},
			upCallback(page) {
				this.getList(page.num)
			},
		}
	}
</script>

<style lang="scss">
	.container {
		background: linear-gradient(to bottom, #c6d9f7, #f0f5fc, #ffffff);
		height: 100vh;
	}

	.tags {
		padding: 20upx 0;
	}

	.tag {
		width: 93.33upx;
		border-radius: 10upx;
		padding: 10upx 0;
		color: #3a5184;
		background-color: #fff;
		text-align: center;
		font-size: 30upx;
		margin-right: 30upx;

		&.active {
			color: #2a6cc4;
			background-color: #d5e5ff;
		}

		&:last-child {
			margin: 0;
		}
	}

	.amount {
		border-radius: 20upx;
		padding: 50upx 0;
		margin-top: 20upx;
		background: linear-gradient(to right, #5a7cfe, #055de9);

		.flex-1 {
			justify-content: center;
			align-items: center;
		}

		.t1 {
			font-size: 24upx;
			color: #8eadfe;
		}

		.m1 {
			font-size: 30upx;
			color: #fff;
			font-weight: bold;
			padding-top: 10upx;
		}
	}

	.type-tag {
		padding: 10upx 20upx;
		background-color: #ffffff;
		font-size: 25upx;
		margin-right: 10upx;
		border-radius: 10upx;
		margin-top: 20upx;

		&.active {
			color: $uni-theme;
			background-color: #ecf5ff;

		}
	}

	.information {
		background-color: #fff;
		border-radius: 20upx;
		margin-bottom: 20upx;

		.img {
			width: 150upx;
			height: auto;
			border-radius: 10upx;
			overflow: hidden;
		}

		.flex-1 {
			padding-left: 20upx;
			width: 500upx;

			.title {
				display: block;
				color: #323333;
				font-size: 30upx;
				font-weight: 500;
				padding: 10upx 0;
			}

			.red {
				color: $u-error;
			}

			text {
				color: #aaa;
				font-size: 25upx;
				padding: 2upx 0;
			}

			.wage1 {
				padding-top: 10upx;
			}

			.wage1 text {
				color: $u-main-color;
				font-size: 27upx;
			}
		}
	}
</style>