<template>
    <el-card shadow="never" class="list-card">
        <Table ref="costRecordTable"
               :tableParams="tableParams"
               :btnRole="leftBtn"
               @handleAdd="handleAdd"
               @handleEdit="handleUpdate"
               @selectionChange="handleSelectionChange"
        >
        </Table>
    </el-card>
    <addCostForm ref="addCostFormRef" @ok="handleQuery"></addCostForm>
    <CostFormDetail ref="costFormDetailFormRef" @edite="handleUpdate" @removeOk="handleQuery"></CostFormDetail>
</template>

<script setup name="CostRecord" lang="ts">
import {
    listCostRecord,
    getCostRecord,
    delCostRecord,
    addCostRecord,
    updateCostRecord
} from '@/api/finance/costRecord/index';
import addCostForm from '@/components/common/addCostForm.vue'
import CostFormDetail from '@/components/common/CostFormDetail.vue'
import {CostRecordVO, CostRecordQuery, CostRecordForm} from '@/api/finance/costRecord/types';
import auth from '@/plugins/auth'
import Table from '@/components/Table/index.vue'
import {tableTypes} from '@/components/Table/types'
import {useDictCache} from "@/hooks/web/useDict";
const props = defineProps({
    resourceTypeId:{
        type: [Number, String],
        required: true
    },
    perPrefix:{
        type:String
    },
    customerId: {
        type: [Number, String],
        required: true
    }
})

const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const { queryDictDetailByCodes } = useDictCache(['cost_status','cost_type'])
queryDictDetailByCodes()
const costRecordList = ref<CostRecordVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const addCostFormRef = ref();
const ids = ref<Array<string | number>>([]);
const leftBtn = ref(
    [
        {type: 'remove', hasPermi: `${props.perPrefix}:detail:tab_fyjl_sc`},
        {type: 'add', hasPermi: `${props.perPrefix}:detail:tab_fyjl`},
        {type: 'edit', hasPermi: `${props.perPrefix}:detail:edit`},
        {type: 'import', hasPermi: `${props.perPrefix}:detail:import`},
        {type: 'export', hasPermi: `${props.perPrefix}:detail:tab_fyjl_dc`},
    ]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();
const groupData = ref<{ label: string; value: string | number }[]>([])
const dialog = reactive<DialogOption>({
    visible: false,
    title: ''
});


const tableParams = reactive<tableTypes<CostRecordQuery, CostRecordVO>>({
    tableColumn: [
        {show: true, label: '费用编号', prop: 'costCode', sortable: true},
        {show: true, label: '费用名称', prop: 'costName', sortable: true},
        {show: true, label: '客户名称', prop: 'cusstomerId', sortable: true},
        {show: true, label: '费用金额', prop: 'costAmount', sortable: true},
        { show: true, label: '费用类型', prop: 'resourceType', sortable: true },
        {show: true, label: '发生时间', prop: 'costTakeDate', sortable: true},
        {show: true, label: '报销状态', prop: 'reimburseStatus', sortable: true},
        {show: true, label: '负责人员', prop: 'ownerBy', sortable: true},
        {
            show: true,
            label: '操作',
            width: 200,
            prop: 'operation',
            disabledMove: true,
            render: ({column}: { column: CostRecordVO }) => {
                return [
                    auth.hasPermi('business:detail:tab_fyjl_xq') ? h(ElButton, {
                        link: true, type: 'primary', onClick: () => {
                        }
                    }, '详情') : '',
                ]
            }
        },
    ],
    keyId: 'id',
    queryParams: {
        keyWord: undefined,
        costCode: undefined,
        costName: undefined,
        costAmount: undefined,
        costTakeDate: undefined,
        reimburseStatus: undefined,
        cusstomerId: undefined,
        resourceType: 30,
        resourceTypeId: props.resourceTypeId,
        currencyUnitId: undefined,
        isDelete: undefined,
        enabled: undefined,
        ownerBy: undefined,
        sort: undefined,
        startDate: undefined,
        endDate: undefined,
    },
    listFn: listCostRecord,
    delFn: delCostRecord,
})


const {queryParams} = toRefs(tableParams);
const costRecordTable = ref()
/** 搜索按钮操作 */
const handleQuery = () => {
    costRecordTable.value.getData()
}

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
}

/** 多选框选中数据 */
const handleSelectionChange = (selection: CostRecordVO[]) => {
    ids.value = selection.map(item => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}

/** 新增按钮操作 */
const handleAdd = () => {
    let param = {
        cusstomerId: props.customerId,
        resourceTypeId: props.resourceTypeId,
        resourceType: 30,
    }
    addCostFormRef.value.handleAdd(param)
}

/** 修改按钮操作 */
const handleUpdate = async (row?: CostRecordVO) => {
    addCostFormRef.value.handleUpdate(row)
}
const getList = () => {
    costRecordTable.value.getData()
}
onMounted(() => {
});
</script>
