<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="receiveCode">
                        <el-input v-model="queryParams.receiveCode" placeholder="请输入编号" clearable style="width: 240px"
                                  @keyup.enter="handleQuery"/>
                    </el-form-item>
                    <el-form-item prop="receiveDate">
                        <el-date-picker clearable
                                        v-model="queryParams.receiveDate"
                                        type="date"
                                        value-format="YYYY-MM-DD"
                                        placeholder="请选择计划回款"
                        />
                    </el-form-item>
                    <el-form-item prop="receiveAmount">
                        <el-input v-model="queryParams.receiveAmount" placeholder="请输入回款金额" clearable
                                  style="width: 240px" @keyup.enter="handleQuery"/>
                    </el-form-item>
                    <el-form-item label="回款方式" prop="receiveMode">

                        <SelectDict v-model="form.receiveMode" placeholder="请选择回款方式"
                                    dictCode="receive_mode"></SelectDict>
                    </el-form-item>

                    <el-form-item label="审批状态" prop="approveStatus">

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

                    <el-form-item label="回款 状态" prop="receiveStatus">

                        <SelectDict v-model="form.receiveStatus" placeholder="请选择回款状态"
                                    dictCode="receive_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="orderReceiveRecordTable"
               :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="700px" append-to-body>
        <el-form ref="orderReceiveRecordFormRef" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="编号" prop="receiveCode">
                <el-input v-model="form.receiveCode" placeholder="请输入编号"/>
            </el-form-item>
            <el-form-item label="计划回款" prop="receiveDate">
                <el-date-picker clearable
                                v-model="form.receiveDate"
                                type="datetime"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                placeholder="请选择计划回款">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="回款金额" prop="receiveAmount">
                <el-input v-model="form.receiveAmount" placeholder="请输入回款金额"/>
            </el-form-item>
            <el-form-item label="回款方式" prop="receiveMode">

                <SelectDict v-model="form.receiveMode" placeholder="请选择回款方式"
                            dictCode="receive_mode"></SelectDict>
            </el-form-item>

            <el-form-item label="审批状态" prop="approveStatus">

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

            <el-form-item label="回款 状态" prop="receiveStatus">

                <SelectDict v-model="form.receiveStatus" placeholder="请选择回款状态"
                            dictCode="receive_status"></SelectDict>
            </el-form-item>

            <el-form-item label="备注信息" prop="remark">
                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="拥有者" prop="ownerBy">
                <SelectUser v-model="form.ownerBy" 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.orderId }}</el-descriptions-item>

            <el-descriptions-item label="关联计划：">{{ form.planId }}</el-descriptions-item>

            <el-descriptions-item label="关联计划：">{{ form.planDetailId }}</el-descriptions-item>

            <el-descriptions-item label="编号：">{{ form.receiveCode }}</el-descriptions-item>

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

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

            <el-descriptions-item label="回款方式：">{{ form.receiveMode }}</el-descriptions-item>

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

            <el-descriptions-item label="回款 状态：">{{ form.receiveStatus }}</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.createBy }}</el-descriptions-item>

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

            <el-descriptions-item label="更新者：">{{ form.updateBy }}</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="OrderReceiveRecord" lang="ts">
import {
    listOrderReceiveRecord,
    getOrderReceiveRecord,
    delOrderReceiveRecord,
    addOrderReceiveRecord,
    updateOrderReceiveRecord
} from '@/api/finance/orderReceiveRecord';
import {
    OrderReceiveRecordVO,
    OrderReceiveRecordQuery,
    OrderReceiveRecordForm
} from '@/api/finance/orderReceiveRecord/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(['receive_status', 'receive_mode', 'receive_approve_status'])
queryDictDetailByCodes()
const {proxy} = getCurrentInstance() as ComponentInternalInstance;


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

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

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


const tableParams = reactive<tableTypes<OrderReceiveRecordQuery, OrderReceiveRecordVO>>({
    tableColumn: [
        {show: true, label: '系统编号', prop: 'dataCode', sortable: true},
        {show: true, label: '关联订单', prop: 'orderId', sortable: true},
        {show: true, label: '回款日期', prop: 'planId', sortable: true},
        {show: true, label: '审批状态', prop: 'approveStatus', sortable: true},
        {show: true, label: '回款金额', prop: 'receiveAmount', sortable: true},
        {show: true, label: '预期状态', prop: 'planId', sortable: true},
        {
            show: true,
            label: '操作',
            width: 200,
            prop: 'operation',
            disabledMove: true,
            render: ({column}: { column: OrderReceiveRecordVO }) => {
                return [
                    auth.hasPermi('finance:orderReceiveRecord:detail') ? h(ElButton, {
                        link: true, type: 'primary', onClick: () => {
                            detail(column)
                        }
                    }, '详情') : '',
                ]
            }
        },
    ],
    keyId: 'id',
    queryParams: {
        orderId: undefined,
        planId: undefined,
        planDetailId: undefined,
        receiveCode: undefined,
        receiveDate: undefined,
        receiveAmount: undefined,
        receiveMode: undefined,
        approveStatus: undefined,
        receiveStatus: undefined,
        ownerBy: undefined,
    },
    listFn: listOrderReceiveRecord,
    delFn: delOrderReceiveRecord,
})


const initFormData: OrderReceiveRecordForm = {
    id: undefined,
    orderId: undefined,
    planId: undefined,
    planDetailId: undefined,
    receiveCode: undefined,
    receiveDate: undefined,
    receiveAmount: undefined,
    receiveMode: undefined,
    approveStatus: undefined,
    receiveStatus: undefined,
    remark: undefined,
    ownerBy: undefined,
}
const data = reactive<PageData<OrderReceiveRecordForm, OrderReceiveRecordQuery>>({
    form: {...initFormData},
    rules: {
        id: [
            {required: true, message: "主键不能为空", trigger: "blur"}
        ],
        orderId: [
            {required: true, message: "关联订单不能为空", trigger: "change"}
        ],
        planId: [
            {required: true, message: "关联计划不能为空", trigger: "change"}
        ],
        planDetailId: [
            {required: true, message: "关联计划不能为空", trigger: "change"}
        ],
        receiveCode: [
            {required: true, message: "编号不能为空", trigger: "blur"}
        ],
        receiveDate: [
            {required: true, message: "计划回款不能为空", trigger: "blur"}
        ],
        receiveAmount: [
            {required: true, message: "回款金额不能为空", trigger: "blur"}
        ],
        receiveMode: [
            {required: true, message: "回款方式不能为空", trigger: "blur"}
        ],
        approveStatus: [
            {required: true, message: "审批状态不能为空", trigger: "blur"}
        ],
        receiveStatus: [
            {required: true, message: "回款 状态不能为空", trigger: "blur"}
        ],
        remark: [
            {required: true, message: "备注信息不能为空", trigger: "blur"}
        ],
        ownerBy: [
            {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};
    orderReceiveRecordFormRef.value?.resetFields();
}

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

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

/** 多选框选中数据 */
const handleSelectionChange = (selection: OrderReceiveRecordVO[]) => {
    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?: OrderReceiveRecordVO) => {
    const _id = row?.id
    const res = await getOrderReceiveRecord(_id);
    Object.assign(form.value, res.result);
    detailDialog.value = true;
}
/** 修改按钮操作 */
const handleUpdate = async (row?: OrderReceiveRecordVO) => {
    reset();
    const _id = row?.id || ids.value[0]
    const res = await getOrderReceiveRecord(_id);
    Object.assign(form.value, res.data);
    dialog.visible = true;
    dialog.title = "修改回款记录";
}
const getList = () => {
    orderReceiveRecordTable.value.getData()
}
/** 提交按钮 */
const submitForm = () => {
    orderReceiveRecordFormRef.value?.validate(async (valid: boolean) => {
        if (valid) {
            buttonLoading.value = true;
            if (form.value.id) {
                await updateOrderReceiveRecord(form.value).finally(() => buttonLoading.value = false);
            } else {
                await addOrderReceiveRecord(form.value).finally(() => buttonLoading.value = false);
            }
            proxy?.$modal.msgSuccess("操作成功");
            dialog.visible = false;
            await getList();
        }
    });
}


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