<template>
	<view class="time-wrapper">
		<view v-for="(v, i) in timeList" :key="i" class="timelistbox">
			<view class="time-item" @tap="changeTime(v.value)" :class="{ 'time-selected':v.value==selected }">
				{{v.label}}
			</view>
			<view class="xian" v-if="v.value==selected "> </view>
		</view>
	</view>
	<view class="paymentSettlement">
		<view :style="{color:datas.activeType==0?'#318AFE':''}" @tap="switchType(0)">全部</view>
		<view :style="{color:datas.activeType==1?'#318AFE':''}" @tap="switchType(1)">进货</view>
		<view :style="{color:datas.activeType==2?'#318AFE':''}" @tap="switchType(2)">退货</view>
		<view :style="{color:datas.activeType==3?'#318AFE':''}" @tap="switchType(3)">未支付</view>
		<view :style="{color:datas.activeType==4?'#318AFE':''}" @tap="switchType(4)">已付款</view>
	</view>
	<view class="supplier">
		<view v-for="item in datas.list" :key="item.id">
			<view style="position: relative;">

				<view>
					<view style="font-weight: 500;font-size: 28rpx;color: #333333;">
						{{item.totalAmount}}
					</view>
					<view style="font-weight: 400;font-size: 24rpx;color: #666666;">
						应付金额(元)
					</view>
				</view>
				<view>
					<view style="font-weight: 500;font-size: 28rpx;color: #333333;">
						{{item.paidAmount}}
					</view>
					<view style="font-weight: 400;font-size: 24rpx;color: #666666;">
						已付金额(元)
					</view>
				</view>
				<view>
					<view style="font-weight: 500;font-size: 28rpx;color: #F02C45;">
						{{item.waitAmount}}
					</view>
					<view style="font-weight: 400;font-size: 24rpx;color: #666666;">
						待支付金额(元)
					</view>
				</view>
				<view v-if="item.status==0"
					style="position: absolute;left: 0;top: 0;width: 88rpx;line-height: 36rpx;background: #FF895C;border-radius: 8rpx 0rpx 8rpx 0rpx;font-weight: 400;font-size: 20rpx;	color: #FFFFFF; ">
					待付款
				</view>
			</view>
			<view class="df">
				<span>创建日期</span>
				<span>{{dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')}}</span>
			</view>
			<view class="df">
				<span>类型</span>
				<span>{{typeFilter(item.type)}}</span>
			</view>
			<view class="df">
				<span>付款时间</span>
				<span>{{dayjs(item.updatedAt).format('YYYY-MM-DD HH:mm:ss')}}</span>
			</view>
			<view>
				
			<!-- 	<up-button shape="circle" type="primary" size="mini"   color="#999" @tap="toUrl('PAGES_VIEWRECORDS',{item:JSON.stringify(item)})"
						:plain="true" text="查看记录"></up-button>&nbsp;&nbsp;
					<up-button type="primary"    shape="circle" size="mini"  @click="toggle(item)" :plain="true" text="更多操作"></up-button>
				
				 -->
				
				<up-button type="primary" size="mini"  shape="circle" style="background-color:  #318AFE;color: #fff;" @tap="datas.PopUp=true;datas.form.id=item.id"
					:plain="true" text="付款"></up-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<up-button type="primary" size="mini"  shape="circle"  style="width: 200rpx;" @tap="toUrl(item.id)" :plain="true" text="账单付款记录">
				</up-button>
			</view>
		</view>
	</view>
	<!-- 取号遮罩层 -->
	<up-popup :show="datas.PopUp" :round="18" mode="center" @close="close">
		<view class="zhezhaopops">
			<view class="">
				<span></span>
				<span>付款</span>
				<up-icon @tap="datas.PopUp=false" name="close-circle-fill"></up-icon>
			</view>
			<view class="">
				付款金额<input type="text" placeholder="请输入付款金额" v-model="datas.form.paidAmount" />
			</view>
			<view class="">
				付款方式<input type="text" placeholder="请输入付款方式" v-model="datas.form.payType" />
			</view>
			<view class="">
				备注<input type="text" v-model="datas.form.remark" />
			</view>
			<up-button text="确认" @tap="confirmtow()" type="primary" class="buttomStyle"
				shape="circle"></up-button>
		</view>
	</up-popup>




	<datePickerview @confirm="datePickerConfirm" ref="datePicker"></datePickerview>
</template>

<script setup>
	import { onMounted, getCurrentInstance, ref, reactive } from 'vue';
	import dayjs from 'dayjs';
	import go from '@/commons/utils/go.js'
	import datePickerview from './components/my-date-pickerview.vue'
	
	const timeList = [{
			label: '今天',
			value: 'today'
		},
		{
			label: '昨天',
			value: 'yesterday'
		},
		{
			label: '本周',
			value: 'circumference'
		}, {
			label: '本月',
			value: 'moon'
		},
		{
			label: '自定义',
			value: 'custom'
		}
	]
	let selected = ref('today')
	let datas = reactive({
		activeType: 0,
		list: [],
		startTime: "",
		endTime: "",
		type: "",
		status: "",
		PopUp: false,
		form: {}
	})
	const currentInstance = getCurrentInstance()
	const props = defineProps({
		id: {
			type: Number
		}
	})
	onMounted(() => {
		getlist()
	})
	let confirmtow = (id) => {
		// tbShopPurveyorpayTransact({
		// 	id,
		// 	...datas.form
		// }).then(() => {
		// 	datas.PopUp = false
		// 	getlist()
		// })
	}
	let close = () => {
		datas.form = {}
	}
	let typeFilter = (t) => {
		const m = {
			purveyor: '进货单',
			reject: '退货单',
			cons_in: '耗材入库',
			cons_out: '耗材出库'
		}
		return m[t]
	}

	function toUrl(id) {
		go.to('PAGES_BILL_PAYMENT', {
			id
		})
	}
	let switchType = (a) => {
		datas.activeType = a
		if (a == 0) {
			datas.type = ''
			datas.status = ''
		} else if (a == 1) {
			datas.type = 'purveyor'
			datas.status = ''
		} else if (a == 2) {
			datas.type = 'reject'
			datas.status = ''
		} else if (a == 3) {
			datas.type = ''
			datas.status = '0'
		} else if (a == 4) {
			datas.type = ''
			datas.status = '1'
		}
		getlist()
	}

	function datePickerConfirm(e) {
		getlist(e.start, e.end)
	}

	function getlist(start, end) {
		if (selected.value == 'today') {
			datas.startTime = dayjs().format('YYYY-MM-DD') + ' 00:00:00'
			datas.endTime = dayjs().format('YYYY-MM-DD') + ' 23:59:59'
		} else if (selected.value == 'yesterday') {
			datas.startTime = formatTime() + ' 00:00:00'
			datas.endTime = formatTime() + ' 23:59:59'
		} else if (selected.value == 'circumference') {
			datas.startTime = dayjs().add(-7, 'day').format('YYYY-MM-DD 00:00:00')
			datas.endTime = dayjs().format('YYYY-MM-DD 23:59:59')
		} else if (selected.value == 'moon') {
			datas.startTime = dayjs().add(-30, 'day').format('YYYY-MM-DD 00:00:00')
			datas.endTime = dayjs().format('YYYY-MM-DD 23:59:59')
		} else if (selected.value == 'custom') {
			datas.startTime = start
			datas.endTime = end
		}
		// tbShopPurveyorTransactinfo({
		// 	// shopId: uni.getStorageSync('shopId'),
		// 	size: 20,
		// 	createAt: [datas.startTime, datas.endTime],
		// 	page: 0,
		// 	sort: "id",
		// 	type: datas.type,
		// 	status: datas.status,
		// 	purveyorId: props.id
		// }).then((res) => {
		// 	datas.list = res.content
		// })
	}
	// 获取当前时间
	function getdate() {
		const dt = new Date();
		const y = dt.getFullYear();
		const m = (dt.getMonth() + 1 + "").padStart(2, "0");
		const d = (dt.getDate() + "").padStart(2, "0");
		const hh = (dt.getHours() + "").padStart(2, "0");
		const mm = (dt.getMinutes() + "").padStart(2, "0");
		const ss = (dt.getSeconds() + "").padStart(2, "0");
		return `${y}-${m}-${d}`;
	}
	// 获取昨天时间
	const formatTime = () => {
		let strDate = getdate()
		let dateFormat = new Date(strDate);
		dateFormat = dateFormat.setDate(dateFormat.getDate() - 1);
		dateFormat = new Date(dateFormat);
		let y = dateFormat.getFullYear()
		let m = (dateFormat.getMonth() + 1).toString().padStart(2, '0')
		let d = dateFormat.getDate().toString().padStart(2, '0')
		return `${y}-${m}-${d}`
	}

	function changeTime(e) {
		selected.value = e
		if (e == 'custom') {
			currentInstance.ctx.$refs.datePicker.toggle()
		} else {
			getlist()
		}
	}
</script>
<style>
	page {
		background-color: #f9f9f9;
	} 
</style>
<style scoped lang="less">
	.time-wrapper {
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		padding-bottom: 20rpx;

		.timelistbox {
			position: relative;

			.time-item {
				width: 90rpx;
				text-align: center;
				padding-bottom: 10rpx;
			}

			.xian {
				width: 40rpx;
				height: 3rpx;
				background-color: #459DFF;
				position: absolute;
				left: 26rpx;
				bottom: 0;
			}
		}

		.time-selected {
			color: #459DFF;
		}
	}

	.supplier {
		>view {
			width: 694rpx;
			height: 550rpx;
			background: #FFFFFF;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			padding: 32rpx 24rpx;
			box-sizing: border-box;
			margin: 32rpx;


			>view:nth-child(1) {
				width: 646rpx;
				height: 160rpx;
				background: #F9F9F9;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				align-items: center;
				display: flex;
				justify-content: space-around;
				text-align: center;
			}

			>view:nth-child(2),
			>view:nth-child(3),
			>view:nth-child(4) {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 32rpx;
			}

			>view:nth-child(5) {
				border-top: 2rpx solid #E5E5E5;
				display: flex;
				align-items: center;
				flex-direction: row-reverse;
				margin-top: 32rpx;
				padding-top: 22rpx;

				>button {
					width: 112rpx;
					height: 48rpx;
					background: #FFFFFF;
					border-radius: 28rpx 28rpx 28rpx 28rpx;
					border: 2rpx solid #3189FD;
					margin: 16rpx;
				}
			}
		}
	}

	.df() {
		display: flex;
		align-items: center;
	}

	.zhezhaopops {
		padding: 34rpx 32rpx;
		width: 594rpx;
		height: 900rpx;
		background: #FFFFFF;
		border-radius: 18rpx 18rpx 18rpx 18rpx;

		>view:first-child {
			.df;
			justify-content: space-between;

			>span:nth-child(2) {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}
		}

		>view:nth-child(2),
		>view:nth-child(3),
		>view:nth-child(4) {

			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: bold;
			font-size: 14px;
			color: #333333;
			margin-top: 64rpx;

			>input {
				margin-top: 24rpx;
				width: 492rpx;
				height: 84rpx;
				background: #FFFFFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #E5E5E5;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}
		}




		.buttomStyle {
			margin-top: 48rpx;
			width: 506rpx;
			height: 80rpx;
		}
	}

	.paymentSettlement {
		padding: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
	}
</style>