
import type { BasicTableProps, VxeGridInstance, VxeTableDataRow, VxeTableDefines } from '@/components/VxeTable';
import { formatDate } from '@/utils/dateTimeStr';
import { isArrayLength } from '@/utils/is';
import { ref, reactive, unref, watchEffect } from 'vue';

/**
 * 客户账单表格配置
 * @returns 
 */
function useCustomerBillModel() {
    // vxe-table ref
    const customerBillTableRef = ref<VxeGridInstance>();
    // 基础数据
    const customerBillGridOptions = reactive<BasicTableProps>({
        id: 'customer_bill_table',
        border: true,
        keepSource: true,
        showOverflow: true,
        height: 520,
        loading: false,
        rowConfig: { isHover: true },
        columnConfig: {
            resizable: true
        },
        columns: [
            { type: "checkbox", width: 45 },
            { field: 'customerName', title: '客户名称', minWidth: 170, showOverflow: false },
            { field: 'isInterceptCustomers', title: '是否拦截', minWidth: 80, slots: { default: 'isInterceptCustomers' } },
            { field: 'salesmanUserName', title: '业务员', width: 90, },
            { field: 'orgName', title: '分公司', width: 95, },
            { field: 'periodBeginDate', title: '账期区间', minWidth: 240, showOverflow: false, slots: { default: 'periodBeginDate' } },
            { field: 'accountPeriodName', title: '账期类型', width: 85, },
            { 
                field: 'billDate', 
                title: '账单日期', 
                width: 149, 
                // formatter: ({ row }) => {
                //     return formatDate(new Date(row.billDate))
                // } 
            },
            { 
                field: 'payDate', 
                title: '还款日期', 
                width: 149,
                // formatter: ({ row }) => {
                //     return formatDate(new Date(row.payDate))
                // } 
            },
            { field: 'currencyCode', title: '币种', width: 80, showOverflow: false, slots: { default: 'currencyList' } },
            { field: 'openingBalance', title: '期初余额', width: 90 },
            { field: 'payment', title: '本期付款(+)', width: 100 },
            { field: 'income', title: '本期收入(+)', width: 100 },
            { field: 'expenditure', title: '本期支出(-)', width: 100 },
            { field: 'balance', title: '期末余额(=)', width: 100 },
            { field: 'statusName', title: '状态', width: 80 },
            { title: '操作', slots: { default: 'actions' }, width: 70, fixed: "right" },
        ],
        data: []
    })

    watchEffect(() => {
        const customerBillTable = unref(customerBillTableRef)
        const list = customerBillGridOptions.data as VxeTableDataRow[]
        if(!customerBillTable) return
        if(isArrayLength(list)) {
            const tableMergeCells:  VxeTableDefines.MergeOptions<any>[] = []
            list.forEach((item, index) => {
                tableMergeCells.push({ row: index, col: 9, rowspan: 1, colspan: 7 })
            })
            customerBillGridOptions.mergeCells = tableMergeCells
        } else {
            customerBillTable.clearMergeCells()
        }
    })

    return {
        customerBillTableRef,
        customerBillGridOptions
    }
}

export {
    useCustomerBillModel
}