<template>
	
	<uni-segmented-control :current="current"  styleType="text" :values="items"
	 activeColor="#AD181F"  @clickItem="onClickItem" ></uni-segmented-control>
	<view>
		<view class="tItem" v-for="n in list" :key="n.id">
			<view>{{n.name}}</view>
			<view class="tagbox">
				<uni-tag type="warning" :inverted="true" size="small" v-for="p in n.projectsStr?.split(',')" :key="p" :text="p">
				</uni-tag>
			</view>
			<view class="pp esp">报名时间：{{ n.signTimeRange }}</view>
			<view class="pp esp">培训时间：{{ n.trainTimeRange }}</view>
			<view class="pp esp">培训地点：{{ n.address }}</view>
			
			<view class="func">
				<button @click="showFeeInfo(n)">去缴费</button>
				<button @click="goTrainDetail(n.id)">报名信息</button>
			</view>
		</view>
		<view class="nodata" v-if="list.length == 0">
			<image mode="aspectFit" src="/static/nodata.png"></image>
			<text>暂无数据</text>
		</view>
	</view>
	
	<uni-popup ref="bankShow" type="bottom" background-color="#fff">
		<view class="popupBody">
			<view class="title">线下支付</view>
			<view @click="copyPlat">
				<view class="flexRow">
					<label>单位名称</label>
					<view>{{ bankInfo.name}}</view>
				</view>
				<view class="flexRow">
					<label>开户行</label>
					<view>{{bankInfo.bank}}</view>
				</view>
				<view class="flexRow">
					<label>账户</label>
					<view>{{ bankInfo.account }}</view>
				</view>
			</view>
			<button class="btn btn-red-kx" @click="sure">确定</button>
		</view>
	</uni-popup>
</template>

<script setup>
	import * as my from '@/myCenter/center_api.js';
	import { ref } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	const app = getApp();
	const items = ref([
		'培训', '订单'
	])
	const current = ref(1)
	const bankShow = ref(null)
	const bankInfo = ref({})
	const list = ref([])
	onShow(() => {
		if (app.globalData.isLogin) {
			init();
		} else {
			app.firstLoadCallback = () => {
				init();
			};
		}
	});
	function init(){
		my.getMyOrder().then(res=>{
			list.value = res.rows
		})
	}
	function onClickItem(e){
		console.log(e)
		if(e.currentIndex==0){
			uni.navigateTo({
				url: `/myCenter/mytrain/mytrain`
			});
		}
	}
	function goTrainDetail(id){
		uni.navigateTo({
			url: `/myCenter/mytrain/orderDetail?id=${id}`
		});
	}
	function showFeeInfo(item){
		bankInfo.value = JSON.parse(item.receivingInfo)
		bankShow.value.open()
	}
	function copyPlat(){
		let str = `单位名称：${bankInfo.value.name}；开户行：${bankInfo.value.bank}；账户：${bankInfo.value.account}；`;
		uni.setClipboardData({
			data: str,
			success: function() {
				uni.showToast({
					title: '已复制',
					icon: 'none'
				})
			}
		});
	}
</script>

<style scoped lang="scss">
	.tItem{background: #fff;border-radius: 10rpx;padding: 20rpx;width: 700rpx;
	box-sizing: border-box;box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196,203,214,0.1);
	margin:30rpx auto 0;
		.pp{font-size: 26rpx;color: #929AA0;margin-bottom: 10rpx;}
	}
	.tagbox{margin: 20rpx 0;
			:deep(.uni-tag){margin-right: 10rpx;}
	}
	.func{display: flex;justify-content: flex-end;box-sizing: border-box;
		border-top: 1px dashed #e5e5e5;
		padding-top: 20rpx;margin: 20rpx 0 0;
		button{border: 1px solid #AD181F;
			border-radius: 30rpx;height: 60rpx;line-height: 60rpx;
			font-size: 30rpx;color: #AD181F;background: #fff;
			margin: 0 0 0 30rpx;padding: 0 40rpx;box-sizing: border-box;
		}
		text{font-size: 30rpx;padding:30rpx 0 0;}
	}
	.flexRow {
		margin: 20rpx 0 0;
		align-items: center;
		display: flex;
		font-size: 28rpx;
	
		label {
			color: #999;width: 5em;
			flex: 0 0 auto;
		}
	
		view {
			margin-left: 20rpx;
		}
	}
	
	.popupBody{background-color: #fff;padding: 30rpx;
		.title{text-align: center;font-size: 32rpx;margin: 0 0 30rpx;}
		button{margin: 30rpx 0 0;}
	}
</style>