<template>

	<view style="kode">
		<z-paging ref="paging" v-model="list" @query="queryList">
			<template slot="top">
				<u-navbar title="经营日报" :autoBack="true" leftIconSize="0" placeholder>
					<u-icon name="arrow-left" slot="left" color="#333333" size="24"></u-icon>
					<!-- <u-icon name="list" slot="right" color="#333333" size="24" @click="$refs.selectPopup.start()"></u-icon> -->
				</u-navbar>
			</template>



			<view class="time">
				<view class="time">
					<view>{{day_time}}</view>
				</view>
				 <u-datetime-picker
				                :show="show"
				                v-model="value1"
				                mode="date"
								@cancel='show=false'
								@confirm='confirm'
				        ></u-datetime-picker>
			</view>

		<view class="df fw">
			<view class="Datadetails" v-for="(item,index) in list" :key="item.id">
				<view class="">
					<div class="name">{{item.title}}</div>
				</view>
				<view class="">
					<div class="price">{{item.num}}</div>
				</view>
				<view class="" v-if="item.mark">
					<div class="Dailyrise">({{item.mark}})</div>
				</view>
				<view class="imagea df aic jcsa">
				<!-- '/upload/weapp/pageSalesman/reportForm/ss.png'上身 -->
				<!-- '/upload/weapp/pageSalesman/reportForm/xj.png'下降 -->
				<!-- 'upload/weapp/pageSalesman/customer/ic_dash.png  持平' -->
					<div class="percentage" v-if="item.type==0">{{item.rate | filterCount}}<image :src="$util.img('/upload/weapp/pageSalesman/customer/ic_dash.png')" mode="widthFix"></div>
					<div class="percentage" v-if="item.type==1">{{item.rate | filterCount}}<image :src="$util.img('/upload/weapp/pageSalesman/reportForm/ss.png')" mode="widthFix"></div>
					<div class="percentage" v-if="item.type==2">{{item.rate | filterCount}}<image :src="$util.img('/upload/weapp/pageSalesman/reportForm/xj.png')" mode="widthFix"></div>
				</view>
			</view>
		</view>
		<!-- <view class="preferential df aic">
			<div class="f1 df fdc aic Discount">
				<div class="">优惠卷折扣</div>
				<div>2000.00</div>
			</div>
			<div style="width: 2rpx;height: 64rpx;background: #D8D8D8;border-radius: 10rpx;"></div>
			<div class="f1 df fdc aic Specialdiscount">
				<div class="">特批优惠</div>
				<div>520.00</div>
			</div>
		</view>
		<view class="taxation df aic">
			<div class="f1 df fdc aic move">
				<div class="">运费</div>
				<div>00.00</div>
			</div>
			<div style="width: 2rpx;height: 64rpx;background: #D8D8D8;border-radius: 10rpx;"></div>
			<div class="f1 df fdc aic tax">
				<div class="">税费</div>
				<div>00.00</div>
			</div>
		</view> -->
	</z-paging>
			<!-- <tabbar :tabIndex="1"></tabbar> -->


			<selectPopup ref="selectPopup" :tochild="chilData"></selectPopup>


	</view>

</template>

<script>
	import tabbar from "@/components/pageSalesman/tabbar/tabbar.vue"
	import lineChart from "../components/lineChart.vue"
	import selectPopup from "../components/selectPopup.vue"
	// const timesfm = require('@/common/js/timesfm.js')
	export default {
		components: {
			tabbar,
			lineChart,selectPopup
		},
		data() {
			return {
				chilData:'经营日报',
				show: false,
				day_time:'',
				value1: Number(new Date()),
				list: []
			};
		},
		onLoad() {
			uni.$on('dailyone',(data)=>{
				this.day_time=data.day_time
				this.$api.sendRequest({
					url:'/api/salasmanstat/todayStat',
					data:{
						day_time:data.day_time
					},
					success:res=>{
						this.list=res.data
						console.log(res.data,'经营日报详情');
					}
				})
				uni.$off('dailyone')
			})
		},
		onShow() {
			//获取当前时间
			// let timestamp = Date.parse(new Date());
			// this.day_time=this.times(timestamp)

		},
		methods:{
			queryList(pageNo, pageSize) {
			this.$refs.paging.complete(this.list);

			},
			confirm(value){
				console.log(value);
				// console.log(timesfm(value));
				console.log(this.times(value.value));
				this.day_time=this.times(value.value)
				this.$api.sendRequest({
					url:'/api/salasmanstat/todayStat',
					data:{
						day_time:this.day_time
					},
					success:res=>{
						this.list=res.data
						console.log(res.data,'经营日报详情');
					}
				})
				this.show=false
			},
			//时间转换
			times(num){
				let now=new Date(Number(num))
				let n=now.getFullYear()
				let y=now.getMonth()+1
				let r =now.getDate();
				return n+'-'+y+'-'+r
			}
		},
		filters:{
			filterCount(num){
				let a=num.substr(0,num.length-1)
				let b=Math.round(a)
				return b+'%'
			},

		}
	}
</script>

<style lang="scss">
	.time {
		padding: 24rpx 0 20rpx 24rpx;
		// margin: 24rpx 0 20rpx 24rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 44rpx;
		// margin-top: 80rpx;
	}

	.Datadetails {
		// width: 210rpx;
		// height: 268rpx;
		// background: #FFFFFF;
		// // border-radius: 16rpx;
		// margin: 20rpx 24rpx 0 24rpx;
		// margin-top: 20rpx;
		width: 216rpx;
		height: 268rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		// border: 1px solid red;
		image{
			width: 28rpx;
			height: 28rpx;
		}

	}

	.Datadetails:nth-child(1) {
		margin-left: 24rpx;
	}

	.Datadetails:nth-child(2) {
		margin: 0 26rpx;
	}

	.Datadetails:nth-child(4) {
		margin-left: 24rpx;

	}

	.Datadetails:nth-child(5) {
		margin: 0 26rpx;
	}

	.Datadetails:nth-child(n+4) {
		// margin-left: 24rpx;
		margin-top: 24rpx;
	}
	.Datadetails:nth-child(7) {
		margin-left: 24rpx;
	}
	.Datadetails:nth-child(8) {
		margin-left: 24rpx;
	}
	.Datadetails:nth-child(9) {
		margin-left: 24rpx;
	}
	.name {
		// width: 120px;
		// height: 34px;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 34rpx;
		padding-top: 30rpx;
		box-sizing: border-box;
		text-align: center;
	}

	.price {
		text-align: center;
		margin-top: 12rpx;
		font-size: 36rpx;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: #333333;
		line-height: 42rpx;
	}

	.Dailyrise {
		text-align: center;
		margin-top: 32rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 34rpx;
	}
	.percentage {
		text-align: center;
		margin-top: 12rpx;
	}
	.preferential {
		// border: 1px solid red;
		width: 702rpx;
		height: 150rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto;
		margin-top: 24rpx;
	}
	.Discount div:nth-child(1){
		// width: 120rpx;
		// height: 34rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 34rpx;
	}
	.Discount div:nth-child(2){
		// width: 114rpx;
		// height: 42rpx;
		font-size: 36rpx;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: #333333;
		line-height: 42rpx;
		margin-top: 12rpx;
	}
	.Specialdiscount div:nth-child(1){
		// width: 120rpx;
		// height: 34rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 34rpx;
	}
	.Specialdiscount div:nth-child(2){
		width: 114rpx;
		height: 42rpx;
		font-size: 36rpx;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: #333333;
		line-height: 42rpx;
		margin-top: 12rpx;
	}
	.taxation{
		// border: 1px solid red;
		margin: 0 auto;
		width: 702rpx;
		height: 150rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 24rpx;
	}
	.move div:nth-child(1){
		// width: 120rpx;
		// height: 34rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 34rpx;
	}
	.move div:nth-child(2){
		// width: 114rpx;
		// height: 42rpx;
		font-size: 36rpx;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: #333333;
		line-height: 42rpx;
		margin-top: 12rpx;
	}
	.tax div:nth-child(1){
		// width: 120rpx;
		// height: 34rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 34rpx;
	}
	.tax div:nth-child(2){
		// width: 114rpx;
		// height: 42rpx;
		font-size: 36rpx;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: #333333;
		line-height: 42rpx;
		margin-top: 12rpx;
	}
</style>
