<template>
<el-dialog v-model="dialogVisible" width="763" class="dialog-box"
    align-center
    destroy-on-close
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false">
    <template #header="{ close, titleId, titleClass }">
        <div class="msg-header" >
            <svg-icon icon-class="addBank1" class="header-icon" />
            <div class="header-title">{{ oldData ? t('finance.editB3') : t('finance.createB3') }}</div>
            <div class="header-close" >
                <el-icon color="rgba(196, 196, 196, 1)" @click="close" ><Close /></el-icon>
            </div>
        </div>
    </template>
    <div class="msg-body" >
        <el-form ref="postRef" :model="form" :rules="rules" autocapitalize="off" size="large" label-position="top" style="user-select: none;width: 100%;" >
            <el-form-item :label="t('finance.bank_addr')" prop="bank_no" >
                <el-input v-model="form.bank_no" :maxlength="100" :disabled="oldData && oldData.apply_status == 0 && oldData.verify_email == 1" />
            </el-form-item>
            <el-form-item :label="t('finance.first_name')" prop="first_name" >
                <el-input v-model="form.first_name" :maxlength="128" :disabled="oldData" />
            </el-form-item>
            <el-form-item :label="t('finance.last_name')" prop="last_name" >
                <el-input v-model="form.last_name" :maxlength="128" :disabled="oldData" />
            </el-form-item>
            <el-form-item :label="t('finance.bank_currency')" prop="bank_currency" >
                <el-select
                    v-model="form.bank_currency"
                    clearable
                    style="width: 100%;"
                    :disabled="oldData && oldData.apply_status == 0 && oldData.verify_email == 1"
                    >
                    <el-option v-for="(item, index) in currencyList" :key="index" :label="item.fun_item_code" :value="item.fun_item_code" ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="oldData" >
                <el-button :loading="loading" :disabled="oldData && oldData.apply_status == 0 && oldData.verify_email == 1" class="send-btn" @click="del" style="width: 40%;" type="danger">{{ t('finance.del') }}
                    <template #loading>
                        <l-ring-2 size="20" stroke="2" stroke-length="0.25" bg-opacity="0.1" speed="0.8" color="white" style="margin-right: 17px;" ></l-ring-2>
                    </template>
                </el-button>
                <el-button :loading="loading" :disabled="oldData && oldData.apply_status == 0 && oldData.verify_email == 1" class="send-btn" @click="save" style="width: 40%;margin-left: 10%;" type="primary">{{ t('form.next') }}
                    <template #loading>
                        <l-ring-2 size="20" stroke="2" stroke-length="0.25" bg-opacity="0.1" speed="0.8" color="white" style="margin-right: 17px;" ></l-ring-2>
                    </template>
                </el-button>
            </el-form-item>
            <el-form-item v-else>
                <el-button :loading="loading" class="send-btn" @click="save" style="width: 100%;" type="primary">{{ t('form.next') }}
                    <template #loading>
                        <l-ring-2 size="20" stroke="2" stroke-length="0.25" bg-opacity="0.1" speed="0.8" color="white" style="margin-right: 17px;" ></l-ring-2>
                    </template>
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</el-dialog>
<message-box ref="tipbox" :options="tipOptions" >
    <!-- <div style="font-size: 18px;font-weight: 400;color: rgba(102, 102, 102, 1);text-align: left;margin: 10px auto 0;">
        <div style="margin-bottom: 18px;">{{ t('finance.bank_addr') + ': ' + form.bank_no }}</div>
        <div style="margin-bottom: 18px;">{{ t('finance.bank_currency') + ': ' + form.bank_currency }}</div>
    </div> -->
    <!-- <el-button class="send-btn" @click="toValidateMail" style="width: 100%;" type="primary">{{ t('form.next') }}</el-button> -->
</message-box>
</template>

<script setup >
import { useLocale } from 'element-plus'
import { ref, defineModel, watch, onMounted } from 'vue';
import { serverLang } from '@/utils/i18n'
import { getDictByCode } from '@/api/common'
import { personalBankSave } from '@/api/personal'
import MessageBox from '@/components/MessageBox'

const { proxy } = getCurrentInstance();
const { t } = useLocale()
const dialogVisible = defineModel("show")
const emit = defineEmits(['done'])
const currencyList = ref([])
const loading = ref(false)
const props = defineProps({
    id: {
        type: [String, Number],
        default: undefined
    },
    oldData: {
        type: Object,
        default: null
    }
})
const showVerificationMail = ref(false)
const tipOptions = ref({})

let oldData = props.oldData

const d = reactive({
    form: {
    id: props.id,
    bank_standby_1: 'B3',
    bank_no: undefined,
    bank_name: undefined,
    bank_sub_name: undefined,
    bank_remark: undefined,
    bank_swift: undefined,
    bank_currency: undefined,
    first_name: undefined,
    last_name: undefined,
    bank_img_0: undefined,
    bank_img_1: undefined,
    },
    rules: {
    bank_no: [{ required: true, message: "", trigger: "blur" }],
    first_name: [{ required: true, message: "", trigger: "blur" }],
    last_name: [{ required: true, message: "", trigger: "blur" }],
    bank_name: [{ required: true, message: "", trigger: "blur" }],
    bank_sub_name: [{ required: true, message: "", trigger: "blur" }],
    bank_currency: [{ required: true, message: "", trigger: "blur" }],
    }
});

const { form, rules } = toRefs(d);

watch(() => props.oldData, (n, o) => {
    if (n) {
        oldData = props.oldData
        if(oldData) {
            form.value = JSON.parse(JSON.stringify(oldData))
        }
    } else {
        oldData = null
        form.value = {
            id: props.id,
            bank_standby_1: 'B3',
            bank_no: undefined,
            bank_name: undefined,
            bank_sub_name: undefined,
            bank_remark: undefined,
            bank_swift: undefined,
            bank_currency: undefined,
            first_name: undefined,
            last_name: undefined,
            bank_img_0: undefined,
            bank_img_1: undefined,
        }
    }
}, {deep:true, immediate: true})

function close() {
    dialogVisible.value = false
}

function save() {
    proxy.$refs["postRef"].validate(valid => {
        if (valid) {
            let data = {
                "del_bank_id_arr": [],
                "bank": []
            }
            if (oldData) {
                // 编辑
                let obj = { id: form.value.id }
                if (form.value.bank_no != oldData.bank_no) {
                    obj.bank_no = {
                        nv: form.value.bank_no,
                        ov: oldData.bank_no,
                        bank_no: oldData.bank_no,
                        edit_power: 1
                    }
                }
                if (form.value.first_name != oldData.first_name) {
                    obj.first_name = {
                        nv: form.value.first_name,
                        ov: oldData.first_name,
                        bank_no: oldData.bank_no,
                        edit_power: 1
                    }
                }
                if (form.value.last_name != oldData.last_name) {
                    obj.last_name = {
                        nv: form.value.last_name,
                        ov: oldData.last_name,
                        bank_no: oldData.bank_no,
                        edit_power: 1
                    }
                }
                if (form.value.bank_currency != oldData.bank_currency) {
                    obj.bank_currency = {
                        nv: form.value.bank_currency,
                        ov: oldData.bank_currency,
                        bank_no: oldData.bank_no,
                        edit_power: 1
                    }
                }
                data.bank.push(obj)
            } else {
                // 新增
                data.bank.push({
                    id: "",
                    bank_standby_1: {
                        nv: form.value.bank_standby_1,
                        ov: '',
                        edit_power: 1,
                        bank_no: form.value.bank_no
                    },
                    bank_no: {
                        nv: form.value.bank_no,
                        ov: '',
                        edit_power: 1,
                        bank_no: form.value.bank_no
                    },
                    first_name: {
                        nv: form.value.first_name,
                        ov: '',
                        edit_power: 1,
                        bank_no: form.value.bank_no
                    },
                    last_name: {
                        nv: form.value.last_name,
                        ov: '',
                        edit_power: 1,
                        bank_no: form.value.bank_no
                    },
                    bank_currency: {
                        nv: form.value.bank_currency,
                        ov: '',
                        edit_power: 1,
                        bank_no: form.value.bank_no
                    }
                })
            }
            loading.value = true
            personalBankSave(data).then(resp => {
                loading.value = false
                emit('done')
                close()
                let options
                // 返回值data里面：0需要审核，1审核通过，请邮箱验证，2审核通过
                if (resp.data == 0) {
                    options = {
                        type: 'tip',
                        status: 'padding',
                        closeIcon: true,
                        width: '637',
                        timeout: -1,
                        title: t('finance.success3')
                    }
                } else if (resp.data == 1) {
                    options = {
                        type: 'tip',
                        status: 'success',
                        closeIcon: true,
                        width: '637',
                        timeout: -1,
                        title: t('finance.success4')
                    }
                }
                tipOptions.value = options
                proxy.$refs.tipbox.showTip()
            }).catch(() => {
                loading.value = false
            })
        }
    })
}

function del() {
    openMsg({
    title: t('finance.ifDel'),
    width: '600',
    status: 'warning',
    btn: {
      cancel: {
        text: t('common.cancelText')
      },
      ok: {
        text: t('common.okText')
      }
    }
  }).then(() => {
    loading.value = true
    personalBankSave({
        del_bank_id_arr: [oldData.id],
        bank: []
    }).then(resp => {
        loading.value = false
        emit('done')
        close()
        oldData = null
        setTimeout(() => {
            window.showTip({
                title: t('common.success.action'),
                status: 'success'
            })
        }, 1000)
    }).catch(() => {
        loading.value = false
    })
  }).catch(()=> {})
}

// function toValidateMail() {
//     proxy.$refs.tipbox.closeTip()
//     showVerificationMail.value = true
// }

watch(dialogVisible, (n, o) => {
    if(n) {
        proxy.resetForm("postRef");
    }
})

getDictByCode({
    dict_code: 'currency_type',
    qcc_language: serverLang()
}).then(resp => {
    currencyList.value = resp.data
})
</script>

<style lang="scss" scoped>
.dialog-box {
    border-radius: 16px;
    padding: 0;

    .el-dialog__header {
        margin-right: 0;
        padding: 0;
        overflow: hidden;
    }

    .el-dialog__body {
        box-sizing: border-box;
        padding: 16px 22px;
        min-height: 250px;
    }

    .msg-header {
        border-radius: 16px 16px 0 0;
        width: 100%;
        height: 50px;
        position: relative;
        overflow: hidden;
        background-color: #0F3675;
        display: flex;
        align-items: center;
        color: #fff;

        .header-icon {
            width: 33px;
            height: 23px;
            margin-left: 22px;
            margin-right: 14px;
        }

        .header-title {
            font-size: 26px;
            font-weight: 700;
            line-height: 50px;
        }

        .header-close {
            cursor: pointer;
            position: absolute;
            bottom: 0;
            right: 20px;
            font-size: 32px;
        }
    }

    .msg-body {
        background-color: #ffffff;
        padding: 20px 40px 0;
    }
}

.send-btn {
    margin-left: auto;
    height: 50px;
    font-size: 20px;
    flex-grow: 1;
    flex-shrink: 0;
}
</style>