<template>
	<NavBar title="阅读" />
	<view style="margin: 16rpx;">
		<view class="title">
			<wd-text text="上经" size="36rpx" bold color="#333" />
		</view>
		<wd-row >
			<wd-col 
				:span="6"
				v-if="list.length"
				v-for="(item, index) in 上经" 
				:key="index"
			>
				<view class="item" @click="goTo('/pages/ZhouYi/detail?id=' + item.documentId)">
					<wd-text :text="item.symbol" size="90rpx" color="#333" />
					<wd-text :text="item.name" bold size="28rpx" color="#333" />
				</view>
			</wd-col>
		</wd-row>

		<view class="title">
			<wd-text text="下经" size="36rpx"  bold color="#333" />
		</view>
		<wd-row >
			<wd-col 
				:span="6"
				v-if="list.length"
				v-for="(item, index) in 下经" 
				:key="index"
			>
				<view class="item" @click="goTo('/pages/ZhouYi/detail?id=' + item.documentId)">
					<wd-text :text="item.symbol" size="90rpx" color="#333" />
					<wd-text :text="item.name" bold size="28rpx" color="#333" />
				</view>
			</wd-col>
		</wd-row>
	</view>
	
</template>

<script setup lang="ts">
import NavBar from '@/components/NavBar.vue'
import { getZhouList } from '@/api/modules/ZhouYi';
import { goTo } from '@/utils/common'

const list = ref<any>([])
const 上经 = ref<any>([])
const 下经 = ref<any>([])

getZhouList().then(res => {
	list.value = res.data

	上经.value = list.value.filter(item => item.index >= 1 && item.index <= 30)
	下经.value = list.value.filter(item => item.index >= 31 && item.index <= 64)
})

</script>

<style lang="scss" scoped>

.title {
	margin: 36rpx 16rpx;
}
.item {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	gap: 16rpx;
	margin: 16rpx;
	padding: 32rpx 16rpx;
	border-radius: 16rpx;
	background-color: #fff;
	box-sizing: border-box;
}
</style>