<template>
	<view class="w-body">
		<w-public />
		<w-navbar left-back fixed title="教师周课程表"></w-navbar>

		<view class="w-flex w-p">
			<view style="width: 30%;"><u-input v-model="gh1" /></view>
			<view style="width: 40%;"><x-teacher :id="gh1"/></view>
			<view style="width: 30%;"><u-button @click="gh = gh1;">设置工号</u-button></view>
		</view>

		<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>

		<view style="display: flex; flex-wrap: wrap; padding-left: .5rem;">
			<view v-for="i in zcList" :key="i" class="week" :class="{selected: i==zc}" @click="zc=i;">第{{ i.toString().padStart(2, '0') }}周</view>
		</view>

		<view style="padding: .2rem;">
			<x-teacher-course-week :gh="gh" :xq="xq" :zc="zc" />
		</view>

		<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 gh = ref("2496");
const gh1 = ref("2496");

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

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

const zcList = computed(() => {
	if (xqInfo.value.QSSKZ && xqInfo.value.ZZSKZ) {
		let list = [];
		for (let i = Number(xqInfo.value.QSSKZ); i <= Number(xqInfo.value.ZZSKZ); i++) {
			list.push(i);
		}
		return list;
	}
	return [];
})

const zc = ref(1);



</script>

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

	.w-p {
		padding: 1rem;
	}

	.week {
		padding: .3rem .5rem;
		margin: 0 .5rem .5rem 0;
		border: solid 1px #0002;
		border-radius: .2rem;

		&.selected {
			border-color: var(--w-main);
			color: var(--w-main);
		}
	}
}
</style>
