<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="reimburseCode">
                        <el-input v-model="queryParams.reimburseCode" placeholder="请输入单据号码" clearable
                                  style="width: 240px" @keyup.enter="handleQuery"/>
                    </el-form-item>
                    <el-form-item prop="reimburseAmount">
                        <el-input v-model="queryParams.reimburseAmount" placeholder="请输入计划回款金额" clearable
                                  style="width: 240px" @keyup.enter="handleQuery"/>
                    </el-form-item>
                    <el-form-item label="报销人员" prop="reimburseUserId">
                        <SelectUser v-model="form.reimburseUserId" placeholder="请选择报销人员"/>
                    </el-form-item>
                    <el-form-item prop="reimburseDeptId">
                        <el-input v-model="queryParams.reimburseDeptId" placeholder="请输入报销部门" clearable
                                  style="width: 240px" @keyup.enter="handleQuery"/>
                    </el-form-item>
                    <el-form-item label="审批状态" prop="approveStatus">

                        <SelectDict v-model="form.approveStatus" placeholder="请选择审批状态"
                                    dictCode="reimburse_bill_status"></SelectDict>
                    </el-form-item>

                    <el-form-item label="拥有者" prop="ownerBy">
                        <SelectUser v-model="form.ownerBy" placeholder="请选择拥有者"/>
                    </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="billRecordTable"
               :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>
    <!-- 添加或修改报销单对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="900px" append-to-body>
        <el-form ref="billRecordFormRef" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="报销人员" prop="reimburseUserId">
                <SelectUser v-model="form.reimburseUserId" placeholder="请选择报销人员"/>
            </el-form-item>
            <el-form-item label="报销部门" prop="reimburseDeptId">
                <el-input v-model="form.reimburseDeptId" placeholder="请输入报销部门"/>
            </el-form-item>
            <el-form-item label="备注信息" prop="remark">
                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
            </el-form-item>

        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 添加或修改发票对话框 -->
    <el-dialog title="报销单详情" v-model="detailDialog" width="700px" append-to-body>
        <el-descriptions column="2" title="基本信息" border>

            <el-descriptions-item label="主键：">{{ form.id }}</el-descriptions-item>

            <el-descriptions-item label="单据号码：">{{ form.reimburseCode }}</el-descriptions-item>

            <el-descriptions-item label="计划回款金额：">{{ form.reimburseAmount }}</el-descriptions-item>

            <el-descriptions-item label="报销人员：">{{ form.reimburseUserId }}</el-descriptions-item>

            <el-descriptions-item label="报销部门：">{{ form.reimburseDeptId }}</el-descriptions-item>

            <el-descriptions-item label="审批状态：">{{ form.approveStatus }}</el-descriptions-item>

            <el-descriptions-item label="备注信息：">{{ form.remark }}</el-descriptions-item>

            <el-descriptions-item label="创建时间：">{{ form.createTime }}</el-descriptions-item>

            <el-descriptions-item label="修改时间：">{{ form.updateTime }}</el-descriptions-item>

<!--            <el-descriptions-item label="是否删除：">{{ form.isDelete }}</el-descriptions-item>-->

<!--            <el-descriptions-item label="是否启用：">{{ form.enabled }}</el-descriptions-item>-->

            <el-descriptions-item label="创建者：">{{ form.createBy }}</el-descriptions-item>

            <el-descriptions-item label="拥有者：">{{ form.ownerBy }}</el-descriptions-item>

            <el-descriptions-item label="更新者：">{{ form.updateBy }}</el-descriptions-item>

<!--            <el-descriptions-item label="显示顺序：">{{ form.sort }}</el-descriptions-item>-->

        </el-descriptions>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="detailCancel">关 闭</el-button>
            </div>
        </template>
    </el-dialog>

</template>

<script setup name="BillRecord" lang="ts">
import {listBillRecord, getBillRecord, delBillRecord, addBillRecord, updateBillRecord} from '@/api/finance/billRecord';
import {BillRecordVO, BillRecordQuery, BillRecordForm} from '@/api/finance/billRecord/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 {queryDictDetailByCodes} = useDictCache(['reimburse_bill_status'])
queryDictDetailByCodes()
const {proxy} = getCurrentInstance() as ComponentInternalInstance;


const billRecordList = ref<BillRecordVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const detailDialog = ref(false);//详情
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const leftBtn = ref(
    [
        {type: 'remove', hasPermi: 'finance:billRecord:remove'},
        {type: 'add', hasPermi: 'finance:billRecord:add'},
        {type: 'edit', hasPermi: 'finance:billRecord:edit'},
        {type: 'import', hasPermi: 'finance:billRecord:import'},
        {type: 'export', hasPermi: 'finance:billRecord:export'},
    ]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

const queryFormRef = ref<ElFormInstance>();
const billRecordFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
    visible: false,
    title: ''
});


const tableParams = reactive<tableTypes<BillRecordQuery, BillRecordVO>>({
    tableColumn: [
        {show: true, label: '主键', prop: 'id', sortable: true},
        {show: true, label: '报销单号', prop: 'reimburseCode', sortable: true},
        {show: true, label: '报销金额', prop: 'reimburseAmount', sortable: true},
        {show: true, label: '报销人员', prop: 'reimburseUserId', sortable: true},
        {show: true, label: '报销部门', prop: 'reimburseDeptId', sortable: true},
        {show: true, label: '提交时间', prop: 'createTime', sortable: true},
        {show: true, label: '审批状态', prop: 'approveStatus', sortable: true},
        {show: true, label: '备注信息', prop: 'remark', sortable: true},
        {
            show: true,
            label: '操作',
            width: 200,
            prop: 'operation',
            disabledMove: true,
            render: ({column}: { column: BillRecordVO }) => {
                return [
                    auth.hasPermi('system:user:demo') ? h(ElButton, {
                        link: true, type: 'primary', onClick: () => {
                        }
                    }, 'demo') : '',
                    auth.hasPermi('finance:billRecord:detail') ? h(ElButton, {
                        link: true, type: 'primary', onClick: () => {
                            detail(column)
                        }
                    }, '详情') : '',
                ]
            }
        },
    ],
    keyId: 'id',
    queryParams: {
        reimburseCode: undefined,
        reimburseAmount: undefined,
        reimburseUserId: undefined,
        reimburseDeptId: undefined,
        approveStatus: undefined,
        ownerBy: undefined,
    },
    listFn: listBillRecord,
    delFn: delBillRecord,
})


const initFormData: BillRecordForm = {
    id: undefined,
    reimburseCode: undefined,
    reimburseAmount: undefined,
    reimburseUserId: undefined,
    reimburseDeptId: undefined,
    approveStatus: undefined,
    remark: undefined,
    ownerBy: undefined,
}
const data = reactive<PageData<BillRecordForm, BillRecordQuery>>({
    form: {...initFormData},
    rules: {
        id: [
            {required: true, message: "主键不能为空", trigger: "blur"}
        ],
        reimburseCode: [
            {required: true, message: "单据号码不能为空", trigger: "blur"}
        ],
        reimburseAmount: [
            {required: true, message: "计划回款金额不能为空", trigger: "blur"}
        ],
        reimburseUserId: [
            {required: true, message: "报销人员不能为空", trigger: "blur"}
        ],
        reimburseDeptId: [
            {required: true, message: "报销部门不能为空", trigger: "blur"}
        ],
        approveStatus: [
            {required: true, message: "审批状态不能为空", trigger: "blur"}
        ],
        remark: [
            {required: true, message: "备注信息不能为空", trigger: "blur"}
        ],
    }
});

const {form, rules} = toRefs(data);

const {queryParams} = toRefs(tableParams);
/** 取消按钮 */
const cancel = () => {
    reset();
    dialog.visible = false;
}

/** 表单重置 */
const reset = () => {
    form.value = {...initFormData};
    billRecordFormRef.value?.resetFields();
}

const billRecordTable = ref()
/** 搜索按钮操作 */
const handleQuery = () => {
    billRecordTable.value.getData()
}
/** 取消按钮 */
const detailCancel = () => {
    detailDialog.value = false;
}

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

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

/** 新增按钮操作 */
const handleAdd = () => {
    reset();
    dialog.visible = true;
    dialog.title = "添加报销单";
}
/** 修改按钮操作 */
const detail = async (row?: BillRecordVO) => {
    const _id = row?.id
    const res = await getBillRecord(_id);
    Object.assign(form.value, res.result);
    detailDialog.value = true;
}
/** 修改按钮操作 */
const handleUpdate = async (row?: BillRecordVO) => {
    reset();
    const _id = row?.id || ids.value[0]
    const res = await getBillRecord(_id);
    Object.assign(form.value, res.data);
    dialog.visible = true;
    dialog.title = "修改报销单";
}
const getList = () => {
    billRecordTable.value.getData()
}
/** 提交按钮 */
const submitForm = () => {
    billRecordFormRef.value?.validate(async (valid: boolean) => {
        if (valid) {
            buttonLoading.value = true;
            if (form.value.id) {
                await updateBillRecord(form.value).finally(() => buttonLoading.value = false);
            } else {
                await addBillRecord(form.value).finally(() => buttonLoading.value = false);
            }
            proxy?.$modal.msgSuccess("操作成功");
            dialog.visible = false;
            await getList();
        }
    });
}


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