<template>
	<view class="pay">
		<page-header :title="course" :status="status" />
		<view class="pay-area">
			<u-subsection fontSize="14" activeColor="#da4733" inactiveColor="#da4733" :list="list" mode="subsection"
				:current="curNow" @change="sectionChange"></u-subsection>
			<swiper class="swiper" :indicator-dots="false" :autoplay="false" :duration="300" @change="swiperChange"
				:current="curNow">
				<swiper-item>
					<scroll-view class="scroll-view-height" scroll-y="true">
						<view class="swiper-item uni-bg-red">
							<view class="pay-info">
								<uni-table :border="false" :stripe="false" emptyText="暂无更多数据">
									<!-- 表头行 -->
									<uni-tr>
										<uni-th align="left">费用名称</uni-th>
										<uni-th align="left" width="100">收款金额</uni-th>
									</uni-tr>
									<!-- 表格数据行 -->
									<uni-tr v-for="i in 8" :key="i">
										<uni-td>高级证书考试课程第一年费用</uni-td>
										<uni-td>5,000.00</uni-td>
									</uni-tr>
									<uni-tr>
										<uni-td>合计</uni-td>
										<uni-td>10,000.00</uni-td>
									</uni-tr>
								</uni-table>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view class="scroll-view-height" scroll-y="true">
						<view class="swiper-item uni-bg-green">
							<view class="pay-info">
								<uni-table :border="false" :stripe="false" emptyText="暂无更多数据">
									<!-- 表头行 -->
									<uni-tr>
										<uni-th align="left">费用名称</uni-th>
										<uni-th align="left" width="100">收款金额</uni-th>
									</uni-tr>
									<!-- 表格数据行 -->
									<uni-tr v-for="i in 3" :key="i">
										<uni-td>高级证书考试课程第一年费用</uni-td>
										<uni-td>5,000.00</uni-td>
									</uni-tr>
									<uni-tr>
										<uni-td>合计</uni-td>
										<uni-td>10,000.00</uni-td>
									</uni-tr>
								</uni-table>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import choiceCard from "@/components/choice-card/choice-card"
	export default {
		data() {
			return {
				status: "已完成",
				course: "CAD高级证书考试课程",
				list: ['待交费用', '已交费用'],
				curNow: 0
			}
		},
		components: {
			choiceCard
		},
		methods: {
			sectionChange(index) {
				this.curNow = index
				// console.log(index)
			},
			swiperChange(index) {
				this.curNow = index.detail.current
				// console.log(index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-subsection {
		height: 90rpx !important;
	}

	/deep/ swiper {
		flex: 1;
	}

	/deep/ .uni-table-tr {
		.uni-table-th {
			color: #000 !important;
			border-bottom: 2rpx solid #aaa !important;
		}

		.uni-table-td {
			border: none !important;

			&:first-child {
				color: #000;
			}

			&:last-child {
				color: $uni-color-primary;
			}
		}
	}

	/deep/ .uni-table-tr:last-child {
		.uni-table-td {
			font-weight: bold;
			border-top: 2rpx solid #aaa !important;

			&:first-child {
				color: #000 !important;
			}
		}
	}

	.pay {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.pay-area {
			flex: 1;
			padding: 40rpx;
			padding-bottom: 0rpx;
			display: flex;
			flex-direction: column;

			.pay-info {
				width: calc(100% - 5rpx);
				border: 2rpx solid $uni-color-primary;
				box-sizing: border-box;
			}
		}
	}

	.scroll-view-height {
		height: 100%;
		padding: 20rpx 5rpx;
		box-sizing: border-box;
	}
</style>
