<template>
	<z-paging ref="paging" v-model="list" @query="queryList">
		<div class="view">


			<template v-if="page_type=='active'">
				<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>
			<template v-if="page_type=='get'">
				<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>
			<template v-if="page_type=='lose'">
				<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>
			<template v-if="page_type=='new'">
				<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>




			<!-- <div class="title"> -->
			<!-- <div class="number">
				<span class="rmb" v-if="page_type=='get' || page_type=='lose'">￥</span>14,688.88
			</div> -->

			<div class="title" v-if="page_type=='get'">

				<view class="number" style="text-align: center;">
					￥{{totalPrice || 0}}
				</view>
				<view class="desc">
					今日收款金额
				</view>
			</div>
			<div class="title" v-else-if="page_type=='lose'">
				<view class="number" style="text-align: center;">
					￥{{totalPrice||0}}
				</view>
				<view class="desc">
					今日退款金额
				</view>

			</div>
			<div class="title" v-else-if="page_type=='new'">
				<view class="number" style="text-align: center;">
					{{totalPrice ||0}}人
				</view>
				<view class="desc">
					今日新增客户
				</view>
			</div>
			<div class="title" v-else>
				<view class="number" style="text-align: center;">
					{{totalPrice ||0}}人
				</view>
				<view class="desc">
					今日活跃用户
				</view>
			</div>
			<!-- </div> -->
			<div class="text" v-if="page_type=='get'">今日订单</div>
			<div class="text" v-else-if="page_type=='lose'">今日退款完成订单</div>
			<div class="text" v-else-if="page_type=='new'">新增客户</div>
			<div class="active" v-else>
				<div class="act_left">活跃客户</div>
				<div class="act_right" @click="openfilter">
					筛选
					<image :src="$util.img(`/upload/weapp/pageSalesman/filter.png`)" mode=""></image>
				</div>
			</div>

			<!-- 收款 -->
			<div class="card" v-for="(item, index) in list" :key="index" v-if="page_type=='get'">
				<div class="row">
					<div class="left">客户名称：<span class="desc">{{item.nickname}}</span></div>
				</div>

				<div class="row" v-if="item.sign_time">
					<div class="left">收货时间：
						<span class="desc">{{item.sign_time}}</span>
					</div>
				</div>
				<div class="row" v-if="!item.sign_time">
					<div class="left">订单状态：
						<span class="desc">{{item.order_status_name}}</span>
					</div>
				</div>


				<div class="row">
					<div class="left">订单编号：<span class="desc">{{item.order_no}}</span></div>
					<div class="right">
						<span class="rmb">￥</span>
						<span class="number" v-if="Number(item.sales_money)">{{item.sales_money}}</span>
						<span class="number" v-if="!Number(item.sales_money)">{{item.order_money}}</span>
					</div>
				</div>
				<u-line style="margin: 24rpx 0;"></u-line>

				<div class="row">
					<div class="left">商品数量：{{item.goods_num}}</div>
					<div class="right" @click="btn1(item.order_id,item.member_id)">
						查看详情
						<image :src="$util.img('/upload/weapp/user/arrow-right.png')" mode=""></image>
					</div>
				</div>
			</div>
			<!-- 退款 -->
			<div class="card" v-for="(item, index) in list" :key="index" v-if="page_type=='lose'">
				<div class="row">
					<div class="left">客户名称：<span class="desc">{{item.name}}</span></div>
				</div>

				<!-- <div class="row" >
					<div class="left">退款时间：<span class="desc">{{item.order_goods[0].refund_time | time}}</span></div>
				</div> -->

				<div class="row">
					<div class="left">订单编号：<span class="desc">{{item.order_no}}</span></div>
					<div class="right">
						<span class="rmb">￥</span>
						<span class="number">{{item.refund_money}}</span>
					</div>
				</div>
				<u-line style="margin: 24rpx 0;"></u-line>

				<div class="row">
					<div class="left">商品数量：{{item.goods_num}}</div>
					<div class="right" @click="btn2(item.order_id,item.member_id)">
						查看详情
						<image :src="$util.img('/upload/weapp/user/arrow-right.png')" mode=""></image>
					</div>
				</div>
			</div>
			<!-- 新增客户 -->

			<div class="card-botf" v-for="(item, index) in list" :key="index" v-if="page_type=='new'">
				<view class="index">
					<div class="box">
						<image :src="$util.img(item.headimg)" mode="aspectFill"></image>
						<div class="df aic jcsb">
							<div class="name">{{item.nickname}}<span>{{item.mobile}}</span></div>
							<div class="status" @click="btn3(item.order_id,item.member_id)">查看详情</div>
						</div>
					</div>
				</view>
			</div>

			<!-- 活跃客户 -->
			<div class="card-botf" v-for="(item, index) in list" :key="index" v-if="page_type=='active'">
				<view class="index">
					<div class="box">
						<image :src="$util.img(item.headimg)" mode="aspectFill"></image>
						<div class="df aic jcsb">
							<div class="name">{{item.nickname}}<span>{{item.mobile}}</span></div>
							<div class="status" @click="btn4(item.member_id)">查看详情</div>
						</div>
					</div>
				</view>

			</div>

			<u-popup :show="filterShow" mode="top" @close="closeFilter()">
				<view class="popup">
					<div class="popup_content">
						<u-input v-model="searchValue" placeholder="请输入客户名称/联系人/手机号">
							<image :src="$util.img(`/upload/weapp/pageSalesman/search.png`)" mode=""
								style="width: 32rpx; height: 32rpx;" slot="prefix"></image>
						</u-input>
						<div class="p_title">
							店铺类型
						</div>
						<u-row gutter="26" style="flex-wrap: wrap;margin-bottom: 24rpx;">
							<u-col :span="4" v-for="(item,index) in clientType" :key="index"
								@click="clientTypeClick(index)">
								<div :class="clientTypeActive===index? 'p_type_active' : 'p_type'">
									{{item}}
								</div>
							</u-col>
						</u-row>
						<u-line></u-line>
						<div class="p_title">归属地区</div>

						<uni-data-select v-model="inactiveValue" class="select" placeholder="请选择" del="value"
							:localdata="range" @change="change"></uni-data-select>

						<u-line></u-line>

						<div class="p_title" style="margin-bottom: 32rpx;">
							<div>首单客户</div>
							<div>
								<u-switch space="2" v-model="selectValue" activeColor="#21BBF3"
									inactiveColor="rgb(230, 230, 230)">
								</u-switch>
							</div>
						</div>
						<u-line></u-line>
					</div>
					<div class="btn">
						<div class="reset" @click="btnnow">清空筛选</div>
						<div class="submit" @click="btnok">确定</div>
					</div>
				</view>
			</u-popup>
		</div>
	</z-paging>
</template>

<script>
	const timesfm = require('@/common/js/map/message.js')
	import {
		computed
	} from "vue"
	import uniDataSelect from "../components/uni-data-select/components/uni-data-select/uni-data-select.vue"
	export default {
		components: {
			uniDataSelect
		},
		props: {

		},
		computed: {

		},
		data() {
			return {
				// get lose new  active 新增客户 收款 退款 活跃
				page_type: 'active',
				totalPrice: '',
				firstClient: true,
				range: [
					// { value: 0, text: "篮球" },
					// { value: 1, text: "足球" },
					// { value: 2, text: "游泳" },
				],
				selectValue: null,
				inactiveValue: '',
				clientTypeActive: -1,
				clientType: [],
				searchValue: '',
				filterShow: false,
				data: [],
				page: 1,
				list: [1],
				PageList: [],
				NewMemberPageList: [],
				PageList: [],
				Receivedtoday: [],
				Todaysrefund: [],
				province_id: ''
				// indexerbi:0
			}
		},
		onShow() {
			// if (this.page_type == 'new') {
			// 	this.$api.sendRequest({
			// 		url: `/api/salasman/getDayNewMemberPageList`,
			// 		data: {},
			// 		success: res => {
			// 			console.log(res, '新增客户');
			// 			this.NewMemberPageList = res.data.list
			// 		}
			// 	})

			// }
			// if (this.page_type == 'get') {
			// 	this.$api.sendRequest({
			// 		url: `/api/salasmanorder/todaylists`,
			// 		data: {
			// 			order_type: "1"
			// 		},
			// 		success: res => {
			// 			this.Receivedtoday = res.data.list
			// 			console.log(res, '今日已收款');
			// 			// this.NewMemberPageList=res.data.list
			// 		}
			// 	})
			// }
			// if (this.page_type == 'lose') {
			// 	this.$api.sendRequest({
			// 		url: `/api/salasmanorder/todaylists`,
			// 		data: {
			// 			order_type: "2"
			// 		},
			// 		success: res => {
			// 			this.Todaysrefund = res.data.list
			// 			console.log(res.data.list, '今日已退款');
			// 			// this.NewMemberPageList=res.data.list
			// 		}
			// 	})
			// }
			// if (this.page_type == 'active') {
			// 	this.$api.sendRequest({
			// 		url: `/api/salasman/getDayMemberPageList`,
			// 		data: {},
			// 		success: res => {
			// 			console.log(res.data.list, '今日活跃客户');
			// 			this.PageList = res.data.list
			// 		}
			// 	})
			// 	this.$api.sendRequest({
			// 		url: `/api/member/getStoreTypeList`,
			// 		data: {},
			// 		success: res => {
			// 			console.log(res.data, '店铺类型');
			// 			this.clientType = res.data
			// 			// for(let i=0;i<res.data.length;i++){
			// 			// 	this.clientType.push(res.data[i].label_name)
			// 			// }
			// 		}
			// 	})
			// 	this.$api.sendRequest({
			// 		url: `/api/address/lists`,
			// 		data: { "pid": 0 },
			// 		success: res => {
			// 			console.log(res.data, '归属地');
			// 			for (let i = 0; i < res.data.length; i++) {
			// 				this.range.push({ value: res.data[i].id, text: res.data[i].name })
			// 			}
			// 		}
			// 	})
			// }
		},
		onHide() {
			this.clientType = []
			this.range = []
		},
		methods: {
			queryList(pageNo, pageSize) {
				if (this.page_type == 'new') {
					this.$api.sendRequest({
						url: `/api/salasman/getDayNewMemberPageList`,
						data: {
							page: pageNo,
							page_size: pageSize
						},
						success: res => {
							console.log(res, '新增客户');
							this.$refs.paging.complete(res.data.list);
							// this.NewMemberPageList = res.data.list
						}
					})

				}
				if (this.page_type == 'get') {
					this.$api.sendRequest({
						url: `/api/salasmanorder/todaylists`,
						data: {
							order_type: "1",
							page: pageNo,
							page_size: pageSize
						},
						success: res => {
							// this.Receivedtoday = res.data.list
							console.log(res, '今日已收款');
							this.$refs.paging.complete(res.data.list);
							// this.NewMemberPageList=res.data.list
						}
					})
				}
				if (this.page_type == 'lose') {
					this.$api.sendRequest({
						url: `/api/salasmanorder/todaylists`,
						data: {
							order_type: "2",
							page: pageNo,
							page_size: pageSize
						},
						success: res => {
							// this.Todaysrefund = res.data.list
							console.log(res.data.list, '今日已退款');
							this.$refs.paging.complete(res.data.list);
							// this.NewMemberPageList=res.data.list
						}
					})
				}
				if (this.page_type == 'active') {
					var storeType;
					if (this.clientTypeActive == -1) {
						storeType = ''
					} else {
						storeType = this.clientType[this.clientTypeActive]
					}

					this.$api.sendRequest({
						url: `/api/salasman/getDayMemberPageList`,
						data: {
							page: pageNo,
							page_size: pageSize,
							keywords: this.searchValue,
							store_type: storeType,
							province_id: this.province_id,
							first_order: this.selectValue ? 1 : ''
						},
						success: res => {
							console.log(res.data.list, '今日活跃客户');
							// this.PageList = res.data.list
							this.$refs.paging.complete(res.data.list);
						}
					})
					this.$api.sendRequest({
						url: `/api/member/getStoreTypeList`,
						data: {},
						success: res => {
							console.log(res.data, '店铺类型');
							this.clientType = res.data
							// for(let i=0;i<res.data.length;i++){
							// 	this.clientType.push(res.data[i].label_name)
							// }
						}
					})
					this.$api.sendRequest({
						url: `/api/address/lists`,
						data: {
							"pid": 0,

						},
						success: res => {
							console.log(res.data, '归属地');
							for (let i = 0; i < res.data.length; i++) {
								this.range.push({ value: res.data[i].id, text: res.data[i].name })
							}
						}
					})
				}
				// this.$refs.paging.complete(this.list);

			},
			openfilter() {
				this.filterShow = true
			},
			closeFilter() {
				this.filterShow = false
			},
			clientTypeClick(index) {
				console.log(index);
				this.clientTypeActive = index
				// for(let i=0;i<this.clientType.length;i++){

				// }
			},
			//归属地
			change(value) {
				console.log(value);
				this.province_id = value
			},
			//清空筛选
			btnnow() {
				this.searchValue = ''
				this.clientTypeActive = -1
				this.province_id = ''
				this.inactiveValue = ''
				this.selectValue = false
				this.filterShow = false
				this.btnok()
			},
			//活跃客户筛选
			btnok() {
				// this.$refs.paging
				console.log({
					keywords: this.searchValue,
					store_type: this.clientTypeActive == -1 ? '' : this.clientTypeActive,
					province_id: this.province_id,
					first_order: this.selectValue ? 1 : 0
				});
				this.$refs.paging.reload()
				this.filterShow = false
				// if (this.clientTypeActive == -1) {
				// 	this.$api.sendRequest({
				// 		url: `/api/salasman/getDayMemberPageList`,
				// 		data: {
				// 			keywords: this.searchValue,
				// 			province_id: this.province_id,
				// 			first_order: this.selectValue ? 1 : 0
				// 		},
				// 		success: res => {

				// 			console.log(res.data.list, '今日活跃客户筛选');
				// 			this.list = res.data.list
				// 		}
				// 	})
				// } else {
				// 	this.$api.sendRequest({
				// 		url: `/api/salasman/getDayMemberPageList`,
				// 		data: {
				// 			keywords: this.searchValue,
				// 			store_type: this.clientType[this.clientTypeActive],
				// 			province_id: this.province_id,
				// 			first_order: this.selectValue ? 1 : 0
				// 		},
				// 		success: res => {
				// 			console.log(res.data.list, '今日活跃客户筛选');
				// 			this.list = res.data.list
				// 		}
				// 	})
				// }

			},
			//今日收款金额
			btn1(order, member) {
				// setTimeout(()=>{
				// 	uni.$emit('Goodsreceived',item)
				// },500)
				// console.log(item);
				uni.navigateTo({
					url: `/page_salesman_order/Order_details/Order_details?or=${order}&me=${member}`
				})
			},
			//退款
			btn2(order, member) {
				uni.navigateTo({
					url: `/page_salesman_order/Order_details/Order_details?or=${order}&me=${member}&s=1`
				})
			},
			//新增客户?status=0
			btn3(order, member) {
				uni.navigateTo({
					url: `/page_salesman_customer/detailed/detailed?id=${member}`
				})
			},
			//活跃?status=0
			btn4(id) {
				uni.navigateTo({
					url: `/page_salesman_customer/detailed/detailed?id=${id}`
				})
			},

		},
		filters: {
			time(num) {
				return timesfm(num * 1000)
			},
			
		},
		onLoad(opt) {
			console.log(opt);
			this.page_type = opt.page_type
			uni.$on('val', data => {
				this.totalPrice = data
				console.log(data, '首页数字参数');
				uni.$off('val')
			})
		},

		// async onPullDownRefresh() {
		// 	if (this.page_type == 'new') {
		// 		await this.$api.sendRequest({
		// 			url: `/api/salasman/getDayNewMemberPageList`,
		// 			data: {},
		// 			success: res => {
		// 				console.log(res, '新增客户');
		// 				this.NewMemberPageList = res.data.list
		// 				uni.stopPullDownRefresh()
		// 			}
		// 		})
		// 	}
		// 	if (this.page_type == 'get') {
		// 		await this.$api.sendRequest({
		// 			url: `/api/salasmanorder/todaylists`,
		// 			data: {
		// 				order_type: "1"
		// 			},
		// 			success: res => {
		// 				this.Receivedtoday = res.data.list
		// 				console.log(res, '今日已收款');
		// 				uni.stopPullDownRefresh()
		// 				// this.NewMemberPageList=res.data.list
		// 			}
		// 		})
		// 	}
		// 	if (this.page_type == 'lose') {
		// 		await this.$api.sendRequest({
		// 			url: `/api/salasmanorder/todaylists`,
		// 			data: {
		// 				order_type: "2"
		// 			},
		// 			success: res => {
		// 				this.Todaysrefund = res.data.list
		// 				console.log(res, '今日已退款');
		// 				uni.stopPullDownRefresh()
		// 				// this.NewMemberPageList=res.data.list
		// 			}
		// 		})
		// 	}
		// 	if (this.page_type == 'active') {
		// 		this.$api.sendRequest({
		// 			url: `/api/salasman/getDayMemberPageList`,
		// 			data: {},
		// 			success: res => {
		// 				console.log(res.data.list, '今日活跃客户');
		// 				this.PageList = res.data.list
		// 				uni.stopPullDownRefresh()
		// 			}
		// 		})
		// 	}
		// 	this.page = 1
		// },
		// async onReachBottom() {
		// 	this.page += 1
		// 	if (this.page_type == 'new') {
		// 		await this.$api.sendRequest({
		// 			url: `/api/salasman/getDayNewMemberPageList`,
		// 			data: {
		// 				page: this.page
		// 			},
		// 			success: res => {
		// 				console.log(res, '新增分页');
		// 				this.NewMemberPageList = [...this.NewMemberPageList, ...res.data.list]
		// 				uni.stopPullDownRefresh()
		// 			}
		// 		})

		// 	}
		// 	if (this.page_type == 'get') {
		// 		await this.$api.sendRequest({
		// 			url: `/api/salasmanorder/todaylists`,
		// 			data: {
		// 				order_type: "1",
		// 				page: this.page
		// 			},
		// 			success: res => {
		// 				this.Receivedtoday = [...this.Receivedtoday, ...res.data.list]
		// 				console.log(res, '今日分页');
		// 				uni.stopPullDownRefresh()
		// 				// this.NewMemberPageList=res.data.list
		// 			}
		// 		})
		// 	}
		// 	if (this.page_type == 'lose') {
		// 		await this.$api.sendRequest({
		// 			url: `/api/salasmanorder/todaylists`,
		// 			data: {
		// 				order_type: "2",
		// 				page: this.page
		// 			},
		// 			success: res => {
		// 				this.Todaysrefund = [...this.Todaysrefund, ...res.data.list]
		// 				console.log(res, '今日已退款分页');
		// 				// this.NewMemberPageList=res.data.list
		// 				uni.stopPullDownRefresh()
		// 			}
		// 		})
		// 	}
		// 	if (this.page_type == 'active') {
		// 		this.$api.sendRequest({
		// 			url: `/api/salasman/getDayMemberPageList`,
		// 			data: {
		// 				page: this.page
		// 			},
		// 			success: res => {
		// 				console.log(res.data.list, '今日活跃客户分页');
		// 				this.PageList = [...this.PageList, ...res.data.list]
		// 				uni.stopPullDownRefresh()
		// 			}
		// 		})
		// 	}
		// }

	}
</script>

<style lang="scss" scoped>
	::v-deep {

		/* #ifdef APP */
		.u-popup__content {
			margin-top: 160rpx !important;
		}

		/* #endif */
	}

	.index {
		padding: 0 16rpx;
		box-sizing: border-box;

		.box {
			background: #FFFFFF;
			border-radius: 24rpx;
			// padding: 32rpx;
			margin-top: 24rpx;
			padding: 24rpx 16rpx 24rpx 16rpx;
			box-sizing: border-box;

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}

			.status {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #00BEF9;
			}
		}

		.name {
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;

			span {
				margin-left: 24rpx;
			}
		}

		.status {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #00BEF9;
		}
	}

	.title {
		margin: 32rpx;
		padding: 48rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		min-height: 60rpx !important;

		.number {
			// height: 64rpx;
			font-size: 64rpx;
			font-family: DINAlternate-Bold, DINAlternate;
			font-weight: bold;
			color: #222222;

			.rmb {
				font-size: 32rpx;
			}
		}

		.desc {

			margin-top: 24rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}

	.text {
		height: 40rpx;
		font-weight: 400;
		color: #585858;
		margin-left: 32rpx;
		margin-bottom: 24rpx;
		font-size: 28rpx;
	}

	.active {
		margin: 0 32rpx 24rpx 32rpx;
		height: 40rpx;
		font-weight: 400;
		color: #585858;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;

		.act_left {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #585858;
		}

		.act_right {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;

			image {
				width: 32rpx;
				height: 32rpx;
				position: relative;
				top: 6rpx;
				margin-left: 8rpx;
			}
		}
	}

	.card-botf {
		// padding: 32rpx 32rpx 32rpx 32rpx;
		margin: 0 32rpx 32rpx 32rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		box-sizing: border-box;
	}

	.card {
		padding: 32rpx 32rpx 32rpx 32rpx;
		margin: 0 32rpx 32rpx 32rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		box-sizing: border-box;

		.row {
			display: flex;
			margin-bottom: 16rpx;

			.left {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				flex-grow: 1;
				display: flex;

				.desc {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
				}

				image {
					height: 28rpx;
					width: 28rpx;
					margin-right: 8rpx;
					position: relative;
					top: 5rpx;
				}

				.label {
					margin-left: 24rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #21BBF3;
					line-height: 34rpx;
				}
			}

			.right {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;

				.rmb {
					font-size: 24rpx;
					font-weight: bold;
					color: #222222;
				}

				.number {
					font-size: 36rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #222222;
					line-height: 40rpx;
				}

				image {
					position: relative;
					top: 3rpx;
					width: 28rpx;
					height: 28rpx;
				}
			}

		}
	}

	.popup {
		padding-bottom: 156rpx;

		.popup_content {
			padding: 32rpx;

			.p_title {
				margin-top: 32rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #222222;
				display: flex;
				justify-content: space-between;
			}

			.p_type_active {
				box-sizing: border-box;
				height: 60rpx;
				background: rgba(33, 187, 243, 0.08);
				border-radius: 12rpx;
				margin-top: 24rpx;

				display: flex;
				justify-content: center;
				align-items: center;

				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #21BBF3;
			}

			.p_type {
				margin-top: 24rpx;
				box-sizing: border-box;
				height: 60rpx;
				background: #F6F6F6;
				border-radius: 12rpx;

				display: flex;
				justify-content: center;
				align-items: center;

				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #585858;
			}

			.select {
				margin: 24rpx 0;
			}
		}

		position: relative;

		.btn {
			position: absolute;
			bottom: 0;
			display: flex;
			width: 100%;

			.reset {
				flex: 1;

				height: 88rpx;
				background: #F6F6F6;

				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #585858;

				display: flex;
				justify-content: center;
				align-items: center;
			}

			.submit {
				flex: 1;
				height: 88rpx;
				background: #21BBF3;

				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;

				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		::v-deep {
			.u-input {
				height: 72rpx;
				background: #F6F6F6;
				border-radius: 36rpx;
				padding: 0 9rpx !important;
			}

			.u-input__content {
				margin-left: 30rpx;
			}

			.uni-select {
				border: 0;
				// border-bottom: solid 2rpx #e5e5e5;
			}

			.uni-select__input-placeholder {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #BFBFBF;
			}
		}
	}
</style>