<template>
	<view class="sales-warp">
		<!--销售数据统计 -->
		<view class="content-data">
			<view class="date-type">
				<text :class="['type',timeType=='day' ? 'active_day' : '']" @click="seleteTime(0)">今日</text>
				<text :class="['type',timeType=='week' ? 'active_day' : '']" @click="seleteTime(1)">本周</text>
				<text :class="['type',timeType=='mounth' ? 'active_day' : '']" @click="seleteTime(2)">本月</text>
			</view>
			<view class="total">
				<view class="item-box">
					<u-count-to  :end-val="salesCount" separator=","></u-count-to>
					<view>销售总单量(个)</view>
				</view>
				<view class="item-box">
					<u-count-to :end-val="salesAmount" separator="," :decimals="2"></u-count-to>
					<view>销售总金额(￥)</view>
				</view>
			</view>
		</view>
		<!-- 产品报价及新增销售单 -->
		<view class="nav-cont flex align_center justify_between">
			<view class="nav-item">
				<u-image class="nav-pic" style="margin-top: 5upx;" :src="`../../static/${theme}/navIcon/price_icon.png`" width="60" height="60"></u-image>
				<text class="nav-txt" style="margin-top: 5upx;">产品报价</text>
			</view>
			<view class="nav-item">
				<u-image class="nav-pic" :src="`../../static/${theme}/navIcon/sale_icon.png`" width="70" height="70"></u-image>
				<text class="nav-txt">新增销售单</text>
			</view>
		</view>
		<!-- 销售单 -->
		<view class="sales-list">
			<view class="title">
				<text class="title-name">销售单</text>
				<view class="title-all">查看全部<u-icon name="arrow-right" color="#666" size="28"></u-icon></view>
			</view>
			<scroll-view class="sales-list-con" scroll-y @scrolltolower="onreachBottom">
				<view class="sales-list-main">
					<view class="sales-list-item" v-for="(item, index) in listData" :key="item.id" @click="getDetail(item)">
						<view class="list-item-tit">
							<view class="u-line" :style="{backgroundColor: $config('primaryColor')}"></view>{{item.buyerName}}
						</view>
						<view class="list-item-con">
							<view class="list-item-line flex align_center justify_between">
								<view class="">
									<view style="display: inline-block;margin-right: 6upx;">{{item.salesBillNo}}</view>
									<u-tag v-if="item.oosFlag==1" text="急件" :bg-color="$config('errorColor')" mode="dark" shape="circle" size="mini" style="margin-right: 6upx;" />
									<u-tag v-if="item.salesBillSourceDictValue" :text="item.salesBillSourceDictValue" :bg-color="$config('primaryColor')" mode="dark" shape="circle" size="mini" />
								</view>
								<view class="color_6">{{item.createDate || '--'}}</view>
							</view>
							<view class="list-item-line flex align_center justify_between">
								<view>总款数：<text>{{toThousands(item.totalCategory||0)}}</text></view>
								<view>总数量：<text>{{toThousands(item.totalQty||0)}}</text></view>
								<view>总售价：<text>{{toThousands(item.totalAmount||0, 2)}}</text></view>
							</view>
							<view class="list-item-line flex align_center justify_between">
								<view class="flex_1">财务状态：<text>{{item.financialStatusDictValue||'--'}}</text></view>
								<view class="flex_1">收款方式：<text>{{item.settleStyleEntity&&item.settleStyleEntity.name||'--'}}</text></view>
							</view>
						</view>
						<view class="">
							<!-- <u-button @click="handleOutGoods" type="success" :custom-style="customStyle" hover-class="none" shape="circle">立即出库</u-button> -->
						</view>
					</view>
					<view v-if="listData && listData.length == 0">
						<u-empty :text="noDataText" mode="list" :img-width="200" :margin-top="30"></u-empty>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { toThousands } from '@/libs/tools'
	import { bizData, salesList } from '@/api/sales'
	export default{
		data(){
			return{
				timeType:'day',
				bizData:null, // 销售数据统计
				salesCount:0, // 销售总单数
				salesAmount:0, // 销售总金额
				theme: '',
				listData: [],
				pageNo: 1,
				pageSize: 6,
				totalNum: 0,
				noDataText: '暂无数据',
				toThousands
			}
		},
		onLoad() {
			this.theme = getApp().globalData.theme
			this.getBizData()
			this.getList()
		},
		methods:{
			// 列表
			getList(pageNo){
				const _this = this
				if (pageNo) {
					this.pageNo = pageNo
				}
				salesList({ pageNo: this.pageNo, pageSize: this.pageSize }).then(res => {
					if (res.status == 200) {
						if(this.pageNo>1){
							this.listData = this.listData.concat(res.data.list || [])
						}else{
							this.listData = res.data.list || []
						}
						this.totalNum = res.data.count || 0
					} else {
						this.listData = []
						this.totalNum = 0
						this.noDataText = res.message
					}
				})
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if(this.listData.length < this.totalNum){
					this.pageNo += 1
					this.getList()
				}
			},
			seleteTime(val){
				if(val==0){
					this.timeType='day'
				}else if(val==1){
					this.timeType='week'
				}else{
					this.timeType='mounth'
				}
				this.getBizData()
			},
			toPage(url){
				uni.navigateTo({ url: url })
			},
			getBizData () {
				bizData({}).then(res => {
					if (res.status == 200) {
						this.bizData = res.data
						if(this.timeType=='day'){
							this.salesCount=this.bizData&&this.bizData.purchaseBill&&(this.bizData.purchaseBill.dayTotalQty || this.bizData.purchaseBill.dayTotalQty==0) ? this.bizData.purchaseBill.dayTotalQty : 0
							this.salesAmount=this.bizData&&this.bizData.purchaseBill&&(this.bizData.purchaseBill.dayDiscountedAmount || this.bizData.purchaseBill.dayDiscountedAmount==0) ? this.bizData.purchaseBill.dayDiscountedAmount : 0
						}else if(this.timeType=='week'){
							this.salesCount=this.bizData&&this.bizData.purchaseBill&&(this.bizData.purchaseBill.weekPurchaseQty || this.bizData.purchaseBill.weekPurchaseQty==0) ? this.bizData.purchaseBill.weekPurchaseQty : 0
							this.salesAmount=this.bizData&&this.bizData.purchaseBill&&(this.bizData.purchaseBill.weekDiscountedAmount || this.bizData.purchaseBill.weekDiscountedAmount==0) ? this.bizData.purchaseBill.weekDiscountedAmount : 0
						}else{
							this.salesCount=this.bizData&&this.bizData.purchaseBill&&(this.bizData.purchaseBill.monthPurchaseQty || this.bizData.purchaseBill.monthPurchaseQty==0) ? this.bizData.purchaseBill.monthPurchaseQty : 0
							this.salesAmount=this.bizData&&this.bizData.purchaseBill&&(this.bizData.purchaseBill.monthDiscountedAmount || this.bizData.purchaseBill.monthDiscountedAmount==0) ? this.bizData.purchaseBill.monthDiscountedAmount : 0
						}
					} else {
						this.bizData = null
					}
				})
			},
			// 查看详情
			getDetail(data){}
		}
	}
</script>

<style lang="scss">
	.sales-warp{
		width: 100%;
		padding: 20rpx 30upx;
		.color_6{
			color: #666;
		}
		.content-data{
			background-color: #fff;
			padding: 20upx 20upx;
			border-radius: 20upx;
			box-shadow: 3upx 2upx 6upx #eee;
			margin-bottom: 20upx;
			.date-type{
				margin: 0 120upx 30upx 120upx;
				border-radius: 50upx;
				border: 1upx solid #eee;
				.type{
					display: inline-block;
					padding: 10upx 0;
					width: 33%;
					text-align: center;
				}
				.type:first-child{
					border-top-left-radius: 50upx;
					border-bottom-left-radius: 50upx;
				}
				.type:last-child{
					border-top-right-radius: 50upx;
					border-bottom-right-radius: 50upx;
				}
				.type:not(:last-child){
					border-right: 1upx solid #eee;
				}
				.active_day {
				  background: rgb(0, 122, 255);
				  color: #fff;
				}
			}
			.total{
				display: flex;
				.item-box{
					text-align: center;
					width: 50%;
					color:#999;
				}
				.item-box:first-child{
					border-right: 1px solid #e4e7ed;
				}
			}
		}
		.nav-cont{
			.nav-item{
				width: 49%;
				border-radius: 25upx;
				background-color: #ffffff;
				padding: 14upx 0;
				box-shadow: 3upx 2upx 6upx #eee;
				margin-bottom: 20upx;
				text-align: center;
				.nav-pic{
					margin: 0 auto;
				}
				.nav-txt{
					font-size: 28upx;
					color: #666666;
				}
			}
		}
		.sales-list{
			.title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.title-name{
					font-size: 32upx;
					color: #333;
					font-weight: 1000;
				}
				.title-all{
					color: #666;
				}
			}
			.sales-list-con{
				.sales-list-main{
					padding-top: 14upx;
					.sales-list-item{
						background: #ffffff;
						padding: 20upx;
						margin-bottom: 25upx;
						border-radius: 25upx;
						box-shadow: 1px 1px 3px #EEEEEE;
						.list-item-tit{
							padding-bottom: 12upx;
							border-bottom: 1px dashed #e4e7ed;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							.u-line{
								display: inline-block;
								width: 6upx;
								height: 40upx;
								background-color: red;
								vertical-align: bottom;
								margin: 0 20upx 0 10upx;
							}
						}
						.list-item-con{
							padding: 10upx 0;
							border-bottom: 1px solid #e4e7ed;
							.list-item-line{
								padding: 8upx 0;
							}
							text{
								color: #666;
							}
						}
					}
				}
			}
		}
	}
</style>
