<template>
    <div class="card">
        <el-form ref="formRef" :model="form" label-width="120" label-position="left">
            <el-row :gutter="gutter">
                <el-col :span="span">
                    <el-form-item label="手机号">
                        <el-input v-model="form.phone" 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 label="支付宝名称">
                        <el-input v-model="form.cashAccount.accountname" placeholder="请输入支付宝名称" />
                    </el-form-item>
                </el-col>
                <el-col :span="span">
                    <el-form-item label="支付宝账号">
                        <el-input v-model="form.cashAccount.accountno" 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 label="实名类型">
                        <el-select style="width: 100%;" v-model="form.idCard.usertype" placeholder="请选择实名类型">
                            <el-option value="01" label="实名人" />
                            <el-option value="02" label="结算人" />
                            <el-option value="03" label="法人" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="span">
                    <el-form-item label="证件类型">
                        <el-select style="width: 100%;" v-model="form.idCard.certtype" placeholder="请选择证件类型">
                            <el-option value="00" label="身份证" />
                            <el-option value="03" label="军人证" />
                            <el-option value="04" label="警察证" />
                            <el-option value="05" label="港澳居民往来内地通行证" />
                            <el-option value="06" label="台湾居民来往大陆通行证" />
                            <el-option value="07" label="护照" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="gutter">
                <el-col :span="span">
                    <el-form-item label="证件姓名">
                        <el-input v-model="form.idCard.certname" placeholder="请输入证件姓名" />
                    </el-form-item>
                </el-col>
                <el-col :span="span">
                    <el-form-item 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 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 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 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 label="国徽面">
                        <uploadCard ref="idCardRef2" @selectFile="file => form.idCard.imgnegative = file"
                            @removeFile="form.idCard.imgnegative = ''" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item>
                <el-button type="primary" @click="submitHandle">立即提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { uploadOSS } from '@/api/home.js'
import uploadCard from './components/uploadCard.vue'

import { agencyInfo, updateAgency } from '@/api/shop.js'

import { useRoute } from 'vue-router'
const route = useRoute()

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

const formRef = ref(null)

const idCardRef1 = ref(null)
const idCardRef2 = ref(null)

const form = reactive({
    id: '',
    phone: '',
    cashAccount: {
        id: '',
        userid: '',
        accountno: '',
        accountname: '',
        status: '',
        createtime: ''
    },
    idCard: {
        id: '',
        userid: '',
        usertype: '',
        certtype: '',
        certno: '',
        certname: '',
        certstarttime: '',
        certendtime: '',
        certaddress: '',
        createtime: '',
        updatetime: '',
        imgpositive: '',
        imgnegative: '',
        virtypeflag: ''
    }
})

// 提交表单
async function submitHandle() {
    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)
        }
        await updateAgency(form)
        ElMessage.success('提交成功')
    } catch (error) {
        console.log('提交表单===', error)
    }
}

// 机构详情信息
async function agencyInfoAjax() {
    try {
        const res = await agencyInfo({
            userId: route.query.id
        })
        form.id = res.userId
        form.phone = res.phone
        form.cashAccount = res.cashAccount
        form.idCard = res.idCard

        idCardRef1.value.pselectFile({ url: res.idCard.imgpositive })
        idCardRef2.value.pselectFile({ url: res.idCard.imgnegative })
    } catch (error) {
        console.error('agencyInfoAjax===', error)
    }
}

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

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