<template>
    <el-card shadow="never" class="list-card">
        <template #header>
            <div class="search" v-show="showSearch">
                <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
                    <el-form-item prop="costCode">
                        <el-input v-model="queryParams.keyWord" placeholder="请输入关键词" clearable style="width: 240px" />
                    </el-form-item>
                    <el-form-item prop="costName">
                        <SelectDict v-model="queryParams.costType" placeholder="请选择费用类型"
                                    dictCode="cost_type"></SelectDict>

                    </el-form-item>
                    <el-form-item prop="costTakeDate">
                        <el-date-picker
                            v-model="costDate"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            @change="getDate"
                            style="width: 200px"
                        />

                    </el-form-item>
                    <el-form-item prop="cusstomerId">
                        <SelectUser placeholder="负责人" v-model="queryParams.ownerBy"></SelectUser>
                    </el-form-item>
                    <el-form-item prop="resourceType">
                        <SelectDict v-model="queryParams.reimburseStatus" placeholder="请选择费状态" dictCode="cost_status"></SelectDict>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </template>

        <Table ref="costRecordTable"
               :tableParams="tableParams"
               :btnRole="leftBtn"
               @handleAdd="handleAdd"
               @handleEdit="handleUpdate"
               @selectionChange="handleSelectionChange"
        >
            <template #left>
                <el-button>demoBotton</el-button>
            </template>
            <template #right>
<!--                <el-button link @click="openRule">-->
<!--                    <i-ep-QuestionFilled/>-->
<!--                    右侧demoBotton-->
<!--                </el-button>-->
            </template>
        </Table>
    </el-card>

    <addCostForm ref="addCostFormRef" @ok="handleQuery"></addCostForm>
</template>

<script setup name="CostRecord" lang="ts">
import {
    listCostRecord,
    getCostRecord,
    delCostRecord,
    addCostRecord,
    updateCostRecord
} from '@/api/finance/costRecord/index';
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 addCostForm from '@/components/common/addCostForm.vue'
import {useDictCache} from "@/hooks/web/useDict";

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: 'finance:costRecord:remove'},
        {type: 'add', hasPermi: 'finance:costRecord:add'},
        {type: 'edit', hasPermi: 'finance:costRecord:edit'},
        {type: 'import', hasPermi: 'finance:costRecord:import'},
        {type: 'export', hasPermi: 'finance:costRecord:export'},
    ]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();
const costRecordFormRef = ref<ElFormInstance>();
const groupData = ref<{ label: string; value: string | number }[]>([])
const dialog = reactive<DialogOption>({
    visible: false,
    title: ''
});
const costDate = ref<[]>([])
const getDate = (data:any) =>{
    queryParams.value.startDate = data[0]
    queryParams.value.endDate = data[1]
    handleQuery()
}

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('system:user:demo') ? h(ElButton, {
                        link: true, type: 'primary', onClick: () => {
                        }
                    }, 'demo') : '',
                ]
            }
        },
    ],
    keyId: 'id',
    queryParams: {
        keyWord: undefined,
        costCode: undefined,
        costName: undefined,
        costAmount: undefined,
        costTakeDate: undefined,
        reimburseStatus: undefined,
        cusstomerId: undefined,
        resourceType: undefined,
        resourceTypeId: undefined,
        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 = () => {
    addCostFormRef.value.handleAdd()
}

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


onMounted(() => {
});
</script>
