<template>
    <basic-container>
        <el-dialog title="礼物详情" :append-to-body="true" :visible.sync="dialogFormVisible" top="1vh" @open="openDialog">
            <el-tabs type="border-card">
                <el-tab-pane label="商户主体信息">
                    <el-form :model="form1" ref="form" label-width="120px" label-position="right" size="small">
                        <el-form-item label="商户类型" prop="signType">
                            <el-select v-model="form1.signType" placeholder="请输入商户类型" clearable="true" disabled>
                                <el-option v-for="item in signTypeOptions" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="商户证件编号" prop="licenceNo">
                            <el-input disabled v-model="form1.licenceNo" placeholder="请输入商户证件编号"></el-input>
                        </el-form-item>
                        <el-form-item label="开户许可证编号" prop="openAccountLicenceNo">
                            <el-input disabled v-model="form1.openAccountLicenceNo" placeholder="请输入开户许可证编号"></el-input>
                        </el-form-item>
                        <el-form-item label="商户签约名称" prop="signName">
                            <el-input disabled v-model="form1.signName" placeholder="请输入商户签约名称"></el-input>
                        </el-form-item>
                        <el-form-item label="商户简称" prop="shortName">
                            <el-input disabled v-model="form1.shortName" placeholder="请输入商户简称"></el-input>
                        </el-form-item>
                        <el-row>
                            <el-col span="8">
                                <el-form-item label="经营地所在省" prop="province">
                                    <el-select disabled v-model="form1.province" placeholder="请选择经营地所在省" clearable>
                                        <el-option
                                                v-for="item in provinceOptions"
                                                :key="item.provinceCode"
                                                :label="item.provinceName"
                                                :value="item.provinceCode">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col span="8">
                                <el-form-item label="经营地所在市" prop="city">
                                    <el-select disabled v-model="form1.city" placeholder="请选择经营地所在市" clearable>
                                        <el-option
                                                v-for="item in cityOptions"
                                                :key="item.cityCode"
                                                :label="item.cityName"
                                                :value="item.cityCode">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col span="8">
                                <el-form-item label="经营地所在区" prop="district">
                                    <el-select disabled v-model="form1.district" placeholder="请选择经营地所在区" clearable>
                                        <el-option
                                                v-for="item in districtOptions"
                                                :key="item.districtCode"
                                                :label="item.districtName"
                                                :value="item.districtCode">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="经营地址" prop="address">
                            <el-input disabled v-model="form1.address" placeholder="请输入经营地址"></el-input>
                        </el-form-item>
                        <el-row>
                            <el-col span="12">
                                <el-form-item prop="licenceUrl" label="商户证件照片" style="width: 45%;">
                                    <img v-if="form1.licenceUrl" :src="form1.licenceUrl" class="avatar">
                                    <span v-else>暂无图片</span>
                                </el-form-item>
                            </el-col>
                            <el-col span="12">
                                <el-form-item prop="handLicenceUrl" label="手持营业执照在经营场所的照片" style="width: 45%;">
                                    <img v-if="form1.handLicenceUrl" :src="form1.handLicenceUrl" class="avatar">
                                    <span v-else>暂无图片</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item prop="openAccountLicenceUrl" label="开户许可证照片" style="width: 45%;">
                            <img v-if="form1.openAccountLicenceUrl" :src="form1.openAccountLicenceUrl" class="avatar">
                            <span v-else>暂无图片</span>
                        </el-form-item>
                        <span style="color: red">如无开户许可证，请上传基本存款账户信息表照片</span>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="法人信息">
                    <el-form ref="form2" :model="form2">
                        <el-form-item label="法人姓名" prop="legalName">
                            <el-input disabled v-model="form2.legalName" placeholder="请输入法人姓名"></el-input>
                        </el-form-item>
                        <el-row>
                            <el-col span="8">
                                <el-form-item label="法人证件类型" prop="legalLicenceType">
                                    <el-select disabled v-model="form2.legalLicenceType" placeholder="请输入法人证件类型" clearable="true">
                                        <el-option v-for="item in legalLicenceTypeOptions" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col span="16">
                                <el-form-item label="法人证件号码" prop="legalLicenceNo">
                                    <el-input disabled v-model="form2.legalLicenceNo" placeholder="请输入法人证件号码"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col span="12">
                                <el-form-item prop="legalLicenceFrontUrl" label="请上传法人证件正面照片" style="width: 45%;">
                                    <img v-if="form2.legalLicenceFrontUrl" :src="form2.legalLicenceFrontUrl" class="avatar">
                                    <span v-else>暂无图片</span>
                                </el-form-item>
                            </el-col>
                            <el-col span="12">
                                <el-form-item prop="legalLicenceBackUrl" label="法人证件反面照片" style="width: 45%;">
                                    <img v-if="form2.legalLicenceBackUrl" :src="form2.legalLicenceBackUrl" class="avatar">
                                    <span v-else>暂无图片</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="联系人信息">
                    <el-form ref="form3" :model="form3" label-width="100px">
                        <el-form-item label="联系人姓名" prop="contactName">
                            <el-input disabled v-model="form3.contactName" placeholder="请输入联系人姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="联系人证件号" prop="contactLicenceNo">
                            <el-input disabled v-model="form3.contactLicenceNo" placeholder="请输入联系人证件号码"></el-input>
                        </el-form-item>
                        <el-form-item label="联系人手机号" prop="contactMobile">
                            <el-input disabled v-model="form3.contactMobile" placeholder="请输入联系人手机号"></el-input>
                        </el-form-item>
                        <el-form-item label="联系人邮箱" prop="contactEmail">
                            <el-input disabled v-model="form3.contactEmail" placeholder="请输入联系人邮箱"></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </basic-container>
</template>

<script>
    import {
        getProvinceList,
        getCityList,
        getDistrictList
    } from "@/api/bussinessregion/bussinessregion";
    import {getDictionary} from "@/api/system/dictbiz";
    import {getByTypeAndBussinessInfoId} from "@/api/bussiness/bussinesscontactinfo";
    export default {
        props:{
            form1:Object
        },
        data() {
            return {
                form2: {},
                form3: {},
                provinceOptions:[],
                cityOptions:[],
                districtOptions:[],
                provinceProps: {
                    lazy: true,
                    label: 'provinceName',
                    value: 'provinceCode',
                },
                cityProps: {
                    label: 'cityName',
                    value: 'cityCode',
                    children: 'children'
                },
                districtProps: {
                    label: 'cityName',
                    value: 'cityCode',
                },
                signTypeOptions: [],
                legalLicenceTypeOptions: [],
                dialogFormVisible: false
            }
        },
        created() {
            this.loadProvince();
            this.loadSignTypeList("business_sign_type");
            this.loadLegalLicenceTypeList("legal_licence_type");
        },
        methods: {
            openDialog(){
                this.loadCity(this.form1.province);
                this.loadDistrict(this.form1.city);
                this.loadLegalDetail();
                this.loadContactDetail();
            },
            loadLegalLicenceTypeList(code){
                getDictionary({"code":code}).then(res =>{
                    this.legalLicenceTypeOptions = res.data.data;
                })
            },
            loadSignTypeList(code){
                getDictionary({"code":code}).then(res =>{
                    this.signTypeOptions = res.data.data;
                })
            },
            loadProvince(){
                getProvinceList().then(res =>{
                    this.provinceOptions = res.data.data;
                })
            },
            loadCity(provinceCode){
                getCityList(provinceCode).then(res =>{
                    this.cityOptions = res.data.data;
                })
            },
            loadDistrict(cityCode){
                getDistrictList(cityCode).then(res =>{
                    this.districtOptions = res.data.data;
                })
            },
            open() {
                this.dialogFormVisible = true;
            },
            close() {
                this.dialogFormVisible = false
            },
            loadLegalDetail(){
                getByTypeAndBussinessInfoId(10, this.form1.id).then(res =>{
                    this.form2 = res.data.data;
                })
            },
            loadContactDetail(){
                getByTypeAndBussinessInfoId(11, this.form1.id).then(res =>{
                    this.form3 = res.data.data;
                })
            },
        }
    }
</script>

<style>
</style>
