<template>

    <!-- 添加或修改退费记录对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="700px" append-to-body>
        <el-form ref="refundRecordFormRef" :model="form" :rules="rules" label-width="120px">
            <CorrelationSelect @custChange="getOrder" v-model="form.customerId" :isLiaison="false"/>
            <el-form-item label="关联订单" prop="orderId">
                <el-select-v2
                    v-model="form.orderId"
                    :options="groupData"
                    placeholder="请选择关联订单"
                    filterable
                />
            </el-form-item>
            <el-form-item label="退款金额" prop="refundAmount">
                <el-input type="number" v-model="form.refundAmount" placeholder="请输入退款金额">
                    <template #append>
                        <span>元</span>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label="退款日期" prop="refundDate">
                <el-date-picker clearable
                                v-model="form.refundDate"
                                type="date"
                                value-format="YYYY-MM-DD"
                                placeholder="请选择退款日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="退款描述" >
                <el-input v-model="form.remark" type="textarea" placeholder="请输入退款描述"/>
            </el-form-item>
            <el-form-item label="上传附件">
                <Upload v-model="form.resourceIdList" />
            </el-form-item>
            <el-form-item label="负责人员" prop="ownerBy">
                <SelectUser placeholder="请选择负责人" v-model="form.ownerBy"></SelectUser>
            </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>


</template>

<script setup name="RefundRecord" lang="ts">
import {
    getRefundRecord,
    addRefundRecord,
    updateRefundRecord
} from '@/api/finance/refundRecord';
import {RefundRecordVO, RefundRecordQuery, RefundRecordForm} from '@/api/finance/refundRecord/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";
import {listOrderForm} from "@/api/orderForm";
const emits = defineEmits(['onOk'])
const {queryDictDetailByCodes} = useDictCache(['order_review_status'])
queryDictDetailByCodes()


const {proxy} = getCurrentInstance() as ComponentInternalInstance;


const refundRecordList = ref<RefundRecordVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const detailDialog = ref(false);//详情
const refundDate = ref();//
const createdDate = ref();//
const showSearch = ref(true);

const single = ref(true);
const multiple = ref(true);
const total = ref(0);

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

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

const groupData = ref<{ label: string; value: string | number }[]>([])
const getOrder  = async ()=>{
    if(!form.value.customerId) return
    const res = await listOrderForm({
        pageIndex: 1,
        pageSize: 1000,
        customerId: form.value.customerId
    })
    groupData.value = res.result.records.map(item=>{
        return {
            label: item.title,
            value: item.id
        }
    })

}



const initFormData: RefundRecordForm = {
    id: undefined,
    refundCode: undefined,
    refundAmount: undefined,
    refundMethod: undefined,
    refundDate: undefined,
    customerId: undefined,
    orderId: undefined,
    invoicingType: undefined,
    approveStatus: undefined,
    remark: undefined,
    ownerBy: undefined
}
const data = reactive<PageData<RefundRecordForm, RefundRecordQuery>>({
    form: {...initFormData},
    rules: {
        id: [
            {required: true, message: "主键不能为空", trigger: "blur"}
        ],
        refundCode: [
            {required: true, message: "退款编号不能为空", trigger: "blur"}
        ],
        refundAmount: [
            {required: true, message: "退款金额不能为空", trigger: "blur"}
        ],
        refundMethod: [
            {required: true, message: "退款方式不能为空", trigger: "blur"}
        ],
        refundDate: [
            {required: true, message: "退款日期不能为空", trigger: "blur"}
        ],
        customerId: [
            {required: true, message: "关联客户不能为空", trigger: "blur"}
        ],
        orderId: [
            {required: true, message: "关联订单不能为空", trigger: "change"}
        ],
        invoicingType: [
            {required: true, message: "票据类型不能为空", trigger: "change"}
        ],
        approveStatus: [
            {required: true, message: "审批状态不能为空", trigger: "blur"}
        ],
        remark: [
            {required: true, message: "备注信息不能为空", trigger: "blur"}
        ],
        ownerBy: [
            {required: true, message: "拥有者不能为空", trigger: "blur"}
        ],
    }
});

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

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

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

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

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

/** 新增按钮操作 */
const handleAdd = () => {
    reset();
    dialog.visible = true;
    dialog.title = "添加退费记录";
}
/** 修改按钮操作 */
const detail = async (row?: RefundRecordVO) => {
    const _id = row?.id
    const res = await getRefundRecord(_id);
    Object.assign(form.value, res.result);
    detailDialog.value = true;
}

/** 修改按钮操作 */
const handleUpdate = async (id:string | number) => {
    reset();
    const _id = id
    const res = await getRefundRecord(_id);
    Object.assign(form.value, res.result);
    getOrder()
    dialog.visible = true;
    dialog.title = "修改退费记录";
}
const getList = () => {
    refundRecordTable.value.getData()
}
/** 提交按钮 */
const submitForm = () => {
    refundRecordFormRef.value?.validate(async (valid: boolean) => {
        if (valid) {
            buttonLoading.value = true;
            if (form.value.id) {
                await updateRefundRecord(form.value).finally(() => buttonLoading.value = false);
            } else {
                await addRefundRecord(form.value).finally(() => buttonLoading.value = false);
            }
            proxy?.$modal.msgSuccess("操作成功");
            dialog.visible = false;
            emits('onOk')
        }
    });
}
defineExpose({
    handleUpdate,
    handleAdd

})

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