<template>
  <SysDialog
    class="transfer-accounts"
    :visible="dialog.visible"
    :confirm-loading="dialog.confirmLoading"
    v-bind="getBindValue"
    @onClose="onclose"
    @onConfirm="confirm"
  >
    <template #content>
      <el-alert
        class="prompt"
        :closable="false"
        title="你确定是否将该笔临时费用转为客户充值?"
        type="warning"
      />
      <el-form
        ref="transferAccountsRef"
        :model="transferAccountsForm"
        inline
        :rules="transferAccountsFormRules"
        label-width="90px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="额度"
              :style="setFormItemWidth"
            >
              <el-input
                v-model="transferAccountsState.tempLimit"
                type="number"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="确认金额"
              prop="confirmFee"
              :style="setFormItemWidth"
            >
              <el-input
                v-model="transferAccountsForm.confirmFee"
                v-clear-only-regex="/^\+?(\d+(\.\d*)?|\.\d+)$/"
                type="number"
                @focus="onConfirmFeeFocus"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              prop="receiveTime"
              label="付款时间:"
              :style="setFormItemWidth"
            >
              <el-date-picker
                v-model="transferAccountsForm.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="transferAccountsForm.paymentType"
                class="define-select"
                :filterable="true"
                :options="allPaymentPlatformList"
                placeholder="付款方式"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="备注"
              prop="remark"
              :style="setFormItemWidth"
            >
              <el-input v-model="transferAccountsForm.remark" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import { TransferAccountsParams } from "@/api/accountPeriod/accountPeriodModel";
import SysDialog from "@/components/SysDialog.vue";
import { useColWidth } from "@/hooks/useColWidth";
import useDialog from "@/hooks/useDialog";
import BaseSelect from '@/components/QuerySelect/BaseSelect.vue';
import { useDropDownData } from "@/hooks/useDropDownData";
import { useEleFormValidate } from "@/hooks/useEleFormValidate";
import { ref, reactive, nextTick } from "vue";

const emit = defineEmits(['saveTransferAccounts'])
//弹框属性
const { dialog, onClose, onShow, setLoading } = useDialog();
// 弹框一些配置
const getBindValue = reactive({
  title: "系统提示",
  width: 680,
  height: 0
});
const transferAccountsRef = ref();
const transferAccountsState = reactive({
  tempLimit: undefined
});
const transferAccountsForm = reactive<Partial<TransferAccountsParams>>({
  id: undefined,
  confirmFee: undefined,
  remark: ""
});
const transferAccountsFormRules = reactive({
  confirmFee: [{ required: true, message: "请输入确实金额", trigger: "blur" }]
});

const { allPaymentPlatformList } = useDropDownData()
const { setFormItemWidth } = useColWidth();
// 校验表单
const { formValidate, resetForm } = useEleFormValidate();
// 额度选中
const onConfirmFeeFocus = (e) => {
  e.target && e.target.select();
};
// 显示、隐藏
const show = (data) => {
  transferAccountsForm.id = data.id;
  transferAccountsState.tempLimit = data.tempLimit;
  transferAccountsForm.confirmFee = data.tempLimit;
  nextTick(() => {
    onShow();
  })
};
const onclose = () => {
  resetForm(transferAccountsRef.value);
  transferAccountsForm.id = undefined
  onClose();
};
const confirm = async () => {
  const isValidate = await formValidate(transferAccountsRef.value);
  if (!isValidate) return;
  setLoading(true);
  emit("saveTransferAccounts", transferAccountsForm, onclose, setLoading)
};

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show
});
</script>
<style scoped>
.prompt {
    margin: 6px 0 18px;
}
</style>
