<template>
	<view :class="[{'gray':store.isgray==1}]">
		<view style="margin-top: 10px;margin-bottom: 10px;">
			<picker fields="month" mode="date" @change="bindPickerChange" :value="index">
				<view class="date">{{index}} 点击选择月份</view>
			</picker>
		</view>
		<uni-row>
			<uni-col :span="7">
				<view class="titleStyle">
					日期
				</view>
			</uni-col>
			<uni-col :span="4">
				<view class="titleStyle">
					带班领导
				</view>
			</uni-col>
			<uni-col :span="4">
				<view class="titleStyle">
					值班领导
				</view>
			</uni-col>
			<uni-col :span="9">
				<view class="titleStyle">
					值班干部
				</view>
			</uni-col>
		</uni-row>
		<uni-row>
			<view v-for="(item,index) in zhibanArr">
				<uni-col :span="7">
					<view class="dataStyle">
						{{item.date}}
					</view>
				</uni-col>
				<uni-col :span="4">
					<view class="dataStyle">
						{{item.dbld_dictText}}
					</view>
				</uni-col><uni-col :span="4">
					<view class="dataStyle">
						{{item.zbld_dictText}}
					</view>
				</uni-col><uni-col :span="9">
					<view class="dataStyle">
						{{item.zbgbrealname}}
					</view>
				</uni-col>
			</view>
		</uni-row>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		zhibanQueryApi
	} from '@/api/api.js';
	import {
		useStore
	} from '@/store';
	const store = useStore()
	import dayjs from 'dayjs';


	let column = ref([{
			name: 'date',
			label: '日期',
			width: 70,
			align: 'center'
		},

		{
			name: 'dbld_dictText',
			label: '带班领导',
			align: 'center',
			width: 60
		},
		{
			name: 'zbld_dictText',
			label: '值班领导',
			align: 'center',
			width: 60
		},
		{
			name: 'zbgbrealname',
			label: '值班干部',
			align: 'center',
			width: 150
		}

	])

	const zhibanArr = ref([])
	onLoad(() => {
		zhibanQuery()
	})
	const index = ref(dayjs().format("YYYY-MM"))
	const bindPickerChange = (e) => {
		index.value = e.detail.value
		zhibanQuery()
	}
	const zhibanQuery = () => {
		let [year, month] = index.value.split('-')
		zhibanQueryApi({
			year,
			month
		}).then((res) => {
			zhibanArr.value = res.result.records
		}).catch((err) => {
			console.log(err);
		})
	}
</script>

<style lang="scss" scoped>
	.date {
		width: 690rpx;
		padding: 20rpx 30rpx 0 30rpx;
		font-size: 28rpx;
		color: #333333;
	}


	.titleStyle {
		font-size: 12px;
		color: #747474;
		line-height: 25px;
		height: 25px;
		background: #F2F9FC;
		text-align: center;
		vertical-align: middle;
		border-left: 1px solid #919191;
		border-bottom: 1px solid #919191;
		;
	}

	/* 内容样式 */
	.dataStyle {
		max-font-size: 14px;
		/* 最大字体限制 */
		min-font-size: 10px;
		/* 最小字体限制 */
		font-size: 12px;
		color: #00007f;
		line-height: 25px;
		height: 25px;
		font-weight: 500;
		text-align: center;
		vertical-align: middle;
		border-bottom: 1px solid #919191;
		border-left: 1px solid #919191;
		text-overflow: ellipsis;

	}
</style>