<!-- 
    TODO 账单前端汇总
 -->
<template>
  <SysDialog
    class="customer-bill-summary"
    :visible="dialog.visible"
    :confirm-loading="dialog.confirmLoading"
    v-bind="getBindValue"
    @onClose="onClose"
  >
    <template #content>
      <div class="content-summary">
        <vxe-table border :min-height="0" :data="billSummaryState.data">
          <vxe-column field="currencyCode" title="币种" :min-width="100" />
          <vxe-column field="paymentSum" title="本期付款(+)" :min-width="100" />
          <vxe-column field="incomeSum" title="本期收入(+)" :min-width="100" />
          <vxe-column
            field="expenditureSum"
            title="本期支出(-)"
            :min-width="100"
          />
        </vxe-table>
      </div>
    </template>
    <template #defineFooter>
      <el-button type="primary" @click="onClose"> 关闭 </el-button>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import { reactive, nextTick } from "vue";

//弹框属性
const { dialog, onClose, onShow } = useDialog();
// 弹框一些配置
const getBindValue = reactive({
  title: "汇总",
  width: 620,
  height: 0,
  isFooter: true,
});

const billSummaryState = reactive({
  data: [] as Recordable[],
});

// 显示、隐藏
const show = (data) => {
  billSummaryState.data = data;
  nextTick(() => {
    onShow();
  });
};

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show,
});
</script>
<style lang="scss" scoped>
.customer-bill-summary {
  .content-summary {
    padding: 10px;
  }
}
</style>
