<template>
	<div class="sys-workforce-scheduling-container layout-padding">
		<div class="layout-padding-auto layout-padding-view pd20">
			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
				<vxe-grid v-bind="gridOptions">
					<template #toolbar_buttons>
						<el-button type="primary" @click="scheduler" v-auth="'system:workforce:scheduling:multiple'" :loading="state.loading" class="mr20"
							>批量排班
						</el-button>
						<el-date-picker v-model="month" type="month" placeholder="选择月份" :clearable="false" @change="queryList" value-format="YYYY-MM" />
					</template>
				</vxe-grid>
			</div>
		</div>
		<!-- 批量排班 -->
		<multiple-scheduling ref="multipleSchedulingRef" @updateList="queryList" />
		<!-- 单个排班 -->
		<select-number ref="schedulingRef" @updateList="queryList" />
	</div>
</template>

<script lang="tsx" setup name="systemWorkforceScheduling">
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
import dayjs from 'dayjs';
import { getWorkforceClassUserList } from '@/api/system/workforce';

// 引入组件
const MultipleScheduling = defineAsyncComponent(() => import('@/views/system/workforce/components/Multiple-scheduling.vue')); // 批量排班
const SelectNumber = defineAsyncComponent(() => import('@/views/system/workforce/components/Select-number.vue')); // 选择班次

const month = ref<string>(dayjs().format('YYYY-MM')); // 月份

// 定义变量内容
const state = reactive({
	queryParams: {
		PageIndex: 1, // 当前页
		PageSize: 10, // 每页条数
		Keyword: null, // 关键字
	},
	tableData: [], // 列表数据
	loading: false, // 加载
	total: 0, // 总条数
});
const gridOptions = reactive<any>({
	loading: false,
	border: true,
	showOverflow: true,
	printConfig: {},
	columnConfig: {
		resizable: true,
	},
	scrollY: {
		enabled: true,
		gt: 100
	},
	toolbarConfig: {
		zoom: true,
		slots: {
			buttons: 'toolbar_buttons',
		},
		refresh: {
			queryMethod: () => {
				queryList();
			},
		},
	},
	mouseConfig: {
		selected: true,
	},
	rowConfig: { isHover: true, height: 30,useKey: true },
	height: 'auto',
	columns: [],
	data: [],
});
/** 通话记录列表 */
const queryList = async () => {
	state.loading = true;
	gridOptions.loading = true;
	try {
		gridOptions.columns = [{ field: 'SchedulingUserName', title: '姓名', width: 120, fixed: 'left', align: 'center' }];
		const days = dayjs(month.value).daysInMonth(); // 获取当月有多少天
		for (let i = 1; i <= days; i++) {
			const num = i < 10 ? `0${i}` : i;
			gridOptions.columns.push({
				field: `${dayjs(month.value).format('YYYY-MM')}-${num}`,
				title: `${num}日`,
				align: 'center',
				minWidth: 70,
				slots: {
					default: (scope: any) => {
						const value = `${scope.row[dayjs(month.value).format(`YYYY-MM-${num}`)]}`;
						return (
							<>
								{value !== 'undefined' && value ? (
									<el-button
										type="primary"
										link
										title={'点击修改' + scope.row?.SchedulingUserName + dayjs(month.value).format('YYYY-MM') + '-' + num + '排班'}
										onClick={() => changeScheduling(scope)}
									>
										{`${scope.row[dayjs(month.value).format(`YYYY-MM-${num}`)]?.name}`}
									</el-button>
								) : (
									<el-button type="info" link onClick={() => changeScheduling(scope)}>
										空
									</el-button>
								)}
							</>
						);
					},
				},
			});
		}
		const request = {
			Time: month.value,
		};
		const response = await getWorkforceClassUserList(request);
		state.tableData = response.result ?? [];
		gridOptions.data = response.result ?? [];
		gridOptions.loading = false;
		state.loading = false;
	} catch (e) {
		state.loading = false;
		gridOptions.loading = false;
		console.log(e);
	}
};
// 批量排班
const multipleSchedulingRef = ref<RefType>(); // 批量排班ref
const scheduler = () => {
	multipleSchedulingRef.value.openDialog();
};
// 单个排班
const schedulingRef = ref<RefType>(); // 单个排班
const changeScheduling = (row: any) => {
	schedulingRef.value.openDialog(row);
};
onMounted(() => {
	queryList();
});
</script>
