<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 class="w-flex w-p">
			<view style="width: 50vw;" class="w-flex">{{ rq }}</view>
			<view style="width: 50vw;"><u-button @click="show = true;">设置日期</u-button></view>
		</view>

		<view class="w-p">
			<x-teacher-course-day :gh="gh" :rq="rq" />
		</view>

		<view class="w-p">
			<x-teacher-course-day style="--size:12px; --text:var(--w-main);" :gh="gh" :rq="rq" />
		</view>

		<u-datetime-picker :show="show" v-model="rq1" mode="date" @confirm="show = false"
			@cancel="show = false"></u-datetime-picker>
	</view>
</template>

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

const { proxy } = getCurrentInstance();

const gh = ref("2421");
const gh1 = ref("2421");

const rq = ref('2023-09-18');

const rq1 = computed({
	get() {
		return rq.value.toDate();
	},
	set(value) {
		rq.value = new Date(value).format();
	}
})

const show = ref(false);

</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;
	}
}
</style>
