<template>
  <el-main class="user-money-recharge">
    <el-form
      ref="queryMoneyRechargeRef"
      class="usermoneysum-form"
      :model="queryMoneyRechargeForm"
      :inline="true"
    >
      <el-form-item
        prop="customerId"
        class="money-recharge-search"
      >
        <BaseSelect
          v-model:modelValue="queryMoneyRechargeForm.customerId"
          :clearable="true"
          :options="customertList"
          placeholder="客户"
          @change="hanleCustomer"
        />
      </el-form-item>
      <el-form-item
        prop="currencyCode"
        class="money-recharge-type"
      >
        <BaseSelect
          v-model:modelValue="queryMoneyRechargeForm.currencyCode"
          :clearable="true"
          :options="currencyList"
          placeholder="币种"
        />
      </el-form-item>
      <el-form-item
        prop="paymentType"
        class="money-recharge-type"
      >
        <BaseSelect
          v-model:modelValue="queryMoneyRechargeForm.paymentType"
          :clearable="true"
          :options="allPaymentPlatformList"
          placeholder="支付方式"
        />
      </el-form-item>
      <el-form-item
        prop="orgId"
        class="money-recharge-type"
      >
        <BaseSelect
          v-model:modelValue="queryMoneyRechargeForm.orgId"
          :clearable="true"
          :options="branchCompanyCustomers"
          placeholder="分公司"
          @change="changeBranchCompanyName"
        />
      </el-form-item>
      <el-form-item
        prop="salesmanId"
        class="money-recharge-search"
      >
        <BaseSelect
          v-model:modelValue="queryMoneyRechargeForm.salesmanId"
          :clearable="true"
          class="define-select"
          :options="getSalesmanUsesList"
          placeholder="业务员"
        />
      </el-form-item>
      <el-form-item
        prop="feeAmount"
        class="feeAmount"
      >
        <el-input
          v-model="queryMoneyRechargeForm.feeAmount"
          placeholder="费用"
          clearable
        />
      </el-form-item>
      <el-form-item
        prop="transactionNumber"
        class="transactionNumber"
      >
        <el-input
          v-model="queryMoneyRechargeForm.transactionNumber"
          placeholder="充值流水号"
          clearable
        />
      </el-form-item>
      <el-form-item
        prop="reportQueryDateType"
        class="money-recharge-dateType"
      >
        <BaseSelect
          v-model:modelValue="queryMoneyRechargeForm.reportQueryDateType"
          :clearable="true"
          :options="moneyRechargeState.dateTypeList"
          placeholder="日期类型"
          @change="changeBranchCompanyName"
        />
      </el-form-item>
      <el-form-item
        prop="dateArr"
        class="moneyrecharge-date-search"
      >
        <el-date-picker
          v-model="moneyRechargeState.dateArr"
          :disabled-date="isSelectDisabled"
          type="daterange"
          :unlink-panels="false"
          format="YYYY-MM-DD hh:mm"
          value-format="YYYY-MM-DD hh:mm"
          popper-class="myDatePicker"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :default-time="defaultTime"
          @calendar-change="selectCalendar"
          @change="changeDateArr"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          v-permission="['sys:userMoneyDetail:list']"
          :icon="Search"
          :loading="moneyRechargeState.loading"
          @click="searchBtn"
        >
          搜索
        </el-button>
        <el-button
          v-permission="['sys:userMoneyDetail:list']"
          class="reset-btn"
          :icon="RefreshRight"
          :loading="moneyRechargeState.loading"
          @click="resetBtn"
        >
          重置
        </el-button>
        <el-button
          v-permission="['sys:userMoneyReport:downloadRecharge']"
          type="success"
          :icon="Download"
          plain
          :loading="moneyRechargeLoading"
          @click="exportMoneyRecharge"
        >
          导出
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <VxeBasicTable
      ref="tableMoneyRechargeRef"
      v-bind="userMoneyRechargeGridOptions"
    >
      <template #actions="{ row }">
        <div v-permission="['sys:userMoneyDetail:balance']">
          <DropDownButtons
            :model-value="row"
            :action-options="actionOptions"
            @click-change="handleClickChange"
          />
        </div>
      </template>
    </VxeBasicTable>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="queryMoneyRechargeForm.pageNum"
      :page-sizes="[10, 20, 40, 80, 100]"
      :page-size="queryMoneyRechargeForm.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="queryMoneyRechargeForm.total"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </el-main>
</template>
<script lang="ts" setup name="customerMoneyRecharge">
import { Search, RefreshRight, Download } from "@element-plus/icons-vue";
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
import DropDownButtons from "@/components/DropDownButtons/index.vue";
import { userMoneyRechargeModel } from "@/composables/customerMoneyRecharge/userMoneyRechargeModel";
import { userMoneyRecharge } from "@/composables/customerMoneyRecharge/userMoneyRecharge";
import { useTimeRange } from "@/hooks/useTimeRange";
import { useInitTableHeight } from "@/hooks/useInitTableHeight";
import { VxeBasicTable } from "@/components/VxeTable";

// daterange 时间范围
const { defaultTime, isSelectDisabled, selectCalendar } = useTimeRange();
const { userMoneyRechargeGridOptions, tableMoneyRechargeRef } =
  userMoneyRechargeModel();
// 初始化表格高度
useInitTableHeight(userMoneyRechargeGridOptions, 560);
const {
  queryMoneyRechargeForm,
  moneyRechargeState,
  actionOptions,
  searchBtn,
  resetBtn,
  moneyRechargeLoading,
  exportMoneyRecharge,
  hanleCustomer,
  sizeChange,
  currentChange,
  handleClickChange,
  changeBranchCompanyName,
  changeDateArr,
  customertList,
  currencyList,
  branchCompanyCustomers,
  getSalesmanUsesList,
  allPaymentPlatformList
} = userMoneyRecharge(userMoneyRechargeGridOptions);
</script>
<style lang="scss" scoped>
@mixin itemMrg {
  margin-right: 8px;
}
.user-money-recharge {
  .money-recharge-search {
    width: 121px;
    @include itemMrg;
  }
  .money-recharge-type {
    width: 116px;
    @include itemMrg;
  }
  .money-recharge-dateType {
    width: 99px;
    @include itemMrg;
    margin-right: 0;
  }
  .transactionNumber {
    width: 245px;
    @include itemMrg;
  }
  .moneyrecharge-date-search {
    width: 252px;
    @include itemMrg;
  }
  .feeAmount {
    width: 99px;
    @include itemMrg;
  }
  .usermoneysum-form {
    :deep(.el-button+.el-button) {
      margin-left: 8px;
    }
  }
  :deep(.vxe-toolbar) {
    padding-top: 0;
  }
}
</style>
