<template>
  <SysDialog
    class="query-expenseItem-detail"
    :visible="dialog.visible"
    v-bind="getBindValue"
    @onClose="onclose"
  >
    <template #content>
      <!-- <el-select
        v-model="queryExpenseItemDetailForm.validData"
        class="select-warp"
        placeholder="数据"
        @change="hanleChangeValidData"
      >
        <el-option
          v-for="item in dealData.validData"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select> -->
      <vxe-table 
        ref="xExpenseItemDetailRef" 
        :data="dealData.mainList"
        :height="520"
        border
        show-overflow
        :row-config="{ isHover: true }" 
        :cell-style="{ height: '38px', padding: 0 }"
        :column-config="{ resizable: true }" 
        :header-row-style="{ background: '#fff', color: '#909399', borderRight: '1px solid #ccc' }"
      >
        <vxe-column
          field="feeItemName"
          title="费项名称"
        />
        <vxe-column
          field="fee"
          title="费用金额"
        />
        <vxe-column
          field="exchangeRate"
          title="汇率"
        />
        <vxe-column
          field="originalFee"
          title="原始费用"
        />
        <vxe-column
          field="originalCurrencyCode"
          title="原始币种"
        />
        <vxe-column
          field="feeTypeName"
          title="数据类型"
        />
        <vxe-column
          field="createTime"
          title="创建时间"
          width="160"
        />
      </vxe-table>
    </template>
    <template #defineFooter>
      <div class="">
        <el-button
          type="danger"
          @click="onclose"
        >
          关闭
        </el-button>
      </div>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import { useQueryExpenseItemDetail } from '@/composables/userMoneySumList/useQueryExpenseItemDetail';
//弹框属性
const { dialog, onClose, onShow } = useDialog();
// 弹框一些配置
const getBindValue = reactive({
    title: "费用明细查询",
    width: "1020",
    height: 0,
    isFooter: true
});

// 基础数据
const {
    show,
    onclose,
    dealData
} = useQueryExpenseItemDetail(onClose, onShow)

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
    show
});
</script>
<style lang="scss" scoped>
.query-expenseItem-detail {
  .select-warp {
    margin-bottom: 13px;
  }
}
</style>