<template>
	<view class="order-page">
		<view class="input-wrap">
			<AppSearchModule v-model="name" placeholder="请输入客户，支持拼音首字母搜索" @search="searchFn" />
		</view>
		<scroll-view scroll-y class="shop-list">
			<block v-if="!$util.isEmpty(list.data)">
				<view class="shop-item" v-for="(item, index) in list.data" :key="index">
					
					<view class="item-header" @click="gotoDetailsEvent(item)">
						<image
							class="logo"
							:src="item.smallAvatar"
							alt="商品图"
						/>
						<text class="name">{{ item.name }} </text>
					</view>
					<view class="item-main">
						<view class="phone" @click="callUp(item.mobile)" ><i class="iconfont icondianhua1"></i> {{ item.mobile }}</view>
						<view class="price" @click="gotoDetailsEvent(item)">-{{ item.debtAmount }} <text class="iconfont iconxiangyou"></text>
						</view>
					</view>
				</view>
				
			</block>
			<block v-else>
				<AppWrapperEmpty title="暂无记录" :is-empty="$util.isEmpty(list.data)" />
			</block>
		</scroll-view>
		<view class="bar-view">
			<view class="price-view">
				共{{ customNum }}个客户，合计
				<text class="unit">
					¥
				</text>
				<text class="price">
					-{{ debtAmount }}
				</text>
			</view>
		</view>
	</view>
</template>
<script>
import AppSearchModule from "@/components/module/app-search";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import { getDebtListApi } from "@/api/arrears/index";
import { list } from "@/mixins";

export default {
	components: { AppSearchModule, AppWrapperEmpty },
	mixins: [list],

	data() {
		return {
			name: "",
			customNum: "",
			debtAmount: ""
		};
	},
	onShow() {
		if (!this.listLoading) {
			this.searchFn();
		}
	},
	onPullDownRefresh() {
		this.resetList();
		this._list().then(res => {
			uni.stopPullDownRefresh();
		});
	},
	methods: {
		async init() {
			this._list();
		},
		_list() {
			this.listLoading = true;
			return getDebtListApi(this.name)
				.then(res => {
					const {
						data: { customNum, debtAmount }
					} = res;
					this.customNum = customNum;
					this.debtAmount = debtAmount;

					this.completes(res);
					this.listLoading = false;
				})
				.catch(err => {
					this.listLoading = false;
				});
		},
		gotoDetailsEvent(item) {
			// uni.navigateTo({
			// 	url: `/pagesArrears/details?id=${item.id}`,
			// 	success: result => {},
			// 	fail: () => {},
			// 	complete: () => {}
			// });

			this.pageTo({
				url: "/pagesArrears/details",
				query: {
					id: item.id
				}
			});
		},
		searchFn() {
			this.resetList();
			this.init();
		},
		callUp(mobile) {
			uni.makePhoneCall({
				phoneNumber: mobile
			});
		},
	}
};
</script>
<style lang="scss" scoped>
.order-page {
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #f9fbfc;
	.input-wrap {
		padding: 22px 20px 22px 30px;
		background-color: #fff;
	}
	.shop-list {
		padding: 20upx 30upx;
		flex: 1;
		padding-bottom: 50upx;
		.shop-item {
			margin-bottom: 20upx;
			background-color: #fff;
			border-radius: 10upx;
			.item-header {
				display: flex;
				align-items: center;
				padding: 20upx;
				.logo {
					margin-right: 20upx;
					width: 50upx;
					height: 50upx;
					border-radius: 50%;
				}
				.name {
					font-size: 28upx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #333333;
				}
			}
			.item-main {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30upx 20upx;
				border-top: 1px solid #f0f2f6;
				.phone {
					font-size: 28upx;
					font-weight: 400;
					color: #666666;
					line-height: 18upx;
					height:18upx;
					z-index:100;
				}
				.price {
					display: flex;
					align-items: center;
					font-size: 28upx;
					font-weight: 600;
					color: #333333;
					.iconfont {
						font-size: 28upx;
						color: #999999;
					}
				}
				& .icondianhua1 {
					font-size: 30px;
					color: #3385ff;
					margin-right:15upx;
					z-index:100;
				}
			}
		}
	}
	.bar-view {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 0 30upx;
		width: 100%;
		height: 100upx;

		box-shadow: 0px -1px 6px 0px rgba(4, 0, 0, 0.06);

		.price-view {
			display: flex;
			align-items: center;
			color: #333;
			font-size: 24upx;
			.price {
				color: $redColor;
				font-size: 32upx;
			}
			.unit {
				margin: 0 10upx;
				color: $redColor;
				font-size: 24upx;
			}
		}
	}
}
</style>
