<template>
	<view>
		<view class="container" style="background: #fff;padding-top: 0;">
			<block v-if="isLogin">
				<view class="serch-box">
					<shopping-search ref="shoppingSearch" :placeholder="$t('index.enter')+$t('index.order-code')"
						@search="onSearch" @screen="openScreen" />
				</view>
			</block>
			<block v-if="isLogin && orderList.length">
				<view class="list-box" v-for="(item, index) in orderList" :key="item.orderNum">
					<view class="content-detail">
						<view class="left">
							<view class="lable">{{$t('index.order-code')}}：<text class="value">{{item.orderNum}}</text>
							</view>
							<view class="lable">{{$t('index.contract-code')}}：<text
									class="value">{{item.contractNum || $t('index.none')}}</text></view>
							<view class="lable">{{$t('index.product-name')}}：<text
									class="value">{{item.productName}}</text>
							</view>
							<view class="lable">{{$t('index.product-num')}}：<text
									class="value">{{item.totalCount}}</text>
							</view>
							<view class="lable">{{$t('index.product-total-sum')}}：<text
									class="value">{{item.totalAmount}}{{$t('index.unit.price')}}</text>
							</view>
							<view class="lable">{{$t('index.procure-time')}}：<text
									class="value">{{item.createDate}}</text>
							</view>
						</view>
					</view>
					<view class="flag-box">
						<view class="flag" :class="item.payStatus === 'unPay' ? 'unPay' : (item.payStatus === 'payed' ? 'payed' : 'partPay')">{{item.payStatusName}}</view>
						<view class="flag" :class="item.deliverStatus === 'noDeliver' ? 'unPay' : (item.deliverStatus === 'allDeliver' ? 'payed' : 'partPay')">{{item.deliverStatusName}}</view>
						<view class="flag" :class="item.reconcileStatus === 'noReconcile' ? 'unPay' : (item.reconcileStatus === 'allReconcile' ? 'payed' : 'partPay')">{{item.reconcileStatusName}}</view>
					</view>
					<view class="handle-box" @click="openHandle(item, index)">
						<view class="handle">
							<view class="icon">
								<uni-icons type="more-filled" size="20" color="#333"></uni-icons>
							</view>
						</view>
					</view>
				</view>
				<uni-load-more :status="listStatus"></uni-load-more>
			</block>

			<auth-btn :show="!isLogin" url="/pages/dealt/index"></auth-btn>
			<no-data :show="isNoData"></no-data>
		</view>
		<uni-popup backgroundColor="white" safeArea="true" ref="screenPopup" type="bottom" @change="handPopupChange">
			<view class="screen-box">
				<uni-icons class="close" type="closeempty" size="24" color="#D5E2F3"
					@click="$refs.screenPopup.close()"></uni-icons>
				<view class="title">{{$t('index.order-tag')}}</view>
				<view class="screen">
					<view class="chunk-box" v-for="(list, index) in screenList" :key="list.title">
						<view class="chunk-title">{{list.title}}</view>
						<view class="box">
							<view v-for="item in list.list" :key="item.name" class="chunk"
								:class="{'active': list.active === item.name}" @click="choseItem(item, index)">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>

				<view class="confirm-box">
					<view @click="onReset" class="btn reset">{{$t('index.reset')}}</view>
					<view @click="onConfirm" class="btn confirm">{{$t('index.sure')}}</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup backgroundColor="white" safeArea="true" ref="handPopup" type="bottom" @change="handPopupChange"
			:safe-area="false">
			<view class="handle-list">
				<view class="handle" v-for="(item,index) in handleList" :key="index" @click="onHandleDetail(item)">
					{{item.name}}
				</view>
				<view style="border-bottom: none;border-top: 4px solid #f6f7f8;" class="handle cancel" @click="$refs.handPopup.close()">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getBuyerList,
		deleteByIds,
		cancelById,
		closeById,
		onlineInspectionApi
	} from '@/config/api.js'
	import ShoppingSearch from '../../components/shopping-search/shopping-search.vue';
	import noData from '../../components/no-data/no-data.vue';
	import authBtn from '../../components/auth-btn/auth-btn.vue';
	import {
		hasPerm
	} from '@/utils/util.js'
	let current_order_key = null;
	export default {
		name: 'dealt',
		components: {
			ShoppingSearch,
			noData,
			authBtn
		},
		data() {
			return {
				isLogin: false,
				page: 1,
				listStatus: 'more',
				orderList: [],
				screenList: [{
						active: this.$t('index.screen.pay.all'),
						title: this.$t('index.screen.pay.status'),
						list: [{
								name: this.$t('index.screen.pay.all'),
								code: ''
							},
							{
								name: this.$t('index.screen.pay.wait'),
								code: 'unPay'
							},
							{
								name: this.$t('index.screen.pay.part'),
								code: 'partPay'
							},
							{
								name: this.$t('index.screen.pay.end.review'),
								code: 'balanceWaitExamine'
							},
							{
								name: this.$t('index.screen.pay.end.reject'),
								code: 'balanceReject'
							},
							{
								name: this.$t('index.screen.pay.done'),
								code: 'payed'
							}
						]
					},
					{
						active: this.$t('index.screen.stage.all'),
						title: this.$t('index.screen.stage.status'),
						list: [{
								name: this.$t('index.screen.stage.all'),
								code: ''
							},
							{
								name: this.$t('index.screen.stage.review'),
								code: 'platformExamine'
							},
							{
								name: this.$t('index.screen.stage.contract'),
								code: 'contract'
							},
							{
								name: this.$t('index.screen.stage.margin'),
								code: 'margin'
							},
							{
								name: this.$t('index.screen.stage.deliver'),
								code: 'deliver'
							},
							{
								name: this.$t('index.screen.stage.receive'),
								code: 'receive'
							},
							{
								name: this.$t('index.screen.stage.reconcile'),
								code: 'reconcile'
							},
							{
								name: this.$t('index.screen.stage.invoice'),
								code: 'invoice'
							},
							{
								name: this.$t('index.screen.stage.finished'),
								code: 'finished'
							},
							{
								name: this.$t('index.screen.stage.close'),
								code: 'close'
							},
							{
								name: this.$t('index.screen.stage.cancel'),
								code: 'cancel'
							}
						]
					},
					{
						active: this.$t('index.screen.deliver.all'),
						title: this.$t('index.screen.deliver.status'),
						list: [{
								name: this.$t('index.screen.deliver.all'),
								code: ''
							},
							{
								name: this.$t('index.screen.deliver.deliver'),
								code: 'deliver'
							},
							{
								name: this.$t('index.screen.deliver.self'),
								code: 'self'
							},
							{
								name: this.$t('index.screen.deliver.self.deliver'),
								code: 'selfDeliver'
							}
						]
					},
					{
						active: this.$t('index.screen.order.all'),
						title: this.$t('index.screen.order.type'),
						list: [{
								name: this.$t('index.screen.order.all'),
								code: ''
							},
							{
								name: this.$t('index.screen.order.commonly'),
								code: 'commonly'
							},
							{
								name: this.$t('index.screen.order.financing'),
								code: 'financing'
							}
						]
					}
				],
				screenObj: {
					stage: '',
				},
				handleList: []
			}
		},
		computed: {
			isNoData() {
				return this.isLogin && this.orderList.length === 0
			}
		},
		methods: {
			getBuyerList() {
				getBuyerList({}, {
					params: {
						page: this.page,
						rows: 10,
						orderNum: this.$refs.shoppingSearch ? (this.$refs.shoppingSearch.searchValue || '') : '',
						...this.screenObj
					}
				}).then(({
					content
				}) => {
					let data = content.content
					if (this.page === 1) {
						this.orderList = data
					} else {
						this.orderList = [...this.orderList, ...data]
					}
					if (this.page >= content.totalPages) {
						this.listStatus = 'noMore'
					} else {
						this.page++
						this.listStatus = 'more'
					}
				})
			},
			onSearch(value) {
				this.page = 1
				this.getBuyerList()
			},
			onConfirm() {
				this.page = 1
				// this.orderList = []
				this.getBuyerList()
				this.closePopup()
			},
			onReset() {
				Object.assign(this.$data, this.$options.data(), {
					isLogin: true
				})
				this.$refs.shoppingSearch.searchValue = ''
				this.getBuyerList()
				this.closePopup()
			},
			openScreen(e) {
				this.$refs.screenPopup.open()
			},
			closePopup() {
				this.$refs.screenPopup.close()
			},
			openHandle(item, index) {
				let handleList = []
				handleList = [{
					name: this.$t('index.detail'),
					type: 'detail'
				}]
				const userInfo = JSON.parse(uni.getStorageSync('userInfo'))
				if(userInfo.userCurrentPlat === 'operator') {
					if(item.stage == 'platformExamine' && item.platformExamineStatus != 'platformExamineReject' && !item.isSupplierAudit && hasPerm('Proprietary-side-ProcurementSalesOrder-Sales-ModifyPrice')) {
						handleList.push({
							name: '修改价格',
							type: 'modify'
						})
					}
					if(item.stage == 'platformExamine' && item.platformExamineStatus != 'platformExamineReject' && !item.isSupplierAudit && hasPerm('Proprietary-side-ProcurementSalesOrder-Sales-OrderReview')) {
						handleList.push({
							name: '订单审核',
							type: 'orderVerify'
						})
					}
					if (['margin', 'deliver', 'reconcile', 'invoice', 'receive', 'contract'].includes(item.stage) && hasPerm('Proprietary-side-ProcurementSalesOrder-Sales-ContractConfirmation')) {
						handleList.push({
							name: item.contractStatus === 'contractWaitConfirmed' ? '签署合同' : this.$t('index.contract-upload'),
							type: 'contract'
						})
					}
					if(item.stage == 'margin' && item.payStatus == 'marginWaitExamine' && hasPerm('Proprietary-side-ProcurementSalesOrder-Sales-MarginSubmission')) {
						handleList.push({
							name: '定金审核',
							type: 'deposit'
						})
					}
					if(item.stage == 'deliver' && item.deliverStatus == 'noDeliver' && item.payStatus == 'marginRefundWaitExamine' && hasPerm('Proprietary-side-ProcurementSalesOrder-Sales-ReviewDepositRefund')) {
						handleList.push({
							name: '审核定金退款',
							type: 'depositVerify'
						})
					}
					if(item.payStatus != 'marginRefundWaitExamine' && item.sourceClass != 'directSupply' && (item.stage == 'deliver' || item.deliverStatus == 'partDeliver') && hasPerm('Proprietary-side-ProcurementSalesOrder-Sales-Delivery')) {
						handleList.push({
							name: '发货',
							type: 'receiving'
						})
					}
					if(item.sellerDeliverNoticeCount > 0 && item.sourceClass != 'directSupply' && hasPerm('Proprietary-side-ProcurementSalesOrder-Sales-Delivery')) {
						handleList.push({
							name: '出库',
							type: 'outbound'
						})
					}
					if(item.stage == 'reconcile' || (item.reconcileStatus == 'partReconcile' && hasPerm('Proprietary-side-ProcurementSalesOrder-Sales-Reconciliation') && item.sellerWaitReconcileCount > 0)) {
						handleList.push({
							name: '对账',
							type: 'reconciliation'
						})
					}
					if(item.invoiceStatus == 'partInvoice' && item.sellerWaitInvoiceConfirmCount > 0 && hasPerm('Proprietary-side-ProcurementSalesOrder-Sales-ApplicationInvoice')) {
						handleList.push({
							name: '开票',
							type: 'invoicing'
						})
					}
					if(item.payStatus == 'balanceWaitExamine' && !item.isSellerNotStatusPend && item.stage != 'close' && item.stage != 'cancel' && hasPerm('Proprietary-side-ProcurementSalesOrder-Sales-BalancePayment')) {
						handleList.push({
							name: '尾款审核',
							type: 'balanceVerify'
						})
					}
					if(item.stage != 'close'&& item.stage != 'cancel' && item.payStatus == 'balanceRefundWaitExamine' && hasPerm('Proprietary-side-ProcurementSalesOrder-Sales-ReviewPaymentRefund')) {
						handleList.push({
							name: '审核尾款退款',
							type: 'balanceRefund'
						})
					}
					if ((['platformWaitExamine', 'contract', 'margin', 'deliver'].includes(item.stage) || item.deliverStatus == 'noDeliver') && item.stage !== 'close'&&item.stage !== 'cancel' && !item.isSellerDeposit && hasPerm('Proprietary-side-ProcurementSalesOrder-Sales-Cancel')) {
						handleList.push({
							name: '取消订单',
							type: 'cancel'
						})
					}
					if ((['platformWaitExamine', 'contract', 'margin', 'deliver'].includes(item.stage) || item.deliverStatus == 'noDeliver') && item.stage !== 'close'&&item.stage !== 'cancel' && !item.isSellerDeposit && hasPerm('Proprietary-side-ProcurementSalesOrder-Sales-Closeorder')) {
						handleList.push({
							name: '关闭订单',
							type: 'cancel'
						})
					}
					if((item.platformExamineStatus == 'platformWaitExamine' || item.supplierExamineStatus == 'supplierWaitExamine')  && hasPerm('Proprietary-side-ProcurementSalesOrder-Sales-delete')) {
						handleList.push({
							name: '删除订单',
							type: 'edit'
						})
					}
				} else if(userInfo.userCurrentPlat === 'supplier') {
					if(item.supplierExamineStatus == 'supplierWaitExamine') {
						handleList.push({
							name: '订单审核',
							type: 'orderVerify'
						})
					}
					if(item.inspectionStatus === 'sellerWaitConfirm' && !['close', 'cancel', 'finished'].includes(item.stage)) {
						handleList.push({
							inspectionMethod: item.inspectionMethod,
							name: '确认验货',
							type: 'inspectionGoods'
						})
					}
					if (['margin', 'deliver', 'reconcile', 'invoice', 'receive', 'contract'].includes(item.stage) && hasPerm('Supplier-side-SalesOrder-ContractConfirmation')) {
						handleList.push({
							name: item.contractStatus === 'contractWaitConfirmed' ? '签署合同' : this.$t('index.contract-upload'),
							type: 'contract'
						})
					}
					if(item.payStatus == 'marginWaitExamine' && hasPerm('Supplier-side-SalesOrder-MarginSubmission')) {
						handleList.push({
							name: '定金审核',
							type: 'deposit'
						})
					}
					if(item.stage == 'deliver' && item.deliverStatus == 'noDeliver' && item.payStatus == 'marginRefundWaitExamine' && hasPerm('Supplier-side-SalesOrder-ReviewDepositRefund')) {
						handleList.push({
							name: '审核定金退款',
							type: 'depositVerify'
						})
					}
					if(item.payStatus != 'marginRefundWaitExamine' && (item.deliverStatus == 'partDeliver' || (item.stage == 'deliver' && item.deliverStatus == 'noDeliver')) && hasPerm('Supplier-side-SalesOrder-Delivery')) {
						handleList.push({
							name: '发货',
							type: 'receiving'
						})
					}
					if(item.sellerDeliverNoticeCount > 0 && hasPerm('Supplier-side-SalesOrder-Delivery')) {
						handleList.push({
							name: '出库',
							type: 'outbound'
						})
					}
					if((item.stage == 'reconcile' || item.reconcileStatus == 'partReconcile') && hasPerm('Supplier-side-SalesOrder-Reconciliation') && item.sellerWaitReconcileCount > 0) {
						handleList.push({
							name: '对账',
							type: 'reconciliation'
						})
					}
					if(item.invoiceStatus == 'partInvoice' && item.sellerWaitInvoiceConfirmCount > 0 && hasPerm('Supplier-side-SalesOrder-ApplicationInvoice')) {
						handleList.push({
							name: '开票',
							type: 'invoicing'
						})
					}
					if(item.payStatus == 'balanceWaitExamine' && item.stage != 'close' && item.stage != 'cancel' && hasPerm('Supplier-side-SalesOrder-ReviewPaymentRefund')) {
						handleList.push({
							name: '尾款审核',
							type: 'balanceVerify'
						})
					}
					if(item.stage != 'close'&& item.stage != 'cancel' && item.payStatus == 'balanceRefundWaitExamine' && hasPerm('Supplier-side-SalesOrder-ReviewPaymentRefund')) {
						handleList.push({
							name: '审核尾款退款',
							type: 'balanceRefund'
						})
					}
					if ((['platformWaitExamine', 'contract', 'margin', 'deliver'].includes(item.stage) || item.deliverStatus == 'noDeliver') && item.stage !== 'close'&&item.stage !== 'cancel' && !item.isSellerDeposit && hasPerm('Supplier-side-SalesOrder-Cancel')) {
						handleList.push({
							name: '取消订单',
							type: 'cancel'
						})
					}
					if ((['platformExamine', 'contract', 'margin', 'deliver'].includes(item.stage) || item.deliverStatus == 'noDeliver') && item.stage !== 'close'&&item.stage !== 'cancel' && !item.isSellerDeposit && hasPerm('Supplier-side-SalesOrder-Closeorder')) {
						handleList.push({
							name: '关闭订单',
							type: 'cancel'
						})
					}
					if((item.stage == 'platformExamine' || item.supplierExamineStatus == 'supplierWaitExamine') && hasPerm('Supplier-side-SalesOrder-Closeorder')) {
						handleList.push({
							name: '删除订单',
							type: 'edit'
						})
					}
				} else { // userInfo.userCurrentPlat === 'seller'
					if(item.stage == 'platformExamine' && item.platformExamineStatus == 'platformWaitExamine' && hasPerm('Seller-side-SalesOrder-OrderReview')) {
						handleList.push({
							name: '订单审核',
							type: 'orderVerify'
						})
					}
					if (['margin', 'deliver', 'reconcile', 'invoice', 'receive', 'contract'].includes(item.stage) && hasPerm('Seller-side-SalesOrder-ContractConfirmation')) {
						handleList.push({
							name: item.contractStatus === 'contractWaitConfirmed' ? '签署合同' : this.$t('index.contract-upload'),
							type: 'contract'
						})
					}
					if(item.payStatus == 'marginWaitExamine' && hasPerm('Seller-side-SalesOrder-MarginSubmission')) {
						handleList.push({
							name: '定金审核',
							type: 'deposit'
						})
					}
					if(item.stage == 'deliver' && item.deliverStatus == 'noDeliver' && item.payStatus == 'marginRefundWaitExamine' && hasPerm('Seller-side-SalesOrder-ReviewDepositRefund')) {
						handleList.push({
							name: '审核定金退款',
							type: 'depositVerify'
						})
					}
					if(item.payStatus != 'marginRefundWaitExamine' && (item.deliverStatus == 'partDeliver' || (item.stage == 'deliver' && item.deliverStatus == 'noDeliver')) && hasPerm('Seller-side-SalesOrder-Delivery')) {
						handleList.push({
							name: '发货',
							type: 'receiving'
						})
					}
					if(item.sellerDeliverNoticeCount > 0 && hasPerm('Seller-side-SalesOrder-Delivery')) {
						handleList.push({
							name: '出库',
							type: 'outbound'
						})
					}
					if((item.stage == 'reconcile' || item.reconcileStatus == 'partReconcile') && hasPerm('Seller-side-SalesOrder-Reconciliation') && item.sellerWaitReconcileCount > 0) {
						handleList.push({
							name: '对账',
							type: 'reconciliation'
						})
					}
					if(item.invoiceStatus == 'partInvoice' && item.sellerWaitInvoiceConfirmCount > 0 && hasPerm('Seller-side-SalesOrder-ApplicationInvoice')) {
						handleList.push({
							name: '开票',
							type: 'invoicing'
						})
					}
					if(item.payStatus == 'balanceWaitExamine' && item.stage != 'close' && item.stage != 'cancel' && hasPerm('Seller-side-SalesOrder-BalancePayment')) {
						handleList.push({
							name: '尾款审核',
							type: 'balanceVerify'
						})
					}
					if(item.stage != 'close'&& item.stage != 'cancel' && item.payStatus == 'balanceRefundWaitExamine' && hasPerm('Seller-side-SalesOrder-ReviewPaymentRefund')) {
						handleList.push({
							name: '审核尾款退款',
							type: 'balanceRefund'
						})
					}
					if ((['platformWaitExamine', 'contract', 'margin', 'deliver'].includes(item.stage) || item.deliverStatus === 'noDeliver') && item.stage !== 'close' && item.stage !== 'cancel' && !item.isSellerDeposit && hasPerm('Seller-side-SalesOrder-Cancel')) {
						handleList.push({
							name: '取消订单',
							type: 'cancel'
						})
					}
					if ((['platformExamine', 'contract', 'margin', 'deliver'].includes(item.stage) || item.deliverStatus === 'noDeliver') && item.stage !== 'close'&&item.stage !== 'cancel' && !item.isSellerDeposit && hasPerm('Seller-side-SalesOrder-Closeorder')) {
						handleList.push({
							name: '关闭订单',
							type: 'cancel'
						})
					}
					if(item.stage == 'platformExamine' && hasPerm('Seller-side-SalesOrder-Delete')) {
						handleList.push({
							name: '删除订单',
							type: 'edit'
						})
					}
				}
				current_order_key = index
				this.handleList = handleList
				this.$nextTick(() => {
					this.$refs.handPopup.open()
				})
			},
			handPopupChange(e) {
				if (e.show) {
					wx.hideTabBar()
				} else {
					wx.showTabBar()
				}
			},
			choseItem(item, index) {
				this.screenList[index].active = item.name
				if (index === 0) this.screenObj.payStatus = item.code
				if (index === 1) this.screenObj.stage = item.code
				if (index === 2) this.screenObj.receiveType = item.code
				if (index === 3) this.screenObj.creditFacilitiesType = item.code
			},
			onHandleDetail(item) {
				console.log(item)
				this.$refs.handPopup.close()
				let _this = this;
				let id = this.orderList[current_order_key].orderId
				switch (item.type) {
					case 'cancel':
						uni.showModal({
							title: this.$t('index.notice'),
							content: this.$t('index.msg.order.cancel.tip'),
							success: function(res) {
								if (res.confirm) {
									_this.cancelOrder(id)
								}
							}
						});
						break;
					case 'close':
						uni.showModal({
							title: this.$t('index.notice'),
							content: this.$t('index.msg.order.close.tip'),
							success: function(res) {
								if (res.confirm) {
									_this.closeOrder(id)
								}
							}
						});
						break;
					case 'delete':
						uni.showModal({
							title: this.$t('index.notice'),
							content: this.$t('index.msg.order.delete.tip'),
							success: function(res) {
								if (res.confirm) {
									_this.deleteOrder(id)
								}
							}
						});
						break;
					case 'inspectionGoods':
						if(item.inspectionMethod === '1') {
							uni.navigateTo({
								url: `/pages/detail/index?id=${id}&type=${item.type}`
							})
						} else {
							uni.showModal({
								title: '线上验货',
								content: '确定线上验货吗？',
								success: function(res) {
									if (res.confirm) {
										_this.inspectionOnline(id)
									}
								}
							});
						}
						break;
					default:
						uni.navigateTo({
							url: `/pages/detail/index?id=${id}&type=${item.type}`
						})
				}
			},
			cancelOrder(id) {
				cancelById({
					id
				}).then(res => {
					setTimeout(() => {
						uni.showToast({
							title: this.$t('index.success'),
							icon: 'none'
						});
					}, 30)
					this.page = 1
					this.getBuyerList()
				})
			},
			closeOrder(id) {
				closeById({
					id
				}).then(res => {
					setTimeout(() => {
						uni.showToast({
							title: this.$t('index.success'),
							icon: 'none'
						});
					}, 30)
					this.page = 1
					this.getBuyerList()
				})
			},
			deleteOrder(id) {
				deleteByIds({}, {
					data: [id]
				}).then(res => {
					setTimeout(() => {
						uni.showToast({
							title: this.$t('index.success'),
							icon: 'none'
						});
					}, 30)
					this.orderList.splice(current_order_key, 1)
				})
			},
			inspectionOnline(id) {
				onlineInspectionApi(id).then(res=> {
					setTimeout(() => {
						uni.showToast({
							title: "确认验货成功！",
							icon: 'none'
						});
					}, 30)
					this.page = 1
					this.getBuyerList()
				})
			}
		},
		onShow() {
			const value = uni.getStorageSync('token');
			this.isLogin = !!value
			if (!!value) this.onSearch()
		},
		onPullDownRefresh() {
			this.page = 1
			// this.orderList = []
			this.getBuyerList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
		},
		onReachBottom() {
			if (this.listStatus === 'noMore') return
			this.listStatus = 'loading'
			this.getBuyerList()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-top: 110rpx;
		background: transparent;
	}

	.serch-box {

		padding: 20rpx 30rpx;
		box-shadow: 0px 1px 8px 0px rgba(22, 119, 255, 0.1);
		border-radius: 0px 0px 10rpx 10rpx;
		background: #FFFFFF;
	}

	.list-box {
		background: #FFFFFF;
		box-shadow: 0px 1px 8px 0px rgba(22, 119, 255, 0.08);
		margin: 30rpx 30rpx 0 30rpx;
		padding: 20rpx 30rpx;
		border: 1rpx solid #D5E2F3;
		position: relative;

		.order-code {
			height: 68rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.code {
				font-size: 28rpx;
				color: #B60001;
			}
		}

		.content-detail {
			display: flex;
			justify-content: space-between;
			align-items: center;

			padding: 10rpx 0;

			.left {
				display: flex;
				flex-direction: column;

				.lable {
					margin: 10rpx 0;
					font-size: 28rpx;
					color: #99A0AF;

					.value {
						color: #222;
					}
				}
			}

			.right {
				font-size: 12px;
				color: #B60001;

				.price {
					font-size: 40rpx;
					color: #B60001;
				}
			}
		}

		.flag-box {
			height: 86rpx;
			display: flex;
			align-items: center;

			.text {
				font-size: 28rpx;
				color: #99A0AF;
			}

			.flag {
				height: 44rpx;
				line-height: 44rpx;
				text-align: center;
				border-radius: 2rpx;
				font-size: 12px;
				box-sizing: border-box;
				margin-left: 20rpx;
				padding: 0 20rpx;

				&.unPay {
					color: #B60001;
					background-color: #E6E7EB;
					border: 1rpx solid #B60001;
				}

				&.payed {
					color: #33B345;
					background-color: #FFFFFF;
					border: 1rpx solid #83D18E;
				}

				&.partPay {
					color: #CE963D;
					background-color: #FFFFFF;
					border: 1rpx solid #E8CDA3;
				}
			}
		}

		.flag:nth-child(1) {
			margin-left: 0;
		}

		.handle-box {
			position: absolute;
			top: 0;
			right: 0;
			z-index: 1;

			.handle {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 88rpx;
				width: 88rpx;
				font-size: 0;

				.icon {
					height: 14px;
					line-height: 16px;
					text-align: center;
				}

				.text {
					font-size: 28rpx;
					color: #FFFFFF;
					margin-left: 4px;
				}
			}
		}
	}

	.screen-box {
		background-color: #fff;
		padding: 30rpx 0;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		position: relative;

		.close {
			position: absolute;
			top: 30rpx;
			right: 30rpx;
		}

		.title {
			font-size: 34rpx;
			color: #B60001;
			text-align: center;
		}

		.screen {
			max-height: 70vh;
			min-height: 40vh;
			overflow-y: auto;

			.chunk-box {
				margin-top: 30rpx;

				.chunk-title {
					font-size: 32rpx;
					color: #B60001;
					padding: 0 30rpx;
				}

				.box {
					display: flex;
					flex-wrap: wrap;
					padding-left: 30rpx;
					padding-right: 10rpx;

					.chunk {
						box-sizing: border-box;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						padding: 0 30rpx;
						min-width: 120rpx;
						font-size: 28rpx;
						color: #B60001;
						border: 1rpx solid #D5E2F3;
						border-radius: 30rpx;
						margin-top: 30rpx;
						margin-right: 20rpx;
						transition: all .3s;

						&.active {
							border: none;
							background-color: #B60001;
							color: #fff;
						}
					}
				}

				// .btn-box {
				// 	padding: 0 30rpx;

				// 	.btn {
				// 		height: 60rpx;
				// 		line-height: 60rpx;
				// 		border: 1rpx solid #D5E2F3;
				// 		border-radius: 30rpx;
				// 		font-size: 28rpx;
				// 		color: #B60001;
				// 		margin-top: 20rpx;
				// 		text-align: center;
				// 	}
				// }
			}
		}

		.confirm-box {
			margin-top: 50rpx;
			padding: 0 30rpx;
			display: flex;
			font-size: 28rpx;
			color: #FFFFFF;

			.btn {
				width: 50%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;

				&.reset {
					background-color: #F36E03;
					border-top-left-radius: 40rpx;
					border-bottom-left-radius: 40rpx;
				}

				&.confirm {
					background-color: #DE0000;
					border-top-right-radius: 40rpx;
					border-bottom-right-radius: 40rpx;
				}
			}
		}
	}

	.handle-list {
		background-color: #fff;

		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		max-height: 70vh;
		// min-height: 40vh;
		overflow-y: auto;

		.handle {
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 28rpx;
			color: #333;
			border-bottom: 1rpx solid #F6F7F8;

			&.cancel {
				color: #B60001;
			}
		}
	}
</style>