<!-- 
  XXX 废弃：客户总账弹窗明细-
 -->
<template>
  <SysDialog class="usermoneysum-detail" :visible="dialog.visible" v-bind="getBindValue" @onClose="onclose">
    <template #content>
      <el-form ref="userMoneySumDetailRef" class="usermoneysum-form" :model="queryUserMoneySumDetailForm" label-width="68" inline>
        <el-form-item prop="customerId" label="客户">
          <BaseSelect v-model:modelValue="queryUserMoneySumDetailForm.customerId" :clearable="true" class="define-select"
            :options="customertList" placeholder="客户" />
        </el-form-item>
        <el-form-item prop="currencyCode" label="币种">
          <BaseSelect v-model:modelValue="queryUserMoneySumDetailForm.currencyCode" :clearable="true"
            class="define-select" :filterable="false" :options="currencyList" placeholder="币种" />
        </el-form-item>
        <el-form-item prop="orderIdList" label="单号">
          <el-popover :visible="dealData.isOrderIdList" placement="bottom" :width="200">
            <div>
              <el-input v-model="dealData.inputMultiOrders" :rows="3" type="textarea" placeholder="请输入单号，每行一个" />
              <div class="text-right">
                <el-button type="danger" link @click="hanlClearOrderIdList">
                  清除
                </el-button>
                <el-button type="success" link @click="confirmMultiOrders">
                  确定
                </el-button>
              </div>
            </div>
            <template #reference>
              <el-input class="define-select" v-model="dealData.inputOrders" placeholder="单号以逗号(,)回车分开"
                @click="showOrderIdList" @keyup.enter="confirmMultiEnterOrders" />
            </template>
          </el-popover>
          <!-- <el-input class="define-select" v-model="queryUserMoneySumDetailForm.orderIdList"
            placeholder="单号以逗号(,)回车分开"></el-input> -->
        </el-form-item>
        <el-form-item prop="operatingType" label="操作类型">
          <BaseSelect v-model:modelValue="queryUserMoneySumDetailForm.operatingType" :clearable="true"
            class="define-select" :filterable="false" :options="operatingTypeList" placeholder="操作类型" />
        </el-form-item>
        <el-form-item prop="customerType" label="费用类型">
          <BaseSelect v-model:modelValue="queryUserMoneySumDetailForm.customerType" :clearable="true"
            class="define-select" :filterable="false" :options="customerTypeList" placeholder="费用类型" />
        </el-form-item>
        <el-form-item prop="orgId" label="分公司">
          <BaseSelect v-model:modelValue="queryUserMoneySumDetailForm.orgId" :clearable="true" class="define-select"
            :filterable="false" :options="branchCompanyCustomers" placeholder="分公司" />
        </el-form-item>
        <el-form-item prop="transactionNumber" label="交易号">
          <el-input class="define-select" v-model="queryUserMoneySumDetailForm.transactionNumber"
            placeholder="交易号"></el-input>
        </el-form-item>
        <el-form-item prop="productId" label="产品名称">
          <BaseSelect v-model:modelValue="queryUserMoneySumDetailForm.productId" :clearable="true" class="define-select"
            :options="productList" placeholder="产品名称" />
        </el-form-item>
        <el-form-item prop="countryCode" label="国家/地区">
          <BaseSelect v-model:modelValue="queryUserMoneySumDetailForm.countryCode" :clearable="true" class="define-select"
            :options="countryList" placeholder="国家/地区" />
        </el-form-item>
        <el-form-item prop="validData" label="数据">
          <BaseSelect v-model:modelValue="queryUserMoneySumDetailForm.validData" :clearable="true" class="define-select"
            :filterable="false" :options="dealData.validData" placeholder="数据" />
        </el-form-item>
        <el-form-item prop="reportQueryDateType" label="时间类型">
          <BaseSelect v-model:modelValue="queryUserMoneySumDetailForm.reportQueryDateType" :clearable="true" class="define-select"
            :filterable="false" :options="reportQueryDateTypeList" placeholder="时间类型" />
        </el-form-item>
        <el-form-item prop="beginDate" label="起始时间">
          <div class="define-select">
            <el-date-picker style="width: 100%;" value-format="YYYY-MM-DD" placeholder="起始时间" v-model="queryUserMoneySumDetailForm.beginDate" type="date" />
          </div>
        </el-form-item>
        <el-form-item prop="endDate" label="结束时间">
          <div class="define-select">
            <el-date-picker style="width: 100%;" value-format="YYYY-MM-DD" placeholder="结束时间" v-model="queryUserMoneySumDetailForm.endDate" type="date" />
          </div>
        </el-form-item>
        <el-form-item prop="billDate" label="账单时间">
          <div class="define-select">
            <el-date-picker style="width: 100%;" value-format="YYYY-MM-DD" placeholder="账单时间" v-model="queryUserMoneySumDetailForm.billDate" type="date" />
          </div>
        </el-form-item>
        <el-form-item label="报表模板">
          <BaseSelect v-model:modelValue="dealData.reportType" :clearable="true" class="define-select"
            :filterable="false" :options="reportModelTypeList" placeholder="报表模板" />
        </el-form-item>
        <el-form-item>
          <el-button :icon="Search" @click="searchBtn" :loading="dealData.loading">
            搜索
          </el-button>
          <el-button class="reset-btn" :icon="RefreshRight" @click="resetBtn" :loading="dealData.loading">
            重置
          </el-button>
          <el-button type="success" :icon="Download" @click="exportBillBtn" plain>
            账单导出
          </el-button>
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <VxeBasicTable v-bind="usermoneyGridOptions" ref="tableRef">
        <template #customerId="{ row }">
          {{ dealListIitemToName(row.customerId, customertList) }}
        </template>
        <template #orgId="{ row }">
          {{ dealListIitemToName(row.packageType, packageTypeList) }}
        </template>
        <template #packageType="{ row }">
          {{ dealListIitemToName(row.packageType, packageTypeList) }}
        </template>
        <template #actions="{ row }">
          <DropDownButtons :model-value="row" :action-options="actionOptions" @click-change="handleClickChange" />
        </template>
      </VxeBasicTable>
    </template>
    <template #defineFooter>
      <div class="">
        <el-button type="danger" @click="onclose">
          关闭
        </el-button>
      </div>
    </template>
  </SysDialog>
  <QueryExpenseItemDetail ref="queryExpenseItemDetailRef"></QueryExpenseItemDetail>
</template>
<script lang="ts" setup>
import {
  Search,
  RefreshRight,
  Download
} from "@element-plus/icons-vue";
import { reactive } from 'vue';
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import { ListIitem } from '@/api/base/BaseDataModel';
import BaseSelect from '@/components/QuerySelect/BaseSelect.vue';
import { userMoneySumDetail } from '@/composables/userMoneySumList/userMoneySumDetail';
import DropDownButtons from '@/components/DropDownButtons/index.vue';
import QueryExpenseItemDetail from './QueryExpenseItemDetail.vue';
import { dealListIitemToName } from "@/utils/dealData";
import { userMoneySumDetailSource } from "@/composables/userMoneySumDetail/userMoneySumDetailSource";

//弹框属性
const { dialog, onClose, onShow } = useDialog();
// 弹框一些配置
const getBindValue = reactive({
  title: "费用明细查询",
  width: "520",
  height: 0,
  isFooter: true,
  fullscreen: true
});
defineProps<{
  customertList: ListIitem[],//客户
  currencyList: ListIitem[],//币种
  customerTypeList: ListIitem[],//费用类型
  operatingTypeList: ListIitem[],//费用操作类型
  feeDataTypeList: ListIitem[],//费用数据类型
  branchCompanyCustomers: ListIitem[],//分公司
  productList: ListIitem[],//产品名称
  countryList: ListIitem[],//国家/地区
  packageTypeList: ListIitem[],//包装类型
  reportModelTypeList: ListIitem[],//报表模板类型
  reportQueryDateTypeList: ListIitem[],//查询时间类型
}>()

// 表格数据
const { tableRef, usermoneyGridOptions, VxeBasicTable } = userMoneySumDetailSource()
// 基础数据
const {
  queryUserMoneySumDetailForm,
  dealData,
  actionOptions,
  queryExpenseItemDetailRef,
  onclose,
  show,
  searchBtn,
  resetBtn,
  exportBillBtn,
  handleClickChange,
  showOrderIdList,
  hanlClearOrderIdList,
  confirmMultiOrders,
  confirmMultiEnterOrders,
} = userMoneySumDetail(onClose, onShow, usermoneyGridOptions)

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

  .usermoneysum-form {
    :deep(.el-form-item) {
      margin-right: 8px;
    }

    :deep(.el-form-item__label) {
      padding-right: 8px;
    }
  }
}
</style>