<!--
 * @Author: euzhi
 * @Description: 我的呼叫记录
-->
<template>
	<view class="appCotent">
		<view class="myRecord">
			<scroll-list ref="list" :option="option" @load="load" @refresh="refresh">
				<view class="record__item" v-for="(vo,inx) in items" :key="inx">
					<view class="item__top">
						<view class="top__time">
							时间:{{vo.applyDate}}
						</view>
						<view class="top__state" :class="vo.confirmType=='2'?'vx_state':'phone__state'">
							{{vo.confirmType=="1"?'电话':'微信'}}
						</view>
					</view>
					<view class="item__content">
						<view>
							车牌号:{{vo.carNo}}
						</view>
						<view>
							通知类型:{{type}}
						</view>
						<view>
							车主手机号:{{vo.userMobile?vo.userMobile:""}}
						</view>
					</view>
					<view class="item__btn" @click="goDetail(vo.id)">
						<view>
							查看详情
						</view>
					</view>
				</view>
			</scroll-list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				option: {
					size: 10,
					auto: true
				},
				items: [],
				type: '请求他人挪车'
			};
		},
		methods: {
			// 加载数据
			load(paging) {
				setTimeout(() => {
					let list = [];
					this.$http.request({
						url: '/app/moveLog/apply/list?pageSize=' + paging.size + '&pageNum=' + paging.page,
						method:'get',
						data:{},
						isFactory:false,
					}).then(res => {
						if (res.data.code == 200) {
							list = res.data.rows || []
							this.items = [...this.items, ...list]
						
							// 加载成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
							this.$refs.list.loadSuccess({
								list: this.items,
								total: res.data.total
							});
						} else {
							// 加载失败
							this.$refs.list.loadFail()
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}, this.$u.random(100, 1000));
			},
			// 刷新
			refresh(paging) {
				setTimeout(() => {
					let list = [];
					this.$http.request({
						url:'/app/moveLog/apply/list?pageSize=' + paging.size + '&pageNum=' + paging.page,
						method:'get',
						data:{},
						isFactory:false,
					}).then(res => {
						if (res.data.code == 200) {
							list = res.data.rows || []
							this.items = list
						
							// 加载成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
							this.$refs.list.refreshSuccess({
								list: this.items,
								total: res.data.total
							});
						} else {
							// 加载失败
							this.$refs.list.refreshFail()
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}, this.$u.random(100, 1000));
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/pagesB/pages/move-car/callDetail?id=' + id
				})
			},
			getApplyMoveLogList() {
				let opts = {
					url: '/app/moveLog/apply/list',
					method: 'get'
				};
				this.http.httpTokenRequest(opts, {}).then(res => {
					if (res.data.code == 200) {
						this.items = res.data.rows
					}else{
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
		},
		created() {
			//this.getApplyMoveLogList()
		},
	}
</script>

<style lang="scss" scoped>
	.myRecord {
		padding: 40rpx 0rpx;

		.record__item {
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
			border-radius: 20rpx;
			padding: 30rpx 0;
			margin-bottom: 30rpx;

			.item__top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 40rpx;
				border-bottom: 1rpx solid rgba(0, 0, 0, .1);
				padding-bottom: 30rpx;
				margin-bottom: 30rpx;

				.top__state {
					background: #cfffe2;
					width: 70rpx;
					height: 34rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #00AD42;
					line-height: 34rpx;
					text-align: center;
					border-radius: 4rpx;
				}

				.vx_state{
					background: #D0FFE2;
					color:#00AD42;
				}
				.phone__state {
					background: #ffebd8;
					color: rgba(248, 141, 40, 1);
				}

				.top__item {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}

			.item__content {
				padding: 0 40rpx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: space-between;

				>view {
					width: 50%;
					margin-bottom: 30rpx;

					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				>view:nth-of-type(3) {
					width: 100%;
				}
			}

			.item__btn {
				display: flex;
				justify-content: flex-end;
				padding-right: 40rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;

				>view {
					width: 180rpx;
					height: 56rpx;
					text-align: center;
					line-height: 56rpx;
					border: 1rpx solid #DDDDDD;
					border-radius: 50rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;

				}
			}
		}
	}
</style>
