<template>
    <div class="company">
        <h3>企业信息</h3>
        <p
            class="resubmit-notice clearfix"
            v-if="userInfo.loginInfo.certificationStatus ==
                        'FIRST_TRIAL_FAILURE'"
        >
            <span>*审核未通过的信息：</span>
            <br />
            <span>{{ jsRemark }}</span>
        </p>
        <div class="form-verify">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="form-ruleForm">
                <el-form-item prop="companyName">
                    <el-input v-model="ruleForm.companyName" placeholder="请输入企业名称" maxlength="60"></el-input>
                    <p class="notice">*请以您提现账户的开户企业注册</p>
                </el-form-item>
                <el-form-item prop="companyEngName">
                    <el-input
                        v-model="ruleForm.companyEngName"
                        placeholder="请输入企业英文名称"
                        maxlength="100"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="companyRegisteredCertificateNo">
                    <el-input
                        v-model.trim="ruleForm.companyRegisteredCertificateNo"
                        placeholder="请输入公司注册证书编号"
                        maxlength="18"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="companyAddress">
                    <el-input
                        v-model.trim="ruleForm.companyAddress"
                        maxlength="100"
                        placeholder="请输入企业经营地址"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="companyType">
                    <el-select
                        v-model="ruleForm.companyType"
                        placeholder="选择企业性质"
                        @change="getCompanyTypeName(ruleForm.companyType)"
                    >
                        <el-option
                            :label="item.name"
                            :value="item.id"
                            v-for="(item) in companyList"
                            :key="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="region" class="region">
                    <el-select
                        v-model="ruleForm.region"
                        placeholder="选择店铺经营类型"
                        @change="getStoreBusinessTypeName(ruleForm.region)"
                        class="store-business"
                    >
                        <el-option
                            :label="item.name"
                            :value="item.id"
                            v-for="(item) in storeList"
                            :key="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <label class="upload-notice" style="margin-top:-22px;">
                    <span>商业登记证照片 （请确认信息无误，证件图片清晰可见，图片支持jpg、png、jpeg，文件不超过5MB）</span>
                    <!-- <span>查看示例</!-->
                </label>
                <files-upload
                    :uploadUrl="uploadUrl"
                    :popoverImg="popoverImg"
                    :imageUrl="imageUrl"
                    :title="uploadTitle"
                    v-loading="loading"
                    @success="handleAvatarSuccess"
                    @error="handleAvatarError"
                    @before="beforeAvatarUpload"
                    placement="right"
                ></files-upload>
                <div class="clearfix"></div>
                <label class="upload-notice">
                    <span>公司注册证书照片 （请确认信息无误，证件图片清晰可见，图片支持jpg、png、jpeg，文件不超过5MB）</span>
                    <!-- <span>查看示例</span> -->
                </label>
                <files-upload
                    :uploadUrl="uploadUrl2"
                    :popoverImg="popoverImg2"
                    :imageUrl="imageUrl2"
                    :title="uploadTitle2"
                    v-loading="loading2"
                    @success="handleAvatarSuccess2"
                    @error="handleAvatarError2"
                    @before="beforeAvatarUpload2"
                    placement="right"
                ></files-upload>
                <div class="clearfix"></div>
                <h3 class="mt22">董事证件类型</h3>
                <el-form-item prop="cardValue" style="margin-bottom:0;">
                    <el-select
                        v-model="ruleForm.cardValue"
                        placeholder="请选择"
                        @change="selectCertificateType"
                    >
                        <el-option
                            v-for="item in cardOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <label class="upload-notice" v-if="ruleForm.cardValue !== ''">
                    <span>证件照片 （请确认信息无误，证件图片清晰可见，图片支持jpg、png、jpeg，文件不超过5MB）</span>
                    <!-- <span>查看示例</span> -->
                </label>
                <div class="upload-box clearfix" v-if="ruleForm.cardValue == 1">
                    <files-upload
                        :uploadUrl="uploadUrl3"
                        :popoverImg="popoverImg3"
                        :imageUrl="imageUrl3"
                        :title="uploadTitle3"
                        v-loading="loading3"
                        @success="handleAvatarSuccess3"
                        @error="handleAvatarError3"
                        @before="beforeAvatarUpload3"
                    ></files-upload>
                    <files-upload
                        :uploadUrl="uploadUrl4"
                        :popoverImg="popoverImg4"
                        :imageUrl="imageUrl4"
                        :title="uploadTitle4"
                        v-loading="loading4"
                        @success="handleAvatarSuccess4"
                        @error="handleAvatarError4"
                        @before="beforeAvatarUpload4"
                    ></files-upload>
                </div>
                <div class="upload-box clearfix" v-else-if="ruleForm.cardValue == 2">
                    <files-upload
                        :uploadUrl="uploadUrl5"
                        :popoverImg="popoverImg5"
                        :imageUrl="imageUrl5"
                        :title="uploadTitle5"
                        v-loading="loading5"
                        @success="handleAvatarSuccess5"
                        @error="handleAvatarError5"
                        @before="beforeAvatarUpload5"
                    ></files-upload>
                </div>
                <div class="upload-box clearfix" v-else-if="ruleForm.cardValue == 3">
                    <files-upload
                        :uploadUrl="uploadUrl6"
                        :popoverImg="popoverImg6"
                        :imageUrl="imageUrl6"
                        :title="uploadTitle6"
                        v-loading="loading6"
                        @success="handleAvatarSuccess6"
                        @error="handleAvatarError6"
                        @before="beforeAvatarUpload6"
                    ></files-upload>
                </div>
                <div class="upload-box clearfix" v-else-if="ruleForm.cardValue == 4">
                    <files-upload
                        :uploadUrl="uploadUrl7"
                        :popoverImg="popoverImg7"
                        :imageUrl="imageUrl7"
                        :title="uploadTitle7"
                        v-loading="loading7"
                        @success="handleAvatarSuccess7"
                        @error="handleAvatarError7"
                        @before="beforeAvatarUpload7"
                    ></files-upload>
                </div>
                <div v-if="ruleForm.cardValue !== ''">
                    <el-form-item prop="name" class="mt22">
                        <el-input v-model.trim="ruleForm.name" placeholder="请输入董事姓名" maxlength="60"></el-input>
                    </el-form-item>
                    <el-form-item prop="idCard">
                        <el-input
                            v-model.trim="ruleForm.idCard"
                            placeholder="请输入董事证件号码"
                            maxlength="18"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="address">
                        <el-input
                            v-model.trim="ruleForm.address"
                            maxlength="100"
                            placeholder="请输入董事地址"
                        ></el-input>
                    </el-form-item>
                </div>
                <div v-if="ruleForm.cardValue == 1">
                    <el-form-item required>
                        <el-col :span="11">
                            <el-form-item prop="startTime">
                                <el-date-picker
                                    v-model="ruleForm.startTime"
                                    type="date"
                                    placeholder="身份证有效期"
                                    style="width: 100%;"
                                    @change="setStartTime(ruleForm.startTime)"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col class="line" :span="2" style="text-align: center;">-</el-col>
                        <el-col :span="11">
                            <el-form-item prop="endTime">
                                <el-date-picker
                                    v-model="ruleForm.endTime"
                                    type="date"
                                    placeholder="身份证有效期"
                                    style="width: 100%;"
                                    :disabled="longTime"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-form-item>
                    <el-form-item prop="resource">
                        <el-radio-group v-model="ruleForm.resource" @change="isLongTime">
                            <el-radio label="1">非长期</el-radio>
                            <el-radio label="2">长期</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
                <el-form-item prop="agreement" class="check-box mt22">
                    <el-checkbox name="type" v-model="ruleForm.agreement"></el-checkbox>
                    <p>
                        我已阅读并同意
                        <router-link to="/agreement" target="_blank">《大麦及时雨收款用户协议》</router-link>
                    </p>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        @click="submitForm('ruleForm')"
                        :loading="subLoading"
                    >提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import {
    api_findDictionary,
    api_addHKCompany,
    api_getCertiInfo,
    api_getEnterprisePartners
} from "api/login.js";
import utils from "utils/utils.js";
import filesUpload from "./filesUpload";
let host = process.env.NODE_ENV == "development" ? "/api" : "";
export default {
    name: "HKCompany",
    components: { filesUpload },
    computed: {
        ...mapState(["userInfo"])
    },
    data() {
        var checkItCard = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入公司注册证书编号"));
            } else {
                callback();
            }
        };
        var checkIdCard = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入董事证件号码"));
            } else {
                if (this.ruleForm.cardValue == 1) {
                    if (!utils.isvalidIdCard(value)) {
                        callback(new Error("董事证件号码格式错误"));
                    } else if (utils.isAdult(value) < 18) {
                        callback(new Error("此身份信息未满十八周岁"));
                    } else {
                        this.ruleForm.idCard = utils.toLocaleUpperCaseIdCard(
                            value
                        );
                        callback();
                    }
                } else {
                    callback();
                }
            }
        };
        var regEngName = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入英文名称"));
            } else if (utils.regEngName(value)) {
                callback(new Error("请输入正确的英文名称"));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                companyName: "",
                companyEngName: "",
                companyRegisteredCertificateNo: "",
                companyAddress: "",
                companyType: "",
                region: "",
                cardValue: "",
                name: "",
                idCard: "",
                address: "",
                startTime: "",
                endTime: "",
                resource: "1",
                agreement: []
            },
            rules: {
                companyName: [
                    {
                        required: true,
                        message: "请输入企业名称",
                        trigger: "blur"
                    }
                ],
                companyEngName: [{ validator: regEngName, trigger: "blur" }],
                companyRegisteredCertificateNo: [
                    { validator: checkItCard, trigger: "blur" }
                ],
                companyType: [
                    {
                        required: true,
                        message: "请选择企业性质",
                        trigger: "change"
                    }
                ],
                region: [
                    {
                        required: true,
                        message: "请选择店铺经营类别",
                        trigger: "change"
                    }
                ],
                cardValue: [
                    {
                        required: true,
                        message: "请选择董事证件类型",
                        trigger: "change"
                    }
                ],
                name: [
                    {
                        required: true,
                        message: "请输入董事姓名",
                        trigger: "change"
                    }
                ],
                idCard: [{ validator: checkIdCard, trigger: "change" }],
                startTime: [
                    {
                        type: "date",
                        required: true,
                        message: "请选择开始日期",
                        trigger: "change"
                    }
                ],
                endTime: [
                    {
                        type: "date",
                        required: true,
                        message: "请选择结束日期",
                        trigger: "change"
                    }
                ],
                companyAddress: [
                    {
                        required: true,
                        message: "请输入企业经营地址",
                        trigger: "blur"
                    }
                ],
                address: [
                    {
                        required: true,
                        message: "请输入董事住址",
                        trigger: "change"
                    }
                ],
                agreement: [
                    {
                        type: "array",
                        required: true,
                        message: "请阅读服务协议并选中",
                        trigger: "change"
                    }
                ]
            },
            //店铺经营类型列表和店铺经营类别中文描述
            storeList: [],
            storeBusinessTypeName: "",
            //企业性质列表和企业性质中文描述
            companyList: [],
            companyTypeName: "",
            //上传图片需要传的参数
            //需要改fileResourceType
            imageUrl: "",
            imageUrl2: "",
            imageUrl3: "",
            imageUrl4: "",
            imageUrl5: "",
            imageUrl6: "",
            imageUrl7: "",
            loading: false,
            loading2: false,
            loading3: false,
            loading4: false,
            loading5: false,
            loading6: false,
            loading7: false,
            browserIP: "",
            //上传图片的返回字段
            businessLicense: {}, //营业执照
            certificateOfIncorporation: {}, //公司注册证书
            idCardFront: {}, //身份证
            idCardHand: {},
            passport: {}, //护照
            idCardHk: {}, //香港永久性居民身份证
            overseasPassport: {}, //英国国民（海外）护照
            kycCertiLinkFileReqList: [],
            uploadUrl: `${host}/api/v1/authc/jsFile/upFile?fileResourceType=REAL_NAME_CERTIFICATE&fileType=IMAGE`,
            popoverImg: require("assets/images/kyc-HK-registration.jpg"),
            uploadTitle: "商业登记证 照片",
            uploadUrl2: `${host}/api/v1/authc/jsFile/upFile?fileResourceType=REAL_NAME_CERTIFICATE&fileType=IMAGE`,
            popoverImg2: require("assets/images/kyc-HK-registration-statement.jpg"),
            uploadTitle2: "公司注册证书 照片",
            uploadUrl3: `${host}/api/v1/authc/jsFile/upFile?fileResourceType=REAL_NAME_CERTIFICATE&fileType=IMAGE&certiFileType=CARD_FRONT_IMAGE`,
            popoverImg3: require("assets/images/kyc-idcard-front.jpg"),
            uploadTitle3: "身份证 人像页",
            uploadUrl4: `${host}/api/v1/authc/jsFile/upFile?fileResourceType=REAL_NAME_CERTIFICATE&fileType=IMAGE&certiFileType=CARD_BACK_IMAGE`,
            popoverImg4: require("assets/images/kyc-idcard-back.jpg"),
            uploadTitle4: "身份证 国徽页",
            uploadUrl5: `${host}/api/v1/authc/jsFile/upFile?fileResourceType=REAL_NAME_CERTIFICATE&fileType=IMAGE`,
            popoverImg5: require("assets/images/kyc-passport.jpg"),
            uploadTitle5: "护照 首页",
            uploadUrl6: `${host}/api/v1/authc/jsFile/upFile?fileResourceType=REAL_NAME_CERTIFICATE&fileType=IMAGE`,
            popoverImg6: require("assets/images/kyc-HK-idcard.jpg"),
            uploadTitle6: "身份证 照片页",
            uploadUrl7: `${host}/api/v1/authc/jsFile/upFile?fileResourceType=REAL_NAME_CERTIFICATE&fileType=IMAGE`,
            popoverImg7: require("assets/images/kyc-British-passport.jpg"),
            uploadTitle7: "英国国民（海外）护照",
            cardOptions: [
                {
                    value: "1",
                    label: "第二代居民身份证"
                }
                // {
                //     value: "2",
                //     label: "护照"
                // },
                // {
                //     value: "3",
                //     label: "香港永久性居民身份证"
                // },
                // {
                //     value: "4",
                //     label: "英国国民（海外）护照"
                // }
            ],
            certiCardType: "",
            longTime: false,
            subLoading: false,
            diCardTime: {},
            jsRemark: "",
            resubmitId: ""
        };
    },
    methods: {
        ...mapMutations(["setLoginInfo", "setKycCertiId", "setIsHK"]),
        selectCertificateType(val) {
            if (val === "1") {
                this.certiCardType = "ID_CARD";
            } else if (val === "2") {
                this.certiCardType = "PASSPROT_IMAGE";
            } else if (val === "3") {
                this.certiCardType = "CARD_HK_PERPETUAL";
            } else if (val === "4") {
                this.certiCardType = "UK_PASSPORT";
            }
        },
        //上传商业登记证照片
        handleAvatarSuccess(res, file) {
            this.loading = false;
            this.imageUrl = URL.createObjectURL(file.raw);
            this.businessLicense = Object.assign(file.response.data, {
                certiFileType: "BUSI_REGISTERATION_CERTI"
            });
        },
        handleAvatarError() {
            this.loading = false;
            this.$message.error("上传失败");
        },
        beforeAvatarUpload(file) {
            this.loading = true;
        },
        //上传公司注册证书照片
        handleAvatarSuccess2(res, file) {
            this.loading2 = false;
            this.imageUrl2 = URL.createObjectURL(file.raw);
            this.certificateOfIncorporation = Object.assign(
                file.response.data,
                {
                    certiFileType: "COMPANY_REGISTER_CERTI"
                }
            );
        },
        handleAvatarError2() {
            this.loading2 = false;
            this.$message.error("上传失败");
        },
        beforeAvatarUpload2(file) {
            this.loading2 = true;
        },
        //上传身份证
        handleAvatarSuccess3(res, file) {
            let ocrData = res.data.ocrData;
            if (ocrData !== null) {
                this.ruleForm.name = ocrData.name;
                this.ruleForm.idCard = ocrData.id;
                this.ruleForm.address = ocrData.address;
            } else {
                this.ruleForm.name = "";
                this.ruleForm.idCard = "";
                this.ruleForm.address = "";
            }
            this.loading3 = false;
            this.imageUrl3 = URL.createObjectURL(file.raw);
            this.idCardFront = Object.assign(file.response.data, {
                certiFileType: "CARD_FRONT_IMAGE"
            });
            this.$message.warning("请确认上传的是身份证正面照！");
        },
        handleAvatarError3() {
            this.loading3 = false;
            this.$message.error("上传失败");
        },
        beforeAvatarUpload3(file) {
            this.loading3 = true;
        },
        handleAvatarSuccess4(res, file) {
            let ocrData = res.data.ocrData;
            if (ocrData !== null) {
                if (ocrData.valid_date !== "") {
                    this.ruleForm.startTime = new Date(
                        Date.parse(
                            ocrData.valid_date.split("-")[0].replace(/\./g, "/")
                        )
                    );
                    this.ruleForm.endTime = new Date(
                        Date.parse(
                            ocrData.valid_date.split("-")[1].replace(/\./g, "/")
                        )
                    );
                }
            } else {
                this.ruleForm.startTime = "";
                this.ruleForm.endTime = "";
            }
            this.loading4 = false;
            this.imageUrl4 = URL.createObjectURL(file.raw);
            this.idCardHand = Object.assign(file.response.data, {
                certiFileType: "CARD_BACK_IMAGE"
            });
        },
        handleAvatarError4() {
            this.loading4 = false;
            this.$message.error("上传失败");
        },
        beforeAvatarUpload4(file) {
            this.loading4 = true;
        },
        //上传护照
        handleAvatarSuccess5(res, file) {
            this.loading5 = false;
            this.imageUrl5 = URL.createObjectURL(file.raw);
            this.passport = Object.assign(file.response.data, {
                certiFileType: "PASSPROT_IMAGE"
            });
        },
        handleAvatarError5() {
            this.loading5 = false;
            this.$message.error("上传失败");
        },
        beforeAvatarUpload5(file) {
            this.loading5 = true;
        },
        //上传香港永久性居民身份证
        handleAvatarSuccess6(res, file) {
            this.loading6 = false;
            this.imageUrl6 = URL.createObjectURL(file.raw);
            this.idCardHk = Object.assign(file.response.data, {
                certiFileType: "CARD_HK_PERPETUAL"
            });
        },
        handleAvatarError6() {
            this.loading6 = false;
            this.$message.error("上传失败");
        },
        beforeAvatarUpload6(file) {
            this.loading6 = true;
        },
        //上传英国国民（海外）护照
        handleAvatarSuccess7(res, file) {
            this.loading7 = false;
            this.imageUrl7 = URL.createObjectURL(file.raw);
            this.overseasPassport = Object.assign(file.response.data, {
                certiFileType: "UK_PASSPORT"
            });
        },
        handleAvatarError7() {
            this.loading7 = false;
            this.$message.error("上传失败");
        },
        beforeAvatarUpload7(file) {
            this.loading7 = true;
        },
        //选择企业性质
        getCompanyTypeName(val) {
            let companyType = this.companyList.filter(item => {
                return item.id === val;
            });
            this.companyTypeName = companyType[0].name;
        },
        //选择店铺经营类别
        getStoreBusinessTypeName(val) {
            let storeType = this.storeList.filter(item => {
                return item.id === val;
            });
            this.storeBusinessTypeName = storeType[0].name;
        },
        //选择身份证开始结束时间
        setStartTime(val) {
            let endDate = new Date(val);
            if (!this.longTime) {
                this.ruleForm.endTime = new Date(
                    endDate.setFullYear(endDate.getFullYear() + 20)
                );
                this.diCardTime = {
                    effectiveStartTime: utils.formatDate(
                        this.ruleForm.startTime,
                        "yyyy-MM-dd"
                    ),
                    effectiveEndTime:
                        this.ruleForm.resource === "1"
                            ? utils.formatDate(
                                  this.ruleForm.endTime,
                                  "yyyy-MM-dd"
                              )
                            : "",
                    longFlag: this.ruleForm.resource === "1" ? false : true
                };
            }
        },
        //选择身份证有效期
        isLongTime(val) {
            this.longTime = val == "1" ? false : true;
        },
        //提交
        submitForm(formName) {
            this.subLoading = true;
            let copyInitVuex = JSON.parse(localStorage.getItem("initVuex"));
            copyInitVuex.userInfo.loginInfo.certificationStatus =
                "SUBMIT_WATING";
            copyInitVuex.userInfo.loginInfo.certificationName = this.ruleForm.companyName;

            this.$refs[formName].validate(valid => {
                if (valid) {
                    if (
                        this.userInfo.loginInfo.certificationStatus !==
                        "FIRST_TRIAL_FAILURE"
                    ) {
                        if (
                            !this.businessLicense.id ||
                            !this.certificateOfIncorporation.id
                        ) {
                            this.subLoading = false;
                            this.$message.error("请上传证件照片！");
                            return false;
                        }
                    }
                    if (
                        this.userInfo.loginInfo.certificationStatus !==
                        "FIRST_TRIAL_FAILURE"
                    ) {
                        if (this.ruleForm.cardValue === "1") {
                            if (!this.idCardFront.id || !this.idCardHand.id) {
                                this.subLoading = false;
                                this.$message.error("请上传证件照片！");
                                return false;
                            } else {
                                this.kycCertiLinkFileReqList = [
                                    this.businessLicense,
                                    this.certificateOfIncorporation,
                                    this.idCardFront,
                                    this.idCardHand
                                ];
                                this.diCardTime = {
                                    effectiveStartTime: utils.formatDate(
                                        this.ruleForm.startTime,
                                        "yyyy-MM-dd"
                                    ),
                                    effectiveEndTime:
                                        this.ruleForm.resource === "1"
                                            ? utils.formatDate(
                                                  this.ruleForm.endTime,
                                                  "yyyy-MM-dd"
                                              )
                                            : "",
                                    longFlag:
                                        this.ruleForm.resource === "1"
                                            ? false
                                            : true
                                };
                            }
                        } else if (this.ruleForm.cardValue === "2") {
                            if (!this.passport.id) {
                                this.subLoading = false;
                                this.$message.error("请上传证件照片！");
                                return false;
                            } else {
                                this.kycCertiLinkFileReqList = [
                                    this.businessLicense,
                                    this.certificateOfIncorporation,
                                    this.passport
                                ];
                            }
                        } else if (this.ruleForm.cardValue === "3") {
                            if (!this.idCardHk.id) {
                                this.subLoading = false;
                                this.$message.error("请上传证件照片！");
                                return false;
                            } else {
                                this.kycCertiLinkFileReqList = [
                                    this.businessLicense,
                                    this.certificateOfIncorporation,
                                    this.idCardHk
                                ];
                            }
                        } else if (this.ruleForm.cardValue === "4") {
                            if (!this.overseasPassport.id) {
                                this.subLoading = false;
                                this.$message.error("请上传证件照片！");
                                return false;
                            } else {
                                this.kycCertiLinkFileReqList = [
                                    this.businessLicense,
                                    this.certificateOfIncorporation,
                                    this.overseasPassport
                                ];
                            }
                        }
                    }

                    let api_addHKCompanyData = {
                        data: {
                            companyName: this.ruleForm.companyName,
                            companyEngName: this.ruleForm.companyEngName,
                            companyRegisteredCertificateNo: this.ruleForm
                                .companyRegisteredCertificateNo,
                            companyAddress: this.ruleForm.companyAddress,
                            companyNatureId: this.ruleForm.companyType,
                            companyNature: this.companyTypeName,
                            storeBusinessTypeId: this.ruleForm.region,
                            storeBusinessTypeName: this.storeBusinessTypeName,
                            certiCardType: this.certiCardType,
                            directorName: this.ruleForm.name,
                            directorIdNo: this.ruleForm.idCard,
                            directorAddress: this.ruleForm.address,
                            ...this.diCardTime,
                            kycCertiLinkFileReqList: this
                                .kycCertiLinkFileReqList,
                            browserIP: this.browserIp || "114.55.171.170",
                            id: this.resubmitId
                        }
                    };
                    api_addHKCompany(api_addHKCompanyData)
                        .then(res => {
                            if (res.success) {
                                this.$store.commit(
                                    "setLoginInfo",
                                    copyInitVuex.userInfo.loginInfo
                                );
                                localStorage.setItem(
                                    "initVuex",
                                    JSON.stringify(copyInitVuex)
                                );
                                this.$store.commit("setKycCertiId", res.data);
                                this.$store.commit("setIsHK", true);

                                this.$router.replace({
                                    path: "/kycShareholder"
                                });
                                this.subLoading = false;
                            } else {
                                if (res.code == -33) {
                                    this.$router.push({
                                        path: "/account"
                                    });
                                } else {
                                    this.$message.error(res.msg);
                                }
                                this.subLoading = false;
                            }
                        })
                        .catch(err => {});
                } else {
                    this.subLoading = false;
                    return false;
                }
            });
        },
        firstTrialFailue() {
            let getCertiInfoParams = {
                params: {}
            };
            api_getCertiInfo(getCertiInfoParams).then(res => {
                this.ruleForm.companyName = res.data.companyName;
                this.ruleForm.companyEngName = res.data.companyEngName;
                this.ruleForm.companyRegisteredCertificateNo =
                    res.data.companyRegisteredCertificateNo;
                this.ruleForm.companyAddress = res.data.companyAddress;
                this.ruleForm.companyType = res.data.companyNatureId;
                this.companyTypeName = res.data.companyNatureName;
                this.ruleForm.region = res.data.storeBusinessTypeId;
                this.storeBusinessTypeName = res.data.storeBusinessTypeName;
                this.certiCardType = res.data.directorIdType;
                this.ruleForm.cardValue = "1";
                this.ruleForm.name = res.data.directorName;
                this.ruleForm.idCard = res.data.directorIdNo;
                this.ruleForm.address = res.data.directorAddress;
                this.ruleForm.startTime = new Date(res.data.effectiveStartTime);
                this.ruleForm.endTime = new Date(res.data.effectiveEndTime);
                res.data.longFlag === false
                    ? (this.ruleForm.resource = "1")
                    : (this.ruleForm.resource = "2");
                this.diCardTime = {
                    effectiveStartTime: utils.formatDate(
                        this.ruleForm.startTime,
                        "yyyy-MM-dd"
                    ),
                    effectiveEndTime:
                        this.ruleForm.resource === "1"
                            ? utils.formatDate(
                                  this.ruleForm.endTime,
                                  "yyyy-MM-dd"
                              )
                            : "",
                    longFlag: this.ruleForm.resource === "1" ? false : true
                };
                this.kycCertiLinkFileReqList = res.data.kycCertiLinkFileReqList;
                this.imageUrl = `${host}/api/v1/anon/jsFile/downLoad?filePath=${res.data.BUSI_REGISTERATION_CERTI}&fileName=abc.jpg`;
                this.imageUrl2 = `${host}/api/v1/anon/jsFile/downLoad?filePath=${res.data.COMPANY_REGISTER_CERTI}&fileName=abc.jpg`;
                this.imageUrl3 = `${host}/api/v1/anon/jsFile/downLoad?filePath=${res.data.CARD_FRONT_IMAGE}&fileName=abc.jpg`;
                this.imageUrl4 = `${host}/api/v1/anon/jsFile/downLoad?filePath=${res.data.CARD_BACK_IMAGE}&fileName=abc.jpg`;
                this.imageUrl5 = `${host}/api/v1/anon/jsFile/downLoad?filePath=${res.data.PASSPROT_IMAGE}&fileName=abc.jpg`;
                this.imageUrl6 = `${host}/api/v1/anon/jsFile/downLoad?filePath=${res.data.CARD_HK_PERPETUAL}&fileName=abc.jpg`;
                this.imageUrl7 = `${host}/api/v1/anon/jsFile/downLoad?filePath=${res.data.UK_PASSPORT}&fileName=abc.jpg`;
                res.data.longFlag === true
                    ? (this.longTime = true)
                    : (this.longTime = false);
                this.jsRemark = res.data.jsRemark;
                this.resubmitId = res.data.id;
            });
        }
    },
    created() {
        let companyNature = {
            params: {
                type: "COMPANY_NATURE"
            }
        };
        api_findDictionary(companyNature)
            .then(res => {
                if (res.success) {
                    this.companyList = res.data;
                } else {
                    this.$message.error(res.msg);
                }
            })
            .catch(err => {});
        let storeBusinessType = {
            params: {
                type: "STORE_BUSINESS_TYPE"
            }
        };
        api_findDictionary(storeBusinessType)
            .then(res => {
                if (res.success) {
                    this.storeList = res.data;
                } else {
                    this.$message.error(res.msg);
                }
            })
            .catch(err => {});
        if (
            this.userInfo.loginInfo.certificationStatus ===
            "FIRST_TRIAL_FAILURE"
        ) {
            this.firstTrialFailue();
        }
    }
};
</script>

<style lang="less" scoped>
.company /deep/ .check-box {
    position: relative;
    .el-checkbox {
        margin-right: 10px;
    }
    .el-form-item__error {
        margin-top: -10px;
    }
    p {
        position: absolute;
        top: 0;
        left: 24px;
        width: 500px;
        color: #747474;
        a {
            color: #3d86e9;
        }
    }
}
.company /deep/ .el-button--primary {
    width: 330px;
}

.company /deep/ .el-form-item__error {
    width: 330px;
}
.el-date-editor {
    width: 330px;
}
.company {
    padding-top: 30px;
    h3 {
        margin-bottom: 8px;
    }
    .form-verify {
        .form-ruleForm {
            width: 330px;
        }
    }
    .notice {
        position: absolute;
        top: 0;
        left: 350px;
        width: 210px;
        color: #666;
    }
    .upload-notice {
        display: block;
        width: 900px;
        line-height: 56px;
        span {
            font-size: 14px;
            color: #999999;
            &:last-of-type {
                cursor: pointer;
                color: #3d86e9;
            }
        }
    }
    .company-type {
        .el-select {
            margin-top: 22px;
        }
    }
    .upload-box {
        width: 1080px;
    }
}
.mt22 {
    margin-top: 22px;
}
.resubmit-notice {
    margin: 20px 0;
    padding: 20px;
    line-height: 28px;
    border-radius: 6px;
    background: #fff8e8;
    color: #cc3333;
    span {
        &:first-child {
            font-weight: bold;
        }
        &:last-child {
            font-size: 16px;
        }
    }
}
</style>
