<template>
	<view>
		<view class="tab_list" style="margin-top:0;">
			<view class="tabli" :class="typeIndex == 0 ? 'tabliactive' : ''" @click="changeFirTab(0)">全部</view>
			<view class="tabli" :class="typeIndex == 1 ? 'tabliactive' : ''" @click="changeFirTab(1)">我创建的</view>
			<view class="tabli" :class="typeIndex == 2 ? 'tabliactive' : ''" @click="changeFirTab(2)">下属创建的</view>
			<view class="tabli" :class="typeIndex == 3 ? 'tabliactive' : ''" @click="changeFirTab(3)">抄送给我的</view>
		</view>
		
		<view class="select_warp">
			<view class="searchbox">
				<view class="searchtext" @click="toQuery">
					<image style="width: 30rpx;height: 30rpx;margin-right: 5rpx;" 
					:src="BASE_IMG_URL+'shaixuan2.png'" mode="scaleToFill"></image>筛选
				</view>
			</view>
			<uni-popup ref="screenpopup" type="top" background-color="#fff">
				<view class="warpbox">
					<scroll-view scroll-y class="scrollbox" style="height:680rpx;background:#fff;">
						<!--筛选模块  -->
						<view class="screen_content" @tap.stop.prevent>
							<view class="fir_li" v-if="typeIndex == 2">
								<view class="li_label">归属人</view>
								<picker @change="changeAscrip" :value="ascripIndex" :range="ascripList" :range-key="'name'">
									<view class="li_box" >
										<view class="form_right" style="text-align: center;">
											<view :class="ascripList[ascripIndex] ? 'valueactive' : ''">
												{{ascripList[ascripIndex] ? ascripList[ascripIndex].name : '点击选择'}}
											</view>
										</view>
									</view>
								</picker>
							</view>
							<view class="fir_li">
								<view class="li_label">关联客户</view>
								<view class="li_box" @click="toSelectCustomer">
									<view class="form_right" style="text-align: center;">
										<view :class="customerObj ? 'valueactive' : ''">
											{{customerObj ? customerObj.name : '点击选择'}}
										</view>
									</view>
								</view>
							</view>
							<view class="fir_li">
								<view class="li_label">采购状态</view>
								<picker @change="changeTab" :value="status" :range="statusList">
									<view class="li_box" >
										<view class="form_right" style="text-align: center;">
											<view :class="statusList[status] ? 'valueactive' : ''">
												{{statusList[status] ? statusList[status] : '点击选择'}}
											</view>
										</view>
									</view>
								</picker>
							</view>
							<view class="fir_li">
								<view class="li_label">签约时间</view>
								<view class="li_box" style="display: flex;">
									<picker @change="changeStartTime" mode="date"  :end="end_time"
										style="width:50%;border-right:1rpx solid #CCCCCC">
										<view class="form_right">
											<view style="flex:1;text-align: center;"
												:class="start_time ? 'valueactive' : '' ">
												{{start_time ? start_time : '生效时间'}}</view>
										</view>
									</picker>
									<picker @change="changeEndTime" mode="date" :start="start_time" style="width:50%">
										<view class="form_right">
											<view style="flex:1;text-align: center;"
												:class="end_time ? 'valueactive' : '' ">{{end_time ? end_time : '到期时间'}}
											</view>
										</view>
									</picker>
								</view>
							</view>
							<search-item v-for="(item,index) in searchForm" :key="index" :objInfo="item" @changeSearchData="changeSearchData"></search-item>
						</view>
					</scroll-view>
					<view class="button_bottom">
						<view @tap.stop="reset">重置</view>
						<view @tap.stop="sureQuery">确定</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<view class="lxr_con_list" v-for="(item,index) in contract_list" :key="index"
			@click="toContractDetail(item.id)">
			<view class="name">{{item.owner_staff?item.owner_staff.name:'--'}}</view>
			<view class="info">门店名称：{{item.customer?item.customer.name:'--'}}</view>
			<view class="info">采购编号：{{item.num}}</view>
			<view class="info">已回款：&yen;{{item.receivables.repayment_money}}</view>
			<view class="info">待回款：&yen;{{item.receivables.be_money}}</view>
			<view class="proce_li">
				<view class="pro_li_left">
					<view class="protext">回款进度：</view>
					<view class="probox">
						<view class="proin"
							:style="{width:(item.receivables.ratio >= 100 ? 100 : item.receivables.ratio) +'%'}">
						</view>
					</view>
					<view class="pronum">{{item.receivables.ratio >= 100 ? 100 : item.receivables.ratio }}%</view>
					
				</view>
				<view class="pro_li_right">&yen;{{item.money}}</view>
			</view>
			<!-- <view class="info">签约时间：{{item.order_date}}</view> -->
			<view class="con_status" v-if="item.check_status == 0">
				<span>待审核</span>
			</view>
			<view class="con_status" v-if="item.check_status == 1">
				<span>审核中</span>
			</view>
			<view class="con_status pass" v-if="item.check_status == 2">
				<span>审核通过</span>
			</view>
			<view class="con_status nopass" v-if="item.check_status == 3">
				<span>审核未通过</span>
			</view>
			<view class="con_status nopass" v-if="item.check_status == 4">
				<span>已撤回</span>
			</view>
		</view>
		<u-empty v-if="contract_list.length == 0" text="暂无更多"></u-empty>
		<view style="height: 200rpx;"></view>
		<view class="bot_total" @click="lookTotal">总金额合计> </view>
		<uni-popup ref="popup" type="bottom" background-color="#fff" @touchmove.stop.prevent>
			<view class="botwarp">
				<view class="wa_li">
					<view class="wa_label">采购总金额</view>
					<view class="wa_money"> <text>{{moneyInfo.allmoney?moneyInfo.allmoney:'0'}}</text>元 </view>
				</view>
				<view class="wa_li">
					<view class="wa_label">已回款金额</view>
					<view class="wa_money"> <text>{{moneyInfo.repayment_money?moneyInfo.repayment_money:'0'}}</text>元 </view>
				</view>
				<view class="wa_li">
					<view class="wa_label">未回款金额</view>
					<view class="wa_money"> <text>{{moneyInfo.be_money?moneyInfo.be_money:'0'}}</text>元 </view>
				</view>
				<view class="wa_btn" @click="removeTotal">取消</view>
			</view>
		</uni-popup>
		
		<!-- 创建采购悬浮按钮 -->
		<view class="fab_btn" @click="toCreateContract">
			<text class="fab_icon">采购</text>
		</view>
		
		<select-customer ref="customerChild" @getCustomerinfo="getCustomerinfo"></select-customer>
	<!-- 底部导航 -->
		<uniTabbar ></uniTabbar>
	</view>
</template>

<script>
	import uniTabbar from '@/components/tabbar/tabbar.vue'

	import {
		netCrmContractList,
		netSearchStaffList
	} from '@/api/kehu.js'
	import { BASE_IMG_URL } from '@/util/api.js'
	import selectCustomer from '@/components/selectCustomer.vue'
	import searchItem from '@/components/search/searchitem.vue'
	
	export default {
		components:{
			uniTabbar,
			selectCustomer,
			searchItem
		},
		data() {
			return {
				moneyInfo:{},  //总计金额
				contract_list: [],  //列表数据
				page: 1,
				limit: 10,
				totalPage: 1,
				BASE_IMG_URL:BASE_IMG_URL,
				name: '',
				type: '', //客户分类  '0 全部客户','1 我的客户','2 下属负责的客户'
				typeList: ['全部客户', '我的客户', '下级的客户'],
				typeIndex: 0,
				statusList:['全部','待审核','待回款','已回款'],
				status:null,  
				start_time: '',
				end_time: '',
				ascripList: [], //归属人
				ascripId: null,
				ascripIndex: null,
				customerObj:null,  //关联客户

				goodsList: ['全部客户', '我的客户', '下级的客户'],
				info: 0,
				rSelect: [],
				searchForm:[],
			}
		},
		onLoad(options) {
			if (options.startTime) {
				this.typeIndex = options.type == 0 ? 1 : options.type == 1 ? 0 : 2
				this.type = this.typeList[this.typeIndex]
				this.start_time = options.startTime
				this.end_time = options.endTime
				this.ascripId = options.staffid
			}
			if(options.stime){
				this.typeIndex = options.status
				this.start_time = options.stime
				this.end_time = options.etime
			}
			this.handleSearchForm('contract',(data)=>{
				this.searchForm = data
			})
		},
		onShow() {
			this.init()
			//归属人
			this.getGuishu()
		},
		onReachBottom() {
			if (this.page >= this.totalPage) {
				return
			}
			this.page++
			this.getList()
		},
		methods: {
			//去选择客户
			toSelectCustomer() {
				this.$refs.customerChild.init()
			},
			getCustomerinfo(obj) {
				this.customerObj = obj
			},
			init() {
				this.page = 1
				this.contract_list = []
				setTimeout(()=>{
					this.getList()
				},200)
			},
			//筛选
			toQuery() {
				this.$refs.screenpopup.open()
				
			},
			//查看总金额合计
			lookTotal() {
				this.$refs.popup.open()
			},
			removeTotal() {
				this.$refs.popup.close()
			},
			changeTab(e) {
				this.status = e.detail.value
			},
			changeFirTab(type) {
				this.typeIndex = type
				this.init()
			},
			moveStop(){},
			toCreateContract() {
				uni.navigateTo({
					url:'/pagesA/crm/contract/contract'
				})
			},
			tab(index) {
				this.info = index
			},
			//归属人
			getGuishu() {
				netSearchStaffList().then(res => {
					this.ascripList = res.data
					if (this.ascripId) {
						this.ascripList.forEach((ele, index) => {
							if (ele.id == this.ascripId) {
								this.ascripIndex = index
							}
						})
					}
				})
			},
			changeAscrip(e) {
				this.ascripIndex = e.detail.value
				this.ascripId = this.ascripList[this.ascripIndex].id
			},
			getList() {
				let params = {
					page: this.page,
					limit: this.limit,
					createtime: (this.start_time && this.end_time) ? (this.start_time + ',' + this.end_time) : '',
					type: this.typeIndex,
					status: this.status,
					staff_id: this.ascripId,
					customer_id: this.customerObj?this.customerObj.id:'',
					...this.handleSureSearch(this.searchForm)
				}
				netCrmContractList(params).then(res => {
					this.contract_list = this.contract_list.concat(res.data.data)
					this.totalPage = res.data.last_page
					this.moneyInfo = res.data.moneyinfo
				})
			},
			//客户分类
			changeType(e) {
				this.typeIndex = e
			},
			//线索创建  开始时间
			changeStartTime(e) {
				this.start_time = e.detail.value
				if(!this.end_time){
					this.end_time = e.detail.value
				}
			},
			//线索 创建  结束时间
			changeEndTime(e) {
				this.end_time = e.detail.value
				if(!this.start_time){
					this.start_time = e.detail.value
				}
			},
			changeSearchData(type,key,value){
				let arr = this.searchForm
				arr.forEach((ele,index)=>{
					if(ele.field == type){
						ele[key] = value
						this.$set(this.searchForm, index, ele)
					}
				})
			},
			//重置
			reset() {
				this.type = ''
				this.start_time = ''
				this.end_time = ''
				this.ascripId = null
				this.ascripIndex = null
				this.status = null
				this.customerObj = null
				this.searchForm = this.handleResetSearch(this.searchForm)
			},
			//确定 
			sureQuery() {
				this.$refs.screenpopup.close()
				this.init()
			},
			//采购详情
			toContractDetail(id) {
				uni.navigateTo({
					url: '/pagesB/contract/contractDetail?id=' + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.tab_list{
		width:750rpx;
		height:80rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background:#fff;
		.tabli{
			font-size:24rpx;
			color:#333;
			line-height: 75rpx;
			text-align: center;
			border-bottom:4rpx solid #fff;
		}
		.tabliactive{
			border-bottom:4rpx solid $uni-text-color;
		}
	}
	.active {
		border: 1px solid red;
		text-align: center;
		border: none;
		background: $uni-text-color;
		padding: 5rpx 10rpx ;
		border-radius: 10rpx;
		color: #FFFFFF;
		border: 1px solid $uni-text-color !important;;
	}
	.list-box {
		overflow: hidden;
		white-space: nowrap;
	}
	.list-box {
		overflow: hidden;
		white-space: nowrap;
	}
	.list-item {
		border: 1px solid #999999;
		padding: 5rpx 10rpx ;
		border-radius: 10rpx;
	}
	.valueactive {
		color: #666;
	}
	.select_warp {
		z-index: 9;
		position: relative;
	}
	.searchbox {
		display: flex;
		justify-content: flex-end;
		margin: 20rpx 0;
		.searchtext {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			color: #999;
			margin-right: 55rpx;
			background:#ffffff;
			padding:8rpx;
			border-radius: 5rpx;
		}
	}
	.warpbox {
		width: 750rpx;
		background: rgba(0, 0, 0, 0.7);
		.screen_content {
			z-index: 2;
			border-top: 1rpx solid #CCCCCC;
			background-color: #fff;
			padding: 24rpx;
			.fir_li {
				margin-bottom: 20rpx;
				.li_label {
					font-size: 28rpx;
					margin-top: 30rpx;
					margin-bottom: 20rpx;
				}
				.classify {
					display: flex;
					justify-content: space-around;
					.classify_flex {
						padding: 5rpx 16rpx;
						color: #999;
						font-size: 30rpx;
						border: 1px solid #999;
						border-radius: 10rpx;
					}
					.c_f {
						background: $uni-text-color !important;
						color: #fff;
					}
				}
				.li_box {
					border-radius: 15rpx;border: 1rpx solid #CCCCCC;
					width:690rpx;
					height: 60rpx;
					padding: 0 35rpx;
					line-height: 60rpx;
					display: flex;
					justify-content: space-around;
					color: #999;
					box-sizing: border-box;
				}
				.form_right {
					color: #999;
					text-align: center;
					image {
						width: 40rpx;
						height: 40rpx;
						margin: 28rpx 5rpx 0 0;	
					}
				}
			}
		}

		.button_bottom {
			display: flex;
			width: 100%;
			height: 90rpx;
			background-color: #fff;
			line-height: 90rpx;
			text-align: center;
			font-size: 32rpx;
			justify-content: space-around;
			padding-bottom: 100rpx;

			:first-child {
				color: #999;
				border: 1rpx solid #999;
				width: 260rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 30rpx;
			}

			:last-child {
				background-color: $uni-text-color;
				color: #fff;
				width: 260rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 30rpx;
			}
		}
	}
	.lxr_con_list {
		padding: 20rpx 0;
		margin-bottom: 20rpx;
		background: #fff;

		&:last-child {
			border-bottom: none;
		}

		.name {
			font-size: 34rpx;
			color: #333333;
			font-weight: 500;
			border-bottom: 1rpx solid #ededed;
			padding: 0 0 30rpx 63rpx;
		}

		.info {
			font-size: 32rpx;
			color: #999999;
			margin: 10rpx 0;
			padding-left: 63rpx;
		}

		.proce_li {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 63rpx;
			margin: 10rpx 0;

			.pro_li_left {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.protext {
					font-size: 32rpx;
					color: #999999;
				}

				.probox {
					width: 120rpx;
					height: 30rpx;
					border-radius: 15rpx;
					background: #C0C0C0;
					margin: 0 15rpx;

					.proin {
						width: 20%;
						height: 30rpx;
						border-radius: 15rpx;
						background: $uni-text-color;
					}
				}

				.pronum {
					font-size: 24rpx;
					color: #999999;
				}
			}

			.pro_li_right {
				color:$uni-text-color;
				font-size: 33rpx;
				font-weight: 500;
				margin-right: 28rpx;
			}
		}

		.con_status {
			width: 130rpx;
			height: 36rpx;
			text-align: center;
			line-height: 36rpx;
			background: $uni-text-color-opcity;
			margin-top: 30rpx;
			margin-left: 63rpx;
			span {
				font-size: 26rpx;
				color: $uni-text-color;
			}
		}
		.nopass {
			color: #ec7f51;
		}
		.pass {
			color: #22A7F6;
		}
	}
	
	.bot_total{
		position: fixed;
		left:0;
		bottom:calc(100rpx + env(safe-area-inset-bottom) / 2);
		width:750rpx;
		height:80rpx;
		background:#fff;
		font-size:24rpx;
		color:#333;
		text-align: center;
		line-height: 80rpx;
		color:$uni-text-color;
		border-top:1rpx solid #f5f5f5;
	}
	.botwarp{
		background:#fff;
		padding:0 24rpx;
		.wa_li{
			padding:24rpx 35rpx;
			border-bottom:1rpx solid #f5f5f5;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.wa_label{
				font-size:24rpx;
				color:#333;
			}
			.wa_money{
				font-size:24rpx;
				color:#666;
				text{
					color:$uni-text-color;
				}
			}
		}
		.wa_btn{
			width:100%;
			height:100rpx;
			font-size:24rpx;
			color:$uni-text-color;
			text-align: center;
			line-height: 100rpx;
		}
	}
	
	// 悬浮按钮样式
	.fab_btn {
		position: fixed;
		right: 40rpx;
		bottom: calc(280rpx + env(safe-area-inset-bottom) / 2);
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background: #008eff;
		box-shadow: 0 8rpx 24rpx rgba(0, 142, 255, 0.4);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
		animation: fab-pulse 2s ease-in-out infinite;
		
		&:active {
			transform: scale(0.9);
			box-shadow: 0 4rpx 12rpx rgba(0, 142, 255, 0.3);
			animation: none;
		}
		
		.fab_icon {
			font-size: 32rpx;
			color: #fff;
			font-weight: 500;
			line-height: 1;
		}
	}
	
	@keyframes fab-pulse {
		0%, 100% {
			transform: scale(1);
			box-shadow: 0 8rpx 24rpx rgba(0, 142, 255, 0.4);
		}
		50% {
			transform: scale(1.05);
			box-shadow: 0 12rpx 32rpx rgba(0, 142, 255, 0.6);
		}
	}
</style>
