<template>
    <div class="p-5 space-y-5 !bg-gray-100">
        <el-card header="测试加解密掩码场景">
            <el-form
                ref="formRef"
                :model="formData"
                label-width="140px"
            >
                <el-row>
                    <el-col :span="12">
                        <editMaskVal
                            label="姓名"
                            :formData="formData"
                            :propName="'name'"
                            :typeName="'nameMask'"
                        />
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="年龄"
                            prop="age"
                        >
                            <el-input v-model="formData.age" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="性别"
                            prop="sex"
                        >
                            <el-input v-model="formData.sex" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <editMaskVal
                            label="手机号"
                            :formData="formData"
                            :propName="'tel'"
                            :typeName="'phoneFilter'"
                        />
                    </el-col>
                    <el-col :span="12">
                        <editMaskVal
                            label="银行卡号"
                            :formData="formData"
                            :propName="'cardNo'"
                            :typeName="'cardNoFilter'"
                        />
                    </el-col>
                    <!--车牌号改变的时候清空车架号-->
                    <el-col :span="12">
                        <editMaskVal
                            label="车牌号"
                            :formData="formData"
                            :propName="'carNo'"
                            :typeName="'carBoardNumFilter'"
                            @currentBlur="changeCarNo"
                        />
                    </el-col>
                    <el-col :span="12">
                        <editMaskVal
                            label="车架号"
                            :formData="formData"
                            :propName="'carVin'"
                            :typeName="'carVinFilter'"
                        />
                    </el-col>
                    <el-col :span="12">
                        <editMaskVal
                            label="身份证号"
                            :formData="formData"
                            :propName="'idNo'"
                            :typeName="'IdNumberFilter'"
                        />
                    </el-col>
                </el-row>

                <div class="flex justify-center">
                    <el-button
                        type="primary"
                        class="w-40"
                        :loading="loading"
                        @click="doSubmit"
                        >提交</el-button
                    >
                </div>
            </el-form>
        </el-card>
    </div>
</template>

<script setup lang="jsx">
import { ref, onMounted } from 'vue';
import mockData from './utils/mockData';
import editMaskVal from './components/editMaskVal.vue';
import { decrypt, encrypt } from './utils/paEncrypt';
import { ElMessageBox } from 'element-plus';

const formData = ref({});
const loading = ref(false);
const formRef = ref();

onMounted(() => {
    initData();
});

const initData = () => {
    setTimeout(() => {
        decrypt(mockData, ['name', 'tel', 'cardNo', 'carNo', 'carVin', 'idNo']);
        formData.value = mockData;
        console.log('获取接口后解密的数据', formData.value);
    }, 200);
};

const doSubmit = () => {
    loading.value = true;
    setTimeout(() => {
        const { ...submitInfo } = formData.value;
        encrypt(submitInfo, ['name', 'tel', 'cardNo', 'carNo', 'carVin', 'idNo']);
        ElMessageBox({
            title: '提交成功',
            message: <p>请打开控制台查看结果</p>,
        });
        console.log('提交给接口加密的数据', submitInfo);
        console.log('本地表单数据', formData.value);
        loading.value = false;
    }, 1000);
};

const changeCarNo = () => {
    formData.value.carVin = '';
};
</script>

<style lang="scss" scoped></style>
