<template>
	<view class="content">
		<!-- 基于 uni-list 的页面布局 -->
		<uni-list class="prepayorder-list" :border="false">
			<uni-list-item class="slot-box-item" showArrow="true" direction="row" 
			clickable="true" @click="navigateToElderList">
				<view slot="body">
					<text>{{elder.name}}</text>
				</view>
			</uni-list-item>
		</uni-list>

		<uni-list class="prepayorder-list" direction="column" :border="false">
			<uni-list-item :border="false" class="slot-box-item" showArrow="true" direction="column" :key="person.id" :title="person.name">
				<!-- 自定义 body -->
				<view slot="body">
					<text> 上门服务地址 </text>
					<view>
						<text> 省 市 县区 街道 地址地址地址地址地址 </text>
					</view>
					<text> 13824393848备份</text>
				</view>
			</uni-list-item>
		</uni-list>

		<uni-list class="prepayorder-list1" :border="false">
			<uni-list-item :border="false" class="slot-box-item1" direction="row">
				<!-- 自定义 body -->
				<view slot="body">
					<view style="display: flex">
						<text style="font-size: 28rpx; color: #666666;">订单类型 </text>
						<text
							style="font-size: 28rpx; color: #333333; min-width: 520rpx; text-align: right;">社区管家</text>
					</view>
				</view>
			</uni-list-item>

			<uni-list-item :border="false" class="slot-box-item1" direction="row">
				<!-- 自定义 body -->
				<view slot="body">
					<view style="display: flex">
						<text style="font-size: 28rpx;color: #666666;"> 服务类型 </text>
						<text style="font-size: 28rpx;color: #333333; min-width: 520rpx; text-align: right;"> 分类 </text>
					</view>

				</view>
			</uni-list-item>

			<uni-list-item :border="false" class="slot-box-item1" direction="row">
				<!-- 自定义 body -->
				<view slot="body">
					<view style="display: flex">
						<text style="font-size: 28rpx;color: #666666;"> 服务项目 </text>
						<text style="font-size: 28rpx;color: #333333; min-width: 520rpx; text-align: right;"> 服务名称
						</text>
					</view>
				</view>
			</uni-list-item>

			<uni-list-item :border="false" class="slot-box-item1" direction="row">
				<!-- 自定义 body -->
				<view slot="body">
					<view style="display: flex">
						<text style="font-size: 28rpx;color: #666666;"> 计费方式 </text>
						<text style="font-size: 28rpx;color: #333333; min-width: 520rpx; text-align: right;"> 小时 </text>
					</view>
				</view>
			</uni-list-item>

			<uni-list-item :border="false" class="slot-box-item1" direction="row">
				<!-- 自定义 body -->
				<view slot="body">
					<view style="display: flex">
						<text style="font-size: 28rpx;color: #666666;"> 单价 </text>
						<text style="font-size: 28rpx;color: #333333; min-width: 580rpx; text-align: right;"> 24 </text>
					</view>
				</view>
			</uni-list-item>

			<uni-list-item :border="false" class="slot-box-item1">
				<!-- 自定义 body -->
				<view slot="body">
					<view style="display: flex">
						<text style="font-size: 28rpx;color: #666666;"> 政府补贴 </text>
						<text style="font-size: 28rpx;color: #333333; min-width: 520rpx; text-align: right;"> 12 </text>
					</view>
				</view>
			</uni-list-item>

			<uni-list-item class="slot-box-item1" direction="row">
				<!-- 自定义 body -->
				<view slot="body">
					<view style="display: flex;width: 100%;">
						<text> </text>
						<text
							style="font-size: 28rpx;color: #333333;min-width: 550rpx; text-align: right;font-size: 28rpx;color: #666666;margin-top: 10rpx;">总价:</text>
						<text
							style="font-size: 28rpx;color: #333333;min-width: 20rpx; text-align: right;font-size: 24rpx;color: #ED1212;margin-top: 15rpx;">￥</text>
						<text
							style="font-size: 28rpx;color: #333333;min-width: 60rpx; text-align: right;font-size: 48rpx;color: #ED1212;">100</text>
					</view>
				</view>
			</uni-list-item>

		</uni-list>

		<uni-list class="prepayorder-list" :border="false">
			<uni-list-item class="slot-box-item" showArrow="true" direction="row">
				<view slot="body" class="list-intro">
					<text style="font-size: 28rpx;color: #666666;">描述</text>
					<text style="font-size: 28rpx;color: #333333;">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述</text>
				</view>
			</uni-list-item>
		</uni-list>

		<uni-list class="prepayorder-list" :border="false">
			<uni-list-item class="slot-box-item" direction="row">
				<view slot="body" class="list-intro">
					<view style="display: flex">
						<text style="font-size: 28rpx;color: #666666;">服务人员</text>
						<text style="font-size: 28rpx;color: #333333;min-width: 520rpx; text-align: right;">小张</text>
					</view>
				</view>
			</uni-list-item>
		</uni-list>
		
		<uni-list class="prepayorder-list" :border="false">
			<uni-list-item class="slot-box-item" showArrow="true" direction="row">
				<view slot="body" class="list-intro">
					<view style="display: flex">
						<text style="font-size: 28rpx;color: #666666;">上门服务时间</text>
						<text style="font-size: 28rpx;color: #333333;min-width: 440rpx; text-align: right;">请选择</text>
						
					</view>
				</view>
			</uni-list-item>
		</uni-list>

		<uni-list class="prepayorder-list" :border="false">
			<uni-list-item class="slot-box-item" showArrow="true" direction="row">
				<view slot="body" class="list-intro">
					<view style="display: flex">
						<text style="font-size: 28rpx;color: #666666;">紧急程度</text>
							<picker style="min-width: 490rpx; text-align: right; " @change="jinjichengduPickerChanged" :value="index" :range="jinjichengduArr" range-key="name">
								<text style="font-size: 28rpx;color: #333333;">{{jinjichengduArr[jinjiindex].name}}</text>
							</picker>
					</view>

				</view>
			</uni-list-item>
		</uni-list>

		<uni-list class="prepayorder-list" :border="false">
			<uni-list-item class="slot-box-item" showArrow="true" direction="row" v-for="item in volunteer"
				:key="person.id">
				<view slot="body" class="list-intro">
					<text style="font-size: 28rpx;color: #666666; width: 200rpx;">备注</text>
					<input placeholder="请填写"
						style="font-size: 28rpx; color: #333333; min-width: 500rpx; text-align: right; margin-rigin:20rpx;" />
				</view>
			</uni-list-item>

		</uni-list>
		<uni-list class="prepayorder-list" :border="false">
			<uni-list-item class="slot-box-item" showArrow="true" direction="row">
				<view slot="body">
					<view style="display: flex">
						<text style="font-size: 28rpx;color: #666666;">支付方式</text>
						<!-- <text style="font-size: 28rpx;color: #333333; min-width: 490rpx; text-align: right;">微信</text> -->
						<picker style="min-width: 490rpx; text-align: right; " @change="payTypePickerChanged" :value="index" :range="payTypeArr" range-key="name">
							<text style="font-size: 28rpx;color: #333333;">{{payTypeArr[payTypeindex].name}}</text>
						</picker>
					</view>
				</view>
			</uni-list-item>
		</uni-list>
		<view style="height: 100rpx;"></view>
		<view class="position-sticky prepayorder-bootom">
			<text style="color: #ED1212;font-size: 30rpx;margin-left: 42rpx; margin-top: 50rpx;">￥</text>
			<text style="color: #ED1212;font-size: 62rpx;margin-top: 28rpx;">12</text>
			<button type="default"
				style="height:82rpx;margin-top: 20rpx; width: 346rpx;border-radius: 41rpx;background-color: #ED1212;color: #FFFFFF;text-align: center;margin-right: 20rpx;">立即下单</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				elder:{
					id: "-0",
					name: "请选择长者"
				},
				person: {
					"id": "001",
					"name": "张三"
				},
				jinjichengduArr: [{
					name: '一般'
				}, {
					name: '紧急'
				}],
				jinjiindex:0,
				
				payTypeArr: [{
					name: '微信'
				}, {
					name: '余额'
				}, {
					name: '现金'
				}],
				payTypeindex:0,
			}
		},

		onLoad() {
			this.getVolunteer()
		},

		methods: {
			getVolunteer() {
				this.volunteer = [{
					'id': '1',
					'avatar': 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic8.nipic.com%2F20100730%2F5473328_004901129206_2.jpg&refer=http%3A%2F%2Fpic8.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625712522&t=14c2dfef0f49c6fc3937a76d4e8c98c1',
					'name': '张三',
					'age': '55',
					'address': '山东潍坊',
					'group': '所属机构',
					'score': '7.1',
					'skill': '技能1 技能2 技能3 技能4 技能5技能1 技能2 技能3 技能4 技能5',
					'status': '0'
				}]
			},
			
			clickLoadMore(e) {
				console.log('========')
			},
			navigateToElderList:function() {
				let that = this
				uni.$on('selectElder', function(data) {
					console.log(data.elder)
					that.elder = data.elder
					
					//清除监听，不清除会消耗资源
					uni.$off('selectElder')
				})
				
				uni.navigateTo({
					url:"../../common/elderList/elderList"
				})
			},
			jinjichengduPickerChanged: function(e) {
				this.jinjiindex = e.detail.value
			},
			payTypePickerChanged: function(e) {
				this.payTypeindex = e.detail.value
			}
		}
	}
</script>

<style>
	@import url("prePayOrder.css");
</style>
