<template>
    <!-- 备用提现账号 -->
    <div class="huifuPage flex-col">
        <s-header :name="$t('huifuMch.standbyWithdrawalAccountNo')" :noback="false"></s-header>
        <!-- 上传图片 -->
        <div class="upLoad flex-col">
            <van-cell title="身份证" size="large" icon="contact" />
            <div class="uploader-container">
                <van-uploader v-model="certFrontPic" accept=".jpg,.png" :preview-size="[320, 180]"
                    style="display: block; padding: 0.5em 1em;" :max-size="2 * 1024 * 1024" @oversize="onOversize"
                    :after-read="upCertFrontPic" upload-text="点击上传身份证正面照片" capture="camera" image-fit="contain"
                    :max-count="1" />
                <van-uploader v-model="certBackPic" accept=".jpg,.png" :preview-size="[320, 180]"
                    style="display: block; padding: 0.5em 1em;" :max-size="2 * 1024 * 1024" @oversize="onOversize"
                    :after-read="upCertBackPic" upload-text="点击上传身份证背面照片" capture="camera" image-fit="contain"
                    :max-count="1" />
            </div>
            <div v-if="type == '1'">
                <van-cell title="营业执照" size="large" icon="contact" />
                <div class="uploader-container">
                    <van-uploader v-model="licensePic" accept=".jpg,.png" :preview-size="[320, 180]"
                        style="display: block; padding: 0.5em 1em;" :max-size="2 * 1024 * 1024" @oversize="onOversize"
                        :after-read="upLicensePic" upload-text="点击上传营业执照" capture="camera" image-fit="contain"
                        :max-count="1" />
                </div>
            </div>
            <div v-if="cardType == '1'">
                <van-cell title="结算卡" size="large" icon="debit-pay" />
                <div class="uploader-container">
                    <van-uploader v-model="cardFrontPic" accept=".jpg,.png" :preview-size="[320, 180]"
                        style="display: block; padding: 0.5em 1em;" :max-size="2 * 1024 * 1024" @oversize="onOversize"
                        :after-read="upCardFrontPic" upload-text="点击上传结算卡正面照片" capture="camera" image-fit="contain"
                        :max-count="1" />
                </div>
            </div>
            <div v-if="cardType == '0'">
                <van-cell title="开户许可证" size="large" icon="debit-pay" />
                <div class="uploader-container">
                    <van-uploader v-model="regAcctPic" accept=".jpg,.png" :preview-size="[320, 180]"
                        style="display: block; padding: 0.5em 1em;" :max-size="2 * 1024 * 1024" @oversize="onOversize"
                        :after-read="upRegAcctPic" upload-text="点击上传开户许可证照片" capture="camera" image-fit="contain"
                        :max-count="1" />
                </div>
            </div>
            <!-- <div>
                <input type="file" ref="fileInput" @change="handleFileChange" accept="image/*" />
                <button @click="uploadImage">上传图片</button>
            </div> -->
            <van-row justify="space-around" style="padding: 3em;">
                <van-button span="10" round type="primary" style=" padding: 0 5em" native-type="sumbit"
                    @click="submitCheck">{{
                        $t('huifuMch.submit') }}
                </van-button>
            </van-row>
        </div>
    </div>
</template>
  
<script>
import { onMounted, reactive, toRefs, ref } from "vue";
import sHeader from "@/components/SimpleHeader";
import { Toast } from "vant";
import { getHuifuMchCheck, uploadPic } from "@/service/huifuMch";
import { getLoginUser } from "@/common/js/utils";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";

export default {
    components: { sHeader },
    setup() {
        // 引入语言
        const { t } = useI18n();
        const router = useRouter();
        const user = getLoginUser();
        const huifuMchCheck = ref(null); // 审核信息
        const certBackPic = ref();
        const certFrontPic = ref();
        const cardFrontPic = ref();
        const licensePic = ref();
        const regAcctPic = ref();
        let addParams = reactive({
            adminId: user.id, // 当前登录账户的id
            type: '0', // 类型 String 必填 对公企业:type=0; 个人:type=1
            regName: '', // 商户名称
            shortName: '', // 商户简称
            foundDate: '', // 成立时间
            licenseCode: '', // 营业执照编号
            licenseValidityType: "1", // 营业执照有效期类型
            licenseBeginDate: '', // 营业执照有效开始日期
            licenseEndDate: '', // 营业执照有效截止日期
            regProvId: '', // 注册省编码
            regAreaId: '', // 注册市编码
            regDistrictId: '', // 注册区编码
            regDetail: '', // 注册详细地址
            name: '', // 联系人姓名
            phone: '', // 联系人手机号码
            email: '', // 联系人邮箱
            provId: '', // 省编码
            areaId: '',  // 省编码
            districtId: '', // 市编码 
            detailAddr: '', // 经营地址
            servicePhone: '', // 客服电话
            cardName: '', // 卡户名
            cardType: '1', // 结算账户类型，“0”为对公账户，“1”为个人账户
            cardNo: '', // 银行卡号
            branchCode: '', // 联行号
            openLicenceNo: '', // 基本存款账户编号或核准号
            cardProvId: '', // 省编码
            cardAreaId: '', // 省编码
            mp: '', // 结算手机号
            certNo: '', // 身份证号
            certAddress: '', // 身份证地址
            certValidityType: '1', // 身份证有效期类型
            certBeginDate: '', // 有效期开始日期
            certEndDate: '', // 有效期截止日期
        });
        // 上传身份证正面
        const upCertFrontPic = async (file) => {
            file.status = 'uploading';
            file.message = '上传中...';
            const formData = new FormData();
            formData.append('file', file.file, file.file.name);
            formData.append('adminId', user.id);
            formData.append('fileType', "F40");
            // console.log(formData.get("file"));
            if (addParams.type === '1') {
                formData.append('fileType', "F02");
            }
            try {
                const { data } = await uploadPic(formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                    },
                });
                if (addParams.type === '1') {
                    const { data1 } = await uploadPic(formData, {
                        headers: {
                            'Content-Type': 'multipart/form-data',
                        },
                    });
                    if (data.code == "00000" && data1.code == "00000") {
                        console.log(data);
                        file.status = 'done';
                    } else {
                        file.status = 'failed';
                        file.message = '上传失败';
                    }
                } else {
                    if (data.code == "00000") {
                        console.log(data);
                        file.status = 'done';
                    } else {
                        file.status = 'failed';
                        file.message = '上传失败';
                    }
                }
            } catch {
                file.status = 'failed';
                file.message = '上传失败';
            }
        };
        // 上传身份证背面
        const upCertBackPic = async (file) => {
            file.status = 'uploading';
            file.message = '上传中...';
            // 此时可以自行将文件上传至服务器
            // const fileObject = new File([file.content], file.file.name, { type: file.file.type });
            const formData = new FormData();
            formData.append('file', file.file, file.file.name);
            formData.append('adminId', user.id);
            formData.append('fileType', "F41");
            if (addParams.type == '1') {
                formData.append('fileType', "F03");
            }
            console.log(formData.get("file"));
            try {
                const { data } = await uploadPic(formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                    },
                });
                if (addParams.type == '1') {
                    const { data1 } = await uploadPic(formData, {
                        headers: {
                            'Content-Type': 'multipart/form-data',
                        },
                    });
                    if (data.code == "00000" && data1.code == "00000") {
                        console.log(data1);
                        file.status = 'done';
                    } else {
                        file.status = 'failed';
                        file.message = '上传失败';
                    }
                } else {
                    if (data.code == "00000") {
                        console.log(data);
                        file.status = 'done';
                    } else {
                        file.status = 'failed';
                        file.message = '上传失败';
                    }
                }
            } catch {
                file.status = 'failed';
                file.message = '上传失败';
            }
        };
        // 上传结算卡正面
        const upCardFrontPic = async (file) => {
            file.status = 'uploading';
            file.message = '上传中...';
            // 此时可以自行将文件上传至服务器
            const formData = new FormData();
            formData.append('file', file.file, file.file.name);
            formData.append('adminId', user.id);
            formData.append('fileType', "F13");
            console.log(formData.get("file"));
            try {
                const { data } = await uploadPic(formData, 'multipart/form-data'
                );
                if (data.code == "00000") {
                    console.log(data);
                    file.status = 'done';
                } else {
                    file.status = 'failed';
                    file.message = '上传失败';
                }
            } catch {
                file.status = 'failed';
                file.message = '上传失败';
            }
        };
        // 上传营业执照
        const upLicensePic = async (file) => {
            file.status = 'uploading';
            file.message = '上传中...';
            // 此时可以自行将文件上传至服务器
            const formData = new FormData();
            formData.append('file', file.file, file.file.name);
            formData.append('adminId', user.id);
            formData.append('fileType', "F07");
            console.log(formData.get("file"));
            try {
                const { data } = await uploadPic(formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                    },
                });
                if (data.code == "00000") {
                    console.log(data);
                    file.status = 'done';
                } else {
                    file.status = 'failed';
                    file.message = '上传失败';
                }
            } catch {
                file.status = 'failed';
                file.message = '上传失败';
            }
        };
        // 上传开户许可证
        const upRegAcctPic = async (file) => {
            file.status = 'uploading';
            file.message = '上传中...';
            // 此时可以自行将文件上传至服务器
            // const fileObject = new File([file.content], file.file.name, { type: file.file.type });
            // const formData = new FormData();
            // formData.append('file', fileObject);
            const formData = new FormData();
            formData.append('file', file.file, file.file.name);
            formData.append('adminId', user.id);
            formData.append('fileType', "F08");
            console.log(formData.get("file"));
            try {
                const { data } = await uploadPic(formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                    },
                });
                if (data.code == "00000") {
                    console.log(data);
                    file.status = 'done';
                } else {
                    file.status = 'failed';
                    file.message = '上传失败';
                }
            } catch {
                file.status = 'failed';
                file.message = '上传失败';
            }
        };
        const onOversize = (file) => {
            console.log(file);
            Toast('文件大小不能超过 2MB');
        };
        onMounted(async () => {
            const { data } = await getHuifuMchCheck({ adminId: user.id });
            console.log(data.data);
            if (data.data != null) {
                huifuMchCheck.value = data.data;
                addParams.type = huifuMchCheck.value.type;
                addParams.cardType = huifuMchCheck.value.cardType;
            }
        });
        // 提交审核
        const submitCheck = async () => {
            if (certBackPic.value == null) {
                Toast("请上传身份证正面照片");
                return;
            } else if (certFrontPic.value == null) {
                Toast("请上传身份证背面照片");
                return;
            }
            if (addParams.cardType == '1') {
                if (cardFrontPic.value == null) {
                    Toast("请上传结算卡正面照片");
                    return;
                }
            } else {
                if (licensePic.value == null) {
                    Toast("请上传营业执照照片");
                    return;
                }
                if (regAcctPic.value == null) {
                    Toast("请上传开户许可证照片");
                    return;
                }
            }

            Toast.success(t('huifuMch.submittedSuccessfully'));
            setTimeout(() => {
                router.go(-1);
            }, 1500);
        }
        return {
            ...toRefs(addParams),
            licensePic,
            regAcctPic,
            certBackPic,
            certFrontPic,
            upLicensePic,
            upRegAcctPic,
            upCertBackPic,
            upCertFrontPic,
            upCardFrontPic,
            cardFrontPic,
            submitCheck,
            onOversize
        };
    },
};
</script>
  
<style lang="less" scoped>
@import "../../common/style/common.less";
@import "./index.less";
</style>
  