<template>
	<view class="credit_search">
		<view class="select" @tap="pageData.showStatus = !pageData.showStatus" style="display: flex;align-items: center;width: 140rpx;">
			<text>{{pageData.title}}</text>
			<up-icon name="arrow-down-fill" size="12" style="margin-left: 12rpx;"></up-icon>
		</view>
		<view class="input">
			<up-input
				shape='circle'
				border="none"
				v-model="pageData.query.keywords"
				@change="inputEvent"
				type="text" 
				placeholder="搜索挂账人或者手机号"
				prefixIcon="search"
				prefixIconStyle="font-size: 26px;color: #666"
				style='width: 100%;padding: 24rpx;'
				></up-input>
		</view>
		<view class="icon">
			<up-icon @tap="pageData.sheetShow = true" name="list" color="#318AFE" :size="32"></up-icon>
		</view>
		
	</view>
	
	<view :style="{height:pageData.showStatus?statusHeight:0}" class="tranistion statusList  overflow-hide">
		<view @tap="changeNowStatusIndex(index,item)" class="u-flex u-p-l-30 lh30 u-p-r-30 u-row-between"
			v-for="(item,index) in pageData.statusList" :key="index">
			<view :class="{'color-main':pageData.statusIndex===index}">{{item.label}}</view>
		</view>
	</view>

	<view class="debtor" v-if="pageData.list.length">
		<view class="debtorItem" v-for="(item,index) in pageData.list" :key="index">
			<view class="head">
				<text> {{item.id}} </text>
				<view class="headStatus"><text style="margin-right: 16rpx;">是否启用</text> <up-switch v-model="item.status" @change="statusChange(item)" :activeValue="1" :inactiveValue="0"></up-switch> </view>
			</view>
			<view class="content">
				<view class="cell">
					<view class="cell_item"><text>挂账人：</text><text class="val">{{item.debtor}}</text></view>
					<view class="cell_item"><text>已挂账金额：</text><text class="val">{{item.owedAmount}}</text></view>
				</view>
				<view class="cell">
					<view class="cell_item"><text>挂账额度：</text><text class="val">{{item.creditAmount}}</text></view>
					<view class="cell_item"><text>剩余挂账额度：</text><text class="val">{{item.remainingAmount}}</text></view>
				</view>
				<view class="cell">
					<view class="cell_item"><text>账户余额：</text><text class="val">{{item.accountBalance}}</text></view>
					<view class="cell_item"><text>通用门店：</text><text class="val">{{item.shopName}}</text></view>
				</view>
				<view class="cell">
					<view class="cell_item"><text>手机号：</text><text class="val">{{item.mobile}}</text></view>
				</view>
			</view>
			<view class="handle">
				<view class="handle_btn" @tap="toUrl('PAGES_CREDIT_BUYER_REPAYMENTRECORD',{id:item.id})">还款记录</view>
				<view class="handle_btn" @tap="toUrl('PAGES_CREDIT_BUYER_DETAIL',{id:item.id,repaymentMethod:item.repaymentMethod})">查看明细</view>
				<view class="handle_btn" :style="{ color: item.repaymentMethod == 'order' ? '#999' :'',borderColor: item.repaymentMethod == 'order' ? '#999' :''}" @tap="repaymentOpen(item)">还款</view>
				<view class="handle_btn" @tap="toUrl('PAGES_CREDIT_BUYER_ADDDEBTOR',{item:JSON.stringify(item)})">编辑</view>
				<view class="handle_btn" @tap="delDebtor(item)">删除</view>
				
			</view>
		</view>
		<template v-if="pageData.list.length">
			<my-pagination :page="pageData.query.page" :totalElements="pageData.totalElements" :size="pageData.query.size"
				@change="pageChange"></my-pagination>
		</template>
	</view>
	<view v-else style="display: flex;flex-direction: column;align-items: center;justify-content: center;margin-top: 500rpx;">
		<image src="./bg.png" style="width: 325rpx;height: 335rpx;" mode=""></image>
		<view style="font-size: 28rpx;color: #999;margin-top: 20rpx;">暂无数据</view>
	</view>
	<my-repayment ref="repayment" @affirm="affirm"></my-repayment>
	
	<up-action-sheet :actions="pageData.sheetList" @select="selectClick" :show="pageData.sheetShow" round="20" cancelText="取消" @close="pageData.sheetShow=false"></up-action-sheet>
	<up-modal :show="pageData.delShow" title="确认是否删除当前挂账人" @confirm="delConfirm" @cancel="pageData.delShow=false" showCancelButton></up-modal>
	<view class="shade" v-show="pageData.showStatus" @tap="pageData.showStatus=false"></view>
</template>

<script setup>
	import { ref, reactive, computed } from 'vue';
	import { onShow, onReachBottom } from '@dcloudio/uni-app'
	
	import myRepayment from './components/my-repayment';
	import color from '@/commons/color.js';
	import go from '@/commons/utils/go.js';
	import { hasPermission } from '@/commons/utils/hasPermission.js';
	
	import { getCreditBuyerPage,editCreditBuyer,delCreditBuyer } from '@/api/buyer.js';
	
	let pageData = reactive({
		showStatus: false,
		sheetShow: false,
		sheetList: [
			{name: '创建挂账人', value: 'add'}
		],
		delShow: false,
		delItem: null,
		list: [],
		statusList: [
			{ label: '全部状态', value: '' },
			{ label: '未付款', value: 'unpaid' },
			{ label: '部分支付', value: 'partial' },
			{ label: '已付款', value: 'paid' }
		],
		query: {
			page: 1,
			size: 10,
			repaymentStatus: '',
			keywords: ''
		},
		statusIndex: 0,
		title: '全部状态',
		totalElements: 0,
	})
	let repayment = ref(null)
	
	let statusHeight = computed(() => {
		return 30 * pageData.statusList.length + 40 + 'px'
	})

	onShow(() => {
		getList()
	})
	
	/**
	 * 获取挂账人列表
	 */
	async function getList() {
		getCreditBuyerPage({
			keywords: pageData.query.keywords,
			repaymentStatus: pageData.query.repaymentStatus,
			size: pageData.query.size,
			page: pageData.query.page
		}).then(res => {
			pageData.list = res.records
			pageData.totalElements = res.totalRow
		})
	}
	
	/**
	 * 挂账人/手机号筛选
	 */
	function inputEvent(d) {
		pageData.query.keywords = d.replace(/\s*/g, "");
		getList()
	}
	
	function changeNowStatusIndex(i,item) {
		pageData.statusIndex = i
		pageData.showStatus = false
		pageData.title = item.label
		pageData.query.repaymentStatus = item.value
		getList()
	}
	// 页数改变事件
	function pageChange(page) {
		console.log(page)
		pageData.query.page = page
		getList()
	}
	
	/**
	 * 状态修改
	 */
	let statusChange = (item) => {
		editCreditBuyer(item).then((res) => {})
	}

	/*
	 * 操作
	 */
	let selectClick = (e) => {  
		if(e.value == 'add') {
			toUrl('PAGES_CREDIT_BUYER_ADDDEBTOR')
		}
	};  
	let repaymentOpen = (item) => {
		if ( item.repaymentMethod == 'order' ) {
			return;
		}
		repayment.value.open(item);
	}
	let affirm = (item) => {
		getList()
	}
	/**
	 * 删除挂账人
	 */
	let delDebtor = (item) => {
		pageData.delShow = true;
		pageData.delItem = item;
		
	}
	let delConfirm = () => {
		pageData.delShow = false;
		delCreditBuyer(pageData.delItem.id).then(res => {
			getList()
		})
	}
	
	/**
	 * 跳转
	 */
	let toUrl = (url, d) => {
		
		go.to(url, d)
	}
</script>
<style>
	page {
		background-color: #f9f9f9;
	}
</style>
<style scoped lang="less">
	.shade{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		margin: auto;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.credit_search {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		padding: 32rpx 28rpx;
		background-color: #fff;
		position: fixed;
		top: 0;
		z-index: 9;
		>view:first-child,
		>view:last-child {
			font-size: 24rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 500;
			color: #333333;
		}

		>view:last-child {
			color: #318AFE;
		}
		.select{
			flex-shrink: 0;
		}

		.input {
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			align-items: center;

			background: #F9F9F9;
			border-radius: 32rpx 32rpx 32rpx 32rpx;

			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;

		}
		.icon{
			width: 90rpx;
		}
	}
	
	.statusList {
		position: fixed;
		top: 124rpx;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #fff;
		>view{
			margin-bottom: 16rpx;
			margin-top: 16rpx;
		}
	}
	.debtor{
		padding: 152rpx 28rpx 32rpx 28rpx;
		.debtorItem{
			padding: 24rpx 16rpx;
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 32rpx;
			.head{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				.headStatus{
					display: flex;
					align-items: center;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}
			.content{
				background-color: #f9f9f9;
				border-radius: 12rpx;
				padding: 24rpx;
				display: flex;
				flex-direction: column;
				margin-bottom: 32rpx;
				.cell{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 16rpx;
					.cell_item{
						flex-shrink: 0;
						font-weight: bold;
						font-size: 24rpx;
						color: #666666;
						.val{
							color: #333333;
						}
					}
				}
			}
			.handle{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.handle_btn{
					font-weight: 400;
					font-size: 24rpx;
					color: #318AFE;
					padding: 10rpx 18rpx;
					border-radius: 28rpx 28rpx 28rpx 28rpx;
					border: 2rpx solid #318AFE;
				}
			}
		}
	}
</style>