<template>
	<view class="arr">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<block v-for="(order,orderIndex) in ordersList" :key="orderIndex">
			<!-- 报价中 -->
			<template v-if="order.orderstatus == '0'">
				<view class="orderItemPane  animated fadeIn fast">
					<view class="paneTitle d-flex a-center j-sb">
						<view class="carNumber d-flex a-center">
							<view class="icon iconfont icon-tree-round-car"></view>{{order.licenseNo}}
						</view>
						<view class="carPeople">被保人：{{order.insuredname}}</view>
					</view>
					<view class="paneBody">
						<view class="line d-flex a-center">
							订单号: {{order.orderno}}
						</view>
						<view class="line d-flex a-center">
							投保险种: {{order.product}}
						</view>
						<view class="line d-flex a-center j-sb">
							<view>报价时间: {{order.createtime}}</view>
							<view class="sign">待继续</view>
						</view>
						<view class="companyList">
							<view style="d-flex j-sb">
								<text>投保公司：{{order.inscompany}}
									<!-- {{config.insCompanyList[order.inscompany].name}} -->
									<text style="margin-left:20px;color: red;">{{order.sumpremium}}</text></text>
								<text style="margin-right: 30upx;"></text>
							</view>
						</view>
					</view>
					<view class="paneBottom  d-flex a-center j-end">
						<text class="btn1 d-flex a-center j-center" :data-orderno="order.orderno"
							@tap="closeQuoteTask(order)">关闭订单</text>
						<text class="btn2 d-flex a-center j-center" :data-orderno="order.orderno"
							@click="openQuoteDetail(order)">待继续</text>
						<text class="btn2 d-flex a-center j-center">备忘录</text>
					</view>
				</view>
			</template>

			<!-- 待核保 -->
			<template v-if="order.orderstatus == '1'">
				<view class="orderItemPane  animated fadeIn fast">
					<view class="paneTitle d-flex a-center j-sb">
						<view class="carNumber d-flex a-center">
							<view class="icon iconfont icon-tree-round-car"></view>{{order.licenseNo}}
						</view>
						<view class="carPeople">被保人：{{order.insuredname}}</view>
					</view>
					<view class="paneBody">
						<view class="line d-flex a-center">
							订单号: {{order.orderno}}
						</view>
						<view class="line d-flex a-center">
							投保险种: {{order.product}}
						</view>
						<view class="line d-flex a-center j-sb">
							<view>报价时间: {{order.createtime}}</view>
							<view class="sign">核保中</view>
						</view>
						<view class="companyList">
							<view style="d-flex j-sb">
								<text>投保公司：{{order.inscompany}} <text
										style="margin-left:20px;color: red;">{{order.sumpremium}}</text></text>
								<text style="margin-right: 30upx;"></text>
							</view>
						</view>
					</view>
					<view class="paneBottom  d-flex a-center j-end">
						<text class="btn1 d-flex a-center j-center" :data-orderno="order.orderno"
							@tap="closeQuoteTask(order)">关闭订单</text>
						<text class="btn2 d-flex a-center j-center" :data-orderno="order.orderno"
							@tap="openQuoteDetail(order)">价格明细</text>
						<text class="btn2 d-flex a-center j-center">备忘录</text>
					</view>
				</view>
			</template>

			<!-- 已核保 -->
			<template v-if="order.orderstatus == '2'">
				<view class="orderItemPane  animated fadeIn fast">
					<view class="paneTitle d-flex a-center j-sb">
						<view class="carNumber d-flex a-center">
							<view class="icon iconfont icon-tree-round-car"></view>{{order.licenseNo}}
						</view>
						<view class="carPeople">被保人：{{order.insuredname}}</view>
					</view>
					<view class="paneBody">
						<view class="line d-flex a-center">
							订单号: {{order.orderno}}
						</view>
						<view class="line d-flex a-center">
							投保险种: {{order.product}}
						</view>
						<view class="line d-flex a-center j-sb">
							<view>报价时间: {{order.createtime}}</view>
							<view class="sign">已核保</view>
						</view>
						<view class="companyList">
							<view style="d-flex j-sb">
								<text>投保公司：{{order.inscompany}} <text
										style="margin-left:20px;color: red;">{{order.sumpremium}}</text></text>
								<text style="margin-right: 30upx;"></text>
							</view>
						</view>
					</view>
					<view class="paneBottom  d-flex a-center j-end">
						<text class="btn1 d-flex a-center j-center" :data-orderno="order.orderno"
							@tap="closeQuoteTask(order)">关闭订单</text>
						<text class="btn2 d-flex a-center j-center" :data-orderno="order.orderno"
							@tap="openQuoteDetail(order)">价格明细</text>
						<text class="btn2 d-flex a-center j-center" :data-orderno="order.orderno"
							@tap="openPayWay(order)">去支付</text>
						<text class="btn2 d-flex a-center j-center">备忘录</text>
					</view>
				</view>
			</template>

			<!-- 待修改 -->
			<template v-if="order.orderstatus=='3'">
				<view class="orderItemPane  animated fadeIn fast">
					<view class="paneTitle d-flex a-center j-sb">
						<view class="carNumber d-flex a-center">
							<view class="icon iconfont icon-tree-round-car"></view>{{order.licenseNo}}
						</view>
						<view class="carPeople">被保人：{{order.insuredname}}</view>
					</view>
					<view class="paneBody">
						<view class="line d-flex a-center">
							订单号: {{order.orderno}}
						</view>
						<view class="line d-flex a-center">
							投保险种: {{order.product}}
						</view>
						<view class="line d-flex a-center j-sb">
							<view>报价时间: {{order.createtime}}</view>
							<view class="sign">待修改</view>
						</view>
						<view class="companyList">
							<view style="d-flex j-sb">
								<text>投保公司：{{order.inscompany}} <text
										style="margin-left:20px;color: red;">{{order.sumpremium}}</text></text>
								<text style="margin-right: 30upx;"></text>
							</view>
						</view>
					</view>
					<view class="paneBottom  d-flex a-center j-end">
						<text class="btn1 d-flex a-center j-center" :data-orderno="order.orderno"
							@tap="closeQuoteTask(order)">关闭订单</text>
						<text class="btn1 d-flex a-center j-center" :data-orderno="order.orderno"
							@tap="goBackReason(order.auditopinion)">退回原因</text>
						<text class="btn2 d-flex a-center j-center" :data-orderno="order.orderno"
							@tap="openQuoteDetail(order)">修改订单</text>
						<text class="btn2 d-flex a-center j-center">备忘录</text>
					</view>
				</view>
			</template>

			<!-- 已核保待缴费 -->
			<template v-if="order.orderstatus == '5'">
				<view class="orderItemPane  animated fadeIn fast">
					<view class="paneTitle d-flex a-center j-sb">
						<view class="carNumber d-flex a-center">
							<view class="icon iconfont icon-tree-round-car"></view>{{order.licenseNo}}
						</view>
						<view class="carPeople">被保人：{{order.insuredname}}</view>
					</view>
					<view class="paneBody">
						<view class="line d-flex a-center">
							订单号: {{order.orderno}}
						</view>
						<view class="line d-flex a-center">
							投保险种: {{order.product}}
						</view>
						<view class="line d-flex a-center j-sb">
							<view>报价时间: {{order.createtime}}</view>
							<view class="sign">已核保待缴费</view>
						</view>
						<view class="companyList">
							<view style="d-flex j-sb">
								<text>投保公司：{{order.inscompany}} <text
										style="margin-left:20px;color: red;">{{order.sumpremium}}</text></text>
								<text style="margin-right: 30upx;"></text>
							</view>
						</view>
					</view>
					<view class="paneBottom  d-flex a-center j-end">
						<text class="btn1 d-flex a-center j-center" :data-orderno="order.orderno"
							@tap="closeQuoteTask(order)">关闭订单</text>
						<text class="btn2 d-flex a-center j-center" :data-orderno="order.orderno"
							@tap="openQuoteDetail(order)">查看</text>
						<text class="btn2 d-flex a-center j-center" :data-orderno="order.orderno"
							@tap="openPayCode(order)">二维码</text>
						<template v-if="order.inscompany != '永安财险'">
							<text class="btn2 d-flex a-center j-center" :data-orderno="order.orderno"
								@tap="confirmPay(order)">缴费确认</text>
						</template>
						<text class="btn2 d-flex a-center j-center">备忘录</text>
					</view>
				</view>
			</template>

			<!-- 已缴费 -->
			<template v-if="order.orderstatus == '6'">
				<view class="orderItemPane  animated fadeIn fast">
					<view class="paneTitle d-flex a-center j-sb">
						<view class="carNumber d-flex a-center">
							<view class="icon iconfont icon-tree-round-car"></view>{{order.licenseNo}}
						</view>
						<view class="carPeople">被保人：{{order.insuredname}}</view>
					</view>
					<view class="paneBody">
						<view class="line d-flex a-center">
							订单号: {{order.orderno}}
						</view>
						<view class="line d-flex a-center">
							投保险种: {{order.product}}
						</view>
						<view class="line d-flex a-center j-sb">
							<view>报价时间: {{order.createtime}}</view>
							<view class="sign">已缴费</view>
						</view>
						<view class="companyList">
							<view style="d-flex j-sb">
								<text>投保公司：{{order.inscompany}} <text
										style="margin-left:20px;color: red;">{{order.sumpremium}}</text></text>
								<text style="margin-right: 30upx;"></text>
							</view>
						</view>
					</view>
					<view class="paneBottom  d-flex a-center j-end">
						<text class="btn2 d-flex a-center j-center" :data-orderno="order.orderno"
							@tap="openQuoteDetail(order)">查看</text>
						<text class="btn2 d-flex a-center j-center">备忘录</text>
					</view>
				</view>
			</template>

			<!-- 已承保 -->
			<template v-if="order.orderstatus == '7'">
				<view class="orderItemPane  animated fadeIn fast">
					<view class="paneTitle d-flex a-center j-sb">
						<view class="carNumber d-flex a-center">
							<view class="icon iconfont icon-tree-round-car"></view>{{order.licenseNo}}
						</view>
						<view class="carPeople">被保人：{{order.insuredname}}</view>
					</view>
					<view class="paneBody">
						<view class="line d-flex a-center">
							订单号: {{order.orderno}}
						</view>
						<view class="line d-flex a-center">
							投保险种: {{order.product}}
						</view>
						<view class="line d-flex a-center j-sb">
							<view>报价时间: {{order.createtime}}</view>
							<view class="sign">已承保</view>
						</view>
						<view class="companyList">
							<view style="d-flex j-sb">
								<text>投保公司：{{order.inscompany}} <text
										style="margin-left:20px;color: red;">{{order.sumpremium}}</text></text>
								<text style="margin-right: 30upx;"></text>
							</view>
						</view>
					</view>
					<view class="paneBottom  d-flex a-center j-end">
						<text class="btn2 d-flex a-center j-center" :data-orderno="order.orderno"
							@tap="openQuoteDetail(order)">查看</text>
						<text class="btn2 d-flex a-center j-center">备忘录</text>
					</view>
				</view>
			</template>

			<!-- 已关闭 -->
			<template v-if="order.orderstatus == '99'">
				<view class="orderItemPane  animated fadeIn fast">
					<view class="paneTitle d-flex a-center j-sb">
						<view class="carNumber d-flex a-center">
							<view class="icon iconfont icon-tree-round-car"></view>{{order.licenseNo}}
						</view>
						<view class="carPeople">被保人：{{order.insuredname}}</view>
					</view>
					<view class="paneBody">
						<view class="line d-flex a-center">
							订单号: {{order.orderno}}
						</view>
						<view class="line d-flex a-center">
							投保险种: {{order.product}}
						</view>
						<view class="line d-flex a-center j-sb">
							<view>报价时间: {{order.createtime}}</view>
							<view class="sign">已关闭</view>
						</view>
						<view class="companyList">
							<view style="d-flex j-sb">
								<text>投保公司：{{order.inscompany}} <text
										style="margin-left:20px;color: red;">{{order.sumpremium}}</text></text>
								<text style="margin-right: 30upx;"></text>
							</view>
						</view>
					</view>
					<view class="paneBottom  d-flex a-center j-end">
						<text class="btn2 d-flex a-center j-center" :data-orderno="order.orderno"
							@tap="openQuoteDetail(order)">查看</text>
						<text class="btn2 d-flex a-center j-center">备忘录</text>
					</view>
				</view>
			</template>


		</block>
		<template v-if="ordersList.length>0">
			<loadMore :loadStatus="loadStatus"></loadMore>
		</template>

		<wyb-popup ref="popupReason" :scrollY="true" type="center" mode="size-fixed" height="400" width="600"
			radius="6">
			<view class="popupBody">
				<view class="popHeader d-flex a-center j-center">
					退回原因
				</view>
				<view class="popupContent">
					<view class="reason" v-for="(reasonItem,reasonIndex) in reasonList" :key="reasonIndex">
						{{reasonIndex+1}}、{{reasonItem}}
					</view>
				</view>
			</view>
		</wyb-popup>

	</view>
</template>

<script>
	import loadMore from "@/components/modules/orders/load-more.vue";
	import wybPopup from "@/components/common/wyb-popup/wyb-popup.vue"
	export default {
		components: {
			loadMore,
			wybPopup
		},
		data() {
			return {
				reasonList: []
			}
		},
		props: {
			loadStatus: Number,
			ordersList: Array,
			stageIndex: Number
		},
		methods: {
			//跳转订单详情页面Start（公用）
			openQuoteDetail(e) {
				this.navigate({
					url: "/pages/carInsure1/quoteDetail1?orderno=" + e.orderno
				}, 'navigateTo', true)
			},
			//跳转订单详情页面End（公用）
			openPayWay(e) {
				this.navigate({
					url: "/pages/carInsure/payWay?orderno=" + e.orderno
				}, 'navigateTo', false)
			},

			openPayCode(e) {
				this.navigate({
					url: "/pages/carInsure1/payCode1?orderno=" + e.orderno
				}, 'reLaunch', false)
			},
			async confirmPay(e) {
				let paymentParam = {
					orderno: e.orderno
				}
				let res1 = await this.$http.post('/insZhongmei/verifyPayment', paymentParam);
				return uni.showToast({
					icon: "none",
					title: "缴费成功",
					duration: 1500
				})
			},
			//报价中Start
			closeQuoteTask(e) {
				// 关闭报价任务
				var orderno = e.orderno;
				uni.showModal({
					title: '提示',
					content: '是否确认关闭该订单？',
					success: async (resResult) => {
						if (resResult.confirm) {
							let res = await this.$http.post('/insOrder/closeOrder?quoteno=' + orderno);
							if (res.code == 200) {
								this.$emit('searchOrder')
								return uni.showToast({
									icon: "none",
									title: "关闭订单成功",
									duration: 1500
								})
							} else {
								return uni.showToast({
									icon: "none",
									title: "关闭订单失败",
									duration: 1500
								})
							}
						} else if (resResult.cancel) {
							console.log('用户取消了该操作');
						}
					}
				});
			},
			//报价中Start


			// 退回修改Start
			goBackReason(reason) {
				// 退回原因
				this.reasonList = [];
				this.reasonList = reason.split(',');
				console.log(this.reasonList)
				this.$refs.popupReason.show() // 显示
			},

			// 退回修改End
		}
	}
</script>

<style>
	/* 订单区域列表Start */
	.orderItemPane {
		background: #fdfdfd;
	}

	.paneTitle {
		height: 70upx;
		padding: 0px 30upx 0 20upx;
		font-size: 30upx;
		border-bottom: 1upx solid #eee;
	}

	.paneTitle .carNumber>view.icon {
		font-size: 50upx;
		color: #A0A7AF;
		margin-right: 20upx;
	}

	.paneBody {
		padding: 0px 30upx;
		background: #fff;
		font-size: 28upx;
	}

	.paneBody .line {
		height: 60upx;
		line-height: 60upx;
	}

	.paneBody .sign {
		background: #007AFF;
		color: #fff;
		font-size: 26upx;
		border-radius: 5px;
		padding: 0px 10upx;
		height: 50upx;
		line-height: 50upx;
	}

	.companyList {
		/* margin: 0 2%; */
		border-top: 1px solid #F1F0F5;
		font-size: 28upx;
		padding: 10upx 0px;
	}

	.companyList view {
		height: 50upx;
		line-height: 50upx;
	}

	/* 订单区域列表End */

	/* 底部区域Start */
	.paneBottom {
		height: 80upx;
		background: #F0EFF4;
		font-size: 28upx;
	}

	.paneBottom .btn1,
	.paneBottom .btn2 {
		height: 40upx;
		margin: 0 15upx;
		padding: 2upx 10upx;
		border-radius: 5upx;
		background: #fff;
	}

	.paneBottom .btn1 {
		color: #777777;
		border: 1upx solid #777777;
	}

	.paneBottom .btn2 {
		color: #E18C8F;
		border: 1upx solid #E18C8F;
	}

	/* 底部区域End */

	.popupBody {
		padding: 0upx 30upx;
	}

	.popHeader {
		height: 100upx;
		font-size: 34upx;
		font-weight: bold;
		border-bottom: 1px solid #FAFAFA;
	}

	.popupContent {
		padding: 20upx 0;
	}

	.popupContent .reason {
		font-size: 28upx;
	}
</style>
