<template>
  <SysDialog
    class="refund-add"
    :visible="dialog.visible"
    v-bind="getBindValue"
    :confirm-loading="dialog.confirmLoading"
    @onClose="onclose"
    @onConfirm="confirm"
  >
    <template #content>
      <div class="refund-content">
        <el-form
          ref="refundRef"
          :model="refundForm"
          :label-width="90"
          :rules="refundFormRules"
          inline
        >
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="客户名称:"
                :style="setFormItemWidth"
              >
                <el-tooltip
                  effect="dark"
                  :content="refundState.customerName"
                  placement="top"
                >
                  <div
                    class="single-line"
                    style="width: 100%;"
                  >
                    {{ refundState.customerName }}
                  </div>
                </el-tooltip>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="当前余额:"
                :style="setFormItemWidth"
              >
                {{ refundState.leftTotal }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                prop="feeAmount"
                label="退款金额:"
                :style="setFormItemWidth"
              >
                <el-input
                  v-model="refundForm.feeAmount"
                  v-clear-only-regex="/^\d*\.?\d{0,3}$/"
                  class="define-select"
                  placeholder="退款金额"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="备注:"
                prop="remark"
                :style="setFormItemWidth"
              >
                <el-input
                  v-model="refundForm.remark"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import { useRdfund } from "@/composables/recharge/useRdfund";
import { useColWidth } from "@/hooks/useColWidth";

const emit = defineEmits(["onRefund"]);
//弹框属性
const { dialog, onClose, onShow, setLoading } = useDialog();
// 弹框一些配置
const getBindValue = reactive({
  title: "退款",
  width: 720,
  height: 0
});
// 基础数据
const { setFormItemWidth } = useColWidth();
const { refundRef, refundState, refundForm, refundFormRules, onclose, show, confirm } =
  useRdfund(onClose, onShow, setLoading, emit);
//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show
});
</script>
<style lang="scss" scoped>
.refund-add {
  .refund-content {
    padding-top: 18px;
    .define-select {
      width: 100%;
    }
  }
}
</style>
