<template>
	<view class="content">
		<view class="scheme-item" v-for="(item, index) in list" :key="index">
			<view class="no">
				<view class="no-text nowrap">{{item.order.order_no}}</view>
				<text class="no-status nowrap">{{item.status.text}}</text>
			</view>
			<view class="scheme-content">
				<view class="scheme-flex" @click="item.is_show_type = !item.is_show_type">
					<label>业务类型</label>
					<view class="value nowrap">
						<view class="value-type">
							<text class="type-tag" v-for="(citem, cindex) in item.order.item_type" :key="cindex" v-if="citem.number > 0">{{citem.title}}x{{citem.number}}</text>
						</view>
						<uni-icons class="orders-content-icon" :type="item.is_show_type ? 'top': 'bottom'" size="14" color="gray"></uni-icons>
					</view>
				</view>
				<view class="scheme-block" v-show="item.is_show_type">
					<view class="item-flex" v-for="(citem, cindex) in item.order.items" :key="cindex">
						<view class="item-flex-title">{{citem.institution.title}}({{citem.business_type.title}})</view>
						<view class="item-flex-value">￥{{citem.price}}</view>
					</view>
				</view>
				<view class="scheme-flex">
					<label>当前方案</label>
					<view class="value nowrap">{{item.institution.title}}<text class="tag">{{item.business_type.title}}</text></view>
				</view>
				<view class="scheme-flex">
					<label>下单日期</label>
					<view class="value nowrap">{{item.order.created_at}}</view>
				</view>
			</view>
			<view class="orders-flex">
				<view class="user" @click="makePhone(item.order.manager.username)">
					<image class="user-cover" :src="item.order.manager.avatar" mode="aspectFill"></image>
					<view class="user-name">{{item.order.manager.nickname}}</view>
				</view>
				<view class="btns">
					<view class="btns-item" v-if="item.status.value === 1" @click="$Router.push({name: 'ConfirmSchemeInfo', params: {schemeId: item.business_order_close_scheme_id}})">确认方案</view>
				</view>
			</view>
		</view>
		<u-loadmore v-if="pagesShow" :status="status" />
	</view>
</template>

<script>
	import { getConfirmScheme } from '@/apis/interfaces/order.js'
	export default {
		data() {
			return {
				list		: [],
				page		: {
					current	: 1,
					has_more: false,
				},
				pagesShow	: false,
				status   	: ''
			};
		},
		onShow() {
			this.page = {
				current	: 1,
				has_more: false,
			}
			this.$store.commit('setOrderId', this.$Route.query.orderId)
			this.getList()
		},
		methods: {
			getList(){
				uni.showLoading({
					title: '加载中...',
					mask : true
				})
				getConfirmScheme({
					business_order_id: this.$Route.query.orderId,
					page: this.page.current
				}).then(res => {
					let { data, page } = res;
					data.map(val => {
						val.is_show_type = false
					})
					let atList   = page.current == 1 ? [] : this.list
					this.list  		= atList.concat(data)
					this.page  		= page
					this.pagesShow 	= false
					uni.hideLoading()
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 拨打电话
			makePhone(phone){
				uni.makePhoneCall({
					phoneNumber: phone,
					fail: err => {
						uni.showToast({
							title: '拨打电话失败，请检查您的应用权限[电话]保持允许状态',
							icon : 'none'
						})
					}
				})
			}
		},
		onReachBottom() {
			this.pagesShow = true;
			if(this.page.has_more){
				this.status    = 'loading';
				this.page.current++
				this.getList()
				return
			}
			this.status    = 'nomore';
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 30rpx 30rpx 0 30rpx;
		box-sizing: border-box;
	}
	.scheme-item{
		background: white;
		margin-bottom: 30rpx;
		border-radius: 20rpx;
		.no{
			padding: 0 30rpx;
			line-height: 90rpx;
			border-bottom: solid 1rpx #f6f6f6;
			font-size: 30rpx;
			display: flex;
			justify-content: space-between;
			.no-text{
				width: calc(100% - 200rpx);
			}
			.no-status{
				width: 200rpx;
				text-align: right;
				color: $main-color;
				font-weight: bold;
			}
		}
		.scheme-content{
			padding: 20rpx 30rpx;
			.scheme-flex{
				line-height: 70rpx;
				font-size: 30rpx;
				display: flex;
				justify-content: space-between;
				label{
					color: gray;
					width: 200rpx;
				}
				.value{
					width: calc(100% - 200rpx);
					text-align: right;
					.value-type{
						display: inline-block;
						text{
							margin-right: 30rpx;
							position: relative;
							display: inline-block;
							&::after{
								position: absolute;
								content: "/";
								width: 30rpx;
								text-align: center;
								font-size: 30rpx;
								top: 0;
								right: -30rpx;
							}
							&:last-child{
								margin-right: 0;
								&::after{
									display: none;
								}
							}
						}
					}
					.tag{
						color: $main-color;
						border:solid 1rpx $main-color;
						font-size: 26rpx;
						height: 40rpx;
						line-height: 40rpx;
						padding: 0 15rpx;
						border-radius: 20rpx;
						display: inline-block;
						box-sizing: border-box;
						margin-left: 20rpx;
					}
				}
			}
		}
		.scheme-block{
			background: rgba(68, 110, 254, .03);
			padding: 20rpx;
			font-size: 28rpx;
			border-radius: 10rpx;
			margin: 10rpx 0;
			.item-flex{
				display: flex;
				justify-content: space-between;
				line-height: 50rpx;
			}
		}
		.orders-flex{
			border-bottom: solid 1rpx #F6F6F6;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx $padding;
			&:last-child{
				border-top: solid 1rpx #F6F6F6;
				border-bottom: none;
			}
			.orders-tag{
				display: inline-block;
				background: $main-color;
				font-size: 26rpx;
				color: white;
				border-radius: 10rpx;
				padding: 0 10rpx;
				height: 40rpx;
				line-height: 40rpx;
				margin-right: 10rpx;
				&.order-tag-my{
					background: $text-price;
				}
			}
			.no{
				font-size: 30rpx;
				color: #111;
				line-height: 60rpx;
				width: calc(100% - 150rpx);
			}
			.state{
				color: $main-color;
				font-weight: bold;
				font-size: 30rpx;
				line-height: 60rpx;
				width: 150rpx;
				text-align: right;
			}
			.user{
				padding-left: 90rpx;
				position: relative;
				min-height: 70rpx;
				box-sizing: border-box;
				width: calc(100% - 400rpx);
				.user-cover{
					position: absolute;
					left: 0;
					top: 0;
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					background: #ddd;
				}
				.user-name{
					line-height: 70rpx;
					font-size: 30rpx;
					font-weight: bold;
				}
			}
			.btns{
				width: 400rpx;
				text-align: right;
				.btns-item{
					display: inline-block;
					height: 70rpx;
					
					line-height: 70rpx;
					background: $main-color;
					color: white;
					border-radius: 35rpx;
					padding: 0 30rpx;
					font-size: 30rpx;
					&.btns-border{
						line-height: 68rpx;
						box-sizing: border-box;
						border:solid 1rpx $main-color;
						background: white;
						color: $main-color;
						margin-right: 20rpx;
					}
				}
			}
		}
	}
</style>
