<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="输入企业名称"
                                clearable
                                v-model.trim="applyParams.companyName"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="企业类型">
                            <el-select
                                placeholder="请选择企业类型"
                                clearable
                                v-model.trim="applyParams.companyType"
                                @change="changeProvince">
                                <el-option
                                    v-for="item in selcompanyTypeList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="企业所属">
                            <el-select
                                placeholder="请选择企业所属"
                                clearable
                                v-model.trim="applyParams.companyLtd"
                                @change="changeProvince">
                                <el-option
                                    v-for="item in selcompanyLtdList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="统一社会信用代码">
                            <el-input
                                placeholder="请输入统一社会信用代码"
                                clearable
                                v-model.trim="applyParams.creditCode"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="注册地址">
                    <el-row :gutter="20">
                        <el-col :span="5">
                            <el-select
                                placeholder="请选择省份"
                                clearable
                                v-model.trim="applyParams.registerAddress"
                                @change="changeProvince">
                                <el-option
                                    v-for="item in selProvinceList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.code + ',' + item.name"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="5">
                            <el-select
                                v-model.trim="applyParams.registerAddressProvince"
                                placeholder="请选择市"
                                @change="changeMarket"
                                clearable>
                                <el-option
                                    v-for="item in selMarketList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.code + ',' + item.name"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="5">
                            <el-select
                                v-model.trim="applyParams.registerAddressArea"
                                placeholder="请选择区"
                                clearable
                                @change="changeArea">
                                <el-option
                                    v-for="item in selAreaList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.code + ',' + item.name"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="6">
                            <el-input
                                v-model.trim="applyParams.registerRealityAddress"
                                placeholder="请输入实际办公地址"
                                clearable></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item label="经营地址">
                    <el-row :gutter="20">
                        <el-col :span="5">
                            <el-select
                                placeholder="请选择省份"
                                clearable
                                v-model.trim="applyParams.operateAddress"
                                @change="opeChangeProvince">
                                <el-option
                                    v-for="item in selProvinceList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.code + ',' + item.name"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="5">
                            <el-select
                                v-model.trim="applyParams.operateAddressProvince"
                                placeholder="请选择市"
                                @change="opeChangeMarket"
                                clearable>
                                <el-option
                                    v-for="item in selMarketList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.code + ',' + item.name"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="5">
                            <el-select
                                v-model.trim="applyParams.operateAddressArea"
                                placeholder="请选择区"
                                @change="opeChangeArea"
                                clearable>
                                <el-option
                                    v-for="item in selAreaList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.code + ',' + item.name"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="6">
                            <el-input
                                v-model.trim="applyParams.operateRealityAddress"
                                clearable
                                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.trim="applyParams.certificatetype"
                                clearable
                                placeholder="请选法人证件类型">
                                <el-option
                                    v-for="item in selIdTypeList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="7">
                        <el-form-item label="法人证件号码">
                            <el-input
                                placeholder="请输入法人证件号码"
                                v-model.trim="applyParams.idNumber"
                                clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item class="" label="营业执照">
                            <uploadComponent
                                :maxLimit="3"
                                listType="picture-card"
                                :acceptTypeList="['.jpg', '.jpeg', '.png']"
                                width="120px"
                                height="120px">
                                <template v-slot:default>
                                    <el-icon size="48" color="#aaa"><Plus /></el-icon>
                                </template>
                            </uploadComponent>
                            <div class="previewExample">
                                <!-- <span>预览</span> -->
                                <span @click="previewBusinessLicense">查看示例</span>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="10">
                        <el-form-item class="" label="身份证国徽面">
                            <uploadComponent
                                :maxLimit="3"
                                listType="picture-card"
                                :acceptTypeList="['.jpg', '.jpeg', '.png']"
                                width="120px"
                                height="120px">
                                <template v-slot:default>
                                    <el-icon size="48" color="#aaa"><Plus /></el-icon>
                                </template>
                            </uploadComponent>
                            <div class="previewExample">
                                <!-- <span>预览</span> -->
                                <span @click="previewCardOpposite">查看示例</span>
                            </div>
                        </el-form-item>
                    </el-col>

                    <el-col :span="10">
                        <el-form-item class="" label="身份证肖像面">
                            <uploadComponent
                                :maxLimit="3"
                                listType="picture-card"
                                :acceptTypeList="['.jpg', '.jpeg', '.png']"
                                width="120px"
                                height="120px">
                                <template v-slot:default>
                                    <el-icon size="48" color="#aaa"><Plus /></el-icon>
                                </template>
                            </uploadComponent>
                            <div class="previewExample">
                                <!-- <span>预览</span> -->
                                <span @click="previewCardFront">查看示例</span>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="法人姓名">
                            <el-input
                                placeholder="请输入法人姓名"
                                v-model.trim="applyParams.legalPerson"
                                clearable>
                                >
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="邀请码">
                            <el-input
                                placeholder="请输入邀请码"
                                v-model.trim="applyParams.invitationCode"
                                clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="邀请企业名称">
                            <el-input
                                placeholder="请输入邀请企业名称"
                                v-model.trim="applyParams.invitationCoName"
                                clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="经营范围">
                            <el-input
                                placeholder="请输入经营范围"
                                v-model.trim="applyParams.businessScope"
                                clearable
                                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
                                placeholder="请输入被授权人姓名"
                                v-model.trim="applyParams.authPerson"
                                clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="被授权人身份证">
                            <el-input
                                placeholder="请输入被授权人身份证"
                                v-model.trim="applyParams.authIdNumber"
                                clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="被授权人手机号">
                            <div class="phone">
                                <el-input
                                    placeholder="请输入被授权人手机号"
                                    v-model.trim="applyParams.authPhone"
                                    clearable></el-input>
                                <div class="tip">
                                    被授权人手机号修改且运营审核通过后，企业系统管理员权限将同步到修改后被授权手机号的登录账号。
                                </div>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="被授权人邮箱">
                            <el-input placeholder="请输入被授权人邮箱" clearable>></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="10">
                        <el-form-item label="被授权人身份证肖像面">
                            <uploadComponent
                                :maxLimit="3"
                                listType="picture-card"
                                :acceptTypeList="['.jpg', '.jpeg', '.png']"
                                width="120px"
                                height="120px">
                                <template v-slot:default>
                                    <el-icon size="48" color="#aaa"><Plus /></el-icon>
                                </template>
                            </uploadComponent>
                            <div class="previewExample">
                                <!-- <span>预览</span> -->
                                <span @click="previewCardFront">查看示例</span>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="被授权人身份证国徽面">
                            <!-- <upload-img width="80" @onClick="test" /> -->
                            <uploadComponent
                                :maxLimit="3"
                                listType="picture-card"
                                :acceptTypeList="['.jpg', '.jpeg', '.png']"
                                width="120px"
                                height="120px">
                                <template v-slot:default>
                                    <el-icon size="48" color="#aaa"><Plus /></el-icon>
                                </template>
                            </uploadComponent>
                            <div class="previewExample">
                                <!-- <span>预览</span> -->
                                <span @click="previewCardOpposite">查看示例</span>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="10">
                        <el-form-item label="法人授权书">
                            <uploadComponent
                                :maxLimit="3"
                                listType="picture-card"
                                :acceptTypeList="['.jpg', '.jpeg', '.png']"
                                width="120px"
                                height="120px">
                                <template v-slot:default>
                                    <el-icon size="48" color="#aaa"><Plus /></el-icon>
                                </template>
                            </uploadComponent>
                            <div class="previewExample">
                                <!-- <span>预览</span> -->
                                <span @click="previewPowerOfAttorney">查看示例</span>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" class="d-flex align-center">
                        <el-checkbox size="large" />
                        <div class="agreement">
                            我已阅读并同意相关条款内容《
                            <span class="previewExample" @click="serviceAgreement">服务协议</span>
                            》 《
                            <span class="previewExample" @click="privacyAgreement">隐私协议</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-table border :data="bankTableList">
                <el-table-column align="center" label="开户行">
                    <template #default="{ row }">
                        <el-input v-model.trim="row.v_kaihu"></el-input>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="账号名称">
                    <template #default="{ row }">
                        <el-input></el-input>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="银行账号">
                    <template #default="{ row }">
                        <el-input></el-input>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="开户行所在地">
                    <template #default="{ row }">
                        <el-input></el-input>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="开户许可证核准号（基本存款账号编号）">
                    <template #default="{ row }">
                        <el-input></el-input>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="开户许可证/基本存款账号信息">
                    <template #default="{ row }">
                        <a>
                            <uploadComponent
                                :maxLimit="1"
                                listType="picture-card"
                                :acceptTypeList="['.jpg', '.jpeg', '.png']"
                                height="30px">
                                <template v-slot:default>上传附件</template>
                            </uploadComponent>
                        </a>
                    </template>
                </el-table-column>
            </el-table> -->
        </div>
        <el-row style="padding-top: 15px">
            <el-form-item>
                <el-button type="success" @click="handlerSubmitBtn">提 交</el-button>
                <el-button type="warning" @click="handlerCloseBtn">关 闭</el-button>
            </el-form-item>
        </el-row>

        <el-dialog v-model.trim="picItemVisible" title="图片示例" width="40%">
            <el-image :src="previewPicUrl" fit="cover" style="display: block; margin: 0 auto" />
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
    import uploadComponent from 'components/uploadComponent/index.vue'
    import { ElMessage } from 'element-plus'
    import { reactive, ref } from 'vue'
    import { useStore } from 'store/user'
    const store = useStore()

    const previewPicUrl = ref('')

    import { applyAttestationApi } from 'http/api/usercenter/baseinfo'

    onMounted(() => {
        // 获取省级数据
        store.getprovinceList()
        // 获取证件类型数据
        store.getIdTypeList()
        // 获取企业类型
        store.getcompanyTypeList()
        // 获取企业所属
        store.getcompanyLtdList()
    })

    const picItemVisible = ref(false)

    //查看身份证正面示例
    const previewCardFront = () => {
        picItemVisible.value = true
        previewPicUrl.value =
            'https://p7.itc.cn/images01/20211109/51307123942047a89ec6e05b24b4f152.jpeg'
    }
    //查看身份证反面示例
    const previewCardOpposite = () => {
        picItemVisible.value = true
        previewPicUrl.value = 'https://image2.sina.com.cn/dy/o/2005-02-01/1107213262_.haWGD.jpg'
    }
    //查看营业执照示例
    const previewBusinessLicense = () => {
        picItemVisible.value = true
        previewPicUrl.value =
            'https://img0.baidu.com/it/u=399142335,2996450343&fm=253&fmt=auto&app=138&f=JPEG?w=347&h=500'
    }
    //查看授权书示例
    const previewPowerOfAttorney = () => {
        picItemVisible.value = true
        previewPicUrl.value =
            'https://static.quanyaotong.com/uploads/201901/17/35e8cf5034de7484ba256058e972580d.jpg'
    }

    // 银行数据源绑定
    const bankTableList = ref([{ v_kaihu: '', v_admin: '' }])

    // 注册地址拼装
    const AssemblyRegisterAddress: any = reactive([])

    // 经营地址拼装
    const AssemblyOperateAddress: any = reactive([])

    // 申请认证参数
    const applyParams: any = reactive({
        companyName: '', // 企业名称
        companyType: '', // 企业类型
        companyLtd: '', // 企业所属
        creditCode: '', // 统一信用代码
        registerAddress: '', // 注册地址
        registerAddressProvince: '', // 注册地址(市级)
        registerAddressArea: '', // 注册地址(区级)
        registerRealityAddress: '', // 注册地址(实际地址)
        operateAddress: '', // 经营地址
        operateAddressProvince: '', // 经营地址(市级)
        operateAddressArea: '', // 经营地址(区级)
        operateRealityAddress: '', // 注册地址(实际地址)
        certificatetype: '', // 法人证件类型
        idNumber: '', // 法人证件号码
        businessLicense: '', // 营业执照
        legalFaceUrl: '', // 法人身份证国徽面
        legalNationUrl: '', // 法人身份证肖像
        legalPerson: '', // 法人姓名
        invitationCode: '', // 邀请码
        invitationCoName: '', // 邀请企业名称
        businessScope: '', // 经营范围
        authPerson: '', // 被授权人姓名
        authIdNumber: '', // 被授权身份证号
        authPhone: '', // 被授权手机号
        authDocument:
            'https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png', // 法人授权书
        idNationUrl:
            'https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png', // 被授权人国徽
        idFaceUrl:
            'vhttps://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png' // 被授权人头像
    })
    // 省级数据源
    const selProvinceList: any = computed(() => {
        return store.provinceList
    })

    // 省级下拉框选中时获取市级
    const changeProvince = (val: any) => {
        // console.log(val, '省选择**')
        store.getmarketList(val.split(',')[0])

        AssemblyRegisterAddress[0] = val.split(',')[1]
    }

    const opeChangeProvince = (val: any) => {
        // console.log(val, '省选择**')
        store.getmarketList(val.split(',')[0])

        AssemblyOperateAddress[0] = val.split(',')[1]
    }

    // 获取市级数据源
    const selMarketList: any = computed(() => {
        return store.marketList
    })

    // 市级下拉框选中获取区级数据
    const changeMarket = (val: any) => {
        store.getareaList(val.split(',')[0])
        AssemblyRegisterAddress[1] = val.split(',')[1]
    }

    const opeChangeMarket = (val: any) => {
        store.getareaList(val.split(',')[0])
        AssemblyOperateAddress[1] = val.split(',')[1]
    }

    // 获取区级数据源
    const selAreaList: any = computed(() => {
        return store.areaList
    })

    // 区级下拉框选中时
    const changeArea = (val: any) => {
        AssemblyRegisterAddress[2] = val.split(',')[1]
    }
    const opeChangeArea = (val: any) => {
        AssemblyOperateAddress[2] = val.split(',')[1]
    }

    // 获取证件类型
    const selIdTypeList: any = computed(() => {
        return store.idTypeList
    })

    // 获取企业类型
    const selcompanyTypeList: any = computed(() => {
        return store.companyTypeList
    })

    // 获取企业所属

    const selcompanyLtdList: any = computed(() => {
        return store.companyLtdList
    })

    const emit = defineEmits(['closeAuthenticationDialog'])

    // 提交认证按钮
    const handlerSubmitBtn = async () => {
        AssemblyRegisterAddress[3] = applyParams.registerRealityAddress
        AssemblyOperateAddress[3] = applyParams.operateRealityAddress

        applyParams.registerAddress = AssemblyRegisterAddress.join(',')
        applyParams.operateAddress = AssemblyOperateAddress.join(',')

        const res: any = await applyAttestationApi({
            bmCompanyInfo: applyParams,
            bmCoBank: {}
        })
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: '申请成功'
            })
            // 关闭弹框
            emit('closeAuthenticationDialog', false)
        }
    }

    // 关闭按钮
    const handlerCloseBtn = () => {
        emit('closeAuthenticationDialog', false)
    }

    /* 服务协议 */
    const serviceAgreement = () => {
        window.open('https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/serviceAgreement.pdf')
    }
    /* 隐私协议 */
    const privacyAgreement = () => {
        window.open('https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/privacyPolicy.pdf')
    }

    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>
