<template>
	<z-paging ref="paging" v-model="reportList" @query="queryList" :back-to-top-style="{ right: '44rpx' }" empty-view-text="暂无周报数据"
		:paging-style="{ top: isDetail ? '39px' : '' }" back-to-top-bottom="170rpx" :show-scrollbar="false"
		:default-page-size="detaultPageSize" :safe-area-inset-bottom="true">
		<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="confirmProject">
						</next-tree>
					</view>
				</template>
			</custom-dropdown>
		</template>
		<List :report-list="reportList" />
		<template #bottom>
			<view style="padding: 0 10px;position: relative;bottom: 1px;">
				<custom-button width="100%"  color="#007aff" :radius="['5px']" ripple
					@click="redirectAddWeekReportPage()">新建周报</custom-button>
			</view>
		</template>
	</z-paging>
</template>

<script lang="ts" setup>
import List from './report-list.vue'
import { useEmitt } from '@/logics/mitt/useEmitt';
import customDropdown from '@/components/cu-dropdown/index.vue'
import nextTree from '@/components/next-tree/next-tree.vue'
import { getWeekReportList } from '@/api/project-center/week-report';
import { WeekReport } from '@/types/week-report';
import { OverviewProjectResParams } from '@/types/project';

const detaultPageSize = 10;
const paging = ref()
const reportList = ref<WeekReport[]>([])
const dropdownRef = ref()

const props = defineProps({
	prj: {
		type: Object as PropType<OverviewProjectResParams>,
		required: false
	},
	isDetail: {
		type: Boolean,
		required: false
	},
	accountList: {
		type: Array as PropType<{ id: string; name: string }[]>,
		required: true,
		default: () => []
	},
	hiddenPrFilterItem: {
		type: Boolean,
		required: false
	},
	prjList: {
		type: Array as PropType<{ id: string; name: string }[]>
	},
})

/**
 * 条件筛选表单
 */
const filterForm = reactive<{
	prj_id?: string
	date?: string[]
	reporter_id?: string
}>({
	prj_id: props.prj?.id,
	reporter_id: undefined,
	date: undefined
})

const dropdownMenuList = ref([
	{
		title: '所属项目',
		type: 'slot1',
		prop: 'prj_id',
		showArrow: true,
		showIcon: true,
		value: props.prj?.id,
		hidden: props.hiddenPrFilterItem,
	},
	{
		title: '填写人员',
		type: 'cell',
		prop: 'reporter_id',
		showAll: true,
		showIcon: true,
		field: {
			label: 'name',
			value: 'id'
		},
		options: []
	},
	{

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

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

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


const confirmProject = (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()
	console.log(dropdownValues)
	if (!props.prj?.id) {
		filterForm.prj_id = dropdownValues.prj_id
	}
	filterForm.reporter_id = dropdownValues.reporter_id;
	filterForm.date = dropdownValues.date ? [dropdownValues.date.start, dropdownValues.date.end] : dropdownValues.date
	paging.value?.reload()
}



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




// 跳转新建周报页面
const redirectAddWeekReportPage = () => {
	let url = '/pages/project/week-report/add-week-report'
	if (props.prj) {
		url = url + `?prj_id=${props.prj.id}&prj_name=${props.prj.name}`
	}
	uni.navigateTo({ url })
}

async function initDropMenData() {
	nextTick(() => {
		dropdownRef.value?.updateMenu('reporter_id', [{ name: '不限', id: '-9999' }, ...props.accountList], 'options')
	})

}

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

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

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

.is-hover {
	color: rgba(255, 255, 255, 0.6);
	background-color: #179b16;
	border-color: #179b16;
}

.city {
	/* #ifndef APP-PLUS-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	margin-left: 4px;
}

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