<!-- 实名认证信息 -->
<template>
    <el-form ref="formRef" :model="form" label-width="120" label-position="left">
        <el-row :gutter="gutter">
            <el-col :span="span">
                <el-form-item prop="username" label="推广员名称">
                    <el-input v-model="form.username" placeholder="请输入推广员名称" />
                </el-form-item>
            </el-col>
            <el-col :span="span">
                <el-form-item prop="loginname" label="登录账号">
                    <el-input v-model="form.loginname" placeholder="请输入登录账号" />
                </el-form-item>
            </el-col>
        </el-row>
        <div class="title_wrap">
            <el-text>实名身份证</el-text>
        </div>
        <el-row :gutter="gutter" class="mt15">
            <el-col :span="span">
                <el-form-item prop="idCard.certname" label="姓名">
                    <el-input v-model="form.idCard.certname" placeholder="请输入姓名" />
                </el-form-item>
            </el-col>
            <el-col :span="span">
                <el-form-item prop="idCard.certno" label="身份证号码">
                    <el-input v-model="form.idCard.certno" placeholder="请输入身份证号码" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="gutter">
            <el-col :span="span">
                <el-form-item prop="idCard.certstarttime" label="发放日期">
                    <el-date-picker style="width: 100%;" value-format="YYYYMMDD" v-model="form.idCard.certstarttime"
                        type="date" placeholder="请选择发放日期" />
                </el-form-item>
            </el-col>
            <el-col :span="span">
                <el-form-item prop="idCard.certendtime" label="失效日期">
                    <el-date-picker style="width: 100%;" value-format="YYYYMMDD" v-model="form.idCard.certendtime"
                        type="date" placeholder="请选择发放日期" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="gutter">
            <el-col :span="span">
                <el-form-item prop="idCard.imgpositive" label="身份证正面">
                    <uploadCard ref="idCardRef1" @selectFile="file => form.idCard.imgpositive = file"
                        @removeFile="form.idCard.imgpositive = ''" />
                </el-form-item>
            </el-col>
            <el-col :span="span">
                <el-form-item prop="idCard.imgnegative" label="身份证反面">
                    <uploadCard ref="idCardRef2" @selectFile="file => form.idCard.imgnegative = file"
                        @removeFile="form.idCard.imgnegative = ''" />
                </el-form-item>
            </el-col>
        </el-row>
        <div class="title_wrap">
            <el-text>实名银行卡</el-text>
        </div>
        <el-row :gutter="gutter" class="mt15">
            <el-col :span="span">
                <el-form-item label="实名人">
                    <el-input v-model="form.bankCard.bankholder" placeholder="请输入实名人" />
                </el-form-item>
            </el-col>
            <el-col :span="span"></el-col>
        </el-row>
        <el-row :gutter="gutter">
            <el-col :span="span">
                <el-form-item prop="bankCard.bankcardno" label="银行卡号">
                    <el-input v-model="form.bankCard.bankcardno" placeholder="请输入银行卡号" />
                </el-form-item>
            </el-col>
            <el-col :span="span">
                <el-form-item prop="bankCard.phone" label="预留手机号">
                    <el-input v-model="form.bankCard.phone" placeholder="请输入预留手机号" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="gutter">
            <el-col :span="span">
                <el-form-item prop="bankCard.bank" label="开户行地区">
                    <address-card ref="addressRef" placeholder="请选择开户行地区" style="width: 100%;"
                        @change="selectBankAddress" />
                </el-form-item>
            </el-col>
            <el-col :span="span"></el-col>
        </el-row>
        <el-row :gutter="gutter">
            <el-col :span="span">
                <el-form-item prop="bankCard.bankname" label="开户银行">
                    <el-select style="width: 100%;" v-model="form.bankCard.bankname" placeholder="请选择开户银行"
                        @change="banknameChange">
                        <el-option v-for="item in bankList" :key="item" :value="item" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="span">
                <el-form-item prop="bankCard.contactline" label="开户支行">
                    <el-select style="width: 100%;" v-model="form.bankCard.contactline" placeholder="请选择开户支行">
                        <el-option :label="item.cnapsName" :value="item.cnapsCode" v-for="item in bankBranchs"
                            :key="item.id" />
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="gutter">
            <el-col :span="span">
                <el-form-item prop="bankCard.imgurl" label="银行卡照片">
                    <upload-card ref="uploadBank" @selectFile="file => form.bankCard.imgurl = file"
                        @removeFile="form.bankCard.imgurl = ''" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item>
            <el-button type="primary" @click="submitHandle">立即提交</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import bankList from './bankList'

import { ElMessage } from 'element-plus'
import { uploadOSS } from '@/api/home.js'
import uploadCard from './uploadCard.vue'
import addressCard from '@/components/addressCard.vue'
import { merchantInfoDetail, getBranchList, updatePromoterInformation } from '@/api/shop.js'
import { useRoute } from 'vue-router'
const route = useRoute()

const formRef = ref(null)
const idCardRef1 = ref(null)
const idCardRef2 = ref(null)
const uploadBank = ref(null)
const addressRef = ref(null)

const bankBranchs = ref([])

const span = ref(10)
const gutter = ref(50)

const form = reactive({
    status: '',
    id: '',
    merchantcode: route.query.merchantcode,
    userid: route.query.id,
    username: route.query.name,
    loginname: route.query.account,
    idCard: {
        id: '',
        userid: '',
        certname: '',
        certno: '',
        certstarttime: '',
        certendtime: '',
        imgpositive: '',
        imgnegative: ''
    },
    bankCard: {
        id: '',
        userid: '',
        bankcardno: '',
        phone: '',
        branchprovince: '',
        branchcity: '',
        brancharea: '',
        bankname: '',
        contactline: '',
        imgurl: '',
        branchProvinceCode: '',
        branchCityCode: '',
        branchAreaCode: ''
    }
})

const rules = reactive({
    username: [
        {
            required: true,
            message: '',
            trigger: 'blur'
        }
    ],
    loginname: [
        {
            required: true,
            message: '',
            trigger: 'blur'
        }
    ],
    idCard: {
        certname: [
            {
                required: true,
                message: '',
                trigger: 'blur'
            }
        ],
        certno: [
            {
                required: true,
                message: '',
                trigger: 'blur'
            }
        ],
        certstarttime: [
            {
                required: true,
                message: '',
                trigger: 'blur'
            }
        ],
        certendtime: [
            {
                required: true,
                message: '',
                trigger: 'blur'
            }
        ],
        imgpositive: [
            {
                required: true,
                message: '请选择身份证正面照片',
                trigger: 'change'
            }
        ],
        imgnegative: [
            {
                required: true,
                message: '请选择身份证反面照片',
                trigger: 'change'
            }
        ]
    },
    bankCard: {
        bankcardno: [
            {
                required: true,
                message: '',
                trigger: 'blur'
            }
        ],
        phone: [
            {
                required: true,
                message: '',
                trigger: 'blur'
            }
        ],
        bankname: [
            {
                required: true,
                message: '',
                trigger: 'blur'
            }
        ],
        bank: [
            {
                required: true,
                validator: (rule, value, callback) => {
                    if (!form.bankCard.branchprovince || !form.bankCard.branchcity || !form.bankCard.brancharea) {
                        return callback(new Error('请完善开户行地区信息'))
                    } else {
                        callback()
                    }
                },
                trigger: 'change'
            }
        ],
        contactline: [
            {
                required: true,
                message: '',
                trigger: 'change'
            }
        ],
        imgurl: [
            {
                required: true,
                message: '请选择银行卡照片',
                trigger: 'blur'
            }
        ]
    }
})

// 获取省市区
function selectBankAddress(e) {
    if (e[1].label != form.bankCard.branchcity) {
        form.bankCard.bankname = ''
        form.bankCard.contactline = ''
    }
    form.bankCard.branchprovince = e[0].label
    form.bankCard.branchcity = e[1].label
    form.bankCard.brancharea = e[2].label

    form.bankCard.branchProvinceCode = e[0].code
    form.bankCard.branchCityCode = e[1].code
    form.bankCard.branchAreaCode = e[2].code
}

// 确认选择开户银行
async function banknameChange(val, city) {
    try {
        if (form.bankCard.branchcity || city) {
            const res = await getBranchList({
                bankName: val,
                cityName: city || form.bankCard.branchcity
            })
            form.bankCard.contactline = ''
            bankBranchs.value = res.branchList
        }
    } catch (error) { }
}

// 提交表单
async function submitHandle() {
    await formRef.value.validate(async vaild => {
        if (vaild) {
            try {
                if (form.idCard.imgpositive.uid) {
                    form.idCard.imgpositive = await uploadOSS(form.idCard.imgpositive.raw)
                }
                if (form.idCard.imgnegative.uid) {
                    form.idCard.imgnegative = await uploadOSS(form.idCard.imgnegative.raw)
                }
                if (form.bankCard.imgurl.uid) {
                    form.bankCard.imgurl = await uploadOSS(form.bankCard.imgurl.raw)
                }
                await updatePromoterInformation(form)
                ElMessage.success('提交成功')
                merchantInfoDetailAjax()
            } catch (error) {
                console.log('334:提交表单===', error)
            }
        }
    })
}

// 获取实名认证信息
async function merchantInfoDetailAjax() {
    try {
        const res = await merchantInfoDetail(route.query.id)
        await banknameChange(res.bankCard.bankname, res.bankCard.branchcity)
        form.id = res.id
        form.status = res.status
        form.bankCard = res.bankCard
        form.idCard = res.idCard
        idCardRef1.value.pselectFile({ url: res.idCard.imgpositive })
        idCardRef2.value.pselectFile({ url: res.idCard.imgnegative })
        uploadBank.value.pselectFile({ url: res.bankCard.imgurl })
        if (res.bankCard.branchProvinceCode) {
            addressRef.value.setValue([res.bankCard.branchProvinceCode, res.bankCard.branchCityCode, res.bankCard.branchAreaCode])
        } else {
            addressRef.value.textSetValue([res.bankCard.branchprovince, res.bankCard.branchcity, res.bankCard.brancharea])
        }
    } catch (error) {
        console.log('获取实名认证信息:', error)
    }
}

onMounted(() => {
    merchantInfoDetailAjax()
})
</script>

<style scoped lang="scss">
@import './common.scss';
</style>