<script setup lang="jsx">
import {yzMitt} from "@/views/hospitalization/zhu-yuan-yi-sheng/public-js/zhu-yuan-yi-sheng";
import {queryFeeByOrderNoApi} from "@/api/zhu-yuan-yi-sheng/yi-zhu-lu-ru";
import {getWindowSize} from "@/utils/window-size";

const dialog = ref(false)
const feeList = ref([])
const tableRef = ref(null)


const orderData = ref()

const queryFeeByOrderNo = (data) => {
    orderData.value = data
    queryFeeByOrderNoApi(data.actOrderNo).then(res => {
        dialog.value = true
        feeList.value = res
    })
}


const refundStatus = (val) => {
    if (val === -1) {
        return <span style="color: red">退费数据</span>
    } else if (val > 0) {
        return <span style="color: black">原流水 {val}</span>
    }
}

const filterRoleMethod = ({value, row}) => {
    if (value === 1 && row.oriDetailSn === 0) {
        return true
    }
    if (value === 2 && row.oriDetailSn > 0) {
        return true
    }
    if (value === 3 && row.oriDetailSn === -1) {
        return true
    }
}

const tableCheckboxConfig = ref({
    checkMethod: ({row}) => {
        return row.oriDetailSn === 0
    }
})


onMounted(() => {
    yzMitt.on('queryFeeByOrderNo', queryFeeByOrderNo)
})

</script>

<template>
    <el-dialog v-model="dialog" title="费用详情" width="80%" top="3%">
        <vxe-table :data="feeList"
                   border
                   ref="tableRef"
                   :checkbox-config="tableCheckboxConfig"
                   :row-config="{isHover : true, isCurrent: true,height: 24,useKey :  'rowId'}"
                   :height="getWindowSize.h / 1.2">
            <vxe-column type="seq" width="50"/>
            <vxe-column type="checkbox" width="35"/>
            <vxe-column field="chargeDate" title="收费时间" width="150" sortable/>
            <vxe-column field="genTime" title="执行时间" width="150"/>
            <vxe-column field="chargeCodeName" title="项目名称" min-width="120"/>
            <vxe-column field="chargeCodeMx" title="项目编码" min-width="80"/>
            <vxe-column field="chargeFee" title="金额" min-width="40"/>
            <vxe-column field="execDept" title="执行" min-width="60"/>
            <vxe-column field="chargeAmount" title="数量" min-width="40" sortable/>
            <vxe-column title="退费"
                        :filters="[{ label: '未退', value: 1 }, { label: '退费', value: 2 },{ label: '被退', value: 3 }]"
                        :filter-method="filterRoleMethod">
                <template #default="{row}">
                    <component :is="refundStatus(row.oriDetailSn)"/>
                </template>
            </vxe-column>
        </vxe-table>
    </el-dialog>
</template>

<style scoped lang="scss">
.my-select {
  margin: 10px;
  width: 100px;
  height: 32px;
}
</style>
