<template>
	<view>
		<!-- 会员缴费单 -->
		<view class="appList">
			<view class="vipData" v-show="totalCost>0">
				<view>费用合计：<text>{{ totalCost.toFixed(2) }}元</text></view>
			</view>
			<view class="appItem" v-for="item in list">
				<view class="status" @click="goDetail(item)">
					<text v-if="item.record.auditStatus==0" class="text-primary">审核中</text>
					<text v-if="item.record.auditStatus==1" class="text-success"> 审核通过</text>
					<text v-if="item.record.auditStatus==2" class="text-danger"> 审核拒绝</text>
					<text v-if="item.record.auditStatus==3" class="text-warning">已退回</text>
				</view>
				<view class="date" @click="goDetail(item)" v-if="item.payTime">
					<uni-icons type="calendar" size="16" color="#7D8592"></uni-icons>
					<text>{{item.payTime}} 缴费</text>
				</view>

				<view class="name" @click="goDetail(item)">{{item.finalDocName}}</view>
				<view v-if="deptType==1" class="date">
					<text>{{item.payNoticeSendTime}} 下发</text>
				</view>
				<view class="flexbox" @click="goDetail(item)">
					<view>
						缴费状态
						<view v-if="item.settleFlag == 0">
							<text class="text-primary">已结算</text>
						</view>
						<view v-if="item.settleFlag == 1 && item?.payFlag == 0">
							<text class="text-success">已上传凭证</text>
						</view>
						<view v-if="item.settleFlag == 1 && item?.payFlag == 1">
							<text class="text-danger">未上传凭证</text>
						</view>
					</view>
					<view>
						年限合计
						<view>{{item.yearCount}}</view>
					</view>
					<view>
						费用合计
						<view>¥{{item.allPrice}}</view>
					</view>
				</view>
				<view class="func">
					<button
						v-if="(deptType == 2 || deptType == 3)&&item?.record?.auditStatus != 2 && item?.record?.auditStatus != 3"
						@click="handleUpdate(item)">上传凭证</button>
				</view>
			</view>
		</view>
		<view class="nodata" v-if="list.length==0">
			<image mode="aspectFit" src="/static/nodata.png"></image>
			<text>暂无数据</text>
		</view>

		<!-- 上传凭证 -->
		<uni-popup ref="UpPop" type="bottom" background-color="#fff" animation>
			<view class="popBody">
				<uni-forms v-model="form">
					<uni-forms-item label="缴费日期" required>
						<uni-datetime-picker v-model="form.payTime"></uni-datetime-picker>
					</uni-forms-item>
					<uni-forms-item label="缴费凭证" required>

						<uni-file-picker limit="1" file-mediatype="all" file-extname="png,jpg,jpeg,pdf,zip"
							@select="selectFile" @progress="fileProgress"
							@delete="delSupplementFile(index)"></uni-file-picker>
					</uni-forms-item>
					<uni-forms-item label="备注">
						<uni-easyinput v-model="form.remark" type="textarea"></uni-easyinput>
					</uni-forms-item>
				</uni-forms>

				<button class="btn-red" @click="uploadSure">确定</button>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import * as api from '@/common/api.js'
	import config from '@/config.js'
	import {
		onMounted,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const app = getApp();
	const list = ref([])
	const queryParams = ref({})
	const totalCost = ref(0)
	const deptType = ref('')
	const UpPop = ref(null)
	const form = ref({
		docId: '',
		payTime: '',
		url: '',
		remark: ''
	})
	onLoad(() => {
		if (app.globalData.isLogin) {
			init()
		} else {

			app.firstLoadCallback = () => {
				init()
			};
		}
	})

	function init() {
		deptType.value = app.globalData.deptType
		getList()
	}

	function getList() {
		if (queryParams.value.settle == 1) {
			queryParams.value.settleFlag = undefined
			queryParams.value.payFlag = undefined
		}
		totalCost.value = 0
		api.getGroupFeeBill().then(res => {
			list.value = res.rows
			  list.value.forEach(item => {
			    item.payEvidence = JSON.parse(item.payEvidence)
			    item.record.content = JSON.parse(item.record.content)
			    totalCost.value = totalCost.value + (item.allPrice * 1)
			  })
		})
	}

	function handleUpdate(item) {
		form.value.docId = item.docId
		if (item.payEvidence) {
			form.value.url = item.payEvidence
		}
		UpPop.value.open()
	}
	let selectFileValue = {}

	function selectFile(e) {
		let file = e.tempFiles[0]
		api.uploadFile(e).then(data => {
			selectFileValue = {
				url: data.msg,
				name: file.name,
				extname: file.extname
			}

			form.value.url = JSON.stringify([selectFileValue])
		});
	}

	function fileProgress(e) {
		console.log('progress:' + e)
	}

	function delSupplementFile(index) {
		selectFileValue = {}
	}

	function uploadSure() {
		console.log(form.value)
		if(!form.value.payTime){
			uni.showToast({
				icon:`none`,
				title:'请选择缴费时间'
			})
			return
		}
		if(!form.value.url){
			uni.showToast({
				icon:`none`,
				title:'请上传缴费凭证'
			})
			return
		}
		api.groupCommitPaymentVoucher(form.value).then(res => {
			UpPop.value.close()
			form.value = {}
			uni.showToast({
				icon: 'none',
				title: '操作成功'
			})
			getList()
		})
	}

	function goDetail(item) {
		//详情
		console.log(item.docId)
		let path = `/pages/group/feeBillDetail?docId=${item.docId}`
		uni.navigateTo({
			url: path
		});
	}
</script>

<style scoped lang="scss">
	.popBody {
		font-size: 28rpx;
		line-height: 1.5;
		overflow: auto;
		padding: 30rpx;

		.btn-red {
			margin: 50rpx 0 30rpx;
		}
	}
</style>