<template>
    <el-card class="!border-none" shadow="never">
        <div class="flex gap-[30px]">
            <div class="flex gap-[30px]">
                <el-tree-select
                    v-model="queryParams.organizationId"
                    :props="defaultProps"
                    default-expand-all
                    :data="organizationList"
                    :render-after-expand="false"
                    check-strictly
                />
                <div>
                    <daterange-picker
                        type="datetimerange"
                        format="YYYY-MM-DD HH:mm:ss"
                        :shortcuts="shortcuts"
                        v-model:startTime="queryParams.createTimeStart"
                        v-model:endTime="queryParams.createTimeEnd"
                    />
                </div>
                <el-cascader v-model="selectedUserId" :props="CascaderProps" :options="userList" @change="handleCascaderChange" />
            </div>
            <div>
                <el-button type="primary" @click="resetPage">查询</el-button>
                <el-button @click="resetParams">重置</el-button>
            </div>
        </div>
    </el-card>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'
import type { IForm } from '../index.vue'
import { useWorkbench } from '@/hooks/useCommon'
import { shortcuts } from '@/utils/util'

const props = defineProps({
    queryParams: {
        type: Object as PropType<IForm>,
        default: () => ({
            organizationId: '',
            createTimeStart: '',
            createTimeEnd: '',
            userId: []
        })
    }
})
const emit = defineEmits(['update:queryParams', 'resetParams', 'resetPage', 'fectAllData'])
const localValue = computed({
    get() {
        return props.queryParams
    },
    set(newValue) {
        emit('update:queryParams', newValue)
    }
})
const { defaultProps, CascaderProps, organizationList, userList, fetchOrganizationList, fetchAllUserList } = useWorkbench(id => {
    localValue.value = {
        ...localValue.value,
        organizationId: id
    }
    emit('fectAllData', id)
})

const selectedUserId = ref([])

const resetParams = () => {
    selectedUserId.value = []
    emit('resetParams')
}
const resetPage = () => {
    emit('resetPage')
}
const handleCascaderChange = value => {
    const lastVal = value[value.length - 1]
    localValue.value = {
        ...localValue.value,
        userId: lastVal.toString()
    }
}
fetchOrganizationList()
fetchAllUserList()
</script>
<style scoped></style>
