<template>
	<view class="sales-warp">
		<!--销售数据统计 -->
		<view class="content-data">
			<view class="date-type">
				<text v-for="(item, index) in tabNav" :key="index" :class="[index == navInd ? 'active_day' : '']" @click="seleteTime(index)">{{item.name}}</text>
			</view>
			<view class="total">
				<view class="item-box">
					<u-count-to v-if="navInd==0" :end-val="bizData&&bizData.sales&&(bizData.sales.dayTotalQty || bizData.sales.dayTotalQty==0) ? bizData.sales.dayTotalQty : 0" separator=","></u-count-to>
					<u-count-to v-if="navInd==1" :end-val="bizData&&bizData.sales&&(bizData.sales.weekSalesQty || bizData.sales.weekSalesQty==0) ? bizData.sales.weekSalesQty : 0" separator=","></u-count-to>
					<u-count-to v-if="navInd==2" :end-val="bizData&&bizData.sales&&(bizData.sales.monthSalesQty || bizData.sales.monthSalesQty==0) ? bizData.sales.monthSalesQty : 0" separator=","></u-count-to>
					<view>销售总单量(个)</view>
				</view>
				<view class="item-box">
					<u-count-to v-if="navInd==0" :end-val="bizData&&bizData.sales&&(bizData.sales.dayTotalAmount || bizData.sales.dayTotalAmount==0) ? bizData.sales.dayTotalAmount : 0" separator="," :decimals="2"></u-count-to>
					<u-count-to v-if="navInd==1" :end-val="bizData&&bizData.sales&&(bizData.sales.weekSalesAmount || bizData.sales.weekSalesAmount==0) ? bizData.sales.weekSalesAmount : 0" separator="," :decimals="2"></u-count-to>
					<u-count-to v-if="navInd==2" :end-val="bizData&&bizData.sales&&(bizData.sales.monthSalesAmount || bizData.sales.monthSalesAmount==0) ? bizData.sales.monthSalesAmount : 0" separator="," :decimals="2"></u-count-to>
					<view>销售总金额(￥)</view>
				</view>
			</view>
		</view>
		<!-- 产品报价及新增销售单 -->
		<view class="nav-cont flex align_center justify_between">
			<view class="nav-item" @click="toPage('/pages/sales/productPricing')">
				<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" @click="toPage('')">
				<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" @click="toPage('/pages/sales/list')">查看全部<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>
									<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;vertical-align: text-top;" />
									<u-tag v-if="item.salesBillSourceDictValue" :text="item.salesBillSourceDictValue" :bg-color="$config('primaryColor')" mode="dark" shape="circle" size="mini" style="vertical-align: text-top;" />
								</view>
								<view class="color_6 font_13">{{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="button-box">
							<u-button @click="handleFun('audit', item)" size="mini" :hair-line="false" plain type="primary" hover-class="none" v-if="item.billStatus == 'WAIT_AUDIT'">审核</u-button>
							<u-button @click="handleFun('out', item)" size="mini" :hair-line="false" plain type="primary" hover-class="none" v-if="item.billStatus == 'WAIT_OUT_WAREHOUSE'">出库</u-button>
							<u-button @click="handleEdit(item)" size="mini" :hair-line="false" plain type="primary" hover-class="none" v-if="((item.salesBillSource == 'SATELLITE' || item.salesBillSource == 'SALES') && (item.billStatus == 'WAIT_AUDIT' || item.billStatus == 'WAIT_SUBMIT' || item.billStatus == 'AUDIT_REJECT'))">编辑</u-button>
							<u-button @click="handleFun('del', item)" size="mini" :hair-line="false" plain type="primary" hover-class="none" v-if="((item.salesBillSource == 'SATELLITE' || item.salesBillSource == 'SALES') && item.billStatus != 'FINISH')">删除</u-button>
							<u-button @click="handleEdit(item)" size="mini" :hair-line="false" plain type="primary" hover-class="none" v-if="(item.salesBillSource == 'PURCHASE' && (item.billStatus == 'WAIT_AUDIT' || item.billStatus == 'SUPERIOR_CHANGE'))">改单</u-button>
							<u-button @click="handleFun('cancel', item)" size="mini" :hair-line="false" plain type="primary" hover-class="none" v-if="(item.salesBillSource == 'PURCHASE' && (item.billStatus == 'WAIT_AUDIT' || item.billStatus == 'SUPERIOR_CHANGE'))">取消</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>
		<!-- 审核弹框 -->
		<common-modal :openModal="auditModal" content="请点击下方按钮确认操作" confirmText="审核通过" cancelText="审核不通过" :isClose="true" @confirm="handleAudit('WAIT_OUT_WAREHOUSE')" @cancel="handleAudit('AUDIT_REJECT')" @close="auditModal=false" />
		<!-- 出库弹框 -->
		<common-modal :openModal="outModal" content="确认要出库吗？" @confirm="handleOut" @close="outModal=false" />
		<!-- 删除/取消弹框 -->
		<common-modal :openModal="delModal" :content="delText" @confirm="handleDel" @close="delModal=false" />
	</view>
</template>

<script>
	import commonModal from '@/pages/common/commonModal.vue'
	import { toThousands } from '@/libs/tools'
	import { bizData, salesList, salesWriteAudit, salesWriteStockOut, salesDel } from '@/api/sales'
	export default{
		components: { commonModal },
		data(){
			return{
				tabNav: [
					{ name: '今日', ind: 0 },
					{ name: '本周', ind: 1 },
					{ name: '本月', ind: 2 }
				],
				navInd: 0,
				bizData: null, // 销售数据统计
				theme: '',
				listData: [],
				pageNo: 1,
				pageSize: 6,
				totalNum: 0,
				noDataText: '暂无数据',
				toThousands,
				auditModal: false,  // 审核弹框
				dataInfo: null,
				outModal: false,  // 出库弹框
				delModal: false,  // 删除/取消弹框
				delText: '确认要删除吗？'
			}
		},
		onLoad() {
			this.theme = getApp().globalData.theme
		},
		onShow() {
			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){
				this.navInd = val
			},
			toPage(url){
				uni.navigateTo({ url: url })
			},
			getBizData () {
				bizData({}).then(res => {
					if (res.status == 200) {
						this.bizData = res.data || null
					} else {
						this.bizData = null
					}
				})
			},
			// 查看详情
			getDetail(data){},
			// 操作
			handleFun(type, data){
				this.dataInfo = data
				if(type == 'audit'){  // 审核
					this.auditModal = true
				}else if(type == 'out'){  // 出库
					this.outModal = true
				}else if(type == 'del'){  // 删除
					this.delText = '确认要删除吗？'
					this.delModal = true
				}else if(type == 'cancel'){  // 取消
					this.delText = '确认要取消吗？'
					this.delModal = true
				}
			},
			// 审核通过或不通过
			handleAudit(billStatus){
				salesWriteAudit({
					id: this.dataInfo.id,
					billStatus: billStatus
				}).then(res => {
					if (res.status == 200) {
						this.toashMsg(res.message)
						this.getList(1)
						this.auditModal = false
					} else {
						this.auditModal = false
					}
				})
			},
			// 出库
			handleOut(){
				salesWriteStockOut({ salesBillSn: this.dataInfo.salesBillSn }).then(res => {
					if (res.status == 200) {
						this.toashMsg(res.message)
						this.getList(1)
						this.outModal = false
					} else {
						this.outModal = false
					}
				})
			},
			// 删除
			handleDel(){
				salesDel({ id: this.dataInfo.id }).then(res => {
					if (res.status == 200) {
						this.toashMsg(res.message)
						this.getList(1)
						this.delModal = false
					} else {
						this.delModal = false
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.sales-warp{
		width: 100%;
		padding: 20rpx 20upx;
		.color_6{
			color: #666;
		}
		.font_13{
			font-size: 26upx;
		}
		.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 20upx;
				border-radius: 50upx;
				border: 1upx solid #eee;
				text{
					display: inline-block;
					padding: 10upx 0;
					width: 33%;
					text-align: center;
				}
				text:first-child{
					border-top-left-radius: 50upx;
					border-bottom-left-radius: 50upx;
				}
				text:last-child{
					border-top-right-radius: 50upx;
					border-bottom-right-radius: 50upx;
				}
				text: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{
				margin-bottom: 14upx;
				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{
				height: calc(100vh - 458upx);
				.sales-list-main{
					.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;
							.list-item-line{
								padding: 8upx 0;
							}
							text{
								color: #666;
							}
						}
						.button-box{
							text-align: right;
							padding-top: 10upx;
							border-top: 1px dashed #e4e7ed;
							button{
								margin: 0 10upx;
							}
						}
					}
				}
			}
		}
	}
</style>
