import type { BasicTableProps } from '@/components/VxeTable';
import { ActionOptions } from '@/components/DropDownButtons/type';
import { reactive } from 'vue';
import { EditType } from '@/type/BaseEnum';
import { Edit, Delete } from "@element-plus/icons-vue";
import { isArrayLength } from '@/utils/is';
import { getcustomerGroupListApi } from '@/api/customerfee/customerfeeset';
import { useReturnData } from '@/utils/useReturnData';

const { resData } = useReturnData()
/**
 *  分页参数分组表格配置
 * @returns 
 */
function useCustomerGroupListModel() {
    // 父 Grid
    const customerGroupListGridOptions = reactive<BasicTableProps>({
        id: 'customerGroup_list_table',
        border: true,
        keepSource: true,
        showOverflow: true,
        height: 520,
        loading: false,
        columnConfig: {
            resizable: true
        },
        expandConfig: {
            accordion: false,
            lazy: true,
            visibleMethod({ row }) {//判断是否显示展开图标
                if (row.haveSumRecord) {
                    return true
                } else {
                    return false
                }
            },
            toggleMethod(scope) {
                if (!scope.expanded) {
                    scope.$table.clearRowExpandLoaded(scope.row)
                }
                return true
            },
            loadMethod(scope) {//异步展开
                return hanleExpandRow(scope)
            }
        },
        columns: [
            { type: "expand", title: '#', slots: { content: 'expands' }, width: 40 },
            { type: "seq", width: 55, title: '序号' },
            { 
                field: 'orgId', 
                title: '机构名称', 
                width: 120,
                slots: { default: 'orgId' }
            },
            { 
                field: 'productName', 
                title: '产品名称', 
                width: 160,
            },
            { 
                field: 'groupName', 
                title: '分组', 
                width: 160 
            },
            { 
                field: 'customerGroupVersion', 
                title: '版本号', 
                width: 150 
            },
            { 
                field: 'customerNameList', 
                title: '客户名称', 
                minWidth: 180,
                showOverflow: 'tooltip',
                formatter: ({ row }) => {
                    if(!isArrayLength(row.customerNameList)) return ''
                    // return row.customerNameList.join(',\n')
                    return row.customerNameList.join('、')
                }
            },
            { title: '操作', slots: { default: 'actions' }, width: 135, fixed: 'right' },
        ],
        data: []
    })
    // 子 Grid
    const customerGroupListSonGridOptions = reactive<BasicTableProps>({
        id: 'customerGroup_list_son_table',
        border: true,
        keepSource: true,
        showOverflow: true,
        showHeader: false,
        loading: false,
        columnConfig: {
            resizable: true
        },
        columns: [
            { width: 40 },
            { type: "seq", width: 55, title: '序号' },
            { 
                field: 'orgId', 
                title: '机构名称', 
                width: 120,
                slots: { default: 'orgId' }
            },
            { 
                field: 'productName', 
                title: '产品名称', 
                width: 160,
            },
            { 
                field: 'groupName', 
                title: '分组', 
                width: 160 
            },
            { 
                field: 'customerGroupVersion', 
                title: '版本号', 
                width: 150 
            },
            { 
                field: 'customerNameList', 
                title: '客户名称', 
                minWidth: 180,
                formatter: ({ row }) => {
                    if(!isArrayLength(row.customerNameList)) return ''
                    // return row.customerNameList.join(',\n')
                    return row.customerNameList.join('、')
                }
            },
            { title: '操作', slots: { default: 'actions' }, width: 135, fixed: 'right' },
        ],
        data: []
    })
    // 操作类别
    const customerGroupListActionOptions: ActionOptions[] = [
        {
            value: EditType.EDIT,
            label: "调整客户",
            type: "primary",
            icon: Edit,
            permissions: ['sys:customerGroup:edit']
        },
        {
            value: EditType.DELETE,
            label: "删除",
            type: "danger",
            icon: Delete,
            permissions: ['sys:customerGroup:delete']
        }
    ]

    // 根据折叠分组编号展开分组列表
    const hanleExpandRow = async (scope: Recordable) => {
        try {
            scope.row.customerGroupList = [];
            const res = await getcustomerGroupListApi({ 
                expandFlag: true,
                treeGroupId: scope.row.treeGroupId, 
                productId: scope.row.productId, 
                orgId: scope.row.orgId, 
                isIncludeAllProduct: scope.row.isAllProduct,
                isParentFlag: false 
            })
            const list = resData(res);
            isArrayLength(list) && (scope.row.customerGroupList = [...list])
        } catch (error) {
            console.error(error);
        }
    }

    return {
        customerGroupListGridOptions,
        customerGroupListSonGridOptions,
        customerGroupListActionOptions,
    }
}

export {
    useCustomerGroupListModel
}