<template>
	<view class="order-block">
		<view class="order-block-header">
			<view class="order-no">订单号{{no || '-'}}</view>
		</view>
		<view class="order-block-content">
			<view class="order-user">{{user.nickname}}<text>{{user.username}}</text></view>
			<view class="order-content">
				<view class="order-content-type">
					<label>服务律师</label>
					<view class="nowrap">{{ lawyer.name || '-' }}</view>
				</view>
				<view class="order-content-type">
					<label>服务金额</label>
					<view class="nowrap">{{ synthesis.title || '-' }}</view>
				</view>
				<view class="order-content-type">
					<label>创建时间</label>
					<view class="nowrap">{{ time || '-' }}</view>
				</view>
			</view>
			<view class="order-btns">
				<button class="btn-cancel" @click="onPhone(user)">联系TA</button>
				<button class="btn-sign" @click="onInfo(no)">查看</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"entrustOrders",
		data() {
			return {
				
			};
		},
		props: {
			no	: { 
				type	: String,
				default	: ''
			},
			user: {
				type	: Object,
				default	: () => {
					return { } 
				}
			},
			synthesis: {
				type	: Object,
				default	: () => {
					return { } 
				}
			},
			time : {
				type	: String,
				default	: ''
			},
			price: {
				type	: String,
				default	: ''
			},
			lawyer: {
				type	: Object,
				default : () => {
					return { name: '' }
				}
			}
		},
		methods: {
			onInfo(id){
				this.$emit('info', id)
			},
			onPhone(mobile){
				console.log(mobile)
				
				this.$emit('callPhone', mobile)
			},
			onSing(id){
				this.$emit('info', id)
			}
		}
	}
</script>

<style lang="scss">
	// 列表模块
	.order-block{ 
		background: white;
		margin: 0 30rpx 30rpx 30rpx;
		border-radius: 10rpx;
		&-header{
			border-bottom: solid 1rpx #eee;
			padding: 20rpx 30rpx;
			align-items: center;
			line-height: 70rpx;
			.order-no{ font-size: 28rpx; color: #111;  }
		}
		&-content{
			padding: 30rpx;
			.order-user{
				font-size: 40rpx;
				font-weight: bold;
				padding-bottom: 30rpx;
				text{ font-size: 28rpx; margin-left: 10rpx; font-weight: normal; color: #666; }
			}
			.order-content{
				background: #F7FAFF;
				border-radius: 10rpx;
				padding: 20rpx 30rpx;
				color: #666666;
				font-size: 30rpx;
				.order-content-type{
					display: flex;
					justify-content: space-between;
					color: #111;
					line-height: 70rpx;
					label{ color: gray; }
				}
				.order-content-title{ color: #111; line-height: 70rpx; }
				.order-content-text{ line-height: 40rpx; text-align: justify; }
			}
			.order-btns{
				padding-top: 30rpx;
				display: flex;
				justify-content: flex-end;
				button{ margin: 0; height: 70rpx; line-height: 70rpx; border-radius: 35rpx; min-width: 135rpx; padding: 0; font-size: 30rpx; }
				button::after{ display: none; }
				button.btn-cancel{ margin-right: 20rpx; color: #446EFE; border:solid 1rpx #446EFE; background: white; line-height: 68rpx; box-sizing: border-box; }
				button.btn-sign{ background: #446EFE; color: white; }
			}
		}
	}
</style>