<template>
    <SysDialog class="exchangeconvert-dialog" :visible="dialog.visible" v-bind="getBindValue" @onClose="onclose"
        @onConfirm="confirm">
        <template #content>
            <el-form ref="exchangeconvertDialogRef" :model="exchangeConvertForm" inline label-width="80px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="customerId" label="客户">
                            <BaseSelect v-model:modelValue="exchangeConvertForm.customerId" :options="customertList"
                                placeholder="客户" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="currencyCode" label="原货币">
                            <BaseSelect v-model:modelValue="exchangeConvertForm.currencyCode" :options="currencyList"
                                placeholder="原货币" @change="changeExchangeRate" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="feeAmount" label="金额">
                            <el-input v-model="exchangeConvertForm.feeAmount" v-clear-only-regex="/^\d*\.?\d{0,3}$/" placeholder="金额" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="exchangeRate" label="汇率">
                            <el-input v-model="exchangeConvertForm.exchangeRate" placeholder="汇率" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="orgId" label="分公司">
                            <BaseSelect v-model:modelValue="exchangeConvertForm.orgId" :filterable="false"
                                :options="branchCompanyCustomers" placeholder="分公司" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="remark" label="备注">
                            <el-input v-model="exchangeConvertForm.remark" placeholder="备注" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </template>
    </SysDialog>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import { useEleFormValidate } from '@/hooks/useEleFormValidate';
import { ListIitem } from '@/api/base/BaseDataModel';
import BaseSelect from '@/components/QuerySelect/BaseSelect.vue';
import { ExchangeParams } from '@/api/usermoneysum/apiUserMoneySumModel';
import { cloneDeep } from '@/utils/cloneDeep';
import { api_GetCentralBankRate } from '@/api/home/home';

const props = defineProps<{
    customertList: ListIitem[],//客户
    currencyList: ListIitem[],//币种
    branchCompanyCustomers: ListIitem[],//分公司
}>()
const emit = defineEmits(['saveConfirm'])

//弹框属性
const { dialog, onClose, onShow } = useDialog();
// 弹框一些配置
const getBindValue = reactive({
    title: "汇兑",
    width: 575,
    height: 0
});
// 表单
const exchangeConvertForm = reactive<ExchangeParams>({
    customerId: undefined,//客户编号
    currencyCode: undefined,//原币种
    feeAmount: undefined,//金额
    targetCurrencyCode: "CNY",//目标币种
    exchangeRate: undefined,//汇率
    orgId: undefined,//分公司
    remark: undefined,//备注
})
const exchangeconvertDialogRef = ref()

// 校验表单
const { formValidate, resetForm } = useEleFormValidate();

// 填充汇率
const changeExchangeRate = async (val) => {
    const res = await api_GetCentralBankRate({ currencyCode: val })
    if(res.code == 200 && res.data) {
        exchangeConvertForm.exchangeRate = res.data.currencyRate
    } else {
        exchangeConvertForm.exchangeRate = undefined
    }
}

// 显示
const show = () => {
    onShow()
}

// 隐藏
const onclose = () => {
    onClose()
    resetForm(exchangeconvertDialogRef.value)
}

// 确定
const confirm = async () => {
    const params = cloneDeep(exchangeConvertForm)
    emit('saveConfirm', params)
    onclose()
}

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
    show
});
</script>