<template>
	<view>
		<!-- 级位证书发布 -->
		<z-paging ref="paging" v-model="infoList" @query="getQuery" emptyViewImg="/static/nodata.png">


			<view class="appList">
				<view class="appItem" v-for="(item,index) in infoList" :key="index">
					<view class="status" @click="goDetail(item)">
						<text :class="{
                'text-warning':item.certStatus=='0',
                'text-primary':item.certStatus=='1',
                'text-success':item.certStatus=='2'
					              }">{{ item.certStatusStr }}</text>
					</view>

					<view class="date">
						<uni-icons type="calendar-filled" size="16" color="#AD181F"></uni-icons>
						{{item.submitTimeStr}} 提交
					</view>
					<view class="text-primary" v-if="item.payCode" @click="goDetail(item)">{{item.payCode}}</view>
					<view class="name mt0 w100" @click="goDetail(item)"><text class="dot"></text>{{item.name}}</view>
					<view class="pp esp" v-if="item.certTimeStr">证书发送时间：{{item.certTimeStr}}</view>
					<view class="flexbox" @click="goDetail(item)">
						<view>
							申请单位
							<view>{{item.memberName||'--'}}</view>
						</view>
						<view>
							已发/待发
							<view>{{item.hasCerts}}/<text class="text-primary">{{item.noCerts}}</text></view>
						</view>

					</view>
					<!-- v-if="item.certStatus != '2'" -->
					<view class="func">
						<button @click="goDetail(item)">查看</button>
						<button @click="handleSend(item)">下发并生成证书</button>
					</view>
				</view>
			</view>
		</z-paging>
		<!-- 		<view class="nodata" v-if="infoList.length==0">
			<image mode="aspectFit" src="/static/nodata.png"></image>
			<text>暂无数据</text>
		</view> -->

		<!-- 下发证书确认弹层 -->
		<uni-popup ref="certPopup" type="center" :is-mask-click="false">
			<view class="cert-dialog">
				<view class="cert-dialog__head">
					<uni-icons type="info-filled" size="24" color="#FAAD14" />
					<view class="cert-dialog__title">提示</view>
				</view>
				<view class="cert-dialog__content">{{ popupContent }}</view>
				<view class="cert-dialog__btns">
					<view class="cert-dialog__btn cert-dialog__btn--cancel" @click="onPopupCancel">取消</view>
					<view
						v-if="showDownload" class="cert-dialog__btn cert-dialog__btn--download"
						@click="onPopupDownload"
					>下载名单</view>
					<view class="cert-dialog__btn cert-dialog__btn--sure" @click="onPopupSure">确认下发</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import * as api from '@/common/api.js'
	import config from '@/config.js'
	import _ from 'underscore'
	import {
		onMounted,
		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	const app = getApp();
	const queryParams = ref({
		pageNum: 1,
		pageSize: 10,
		status: '0',
		type: '1'
	})
	const statusArr = ['审批中', '审批通过', '审批拒绝', '审批撤回']
	const current = ref()
	const infoList = ref([])
	const total = ref(0)
	const deptType = ref('')
	const userType = ref('')
	const paging = ref(null)
	// 下发证书确认弹层
	const certPopup = ref(null)
	const popupContent = ref('')
	const showDownload = ref(false)
	let popupSure = () => {}
	let popupDownload = () => {}
	onLoad((option) => {
		queryParams.value.type = option.type
		if (option.type == 2) {
			uni.setNavigationBarTitle({
				title: '段位考试详情'
			})
		}
		if (option.type == 3) {
			uni.setNavigationBarTitle({
				title: '越段考试详情'
			})
		}
	})
	onShow(() => {
		if (app.globalData.isLogin) {
			init()
		} else {

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

	function handleSend(row) {
  		checkCert(row.payId, () => {
		api.submitCert3([{
			id: row.payId
			}]).then(() => {
			uni.showToast({
				title: `下发成功`
			})
			getList()
			})
		}, () => {
			return `确定下发 ${row.name} 的证书吗`
		})
	}	
	function init() {
		deptType.value = app.globalData.deptType
		userType.value = app.globalData.userType
		getList()
	}

	function getQuery(pageNum, pageSize) {
		queryParams.value.pageNum = pageNum,
			queryParams.value.pageSize = pageSize
		api.getCertsLList(queryParams.value).then(res => {
			paging.value.complete(res.rows);
			total.value = res.total
		})
	}

	function getList() {
		uni.showLoading({
			title: '加载中'
		})
		api.getCertsLList(queryParams.value).then(res => {
			infoList.value = res.rows
			uni.hideLoading()
		})
	}

	function goDetail(item) {
		// const form = encodeURIComponent(JSON.stringify(item))
		let path = `/level/ztx/examList?type=${queryParams.value.type}&payId=${item.payId}`
		uni.navigateTo({
			url: path
		});
	}

	function checkCert(payIds, sureFunc, confirmFunc) {
		return api.checkPersonByPayIds(payIds).then(res => {
			if (res.data == 1) {
				// 照片齐全：弹自定义确认框，确认后执行下发
				openCertPopup({
					content: confirmFunc(),
					showDownload: false,
					sure: sureFunc
				})
			} else if (res.data == 2 || res.data == 3) {
				// 部分或全部学员没有照片：弹三按钮框，可下载名单
				openCertPopup({
					content: '存在学员没有照片，是否继续生成？',
					showDownload: true,
					sure: sureFunc,
					download: () => downloadNoPhotoList(payIds)
				})
			}
		})
	}

	/** 打开自定义确认弹层 */
	function openCertPopup(opt) {
		popupContent.value = opt.content
		showDownload.value = !!opt.showDownload
		popupSure = opt.sure || (() => {})
		popupDownload = opt.download || (() => {})
		certPopup.value.open()
	}

	function onPopupCancel() {
		certPopup.value.close()
	}

	function onPopupSure() {
		certPopup.value.close()
		popupSure()
	}

	function onPopupDownload() {
		popupDownload()
	}

	/** 下载没有照片的学员名单（Excel） */
	function downloadNoPhotoList(payIds) {
		uni.showLoading({
			title: '下载中'
		})
		uni.downloadFile({
			url: config.baseUrl_api + '/person/info/checkPersonByPayIdsAndExport/' + payIds,
			header: {
				'Authorization': uni.getStorageSync('token')
			},
			success: function(res) {
				uni.hideLoading()
				uni.showLoading({
					title: '正在打开'
				})
				uni.openDocument({
					filePath: res.tempFilePath,
					fileType: 'xlsx',
					showMenu: true,
					success: function() {
						uni.hideLoading()
					},
					fail: function() {
						uni.hideLoading()
						uni.showToast({
							title: '打开失败',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			fail: function() {
				uni.hideLoading()
				uni.showToast({
					title: '下载失败',
					icon: 'none',
					duration: 2000
				})
			}
		})
	}
</script>


<style scoped lang="scss">
	.mt0 {
		margin-top: 0 !important;
	}

	.appList .appItem .name {
		width: 80%;
		word-break: break-all;
	}

	/* 下发证书确认弹层 */
	.cert-dialog {
		width: 560rpx;
		background: #fff;
		border-radius: 24rpx;
		padding: 40rpx 32rpx 28rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		&__head {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 16rpx;
		}

		&__title {
			font-size: 32rpx;
			font-weight: 600;
			color: #303133;
			margin-left: 10rpx;
		}

		&__content {
			font-size: 28rpx;
			color: #606266;
			line-height: 1.6;
			text-align: center;
			margin-bottom: 36rpx;
		}

		&__btns {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		&__btn {
			flex: 1;
			margin: 0 8rpx;
			height: 76rpx;
			line-height: 76rpx;
			text-align: center;
			font-size: 28rpx;
			border-radius: 38rpx;

			&--cancel {
				background: #f4f4f5;
				color: #909399;
			}

			&--download {
				background: #fff;
				color: #13B5B1;
				border: 1rpx solid #13B5B1;
			}

			&--sure {
				background: #AD181F;
				color: #fff;
			}

			&:active {
				opacity: 0.85;
			}
		}
	}
</style>