<!-- 结算信息 -->
<template>
    <el-row :gutter="gutter">
        <el-col :span="24">
            <el-form ref="d1FormRef" :model="d1Form" label-width="120" label-position="left">
                <div class="title_wrap">
                    <el-text>D1</el-text>
                    <el-text type="danger" size="small" style="margin-top: 6px;">小微
                        (注：请保持银行卡信息(证件号码、开户名、卡号、预留手机号)的匹配性)</el-text>
                </div>
                <el-form-item label="开户行地区" class="mt15">
                    <address-card ref="d1AddressRef" placeholder="请选择开户行地区" @change="d1SelectBankAddress"
                        style="width: 80%;" />
                </el-form-item>
                <el-form-item label="开户银行">
                    <el-select style="width: 80%;" v-model="d1Form.bankCard.bankname" placeholder="请选择开户银行"
                        @change="d1BanknameChange">
                        <el-option v-for="item in bankList" :key="item" :value="item" />
                    </el-select>
                </el-form-item>
                <el-form-item label="开户支行">
                    <el-select style="width: 80%;" v-model="d1Form.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-form-item label="支行联行号">
                    <el-input v-model="d1Form.bankCard.contactline" disabled placeholder="请输入支行联行号" style="width: 80%;"
                        @input="e => d1Form.bankCard.contactline = removeSpaces(e)" />
                </el-form-item>
                <el-form-item label="开户名">
                    <el-input v-model="d1Form.bankCard.bankholder" placeholder="请输入开户名" style="width: 80%;" />
                </el-form-item>
                <el-form-item label="开户账号">
                    <el-input v-model="d1Form.bankCard.bankcardno" placeholder="请输入开户账号" style="width: 80%;"
                        @input="e => d1Form.bankCard.bankcardno = removeSpaces(e)" />
                </el-form-item>
                <el-form-item label="预留手机号">
                    <el-input v-model="d1Form.bankCard.phone" placeholder="请输入预留手机号" style="width: 80%;"
                        @input="e => d1Form.bankCard.phone = removeSpaces(e)" />
                </el-form-item>
                <el-form-item label="身份证号码">
                    <el-input v-model="d1Form.idcard.certno" placeholder="请输入身份证号码" style="width: 80%;"
                        @input="e => d1Form.idcard.certno = removeSpaces(e)" />
                </el-form-item>
                <el-form-item label="发放日期">
                    <el-date-picker style="width: 80%;" value-format="YYYYMMDD" v-model="d1Form.idcard.certstarttime"
                        type="date" placeholder="请选择发放日期" />
                </el-form-item>
                <el-form-item label="失效日期">
                    <el-date-picker style="width: 80%;" value-format="YYYYMMDD" v-model="d1Form.idcard.certendtime"
                        type="date" placeholder="请选择失效日期" />
                </el-form-item>
                <el-form-item label="身份证正面">
                    <uploadCard ref="d1idcardRef1" @selectFile="file => d1Form.idcard.imgpositive = file"
                        @removeFile="d1Form.idcard.imgpositive = ''" />
                </el-form-item>
                <el-form-item label="身份证反面">
                    <uploadCard ref="d1idcardRef2" @selectFile="file => d1Form.idcard.imgnegative = file"
                        @removeFile="d1Form.idcard.imgnegative = ''" />
                </el-form-item>
                <el-form-item label="结算卡图片">
                    <uploadCard ref="d1BankRef3" @selectFile="file => d1Form.bankCard.imgurl = file"
                        @removeFile="d1Form.bankCard.imgurl = ''" />
                </el-form-item>
                <el-form-item label="非法人授权函" v-show="d1Form.certificateurl">
                    <uploadCard ref="d1BankRef4" @selectFile="file => d1Form.certificateurl = file"
                        @removeFile="d1Form.certificateurl = ''" />
                </el-form-item>
                <el-form-item label="对公开户许可证" v-show="d1Form.publicimage">
                    <uploadCard ref="d1BankRef5" @selectFile="file => d1Form.publicimage = file"
                        @removeFile="d1Form.publicimage = ''" />
                </el-form-item>
                <!-- <el-form-item>
                    <el-button type="primary" @click="d1SubmitHandle">保存-D1</el-button>
                </el-form-item> -->
            </el-form>
        </el-col>
        <el-col :span="span" v-if="false">
            <el-form ref="d0FormRef" :model="d0Form" label-width="120" label-position="left">
                <div class="title_wrap">
                    <el-text>D0</el-text>
                    <el-text type="danger" size="small" style="margin-top: 6px;">小微
                        (注：请保持银行卡信息(证件号码、开户名、卡号、预留手机号)的匹配性)</el-text>
                </div>
                <el-form-item label="开户行地区" class="mt15">
                    <address-card ref="d0AddressRef" placeholder="请选择开户行地区" @change="d0SelectBankAddress"
                        style="width: 80%;" />
                </el-form-item>
                <el-form-item label="开户银行">
                    <el-select style="width: 80%;" v-model="d0Form.bankCard.bankname" placeholder="请选择开户银行"
                        @change="d0BanknameChange">
                        <el-option v-for="item in bankList" :key="item" :value="item" />
                    </el-select>
                </el-form-item>
                <el-form-item label="开户支行">
                    <el-select style="width: 80%;" v-model="d0Form.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-form-item label="支行联行号">
                    <el-input v-model="d0Form.bankCard.contactline" disabled placeholder="请输入支行联行号" style="width: 80%;"
                        @input="e => d0Form.bankCard.contactline = removeSpaces(e)" />
                </el-form-item>
                <el-form-item label="开户名">
                    <el-input v-model="d0Form.bankCard.bankholder" placeholder="请输入开户名" style="width: 80%;" />
                </el-form-item>
                <el-form-item label="开户账号">
                    <el-input v-model="d0Form.bankCard.bankcardno" placeholder="请输入开户账号" style="width: 80%;"
                        @input="e => d0Form.bankCard.bankcardno = removeSpaces(e)" />
                </el-form-item>
                <el-form-item label="预留手机号">
                    <el-input v-model="d0Form.bankCard.phone" placeholder="请输入预留手机号" style="width: 80%;"
                        @input="e => d0Form.bankCard.phone = removeSpaces(e)" />
                </el-form-item>
                <el-form-item label="身份证号码">
                    <el-input v-model="d0Form.idcard.certno" placeholder="请输入身份证号码" style="width: 80%;"
                        @input="e => d0Form.idcard.certno = removeSpaces(e)" />
                </el-form-item>
                <el-form-item label="发放日期">
                    <el-date-picker style="width: 80%;" value-format="YYYYMMDD" v-model="d0Form.idcard.certstarttime"
                        type="date" placeholder="请选择发放日期" />
                </el-form-item>
                <el-form-item label="失效日期">
                    <el-date-picker style="width: 80%;" value-format="YYYYMMDD" v-model="d0Form.idcard.certendtime"
                        type="date" placeholder="请选择失效日期" />
                </el-form-item>
                <el-form-item label="身份证正面">
                    <uploadCard ref="d0idcardRef1" @selectFile="file => d0Form.idcard.imgpositive = file"
                        @removeFile="d0Form.idcard.imgpositive = ''" />
                </el-form-item>
                <el-form-item label="身份证反面">
                    <uploadCard ref="d0idcardRef2" @selectFile="file => d0Form.idcard.imgnegative = file"
                        @removeFile="d0Form.idcard.imgnegative = ''" />
                </el-form-item>
                <el-form-item label="结算卡图片">
                    <uploadCard ref="d0BankRef3" @selectFile="file => d0Form.bankCard.imgurl = file"
                        @removeFile="d0Form.bankCard.imgurl = ''" />
                </el-form-item>
                <el-form-item label="非法人授权函" v-show="d0Form.certificateurl">
                    <uploadCard ref="d0BankRef4" @selectFile="file => d0Form.certificateurl = file"
                        @removeFile="d0Form.certificateurl = ''" />
                </el-form-item>
                <el-form-item label="对公开户许可证" v-show="d0Form.publicimage">
                    <uploadCard ref="d0BankRef5" @selectFile="file => d0Form.publicimage = file"
                        @removeFile="d0Form.publicimage = ''" />
                </el-form-item>
                <!-- <el-form-item>
                    <el-button type="primary" @click="d0SubmitHandle">保存-D0</el-button>
                </el-form-item> -->
            </el-form>
        </el-col>
    </el-row>
    <div class="title_wrap">
        <el-text>认证信息</el-text>
    </div>
    <el-form :model="authForm" label-width="120" label-position="left" class="mt15">
        <el-row :gutter="gutter">
            <el-col :span="span">
                <el-form-item label="结算人与收银台合照">
                    <uploadCard ref="authFormUpload1" @selectFile="file => authForm.picUrl = file"
                        @removeFile="authForm.picUrl = ''" />
                </el-form-item>
            </el-col>
        </el-row>
        <!-- <el-form-item>
            <el-button type="primary" @click="updateAuthenticationAjax" :loading="authFormLoading">保存认证信息</el-button>
        </el-form-item> -->
    </el-form>
</template>

<script setup>
import { removeSpaces } from '@/utils/index.js'
import bankList from './bankList';

import addressCard from '@/components/addressCard.vue'
import uploadCard from './uploadCard.vue'

import { uploadOSS } from '@/api/home.js'
import { merchBaseAccount, getBranchList, updateAccount, authentication, updateAuthentication } from '@/api/shop.js'

import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus';
const route = useRoute()
import { useUser } from "@/store/user.js";
const storeUser = useUser();

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

const d1FormRef = ref(null)
const d1AddressRef = ref(null)
const d1idcardRef1 = ref(null)
const d1idcardRef2 = ref(null)
const d1BankRef3 = ref(null)
const d1BankRef4 = ref(null)
const d1BankRef5 = ref(null)
const bankBranchs = ref([])
const d1Form = reactive({
    userid: storeUser.userInfo.userId,
    channeltype: 'D1',
    bankCard: {},
    idcard: {},
    certificateurl: '',
    publicimage: ''
})

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

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

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

// D1提交表单
async function d1SubmitHandle() {
    try {
        if (d1Form.idcard.imgpositive.uid) {
            d1Form.idcard.imgpositive = await uploadOSS(d1Form.idcard.imgpositive.raw)
        }
        if (d1Form.idcard.imgnegative.uid) {
            d1Form.idcard.imgnegative = await uploadOSS(d1Form.idcard.imgnegative.raw)
        }
        if (d1Form.bankCard.imgurl.uid) {
            d1Form.bankCard.imgurl = await uploadOSS(d1Form.bankCard.imgurl.raw)
        }
        if (d1Form.certificateurl.uid) {
            d1Form.certificateurl = await uploadOSS(d1Form.certificateurl.raw)
        }
        if (d1Form.publicimage.uid) {
            d1Form.publicimage = await uploadOSS(d1Form.publicimage.raw)
        }
        await updateAccount(d1Form)
        ElMessage.success('提交成功')
    } catch (error) {
        console.log('D1提交表单error', error)
    }
}

const d0AddressRef = ref(null)
const d0idcardRef1 = ref(null)
const d0idcardRef2 = ref(null)
const d0BankRef3 = ref(null)
const d0BankRef4 = ref(null)
const d0BankRef5 = ref(null)
const d0FormRef = ref(null)
const d0Form = reactive({
    userid: storeUser.userInfo.userId,
    channeltype: 'D0',
    bankCard: {},
    idcard: {},
    certificateurl: '',
    publicimage: ''
})

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

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

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

// D0提交表单
async function d0SubmitHandle() {
    try {
        if (d0Form.idcard.imgpositive.uid) {
            d0Form.idcard.imgpositive = await uploadOSS(d0Form.idcard.imgpositive.raw)
        }
        if (d0Form.idcard.imgnegative.uid) {
            d0Form.idcard.imgnegative = await uploadOSS(d0Form.idcard.imgnegative.raw)
        }
        if (d0Form.bankCard.imgurl.uid) {
            d0Form.bankCard.imgurl = await uploadOSS(d0Form.bankCard.imgurl.raw)
        }
        if (d0Form.certificateurl.uid) {
            d0Form.certificateurl = await uploadOSS(d0Form.certificateurl.raw)
        }
        if (d0Form.publicimage.uid) {
            d0Form.publicimage = await uploadOSS(d0Form.publicimage.raw)
        }
        await updateAccount(d0Form)
        ElMessage.success('提交成功')
    } catch (error) {
        console.log('d0提交表单error', error)
    }
}

// 结算信息
async function merchBaseAccountAjax() {
    try {
        const res = await merchBaseAccount(storeUser.userInfo.userId)
        await d1BanknameChange(res.D1.bankCard.bankname, res.D1.bankCard.branchcity)
        await d0BanknameChange(res.D1.bankCard.bankname, res.D1.bankCard.branchcity)

        d1Form.bankCard = res.D1.bankCard
        d1Form.idcard = res.D1.idCard
        d1Form.certificateurl = res.D1.certificateurl
        d1Form.publicimage = res.D1.publicimage

        d0Form.bankCard = res.D0.bankCard
        d0Form.idcard = res.D0.idCard
        d0Form.certificateurl = res.D0.certificateurl
        d0Form.publicimage = res.D0.publicimage

        d1idcardRef1.value.pselectFile({ url: res.D1.idCard.imgpositive })
        d1idcardRef2.value.pselectFile({ url: res.D1.idCard.imgnegative })
        d1BankRef3.value.pselectFile({ url: res.D1.bankCard.imgurl })
        if (res.D1.certificateurl) {
            d1BankRef4.value.pselectFile({ url: res.D1.certificateurl })
        }
        if (res.D1.publicimage) {
            d1BankRef5.value.pselectFile({ url: res.D1.publicimage })
        }
        if (res.D1.bankCard.branchProvinceCode) {
            d1AddressRef.value.setValue([res.D1.bankCard.branchProvinceCode, res.D1.bankCard.branchCityCode, res.D1.bankCard.branchAreaCode])
        } else {
            d1AddressRef.value.textSetValue([res.D1.bankCard.branchprovince, res.D1.bankCard.branchcity, res.D1.bankCard.brancharea])
        }

        d0idcardRef1.value.pselectFile({ url: res.D0.idCard.imgpositive })
        d0idcardRef2.value.pselectFile({ url: res.D0.idCard.imgnegative })
        d0BankRef3.value.pselectFile({ url: res.D0.bankCard.imgurl })
        if (res.D0.certificateurl) {
            d0BankRef4.value.pselectFile({ url: res.D0.certificateurl })
        }
        if (res.D0.publicimage) {
            d0BankRef5.value.pselectFile({ url: res.D0.publicimage })
        }
        if (res.D0.bankCard.branchProvinceCode) {
            d0AddressRef.value.setValue([res.D0.bankCard.branchProvinceCode, res.D0.bankCard.branchCityCode, res.D0.bankCard.branchAreaCode])
        } else {
            d0AddressRef.value.textSetValue([res.D0.bankCard.branchprovince, res.D0.bankCard.branchcity, res.D0.bankCard.brancharea])
        }
    } catch (error) {
        console.error('结算信息error:', error)
    }
}

// 结算人与收银台合照 结算人手持身份证照
const authForm = reactive({
    merchantCode: storeUser.userInfo.merchantcode,
    picUrl: ''
})
const authFormLoading = ref(false)
const authFormUpload1 = ref(null)

// 认证信息
async function authenticationAjax() {
    try {
        const res = await authentication(storeUser.userInfo.userId)
        authForm.picUrl = res.image
        authFormUpload1.value.pselectFile({ url: res.image })
    } catch (error) {
        console.error('认证信息===', error)
    }
}

// 更改认证信息
async function updateAuthenticationAjax() {
    try {
        authFormLoading.value = true
        if (authForm.picUrl.uid) {
            authForm.picUrl = await uploadOSS(authForm.picUrl.raw)
        }
        await updateAuthentication(authForm)
        authFormLoading.value = false
        ElMessage.success('提交成功')
    } catch (error) {
        authFormLoading.value = false
        console.error('更改认证信息===', error)
    }
}

onMounted(() => {
    merchBaseAccountAjax()
    authenticationAjax()
})
</script>

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