<template>
	<view class="pages">
		<u-navbar title="申报记录列表" :border-bottom="false" :background="bgc" title-color='#262B37' 
			height='44'></u-navbar>
        <scroll-view class="list" @scrolltolower="handqixing" scroll-y>
        	<view class="item_list" v-for="(item,index) in list" :key="index">
				<view class="top" style="margin-top: 0;">
					<view class="one"></view>
					<view class="cl" v-if="item.status == 1">未处理</view>
					<view class="cl" style="background-color: red;" v-if="item.status == 2">已驳回</view>
					<view class="cl" style="background-color: #8883F0;" v-if="item.status == 3">已处理</view>
				</view>
        		<view class="top">
        			<view class="one">订单编号</view> <view class="two" style="color: blue;border-bottom: 1px solid blue;" @click="btnorder(item.orderId)">{{item.orderNo == null ? '--' : item.orderNo}}</view>
        		</view>
				<view class="top">
					<view class="one">设备编号</view> <view class="two">{{item.deviceNo == null ? '--' : item.deviceNo}}</view>
				</view>
				<view class="top">
					<view class="one">手机号</view> <view class="two" style="color: blue;border-bottom: 1px solid blue;" @click="btntel(item.mobile)">{{item.mobile == null ? '--' : item.mobile}}</view>
				</view>
				<view class="miaoshu">
					客户描述：{{item.content == null ? '--' : item.content}}
				</view>
				<view class="anniu" v-if="item.status == 1">
					<view class=""></view>
					<view class="">
						<view class="" @click="btndu(item.abnormalId,2,index)">
							驳回
						</view>
						<view class="" @click="btndu(item.abnormalId,3,index)">
							处理
						</view>
					</view>
				</view>
        	</view>
			<view class="" style="width: 100%;text-align: center;margin-top: 30rpx;color: #ccc;">
				当前没有更多申报记录啦...
			</view>
        </scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "",
				},
				pageNum:1,
				total:'',
				list:[]
			}
		},
		computed: {

		},
		onLoad() {
			this.getlist()
		},
		methods: {
			btnorder(orderId){
				if(orderId != null){
					uni.navigateTo({
						url:'/page_user/mapditu/orderxq?billId=' + orderId
					})
				}
			},
			btntel(mobile){
				uni.showModal({
				    title: '提示',
				    content: `是否拨打 ${mobile}？`,
				    success: (res) => {
				      if (res.confirm) {
				        uni.makePhoneCall({ phoneNumber: mobile })
				      }
				    }
				})
			},
			// 点击驳回或者已处理操作
			btndu(abnormalId,num,index){
				let that = this
				uni.showModal({
					title: '提示',
					content: '您确定要进行此操作吗？',
					showCancel: true,
					success: function (res) {
						if (res.confirm) {
							that.$u.put(`/mch/abnormal?abnormalId=${abnormalId}&status=${num}`).then(res =>{
								if(res.code == 200){
									that.list[index].status = num
								}else{
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									})
								}
							})
						} else if (res.cancel) {
							
						}
					}
				})
			},
			// 下拉获取更多数据
			handqixing() {
				console.log(11)
				if(this.total > this.list.length){
					this.getlist()
				}
			},
			// 请求数据
			getlist(){
			    this.$u.get(`/mch/abnormal/list?pageNum=${this.pageNum}&pageSize=10&isAsc=desc`).then((res) => {
			    	if (res.code == 200) {
						this.total = res.total
			    		if(this.pageNum == 1){
							this.list = res.rows
						}else{
							this.list = this.list.concat(res.rows)
						}
						this.pageNum++
			    	}
			    })	
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient( 180deg, #8883F0 0%, rgba(204,229,255,0) 100%);
	}
	.list{
		width: 100%;
		height: 88vh;
		overflow: scroll;
		padding-bottom: 40rpx;
		box-sizing: border-box;
		.item_list{
			width: 680rpx;
			max-height: 5000rpx;
			background-color: #fff;
			border-radius: 20rpx;
			margin: auto;
			margin-top: 30rpx;
			padding: 20rpx;
			box-sizing: border-box;
			.anniu{
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
				view{
					display: flex;
					view{
						padding: 10rpx 20rpx;
						box-sizing: border-box;
						border-radius: 10rpx;
						background-color: #8883F0;
						color: #fff;
						margin-left: 20rpx;
					}
				}
			}
			.miaoshu{
				margin-top: 20rpx;
			}
			.img{
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				view{
					margin-right: 10rpx;
					image{
						width: 100rpx;
						height: 100rpx;
					}
				}
			}
			.top{
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
				.cl{
					padding:4rpx 10rpx;
					box-sizing: border-box;
					background-color: #ccc;
					color: #fff;
					font-weight: 600;
					border-radius: 10rpx;
				}
				.two{
					color: #666;
				}
			}
		}
	}
</style>