<script setup lang="ts">
import { ref, shallowRef } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { Descriptions, DescriptionsItem } from 'ant-design-vue';
import { renderDict } from "#/utils/render";
import { carChargeInfo } from "#/api/property/carCharge";
import type { CarChargeVO } from "#/api/property/carCharge/model";

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

const carChargeDetail = shallowRef<null | CarChargeVO>(null);

async function handleOpenChange(open: boolean) {
  if (!open) return null;
  modalApi.modalLoading(true);
  const { id } = modalApi.getData() as { id: number | string };
  carChargeDetail.value = await carChargeInfo(id);
  modalApi.modalLoading(false);
}
</script>

<template>
  <BasicModal :footer="false" :fullscreen-button="false" title="车辆收费详情" class="w-[70%]">
    <Descriptions v-if="carChargeDetail" size="small" :column="2" bordered :labelStyle="{width:'100px'}">
      <DescriptionsItem label="车牌号">
        {{ carChargeDetail.carNumber }}
      </DescriptionsItem>
      <DescriptionsItem label="费用类型">
        <component v-if="carChargeDetail" :is="renderDict(2,'pro_expense_type')" />
      </DescriptionsItem>
      <DescriptionsItem label="计费时间">
        {{ carChargeDetail.starTime + ' 至 ' + carChargeDetail.endTime }}
      </DescriptionsItem>
      <DescriptionsItem label="车位">
        {{ carChargeDetail.location }}
      </DescriptionsItem>
      <DescriptionsItem label="应收金额">
        <div v-if="carChargeDetail.amountReceivable">
          <span style="font-size: 16px;font-weight: 600;color: red;margin-right: 10px">
            ￥ {{ carChargeDetail.amountReceivable }}
          </span>
        </div>
      </DescriptionsItem>
      <DescriptionsItem label="缴费状态" v-if="carChargeDetail.chargeStatus">
        <component :is="renderDict(carChargeDetail.chargeStatus,'wy_fyshzt')" />
      </DescriptionsItem>
      <DescriptionsItem label="支付方式" v-if="carChargeDetail.payType">
        <component :is="renderDict(carChargeDetail.payType,'wy_zffs')" />
      </DescriptionsItem>
      <DescriptionsItem label="缴费周期" v-if="carChargeDetail.chargeCycle">
        {{ carChargeDetail.chargeCycle }}月
      </DescriptionsItem>
      <DescriptionsItem label="说明" :span="2">
        {{ carChargeDetail.remark }}
      </DescriptionsItem>
    </Descriptions>
  </BasicModal>
</template> 