

import { ActionOptions } from '@/components/DropDownButtons/type';
import type { BasicTableProps, VxeGridInstance } from '@/components/VxeTable';
import { TmpReceiverType } from '@/type/BaseEnum';
import { formatDate } from '@/utils/dateTimeStr';
import { Delete, Edit, Refresh, Switch } from "@element-plus/icons-vue";
import { ref, reactive } from 'vue';

/**
 * 临时收货列表表格配置
 * @returns 
 */
function useTmpReceiverModel() {
    // vxe-table ref
    const tmpReceiverTableRef = ref<VxeGridInstance>();
    // 基础数据
    const tmpReceiverGridOptions = reactive<BasicTableProps>({
        id: 'tmpReceiver_table',
        border: true,
        keepSource: true,
        showOverflow: true,
        height: 520,
        loading: false,
        columnConfig: {
            resizable: true
        },
        columns: [
            { field: 'customerName', title: '客户名称', minWidth: 200 },
            { 
                field: 'beginDate', 
                title: '起始时间（>）', 
                minWidth: 130,
                formatter: ({ row }) => {
                    return formatDate(new Date(row.beginDate))
                } 
            },
            { 
                field: 'endDate', 
                title: '结束时间（<=）', 
                minWidth: 130,
                formatter: ({ row }) => {
                    return formatDate(new Date(row.endDate))
                } 
            },
            { field: 'tempLimit', title: '额度', width: 100 },
            { field: 'currencyCode', title: '币种', width: 80 },
            { field: 'paymentTypeName', title: '支付方式', width: 90 },
            { field: 'receiveTime', title: '充值时间', minWidth: 145 },
            { field: 'status', title: '状态名称', width: 90, slots: { default: 'status' } },
            { field: 'uploadFile', title: '凭证文件', width: 80, showOverflow: false, className: 'upload-file', slots: { default: 'uploadFile' } },
            { field: 'deleteFlag', title: '激活状态', width: 80, slots: { default: 'deleteFlag' } },
            { field: 'createUserName', title: '创建人', minWidth: 90 },
            { field: 'createTime', title: '创建时间', minWidth: 145 },
            { field: 'remark', title: '备注', minWidth: 80 },
            { title: '操作', slots: { default: 'actions' }, width: 130, fixed: "right" },
        ],
        data: []
    })
    // 手机端
    const phoneTmpReceiverGridOptions = reactive<BasicTableProps>({
        id: 'tmpReceiver_table',
        border: true,
        keepSource: true,
        showOverflow: false,
        height: 520,
        loading: false,
        columnConfig: {
            resizable: true
        },
        columns: [
            { field: 'customerName', title: '客户名称', minWidth: 110 },
            { 
                field: 'beginDate', 
                title: '生效时间', 
                width: 130,
                slots: { default: 'beginDate' }
            },
            { field: 'deleteFlag', title: '状态', width: 43, slots: { default: 'deleteFlag' } },
            { title: '操作', slots: { default: 'actions' }, width: 60 },
        ],
        data: []
    })
    // 操作类别
    const actionOptions: ActionOptions[] = [
        // {
        //     value: AccountPeriodType.DELETE,
        //     label: "删除",
        //     type: "danger",
        //     icon: Delete,
        //     permissions: ['sys:tmpReceive:delete'],
        //     isDisabled: true
        // },
        {
            value: TmpReceiverType.EDIT,
            label: "编辑",
            type: "primary",
            icon: Edit,
            permissions: ['sys:tmpReceive:add'],
            isDisabled: true
        },
        {
            value: TmpReceiverType.FEESET_ACTIVE,
            label: "启用",
            islabel: "停用",
            color: "#F9961B",
            type: "primary",
            icon: Refresh,
            permissions: ['sys:tmpReceive:delete'],
            isDisabled: true
        },
        {
            value: TmpReceiverType.TRANSFERRED,
            label: "转账",
            type: "success",
            icon: Switch,
            permissions: ['sys:tmpReceive:transferred'],
            isDisabled: true
        },
    ]

    return {
        tmpReceiverTableRef,
        tmpReceiverGridOptions,
        actionOptions,
        phoneTmpReceiverGridOptions
    }
}

export {
    useTmpReceiverModel
}