<template>
    <div class="enterpriseCertification">
        <div class="baseInfo card">
            <div class="top">
                <div class="title">
                    企业基本信息
                </div>
                <div class="options">
                    <el-button size="small" type="primary">我的邀请码</el-button>
                    <el-button size="small" type="primary">编辑</el-button>
                </div>
            </div>
            <el-form class="baseForm">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="企业名称">
                            <el-input placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="统一社会信用代码">
                            <el-input placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="注册地址">
                    <el-row :gutter="10">
                        <el-col :span="3">
                            <el-select v-model="thisValue" placeholder="请选择省份">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="3">
                            <el-select v-model="thisValue" placeholder="请选择市">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="3">
                            <el-select v-model="thisValue" placeholder="请选择区">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="15">
                            <el-input placeholder="请输入实际办公地址"></el-input>
                        </el-col>
                    </el-row>

                </el-form-item>

                <el-form-item label="经营地址">
                    <el-row :gutter="10">
                        <el-col :span="3">
                            <el-select v-model="thisValue" placeholder="请选择省份">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="3">
                            <el-select v-model="thisValue" placeholder="请选择市">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="3">
                            <el-select v-model="thisValue" placeholder="请选择区">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="15">
                            <el-input placeholder="请输入实际办公地址"></el-input>
                        </el-col>
                    </el-row>

                </el-form-item>

                <el-row :gutter="20">
                    <el-col :span="5">
                        <el-form-item label="法人证件类型">
                            <el-select v-model="thisValue" placeholder="请选择省份">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="7">
                        <el-form-item label="法人证件号码">
                            <el-input></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item class="" label="营业执照">
                            <upload-img width="80" @onClick="test" />
                            <div class="previewExample">
                                <span>预览</span>
                                <span>查看示例</span>
                            </div>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item class="" label="身份证国徽面">
                            <upload-img width="80" @onClick="test" />
                            <div class="previewExample">
                                <span>预览</span>
                                <span>查看示例</span>
                            </div>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item class="" label="身份证肖像面">
                            <upload-img width="80" @onClick="test" />
                            <div class="previewExample">
                                <span>预览</span>
                                <span>查看示例</span>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="法人姓名">
                            <el-input></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="邀请码">
                            <el-input></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="邀请企业名称">
                            <el-input></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="经营范围">
                            <el-input type="textarea" :rows="5"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <div class="personInfo card">
            <div class="top">
                <div class="title">
                    被授权人信息
                </div>
            </div>

            <el-form class="personForm">
                <el-row :gutter="20">
                    <el-col :span="5">
                        <el-form-item label="被授权人姓名">
                            <el-input ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="被授权人身份证">
                            <el-input ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="被授权人手机号">
                            <div class="phone">
                                <el-input ></el-input>
                                <div class="tip">
                                    被授权人手机号修改且运营审核通过后，企业系统管理员权限将同步到修改后被授权手机号的登录账号。
                                </div>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="被授权人邮箱">
                            <el-input ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="5">
                        <el-form-item label="法人授权书">
                            <upload-img width="80" @onClick="test" />
                            <div class="previewExample">
                                <span>预览</span>
                                <span>查看示例</span>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="被授权人身份证国徽面">
                            <upload-img width="80" @onClick="test" />
                            <div class="previewExample">
                                <span>预览</span>
                                <span>查看示例</span>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="被授权人身份证肖像面">
                            <upload-img width="80" @onClick="test" />
                            <div class="previewExample">
                                <span>预览</span>
                                <span>查看示例</span>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" class="d-flex align-center">
                        <el-checkbox  size="large" />
                        <div class="agreement ">我已阅读并同意相关条款内容《
                            <span class="previewExample">服务协议</span>
                            》 《
                            <span class="previewExample">隐私协议</span>
                            》</div>
                    </el-col>
                </el-row>
            </el-form>

        </div>

        <div class="bankInfo card">
            <div class="top">
                <div class="title">
                    银行账号信息
                    <span class="tip">开户行许可示例</span>
                </div>
            </div>
            <el-row class="header">
                <el-col :span="v.span" v-for="(v,i) in bankTableHeader" :key="i">
                    <div class="item border-top-left" :class="i+1 == bankTableHeader.length && 'border-right'">
                        {{ v.label }}
                    </div>
                </el-col>
            </el-row>
            <el-row class="content" v-for="(val,index) in bankTableData" :key="index">
                <el-col :span="v.span" v-for="(v,i) in bankTableHeader" :key="i">
                    <div
                        v-if="!v.slot"
                        class="item border-top-left"
                         :class="`${i+1 == bankTableHeader.length && 'border-right'} ${index+1 == bankTableData.length && 'border-bottom'}`"
                    >
                        {{ val[v.prop] || '' }}
                    </div>
                    <div v-else
                         class="item border-top-left"
                         :class="`${i+1 == bankTableHeader.length && 'border-right'} ${index+1 == bankTableData.length && 'border-bottom'}`"
                    >
                        上传附件
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script lang="ts" setup>
import uploadImg from '@/compontents/uploadImg.vue'
import {reactive, ref} from "vue";

    const options = reactive([{
        value: '选项1',
        label: '黄金糕'
    }, {
        value: '选项2',
        label: '双皮奶'
    }, {
        value: '选项3',
        label: '蚵仔煎'
    }, {
        value: '选项4',
        label: '龙须面'
    }, {
        value: '选项5',
        label: '北京烤鸭'
    }])
    const thisValue = ref('')

    const imageUrl = ref('')

    const bankTableHeader = reactive([
        {
            span:4,
            label:'开户行',
            prop:'bankName',
        },
        {
            span: 2,
            label: '账号名称',
            prop: 'b'
        },{
            span: 2,
            label: '银行账号',
            prop: 'a'
        },{
            span: 2,
            label: '开户行所在地',
            prop: 'a'
        },{
            span: 2,
            label: '开户许可证核准号（基本存款账号编号）',
            prop: 'a'
        },{
            span: 2,
            label: '开户行许可证/基本存款账号信息',
            prop: 'a',
            slot:'annex'
        },
    ])

    const bankTableData = reactive([
        {
            a:1,
            bankName:'中国银行'
        },{
            a:1,
            bankName:'test'
        },{
            a:1,
            bankName:'test'
        },{
            a:1,
            bankName:'test'
        },{
            a:1,
            bankName:'test'
        },{
            a:1,
            bankName:'test'
        },
    ])

    const test = () => {}
</script>

<style lang="scss" scoped>
.d-flex{
    display: flex;
}
.align-center{
    align-items: center;
}
::v-deep.el-form-item {
    display: flex;

    .el-form-item__content {
        flex: 1;
    }
}

.enterpriseCertification {
    height: 100%;
    background: #f2f2f2;
    padding: 15px 10px;

    .card {
        border-radius: 5px;
        background: white;
        padding: 10px;
    }

    .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;

        .title {
            font-size: 16px;
            font-weight: 600;
        }

        .options {

        }
    }

    .baseForm {
        padding: 0 10px;
    }

    .previewExample{
        font-size: 12px;
        color: blue;
        cursor: pointer;
        span{
            margin: 0 5px;
        }
    }

    .personInfo{
        margin-top: 15px;
        .personForm{
            padding: 0 10px;
            .phone{
                .tip{
                    line-height: normal;
                    color: red;
                    font-size: 12px;
                }
            }
            .agreement{
                font-size: 13px !important;
                margin-left: 8px;
            }
        }
    }

    .bankInfo{
        margin-top: 15px;
        .top{
            .title{
                .tip{
                    color: blue;
                    font-size: 12px;
                    cursor: pointer;
                }
            }
        }
        .header{
            .item{
                background: #e0efff;
                min-height: 40px;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                box-sizing: border-box;
                padding: 5px;
                height: 100%;
            }

        }
        .border-top-left{
            border-top:1px solid black;
            border-left: 1px solid black;
        }
        .border-right{
            border-right: 1px solid black;
        }
        .border-bottom{
            border-bottom: 1px solid black;
        }
        .content{
            .item{
                min-height: 40px;
                display: flex;
                align-items: center;
                //justify-content: center;
                box-sizing: border-box;
                padding: 5px;
                height: 100%;
            }
        }
    }
}
</style>
