<template>
	<view class="w-body">
		<w-public />
		<w-navbar left-back fixed title="教学周历"></w-navbar>
		
		<view style="padding: 1rem;" class="w-flex">
			<view style="position: relative; padding: .5rem 1rem; font-weight: bold; font-size: 1rem; display: flex;" hover-class="w-hover-before" @click="proxy.$refs.xqRef.open();">
				{{ xqs[0] }}年至{{ xqs[1] }}年第{{ xqs[2] }}学期
				<u-icon name="arrow-down" style="margin-left: .5rem;" />
			</view>
		</view>
		<view style="padding:  .5rem;  margin: 0 1rem 1rem; background-color: var(--w-warn-light-2); color: var(--w-warn-dark-1); font-size: .7rem; border-radius: .5rem;">
			学期:{{ xqInfo.XQMC }},教学周:{{ xqInfo.QSSKZ }}-{{ xqInfo.ZZSKZ
      }},教学日期:{{ xqInfo.XQQSSJ }} 至 {{ xqInfo.XQZZSJ }}
		</view>

		<x-weeks :xq="xq" style="--size: 5vmin;"/>

		<x-xq-select ref="xqRef" v-model="xq" v-model:info="xqInfo" current />

	</view>
</template>

<script setup>
import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
import { ref, getCurrentInstance, computed } from 'vue'

const { proxy } = getCurrentInstance();

const xq = ref("");
const xqInfo = ref({});

const xqs = computed(()=>{
	if(xq.value){
		return xq.value.split('-')
	}else{
		return ['','','']
	}
})

</script>

<style lang="scss" scoped>
.w-body {
	--navbar-height: 44px;
	background-color: var(--w-bg-light);
	font-size: .9rem;
	min-height: 100vh;
}
</style>
