<template>
  <SysDialog
    class="addrecharge-add"
    :visible="dialog.visible"
    v-bind="getBindValue"
    :confirm-loading="dialog.confirmLoading"
    @onClose="onclose"
    @onConfirm="confirm"
  >
    <template #content>
      <div class="addrecharge-content">
        <el-form
          ref="addrechargeRef"
          :model="rechargeForm"
          :label-width="90"
          :rules="rechargeFormRules"
          inline
        >
          <el-row>
            <el-col :span="12">
              <el-form-item
                prop="customerId"
                label="客户"
                :style="setFormItemWidth"
              >
                <BaseSelect
                  v-model:modelValue="rechargeForm.customerId"
                  class="define-select"
                  :options="customertList"
                  placeholder="客户"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                prop="currencyCode"
                label="币种"
                :style="setFormItemWidth"
              >
                <BaseSelect
                  v-model:modelValue="rechargeForm.currencyCode"
                  class="define-select"
                  :filterable="false"
                  :options="currencyList"
                  placeholder="币种"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                prop="feeAmount"
                label="金额"
                :style="setFormItemWidth"
              >
                <el-input
                  v-model="rechargeForm.feeAmount"
                  class="define-select"
                  placeholder="金额"
                  v-clear-only-regex="/^\d*\.?\d{0,3}$/"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                prop="orgId"
                label="分公司"
                :style="setFormItemWidth"
              >
                <BaseSelect
                  v-model:modelValue="rechargeForm.orgId"
                  class="define-select"
                  :filterable="false"
                  :options="branchCompanyCustomers"
                  placeholder="分公司"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                prop="transactionNumber"
                label="交易号"
                :style="setFormItemWidth"
              >
                <el-input
                  v-model="rechargeForm.transactionNumber"
                  class="define-select"
                  placeholder="交易号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                prop="bankAccount"
                label="银行账号"
                :style="setFormItemWidth"
              >
                <el-input
                  v-model="rechargeForm.bankAccount"
                  class="define-select"
                  placeholder="银行账号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                prop="receiveTime"
                label="付款时间:"
                :style="setFormItemWidth"
              >
                <el-date-picker
                  v-model="rechargeForm.receiveTime"
                  type="datetime"
                  placeholder="付款时间"
                  format="YYYY-MM-DD HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 100%;"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                prop="paymentType"
                label="付款方式"
                :style="setFormItemWidth"
              >
                <BaseSelect
                  v-model:modelValue="rechargeForm.paymentType"
                  class="define-select"
                  :filterable="true"
                  :options="allPaymentPlatformList"
                  placeholder="付款方式"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                prop="remark"
                label="备注"
                :style="setFormItemWidth"
              >
                <el-input
                  v-model="rechargeForm.remark"
                  class="define-select"
                  placeholder="备注"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import type { ListIitem } from '@/api/base/BaseDataModel';
import { reactive } from 'vue';
import SysDialog from "@/components/SysDialog.vue";
import useDialog from '@/hooks/useDialog';
import BaseSelect from '@/components/QuerySelect/BaseSelect.vue';
import { useRechargeAdd } from '@/composables/recharge/useRechargeAdd';
import { useColWidth } from '@/hooks/useColWidth';

const emit = defineEmits(['onUpdateRecharge'])
//弹框属性
const { dialog, onClose, onShow, setLoading } = useDialog();
// 弹框一些配置
const getBindValue = reactive({
  title: "充值",
  width: 820,
  height: 0
});
defineProps<{
  customertList: ListIitem[], 
  currencyList: ListIitem[], 
  branchCompanyCustomers: ListIitem[],
  allPaymentPlatformList: ListIitem[],
}>()
// 基础数据
const { setFormItemWidth } = useColWidth()
const { 
  rechargeForm,
  rechargeFormRules,
  addrechargeRef,
  onclose,
  show,
  confirm
} = useRechargeAdd(onClose, onShow, setLoading, emit)
//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show
});
</script>
<style lang="scss" scoped>
.addrecharge-add {
  .addrecharge-content {
    padding-top: 18px;
    .define-select {
      width: 100%;
    }
  }
}
</style>