<template>
	<view class="head-container">
		<div class="new-content">
			<div class="header-card">
				<image :src="'/static/images/revenue/340000.png'" mode="aspectFit" class="head-log"></image>
				<view class="head-cost-text uni-flex ai-center">实时营收<div class="date-tag"><span>{{nowDay}} 星期{{getWeekDay()}}</span></div></view>
				<div class=" uni-flex ai-base jc-center top-number">
					<text class="top-number-amount">{{today.timeMoney|| '0.00'}}</text>
					<span class="top-number-unit">(元)</span>
				</div>

				<p class="header-today-info">
					<span style="margin-right: 12rpx;">客单交易</span>
					<text>{{today.totalTicketCount || 0}}</text>
					<span style="font-size: 22rpx;">(单)</span>
					<span class="ml-135 fs12 " style="margin-right: 12rpx;">客单均价</span>
					<text>{{today.avrticketCount || '0.00'}}</text>
					<span style="font-size: 22rpx;">(元)</span>
				</p>

			</div>
		</div>
		<view class="revenue-card-cont">
			<div class="top-revenue-card">
				<div class="uni-flex jc-between header-date ai-center">
					<div class="revenue-card-title">对客营收 </div>
					<picker mode="date" @change="bindDateChange" :end="{lastDay}" start="2019-12-01" :value="selectDate">
						<text class="revenue-date">{{headMsg.dayOfShow}} 星期{{getWeekDay(selectDate)}}</text>
					</picker>
				</div>
				<div class="uni-flex ai-base jc-center center-amount">
					<text class="revenue-alltime-amount">
						{{headMsg.totalMoneyShow}}
					</text>
					<span class="amount-unit">(元)</span>
				</div>
			</div>
			<div class="uni-flex jc-between">
				<div class="revenue-tag">
					<span>计划营收</span>
					<div class="amount">{{headMsg.budgetamoutShow}}</div>
				</div>
				<div class="revenue-tag">
					<span>相比计划</span>
					<div :class="headMsg.BUDGETAMOUNT< headMsg.totalMoney ? 'up-text-title':'down-text-title'">
						{{$util.fmoney(headMsg.diffBudgetTotal) }} 
						<span style="font-size: 24rpx;margin-left: 12rpx;">{{headMsg.diffBili}}%</span>
					</div>
				</div>
			</div>
			<div class="view-bottom" @click="toggleCard">
				<text class="uni-icon uni-icon-arrowup" :class="{'up':isup}"></text>
			</div>
		</view>
		<div class="model-content" :class="{'hidden': isup }">
			<!-- 营收数据总览 -->
			<div class="uni-flex justify-around" style="padding-top:18rpx;">

				<div class="check-unit">
					<text>长款金额</text>
					<div class="check-price-color">{{headMsg.DIFFERENT_PRICE_MORE}} <text>元</text></div>
				</div>
				<div class="check-unit">
					<text>短款金额</text>
					<div class="check-price-color">{{headMsg.DIFFERENT_PRICE_LESS}} <text>元</text></div>
				</div>
				<div class="check-unit">
					<text>客单交易</text>
					<div class="check-price-color">{{headMsg.TICKETCOUNT}} <text>笔</text></div>
				</div>
				<div class="check-unit">
					<text>客单均价</text>
					<div class="check-price-color">{{headMsg.TICKETAVE}} <text>元</text></div>
				</div>
			</div>
			<div class="uni-flex justify-around mode-content" style="padding-bottom: 24rpx;">
				<div class="check-unit">
					<text>优惠金额</text>
					<div class="check-price-color">{{headMsg.TOTALOFFAMOUNT}} <text>元</text></div>
				</div>
				<div class="check-unit">
					<text>移动支付</text>
					<div class="check-price-color">{{headMsg.MOBILEPAYMENT}} <text>元</text></div>
				</div>
				<div class="check-unit">
					<text>商品出售</text>
					<div class="check-price-color">{{headMsg.COMMODITY_COUNT}} <text>件</text></div>
				</div>
				<div class="check-unit">
					<text>商品均价</text>
					<div class="check-price-color">{{headMsg.COMMODITYAVE}} <text>元</text></div>
				</div>
			</div>
		</div>
	</view>
</template>
<script>
	export default {
		props: ['headMsg', 'today', 'lastDay','nowDay', 'isup','selectDate'],
		
		methods: {
			bindDateChange(e) {
				this.$emit('bindDateChange', e)
			},
			toggleCard() {
				this.$emit('toggle', this.isup)
			},
			getWeekDay(dayDate){
				
				let show_day = ['日','一','二','三','四','五','六']
				let date = dayDate ? new Date(dayDate): new Date();
				let day = date.getDay()
				return show_day[day]
			}
		}
	}
</script>
<style>
	.head-container {
		background: url('/static/images/revenue/340000bg.png') no-repeat top;
		background-size: contain;
	}

	.new-content {
		color: #fff;
		box-sizing: border-box;
		padding-top: 40rpx;
	}

	.new-content .text-title {
		flex: 1;
		text-align: center;
		font-weight: 600;
	}

	.new-content .header-card {
		padding: 0 30rpx;
		color: #BED4F4;
		position: relative;
	}
	.head-cost-text {
		color: #BED4F4;
		font-size: 30rpx;	
	}
	.head-cost-text .date-tag {
		display: flex;
		border-radius: 20rpx;
		padding: 0 16rpx;
		background: #6179BF;
		color: #C6D1ED;
		font-size: 22rpx;
		margin-left: 16rpx;
		align-items: center;
		
	}
	.date-tag::before {
		content: '';
		background: url(/static/images/revenue/date-ico.png) no-repeat center;
		width: 21rpx;
		height: 32rpx;
		background-size: contain;
		display: block;
		margin-right: 8rpx;
		
	}
	.head-log {
		position: absolute;
		right: 19rpx;
		top: -4rpx;
		width: 125rpx;
		height: 91rpx;
	}

	.new-content .top-number {
		padding-top: 16rpx;
		padding-bottom: 16rpx;
		padding-left: 4rpx;
		letter-spacing: 2rpx;
		line-height: 1.1;
		transition: all 1s;
	}
	.new-content .top-number-unit {
		font-size: 24rpx;
		background-image: -webkit-linear-gradient(top, #ffffff 40%, #b3c1e7 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.new-content .top-number-amount {
		background-image: -webkit-linear-gradient(top, #ffffff 40%, #b3c1e7 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-size: 76rpx;
		font-family: 'Bahnschrift Regular';
	}

	.new-content p.header-today-info {
		font-size: 24rpx;
	}

	.new-content .header-today-info text {
		font-family: 'Bahnschrift Regular';
		font-size: 30rpx;
	}

	.ml-135 {
		margin-left: 135rpx;
	}

	.heade-text {
		text-align: right;
		line-height: 1;
		letter-spacing: 0;
		color: #BED4F4;
		font-family: 'Bahnschrift Regular';
		display: flex;
		align-items: center;
	}

	.header-date {
		padding: 25rpx 0 16rpx 24rpx;
		/* background: linear-gradient( to left,#ffffff 0%, #e3e8fd 100%); */
		margin-bottom: 16rpx;
	}

	.header-date picker {
		color: #fff;
		padding: 2rpx 46rpx 0rpx 20rpx;
		position: relative;
		/* width: 180rpx; */
		border-radius: 24rpx 0px 0px 25rpx ;
		background: #8994b8;
		font-size: 26rpx;
		box-sizing: border-box;
	}

	.header-date picker .revenue-date:before {
		content: '';
		position: absolute;
		width: 0rpx;
		height: 0rpx;
		border: 0rpx;
		border-left: 12rpx solid transparent;
		border-right: 12rpx solid transparent;
		border-top: 12rpx solid #fff;
		right: 16rpx;
		top: 20rpx;
		display: block;
		border-radius: 6rpx;
	}

	.revenue-card-cont {
	
		border-radius: 12rpx;
		margin: 38rpx 20rpx 0 20rpx;
		overflow: hidden;
		box-shadow: 1rpx 2rpx 8rpx 0px rgba(224, 224, 224, 0.40);
		background: linear-gradient(to top, #ffffff 0%, #ffffff 51%, #E5E9FC 100%);

	}

	.top-revenue-card {
	
		/* background: url(/static/images/revenue/card-title.png) no-repeat left top;
		background-size: 187rpx; */
	}

	.revenue-card-title {
		font-weight: 500;
		text-align: left;
		font-size: 30rpx;
	}

	.center-amount,.revenue-alltime-amount {
		background-image: -webkit-linear-gradient(bottom, #e4a061 0%, #e3b890 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		justify-content: center;
	}
	.amount-unit {
		background-image: -webkit-linear-gradient(bottom, #e4a061 0%, #e3b890 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-size: 26rpx;
	}
	.revenue-alltime-amount {
		font-size: 86rpx;
		font-family: 'Bahnschrift Regular';
		font-weight: 400;
		text-align: center;
		line-height: 1.3;
	}

	.revenue-tag {
		color: #7E7E7E;
		margin-top: 20rpx;
		text-align: center;
		flex: 1;
		font-size: 24rpx;
		position: relative;
	}
	.revenue-tag +.revenue-tag::before  {
		content: '';
		display: inline-block;
		width: 2rpx;
		height: 66rpx;
		background: #ededed;
		position: absolute;
		left: 0;
		top: 8rpx;
	}
	.revenue-tag .amount {
		color: #252525;
	}

	.up-text-title {
		color: #6EB92B;
	}
	.up-text-title::before {
		content: "+";
	}
	.up-text-title:after {
		content: "";
		margin-left: 4rpx;
		width: 16rpx;
		height: 18rpx;
		display: inline-block;
		background: url('/static/images/revenue/up-arrow.png') no-repeat center;
		background-size: contain;

	}

	.down-text-title {
		color: #EE3E3E;
	}
	.down-text-title::before {
		content: '-';
	}
	.down-text-title:after {
		content: "";
		margin-left: 4rpx;
		width: 16rpx;
		height: 18rpx;
		display: inline-block;
		background: url('/static/images/revenue/down-arrow.png') no-repeat center;
		background-size: contain;

	}

	.check-unit {
		font-size: 24rpx;
		
		flex: 1;
		text-align: center;
		padding-top: 16rpx;
	}

	.check-price-color {
		font-size: 32rpx;
		color: #868686;
		line-height: 1.2;
		font-family: 'Bahnschrift Regular';
	}

	.check-price-color text {
		font-size: 22rpx;
	}

	.view-bottom {
		transition: 0.2s all;
		text-align: center;
		height: 70rpx;
		width: 700rpx;
		margin: 0 auto;
		background-color: #fff;
		line-height: 70rpx;
	}

	.uni-icon-arrowup {
		color: #5EA9E9;
		font-size: 28rpx;
		transition: all .25s;
	}
	.up {
		transform: rotate(-180deg);
	}
	.model-content {
		max-height: 236rpx;
		transition: max-height .25s;
		background-color: #f9f9f9;
		box-sizing: border-box;
		margin: 0 20rpx 8px 20rpx;
		border-radius: 0 0 12rpx 12rpx;
	}

	.hidden {
		/* padding-top: 0rpx; */
		max-height: 0;
		overflow: hidden;
		transition: max-height .25s;
	}
</style>
