<template>

    <!-- 添加或修改费用对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="700px" append-to-body>
        <el-descriptions
            class="margin-top"
            title="基本信息"
            :column="2"
            border
        >
            <el-descriptions-item lable="费用编号：">
                {{ form.costCode }}
            </el-descriptions-item>
            <el-descriptions-item lable="费用名称：">
              {{form.costName}}
            </el-descriptions-item>
            <el-descriptions-item lable="费用金额：">
                {{form.costAmount}}
            </el-descriptions-item>
            <el-descriptions-item lable="发生日期：">
              {{form.costTakeDate}}
            </el-descriptions-item>
           <el-descriptions-item lable="关联客户：">
              {{form.customerName}}
            </el-descriptions-item>
           <el-descriptions-item lable="关联订单/商机：">
              {{form.resourceTypeId}}
            </el-descriptions-item>
           <el-descriptions-item lable="联系人：">
              {{form.liaisonName}}
            </el-descriptions-item>
           <el-descriptions-item lable="报销状态：">
              {{form.reimburseStatus}}
            </el-descriptions-item>
            <el-descriptions-item lable="负责人：">
              {{form.ownerByName}}
            </el-descriptions-item>

        </el-descriptions>
        <template #footer>
            <div class="dialog-footer">
                <el-button :loading="buttonLoading" type="primary" @click="postBX">发起报销</el-button>
                <el-button :loading="buttonLoading" @click="edite">编辑记录</el-button>
                <el-button :loading="buttonLoading" @click="delRecored">删除记录</el-button>
            </div>
        </template>
    </el-dialog>

</template>

<script setup name="addCostRecord" lang="ts">
import {
    getCostRecord,
    addCostRecord,
    updateCostRecord, delCostRecord
} from '@/api/finance/costRecord/index';
import {CostRecordVO, CostRecordQuery, CostRecordForm} from '@/api/finance/costRecord/types';

const emits = defineEmits(['edite', 'removeOk'])
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const costId = ref<string | number | (string | number)[]>()
const buttonLoading = ref(false)

//发起报销
const postBX = () => {
    buttonLoading.value = true

}
//删除
const delRecored = async () => {
    buttonLoading.value = true
    await delCostRecord(costId.value)
    emits('removeOk')
    buttonLoading.value = false
}
//编辑
const edite = () => {
    buttonLoading.value = true
    emits('edite', form.value)
    buttonLoading.value = false
}
const dialog = reactive<DialogOption>({
    visible: false,
    title: ''
});

const initFormData: CostRecordForm = {
    id: undefined,
    costCode: undefined,
    costName: undefined,
    costAmount: undefined,
    costTakeDate: undefined,
    reimburseStatus: undefined,
    cusstomerId: undefined,
    resourceType: undefined,
    resourceTypeId: undefined,
    currencyUnitId: undefined,
    remark: undefined,
    isDelete: undefined,
    enabled: undefined,
    ownerBy: undefined,
    sort: undefined
}

const data = reactive<PageData<CostRecordForm, CostRecordQuery>>({
    form: {...initFormData}
});
const {form} = toRefs(data)
const getById = (id: string | number) => {
    costId.value = id
    getCostRecord(id).then((res) => {
        form.value = res.data;
    });
}

/** 新增按钮操作 */
const open = async (id: string | number) => {
    dialog.visible = true;
    await getById(id)
    dialog.title = "费用详情";
}


defineExpose({
    open,
})

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