<template>
	<z-paging ref="paging" v-model="workList" @query="queryList" :default-page-size="detaultPageSize" empty-view-text="暂无工作数据">
		<template #top>
			<custom-dropdown ref="dropdownRef" :dropdownMenu="dropdownMenuList" themeColor="#007aff"
				style="width:100%;border-top: 1px solid #edf0f9;" textColor="#333333" :duration="300"
				@confirm="handleConfirm" @close="handleClose" bgColor="#f8f8f8" @open="handleOpen">
				<template #slot1="{ item, index }">
					<view style="width: 100%;height: 300px;">
						<next-tree  :ifSearch="true" :showDropdownFooter="true"
							:showAuxiliaryLine="false" :border="true" labelKey="name" :showBottomBar="true"
							:checkStrictly="true" :selectParent="true" funcMode="radio" :treeData="prjList"
							uiMode="page" @confirm="confirmAccount">
						</next-tree>
					</view>
				</template>
			</custom-dropdown>
		</template>
		<List :work-list="workList" />
	</z-paging>
</template>

<script lang="ts" setup>
import List from './List.vue'
import { useEmitt } from '@/logics/mitt/useEmitt';
import customDropdown from '@/components/cu-dropdown/index.vue'
import { getWorkList } from '@/api/project-center/work';
import { Work } from '@/types/work';
import nextTree from '@/components/next-tree/next-tree.vue'
import { getProjectList } from '@/api/project-center/info';

const detaultPageSize = 10;
const paging = ref()
const workList = ref<Work[]>([])
const dropdownRef = ref()
// const proxy = getCurrentInstance()?.proxy
const prjList = ref<{ id: string, name: string }[]>([])


/**
 * 条件筛选表单
 */
const filterForm = reactive<{
	name?: string
	prj_id?: string
	date?: string[]
	process_type?: number
	status?: number
}>({
	name: undefined,
	prj_id: undefined,
	process_type: undefined,
	status: undefined,
	date: undefined
})

const dropdownMenuList = ref([
	{
		title: '工作名称',
		type: 'search',
		prop: 'name',
		placeholder: '按工作名称搜索'
	},
	{
		title: '所属项目',
		type: 'slot1',
		prop: 'prj_id',
		showArrow: true,
		showIcon: true,
	},
	{
		title: '工作状态',
		type: 'cell',
		prop: 'status',
		showAll: true,
		showIcon: true,
		options: [
			{ label: '未完成/未阅', value: 0, suffix: '未办理/未阅读' },
			{ label: '已过期', value: 1 },
			{ label: '已完成', value: 2, suffix: '已办理/已阅读' },
		],
	},
	{
		title: '工作类型',
		type: 'filter',
		prop: 'process',
		showIcon: true,
		options: [
			{
				title: '',
				type: 'radio',
				prop: 'type',
				options: [
					{
						value: 1,
						label: '待办'
					},
					{
						value: 2,
						label: '待阅'
					}
				],
			}
		],
	},
	{

		title: '时间范围',
		showAll: true,
		showIcon: true,
		type: 'daterange',
		prop: 'date'
	},
])

/**
 * 获取筛选框列表
 */
const getFilterForm = () => {
	const {
		name,
		prj_id,
		process_type,
		status,
		date
	} = filterForm
	const begin_from = date ? date[0] : date
	const end_to = date ? date[1] : date
	return {
		name,
		prj_id,
		process_type,
		begin_from,
		end_to,
		status
	}
}

// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const queryList = async (pageNo: number, pageSize: number) => {
	try {
		const { name, prj_id, process_type, begin_from, end_to, status } = getFilterForm()
		const { list } = await getWorkList({ page_no: pageNo, page_size: pageSize, name, prj_id, process_type, begin_from, end_to, status })
		paging.value?.complete(list);
	} catch (e) {
		paging.value.complete(false);
	}
}


const confirmAccount = (v: any) => {
	if (v.length > 0) {
		dropdownRef.value?.updateMenu('prj_id', v[0].id, 'value')
		dropdownRef.value?.updateMenu('prj_id', true, 'isActived')
	} else {
		dropdownRef.value?.updateMenu('prj_id', undefined, 'value')
		dropdownRef.value?.updateMenu('prj_id', false, 'isActived')
	}
	dropdownRef.value?.closeMenuPopup()
	handleConfirm(1)
}

async function handleOpen(index: number) {
	console.log('handleOpen ==>', index)

}

function handleClose(index: number) {
	console.log('handleClose ==>', index)

}

function handleConfirm(v: any) {
	console.log('handleConfirm ==>', v)
	const dropdownValues = dropdownRef.value?.getMenuValue()
	filterForm.prj_id = dropdownValues.prj_id
	filterForm.name = dropdownValues.name
	filterForm.status = dropdownValues.status
	filterForm.process_type = dropdownValues.process ? dropdownValues.process.type : dropdownValues.process
	filterForm.date = dropdownValues.date ? [dropdownValues.date.start, dropdownValues.date.end] : dropdownValues.date
	paging.value?.reload()
}



// 监听子组件增加，修改，删除事件，更新列表
useEmitt({
	name: 'get_work_list',
	callback: () => {
		paging.value?.reload()
	}
})

// 监听子组件增加，修改，删除事件，更新列表
useEmitt({
	name: 'get_incomplete_work_list',
	callback: (status: number) => {
		filterForm.status = status
		dropdownRef.value?.updateMenu('status', 0, 'value')
		dropdownRef.value?.updateMenu('status', true, 'isActived')
		paging.value?.reload()
	}
})


/**
 * 获取项目列表
 */
const getProjects = async () => {
	try {
		const { list } = await getProjectList({ page_no: 1, page_size: 9999 })
		prjList.value = list
	} catch (e) {
		console.error(e)
	}
}

onLoad((options)=>{
	console.log(options)
})

onMounted(() => {
	getProjects()
})

</script>
<script lang="ts">
export default {
	options: {
		styleIsolation: 'apply-shared', //解除样式隔离
	}

}
</script>
<style scoped lang="scss">
.c-nav-bar {
	&__content {
		color: red;
	}
}


.box-bg {
	background-color: #F5F5F5;
}


.input-view {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	flex: 1;
	flex-wrap: nowrap;
	margin: 7px 3px 7px 0px;
	line-height: 30px;
}

.input-uni-icon {
	line-height: 30px;
}

.nav-bar-input {
	height: 30px;
	line-height: 30px;
	/* #ifdef APP-PLUS-NVUE */
	/* #endif */
	padding: 0 5px;
	font-size: 12px;
	background-color: #f8f8f8;
}

:deep(.uni-searchbar__box-icon-clear) {
	padding-top: 5px;
}

.uni-navbar {
	&__header {
		padding: 0 !important
	}
}

:deep(.uni-searchbar) {
	padding: 0;
	width:100%
}

:deep(.uni-searchbar__box) {
	height: 30px !important;
}

:deep(.uni-navbar__header-container) {
	padding: 0px !important;
}


:deep(.uni-searchbar__cancel) {
	height: 30px;
	line-height: 30px;
}
</style>