<script setup lang="ts">
import {ref, shallowRef} from 'vue';
import {useVbenModal} from '@vben/common-ui';
import {Descriptions, DescriptionsItem} from 'ant-design-vue';
import dayjs from 'dayjs';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';
import {renderDict} from "#/utils/render";

dayjs.extend(duration);
dayjs.extend(relativeTime);
import {houseChargeInfo} from "#/api/property/costManagement/houseCharge";
import type {HouseChargeVO} from "#/api/property/costManagement/houseCharge/model";
import type {RoomVO} from "#/api/property/room/model";
import type {CostItemSettingVO} from "#/api/property/costManagement/costItemSetting/model";


const [BasicModal, modalApi] = useVbenModal({
  onOpenChange: handleOpenChange,
  onClosed() {
    houseChargeDetail.value = null;
  },
});

const houseChargeDetail = shallowRef<null | HouseChargeVO>(null);
const room=ref<RoomVO>();
const costItem=ref<CostItemSettingVO>();
async function handleOpenChange(open: boolean) {
  if (!open) {
    return null;
  }
  modalApi.modalLoading(true);
  const {id} = modalApi.getData() as { id: number | string };
  houseChargeDetail.value = await houseChargeInfo(id);
  if(houseChargeDetail.value){
    room.value=houseChargeDetail.value.roomVo
    costItem.value=houseChargeDetail.value.costItemsVo
  }
  modalApi.modalLoading(false);
}
</script>

<template>
  <BasicModal :footer="false" :fullscreen-button="false" title="房屋收费详情" class="w-[70%]">
    <Descriptions v-if="houseChargeDetail" size="small" :column="2" bordered
                  :labelStyle="{width:'100px'}">
      <DescriptionsItem label="费用编号">
        {{ costItem.id }}
      </DescriptionsItem>
      <DescriptionsItem label="费用项目">
        {{ costItem.chargeItem }}
      </DescriptionsItem>
      <DescriptionsItem label="费用类型">
        <component
          :is="renderDict(costItem.costType,'pro_expense_type')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="计费时间">
        {{ houseChargeDetail.startTime+' 至 '+houseChargeDetail.endTime }}
      </DescriptionsItem>
      <DescriptionsItem label="房间">
        {{room.roomNumber}}
      </DescriptionsItem>
      <DescriptionsItem label="房间面积">
        {{`建筑面积：${room.area} 套内面积：${room.insideInArea}`}}
      </DescriptionsItem>
      <DescriptionsItem label="单价">
        {{ costItem.unitPrice }}
      </DescriptionsItem>
      <DescriptionsItem label="附加费">
        {{costItem.surcharge}}
      </DescriptionsItem>
      <DescriptionsItem label="应收金额">
        <span style="font-size: 16px;font-weight: 600;color: red" v-if="houseChargeDetail.amountReceivable">
         ￥ {{houseChargeDetail.amountReceivable}}
        </span>
      </DescriptionsItem>
      <DescriptionsItem label="支付方式" v-if="houseChargeDetail.payType">
        <component
          :is="renderDict(houseChargeDetail.payType,'wy_zffs')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="缴费周期" v-if="houseChargeDetail.chargeCycle">
        {{houseChargeDetail.chargeCycle}}月
      </DescriptionsItem>
      <DescriptionsItem label="说明" :span="2">
        {{houseChargeDetail.remark}}
      </DescriptionsItem>
    </Descriptions>
  </BasicModal>
</template>
