<script setup lang="ts">
import type {CostItemSettingVO} from '#/api/property/costManagement/costItemSetting/model';
import {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 {costItemSettingInfo} from '#/api/property/costManagement/costItemSetting';
import {renderDict} from "#/utils/render";

dayjs.extend(duration);
dayjs.extend(relativeTime);

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

const costItemSettingDetail = shallowRef<null | CostItemSettingVO>(null);

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

<template>
  <BasicModal :footer="false" :fullscreen-button="false" title="费用项设置详情" class="w-[70%]">
    <Descriptions v-if="costItemSettingDetail" size="small" :column="2" bordered
                  :labelStyle="{width:'140px'}">
      <DescriptionsItem label="费用编号">
        {{ costItemSettingDetail.chargeNo }}
      </DescriptionsItem>
      <DescriptionsItem label="费用类型" v-if="costItemSettingDetail.costType!=null">
        <component
          :is="renderDict(costItemSettingDetail.costType,'pro_expense_type')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="收费项目">
        {{ costItemSettingDetail.chargeItem }}
      </DescriptionsItem>
      <DescriptionsItem label="费用标识" v-if="costItemSettingDetail.costMark!=null">
        <component
          :is="renderDict(costItemSettingDetail.costMark,'pro_cost_identification')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="付费类型" v-if="costItemSettingDetail.paymentType!=null">
        <component
          :is="renderDict(costItemSettingDetail.paymentType,'pro_payment_type')"
        />
      </DescriptionsItem>
<!--      <DescriptionsItem label="费用周期（月）">-->
<!--        {{ costItemSettingDetail.chargeCycle }}-->
<!--      </DescriptionsItem>-->
      <DescriptionsItem label="单位">
        {{ costItemSettingDetail.unit }}
      </DescriptionsItem>
      <DescriptionsItem label="手机缴费" v-if="costItemSettingDetail.isMobilePay!=null">
        <component
          :is="renderDict(costItemSettingDetail.isMobilePay,'pro_mobile_payment')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="进位方式" v-if="costItemSettingDetail.roundingMode!=null">
        <component
          :is="renderDict(costItemSettingDetail.roundingMode,'pro_carry_method')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="保留小数" v-if="costItemSettingDetail.currencyDecimals!=null">
        <component
          :is="renderDict(costItemSettingDetail.currencyDecimals,'pro_keep_decimals')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="状态" v-if="costItemSettingDetail.state!=null">
        <component
          :is="renderDict(costItemSettingDetail.state,'wy_state')"
        />
      </DescriptionsItem>
      <DescriptionsItem label="计算公式" v-if="costItemSettingDetail.formula!=null" :span="2">
        <component
          :is="renderDict(costItemSettingDetail.formula,'pro_calculation_formula')"
        />
      </DescriptionsItem>
      <DescriptionsItem :label="costItemSettingDetail.formula=='1'?'费用':'计费单价'" v-if="costItemSettingDetail.unitPrice!=null">
        {{ costItemSettingDetail.unitPrice }}
      </DescriptionsItem>
      <DescriptionsItem label="附加费用" v-if="costItemSettingDetail.surcharge!=null">
        {{ costItemSettingDetail.surcharge }}
      </DescriptionsItem>
    </Descriptions>
  </BasicModal>
</template>
