<template>
    <info-dialog
        :options="options"
        @closeDialog="closeDialog"
        @confirmDialog="confirmDialog"
    >
        <infoContainer
            v-loading="loading.isLoading"
            :layout="{
                aside: true,
                subContainerClass: 'sub-container'
            }"
        >
            <template #aside>
                <el-scrollbar>
                <info-tree
                    ref="treeRef"
                    class="tree-ref"
                    :style="{height: 'calc(53vh)', 'min-width': '220px'}"
                    :initCurrent="true"
                    :data-tree="dataTree.data"
                    @treeCurrentData="treeCurrentData"
                />
                    <slot name="custom-aside" />
                </el-scrollbar>
            </template>
            <template #header>
                <info-operation-panel>
                    <template #left>
                        <info-form
                            :config="headConfig"
                            :modelData="parameter"
                        />
                    </template>
                </info-operation-panel>
            </template>
            <template #main>
                <info-table
                    ref="infoTableRef"
                    :columns="columns"
                    :list="list"
                    :options="tableOptions"
                    @handleRowClick="handleRowClick"
                    @handleSelectionChange="handleSelectionChange"
                />
            </template>
            <template #footer>
                <info-pagination
                    :parameter="parameter"
                    :totalNumber="total"
                    :stateFlag="false"
                    @changeTableData="handlePage"
                />
            </template>
        </infoContainer>
    </info-dialog>
</template>
<script lang="ts" setup>
    import { reactive, ref, onMounted } from 'vue'
    import infoDialog from '../../components/infoDialog/index.vue'
    import infoContainer from '../../components/layout/infoContainer.vue'
    import infoForm from '../../components/infoForm/infoForm.vue'
    import { FormConfig } from '../../components/form/formConfig'
    import infoTree from '../../components/infoTree/customTree.vue'
    import infoTable from '../../components/table/table.vue'
    import infoPagination from '../../components/table/pagination.vue'
    import infoOperationPanel from '../../components/infoOperationPanel/index.vue'
    import { serverApi, requestPayload, getTreeObjById, ObjectInterface, formatterCurrentTime } from '../../script/index'
    import approverApi from './api/index'
    import { ElMessage } from 'element-plus'
    const props = defineProps({
        options: { // dialog
            type: Object,
            default: () => {
            }
        },
        tableOptions: {
            type: Object,
            default: () => {
            }
        },
        parameter: {
            type: Object,
            default: () => {
            }
        },
        treeParams: {
            type: Object,
            default: () => {
            }
        }
    })
    let emit = defineEmits(['selectData', 'close'])
    const treeRef = ref()
    let loading = reactive({ isLoading: false })
    const dataTree = reactive({ data: [] }) // 树的数据
    const headConfig = new FormConfig({
        labelWidth: '80px',
        labelPosition: 'right',
        inline: true
    }) // 筛选条件
    headConfig.setRule({
        type: 'infoInput',
        label: '',
        model: 'name.model',
        placeholder: () => 'pleaseEnterContent',
        button: {
            show: true,
            disabled: () => false,
            methods: (data: string) => {
                queryTableData()
            }
        }
    })
    let nodeData = reactive({ data: { id: '' } }) // 树节点
    const selectData: ObjectInterface = reactive({ list: [] }) // 多选选中项
    const infoTableRef = ref()
    const parameter: any = reactive({
        pageSize: 20,
        enabled: 1, // 已启用
        // accountExpiredTime: {
        //     oper: 'GREATER_THAN', // 未过期
        //     model: formatterCurrentTime(new Date())
        // },
        name: {
            oper: 'LIKE',
            model: ''
        }
    })
    const basicConditions = requestPayload({
        accountExpiredTime: {
            oper: 'GREATER_THAN', // 未过期
            model: formatterCurrentTime(new Date())
        },
        accountExpiredTime2: {
            andOr: 'OR',
            realField: 'accountExpiredTime',
            oper: 'IS_NULL'
        }
    })
    const options = reactive({
        title: 'sysUser',
        isShowDialog: false,
        width: '60%',
        clickModalClose: false,
        isShowBtn: true
    })
    const tableOptions = reactive({
        // i18n: true,
        isHideSet: true,
        mutiSelect: true,
        showHeader: true,
        height: '378px',
        rowKey: 'id',
        reserveSelection: true,
        localHeaders: true
    })
    Object.assign(options, props.options)
    const columns = ref([{
        prop: 'name',
        label: 'userName'
    }, {
        prop: 'loginId',
        label: 'loginName'
    }, {
        prop: 'phone',
        label: 'phone',
        formatter: (row: ObjectInterface) => {
            return row.legalPersonPhone || row.individualPhone || row.phone || '-' // 法人、个人
        }
    }]) // 列
    let total = ref<number>(0)
    let list = ref([]) // 列表数据
    interface SelectedInterface {
        list: any[]
    }
    let selectedList = reactive<SelectedInterface>({
        list: []
    })
    const currentType = ref('')
    const showDialog = (type: string, row?: any) => {
        if (row) {
            if (row instanceof Array) {
                selectedList.list = (row as any)
            } else {
                selectedList.list = ([row] as any)
            }
        }
        // currentType.value = type
        Object.assign(tableOptions, props.tableOptions)
        Object.assign(parameter, props.parameter)
        getTreeData()
        options.isShowDialog = true
    }
    // 点击树节点查询列表数据
    const treeCurrentData = (data: { id: string }) => {
        nodeData.data = data
        queryTableData()
    }
    // 获取树数据
    const getTreeData = () => {
        serverApi({
            params: props.treeParams,
            loading: loading,
            interface: approverApi.getOrganization, // alltree
            success: (res: any) => {
                dataTree.data = res
            }
        })
    }
    // 分页修改
    const handlePage = (data: any, isClick: boolean) => {
        isClick && queryTableData()
    }
    const closeDialog = () => {
        options.isShowDialog = false
        emit('close')
    }
    // 选中修改
    const handleSelectionChange = (data: any) => {
        selectData.list = data
    }
    const handleRowClick = (data: any) => {
        selectData.list = [data]
    }
    const confirmDialog = () => {
        if (selectData.list.length === 0) {
            ElMessage.error($t('pleaseSelectAtLeastOneData'))
            return false
        }
        emit('selectData', selectData.list)
        options.isShowDialog = false
    }
    // 更新列表页数据
    const queryTableData = () => {
        const payload = requestPayload(parameter)
        payload.fieldGroup.fields.push(basicConditions.fieldGroup)
        serverApi({
            'params': {
                orgId: nodeData.data.id,
                data: payload
            },
            loading: loading,
            'interface': approverApi.queryUserPageByOrgId,
            'success': (res: ObjectInterface) => {
                list.value = res.list || []
                total.value = res.totalCount
                let selectDataTmp = list.value?.filter((item: ObjectInterface) => {
                    return selectedList.list.find(id => {
                        return id === item.id
                    })
                })
                selectData.list = selectDataTmp.filter(() => true)
                if (selectData.list.length) {
                    if (tableOptions.mutiSelect) {
                        infoTableRef.value.toggleSelection(selectData.list)
                    } else {
                        let item = selectData.list[0]
                        infoTableRef.value.currentRadio = item.id
                    }
                }
            }
        })
    }
    defineExpose({
        showDialog
    })
</script>
<style lang="scss" scoped>
    .tree-aside {
        height: 100%;
        width: 220px;
        .tree-ref {
            height: calc(53vh);
        }
    }
</style>
