<template>
    <el-form :model="stepData2" :rules="rules" ref="step2" label-width="200px">
        <p class="text-right">
            <el-link type="primary" @click="$emit('child-event','show')"><i class="el-icon-back"></i>返回</el-link>
        </p>
        <div class="step-title">
            <span>企业标识注册解析系统信息</span>
        </div>
        <div class="title">
            <span>企业注册系统信息</span>
        </div>
        <el-row>
            <el-col :span="10">
                <el-form-item label="注册系统部署方式：" prop="entInfoSyses[0].deployMode">
                    <el-select v-model="stepData2.entInfoSyses[0].deployMode" placeholder="请选择部署方式">
                        <el-option label="本地部署" :value="1"></el-option>
                        <el-option label="云部署"   :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item >
                    <span slot="label">
                        <span>注册系统IP地址及端口号：</span>
                        <span>
                            <el-tooltip class="item" effect="dark" content="请按[x.x.x.x]:xxx或[xxxx:xxxx:xxxx::: …]:xxx格式填写，多个IP之间用英文分号分隔" placement="bottom">
                                <i class="el-icon-s-opportunity" style="color:gold;font-size:18px"></i>
                            </el-tooltip>
                        </span>
                    </span>
                    <el-input v-model="stepData2.entInfoSyses[0].ipPort"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="10" :offset="1">
                <template v-if="stepData2.entInfoSyses[0].deployMode == 1">
                        <el-form-item label="注册系统所在地：" prop="entInfoSyses[0].deployAddrCounty">
                            <el-cascader v-model="regSysArea" :options="optionsArea" @change="handleChangeArea($event,0)"></el-cascader>
                        </el-form-item>
                    <el-form-item label="详细地址：" prop="entInfoSyses[0].deployAddr">
                        <el-input v-model="stepData2.entInfoSyses[0].deployAddr"></el-input>
                    </el-form-item>
                </template>
                <template v-else-if="stepData2.entInfoSyses[0].deployMode == 2">
                    <el-form-item label="云服务商名称：" prop="entInfoSyses[0].name">
                        <el-input v-model="stepData2.entInfoSyses[0].name"></el-input>
                    </el-form-item>
                </template>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="10">
                <el-form-item label="注册数据部署方式：" prop="entInfoSyses[1].deployMode">
                    <el-select v-model="stepData2.entInfoSyses[1].deployMode" placeholder="请选择部署方式">
                        <el-option label="本地部署" :value="1"></el-option>
                        <el-option label="云部署"   :value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="10" :offset="1">
                <template v-if="stepData2.entInfoSyses[1].deployMode == 1">
                    <el-form-item label="注册数据所在地：" prop="entInfoSyses[1].deployAddrCounty">
                        <el-cascader v-model="regDataArea" :options="optionsArea" @change="handleChangeArea($event,1)"></el-cascader>
                    </el-form-item>
                    <el-form-item label="详细地址：" prop="entInfoSyses[1].deployAddr">
                        <el-input v-model="stepData2.entInfoSyses[1].deployAddr"></el-input>
                    </el-form-item>
                </template>
                <template v-else-if="stepData2.entInfoSyses[1].deployMode == 2">
                    <el-form-item label="云服务商名称：" prop="entInfoSyses[1].name" >
                        <el-input v-model="stepData2.entInfoSyses[1].name"></el-input>
                    </el-form-item>
                </template>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="10">
                <el-form-item label="注册备份数据部署方式：" prop="entInfoSyses[2].deployMode">
                    <el-select v-model="stepData2.entInfoSyses[2].deployMode" placeholder="请选择部署方式">
                        <el-option label="本地部署" :value="1"></el-option>
                        <el-option label="云部署"   :value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="10" :offset="1">
                <template v-if="stepData2.entInfoSyses[2].deployMode == 1">
                    <el-form-item label="注册备份数据所在地：" prop="entInfoSyses[2].deployAddrCounty">
                        <el-cascader v-model="regDataBackArea" :options="optionsArea" @change="handleChangeArea($event,2)"></el-cascader>
                    </el-form-item>
                    <el-form-item label="详细地址：" prop="entInfoSyses[2].deployAddr">
                        <el-input v-model="stepData2.entInfoSyses[2].deployAddr"></el-input>
                    </el-form-item>
                </template>
                <template v-else-if="stepData2.entInfoSyses[2].deployMode == 2">
                    <el-form-item label="云服务商名称：" prop="entInfoSyses[2].name" >
                        <el-input v-model="stepData2.entInfoSyses[2].name"></el-input>
                    </el-form-item>
                </template>
            </el-col>
        </el-row>
        <el-row>
            <div class="title">
                <span>企业解析系统信息</span>
            </div>
            <el-col :span="10">
                <el-form-item label="解析系统部署方式：" prop="entInfoSyses[3].deployMode">
                    <el-select v-model="stepData2.entInfoSyses[3].deployMode" placeholder="请选择部署方式">
                        <el-option label="本地部署" :value="1"></el-option>
                        <el-option label="云部署"   :value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="10" :offset="1">
                <template v-if="stepData2.entInfoSyses[3].deployMode == 1">
                    <el-form-item label="解析系统所在地：" prop="entInfoSyses[3].deployAddrCounty">
                        <el-cascader v-model="analysisSysArea" :options="optionsArea" @change="handleChangeArea($event,3)"></el-cascader>
                    </el-form-item>
                    <el-form-item label="详细地址：" prop="entInfoSyses[3].deployAddr">
                        <el-input v-model="stepData2.entInfoSyses[3].deployAddr"></el-input>
                    </el-form-item>
                </template>
                <template v-else-if="stepData2.entInfoSyses[3].deployMode == 2">
                    <el-form-item label="云服务商名称：" prop="entInfoSyses[3].name" >
                        <el-input v-model="stepData2.entInfoSyses[3].name"></el-input>
                    </el-form-item>
                </template>
            </el-col>
        </el-row>
        <el-row>
            <div class="title">
                <span>企业服务系统信息</span>
            </div>
            <el-col :span="10">
                <el-form-item label="服务系统建设类型：" prop="servSysBuildType">
                    <el-select v-model="stepData2.servSysBuildType" placeholder="请选择">
                        <el-option label="自营" :value="1"></el-option>
                        <el-option label="托管" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <template v-if="stepData2.servSysBuildType == 2">
                    <el-form-item label="委托合同：" prop="servSysBuildContractFileRid">
                        <el-col :span="8">
                        <el-upload
                            ref="servSysBuildRef"
                            :class="{hide:hideServSysBuild}"
                            :action=action
                            :data="servSysBuild"
                            list-type="picture-card"
                            :limit=limitCount
                            :file-list="servSysBuildFile"
                            :headers="headers"
                            :on-change="handleChangeServSysBuild"
                            :on-preview="handlePictureCardPreviewServSysBuild"
                            :on-success="handSuccessServSysBuild"
                            :before-upload="handleBeforePictureUpload"
                            :on-remove="handleRemoveServSysBuild">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                        </el-col>
                        <el-col :span="8">
                            <div class="upload-tip">
                                注意事项：<br>
                                合同附件支持.pdf格式
                            </div>
                        </el-col>
                    </el-form-item>
                </template>
            </el-col>
            <el-col :span="10" :offset="1">
                <template v-if="stepData2.servSysBuildType == 2">
                    <el-form-item label="委托机构名称：" prop="servSysBuildName" >
                        <el-input v-model="stepData2.servSysBuildName"></el-input>
                    </el-form-item>
                </template>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="10">
                <el-form-item label="服务系统运营类型：" prop="servSysOperType">
                    <el-select v-model="stepData2.servSysOperType" placeholder="请选择">
                        <el-option label="自营" :value="1"></el-option>
                        <el-option label="托管" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <template v-if="stepData2.servSysOperType == 2">
                    <el-form-item label="委托合同：" prop="orgCrtImgRid">
                        <el-col :span="8">
                        <el-upload
                            ref="servSysBuildRef"
                            :class="{hide:hideServSysOper}"
                            :action=action
                            :data="servSysBuild"
                            list-type="picture-card"
                            :limit=limitCount
                            :file-list="servSysOperFile"
                            :headers="headers"
                            :on-change="handleChangeServSysOper"
                            :on-preview="handlePictureCardPreviewServSysOper"
                            :on-success="handSuccessServSysOper"
                            :before-upload="handleBeforePictureUpload"
                            :on-remove="handleRemoveServSysOper">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                        </el-col>
                        <el-col :span="8">
                            <div class="upload-tip">
                                注意事项：<br>
                                合同附件支持.pdf格式
                            </div>
                        </el-col>
                    </el-form-item>
                </template>
            </el-col>
            <el-col :span="10" :offset="1">
                <template v-if="stepData2.servSysOperType == 2">
                    <el-form-item label="委托机构名称：" prop="servSysOperName" >
                        <el-input v-model="stepData2.servSysOperName"></el-input>
                    </el-form-item>
                </template>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="10">
                <el-form-item label="备份系统服务部署方式：" prop="entInfoSyses[4].deployMode">
                    <el-select v-model="stepData2.entInfoSyses[4].deployMode" placeholder="请选择">
                        <el-option label="本地部署" :value="1"></el-option>
                        <el-option label="云部署"   :value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="10" :offset="1">
                <template v-if="stepData2.entInfoSyses[4].deployMode == 1">
                    <el-form-item label="备份系统所在地：" prop="entInfoSyses[4].deployAddrCounty">
                        <el-cascader v-model="sysBackArea" :options="optionsArea" @change="handleChangeArea($event,4)"></el-cascader>
                    </el-form-item>
                    <el-form-item label="详细地址：" prop="entInfoSyses[4].deployAddr">
                        <el-input v-model="stepData2.entInfoSyses[4].deployAddr"></el-input>
                    </el-form-item>
                </template>
                <template v-else-if="stepData2.entInfoSyses[4].deployMode == 2">
                    <el-form-item label="云服务商名称：" prop="entInfoSyses[4].name" >
                        <el-input v-model="stepData2.entInfoSyses[4].name"></el-input>
                    </el-form-item>
                </template>
            </el-col>
        </el-row>
        <div class="btn_group">
            <el-button size="medium" type="primary" @click="submitForm(1)">保存</el-button>
            <el-button size="medium" type="primary" @click="submitForm(0)">上一页</el-button>
            <el-button size="medium" type="primary" @click="submitForm(2)">下一页</el-button>
        </div>
    </el-form>
</template>

<script>
import {enterpriseAuthNew2,registerArea,enterpriseInfoNewStep2} from "@/api/enterpriseManagement";
import {UPLOAD} from "@/api/api"
export default {
    name:"step2",
    data(){
        return {
            stepData2: {
                entInfoSyses:[
                    {'sysType':1,'deployMode':'','deployAddrProvince':'','deployAddrCity':'','deployAddrCounty':'','deployAddr':'','name':'','ipPort':''},
                    {'sysType':2,'deployMode':'','deployAddrProvince':'','deployAddrCity':'','deployAddrCounty':'','deployAddr':'','name':''},
                    {'sysType':3,'deployMode':'','deployAddrProvince':'','deployAddrCity':'','deployAddrCounty':'','deployAddr':'','name':''},
                    {'sysType':4,'deployMode':'','deployAddrProvince':'','deployAddrCity':'','deployAddrCounty':'','deployAddr':'','name':''},
                    {'sysType':5,'deployMode':'','deployAddrProvince':'','deployAddrCity':'','deployAddrCounty':'','deployAddr':'','name':''},
                ],
                servSysBuildType:'',		        //服务系统建设，建设类型[枚举值: 1自营 2委托]
                servSysBuildName:'',			    //服务系统建设委托机构名称
                servSysBuildContractFileRid:"",		//服务系统建设合同
                servSysBuildContractFileUrl:"",		//服务系统建设合同--url
                servSysOperType:'',		            //服务系统运营类型[枚举值: 1自营 2委托]	
                servSysOperName:'',		            //服务系统运营委托机构名称
                servSysOperContractFileRid:"",		//服务系统运营合同
                servSysOperContractFileUrl:'',      //服务系统运营合同--url
            },
            regSysArea:[],                      //注册系统所在地
            regDataArea:[],                     //注册数据所在地
            regDataBackArea:[],                 //注册备份数据所在地
            analysisSysArea:[],                 //解析系统所在地
            sysBackArea:[],                     //备份系统所在地
            rules: {
                "entInfoSyses[0].deployMode": [
                {required: true, message: '请选择注册系统部署方式', trigger: "change"},
                ],
                "entInfoSyses[0].deployAddr": [
                {required: true, message: '请输入详细地址', trigger: 'blur'},
                {min: 1, max: 20, message: '长度在 1 到 30 个字符', trigger: 'blur'}
                ],
                "entInfoSyses[0].name": [
                {required: true, message: '请输入云服务商名称', trigger: 'blur'},
                {min: 1, max: 20, message: '长度在 1 到 30 个字符', trigger: 'blur'}
                ],
                "entInfoSyses[0].deployAddrCounty":[
                    {required: true, message: '请选择所在地', trigger: "change"},
                ],

                "entInfoSyses[1].deployMode": [
                {required: true, message: '请选择注册数据部署方式', trigger: "change"},
                ],
                "entInfoSyses[1].deployAddr": [
                {required: true, message: '请输入详细地址', trigger: 'blur'},
                {min: 1, max: 20, message: '长度在 1 到 30 个字符', trigger: 'blur'}
                ],
                "entInfoSyses[1].name": [
                {required: true, message: '请输入云服务商名称', trigger: 'blur'},
                {min: 1, max: 20, message: '长度在 1 到 30 个字符', trigger: 'blur'}
                ],
                "entInfoSyses[1].deployAddrCounty":[
                    {required: true, message: '请选择所在地', trigger: "change"},
                ],

                "entInfoSyses[2].deployMode": [
                {required: true, message: '请选择注册备份数据部署方式', trigger: "change"},
                ],
                "entInfoSyses[2].deployAddr": [
                {required: true, message: '请输入详细地址', trigger: 'blur'},
                {min: 1, max: 20, message: '长度在 1 到 30 个字符', trigger: 'blur'}
                ],
                "entInfoSyses[2].name": [
                {required: true, message: '请输入云服务商名称', trigger: 'blur'},
                {min: 1, max: 20, message: '长度在 1 到 30 个字符', trigger: 'blur'}
                ],
                "entInfoSyses[2].deployAddrCounty":[
                    {required: true, message: '请选择所在地', trigger: "change"},
                ],

                "entInfoSyses[3].deployMode": [
                {required: true, message: '请选择解析系统部署方式', trigger: "change"},
                ],
                "entInfoSyses[3].deployAddr": [
                {required: true, message: '请输入详细地址', trigger: 'blur'},
                {min: 1, max: 20, message: '长度在 1 到 30 个字符', trigger: 'blur'}
                ],
                "entInfoSyses[3].name": [
                {required: true, message: '请输入云服务商名称', trigger: 'blur'},
                {min: 1, max: 20, message: '长度在 1 到 30 个字符', trigger: 'blur'}
                ],
                "entInfoSyses[3].deployAddrCounty":[
                    {required: true, message: '请选择所在地', trigger: "change"},
                ],

                servSysBuildType:[
                    {required: true, message: '服务系统建设类型', trigger: "change"},
                ],
                servSysOperType:[
                    {required: true, message: '服务系统运营类型', trigger: "change"},
                ]
            },
            limitCount: 1,
            dialogVisible: false,
            dialogImageUrl: '',
            hideServSysBuild:false,
            hideServSysOper:false,
            servSysOperFile:[],
            servSysBuildFile:[],
            action: UPLOAD,
            servSysBuild: {
                bizType: 'BUILD_ID',
                fileName: '',
                sequence: 0,
                url: ''
            },
            optionsArea:[],                 //省市区联级下拉--tree格式
            aAreaList:{}                    //省市区数据-对象格式
        }
    },
    computed: {
        headers() {
            return {
                token: 'Bearer ' + this.$db.get("TOKEN", ""),
                tenant: this.$db.get("TENANT", "") || "",
                Authorization: `Basic ${this.$Base64.encode(`${process.env.VUE_APP_CLIENT_ID}:${process.env.VUE_APP_CLIENT_SECRET}`)}`
            };
        },
    },
    mounted() {
        this.getAreaAll()
        this.getEnterpriseInfo()
    },
    methods: {
        getEnterpriseInfo(){
            const code = `${this.$Base64.decode(this.$db.get('TENANT'))}` || null
            if(code)
            {
                enterpriseInfoNewStep2(code).then(res => {
                    if(res.data.data.entInfoSyses.length == 0)
                    {
                        return
                    }
                    this.stepData2 = res.data.data
                    if(this.stepData2.servSysBuildContractFileUrl)
                    {
                        this.servSysBuildFile = [{name: this.stepData2.servSysBuildContractFileUrl, url: this.stepData2.servSysBuildContractFileUrl}]
                        this.hideServSysBuild = true
                    }
                    if(this.stepData2.servSysOperContractFileUrl)
                    {
                        this.servSysOperFile = [{name: this.stepData2.servSysOperContractFileUrl, url: this.stepData2.servSysOperContractFileUrl}]
                        this.hideServSysOper = true
                    }
                    if(this.stepData2.entInfoSyses[0].deployMode == 1) {
                        this.regSysArea = [this.stepData2.entInfoSyses[0].deployAddrProvince,this.stepData2.entInfoSyses[0].deployAddrCity,this.stepData2.entInfoSyses[0].deployAddrCounty||null]
                    }
                    if(this.stepData2.entInfoSyses[1].deployMode == 1) {
                        this.regDataArea = [this.stepData2.entInfoSyses[1].deployAddrProvince,this.stepData2.entInfoSyses[1].deployAddrCity,this.stepData2.entInfoSyses[1].deployAddrCounty||null]
                    }
                    if(this.stepData2.entInfoSyses[2].deployMode == 1) {
                        this.regDataBackArea = [this.stepData2.entInfoSyses[2].deployAddrProvince,this.stepData2.entInfoSyses[2].deployAddrCity,this.stepData2.entInfoSyses[2].deployAddrCounty||null]
                    }
                    if(this.stepData2.entInfoSyses[3].deployMode == 1) {
                        this.analysisSysArea = [this.stepData2.entInfoSyses[3].deployAddrProvince,this.stepData2.entInfoSyses[3].deployAddrCity,this.stepData2.entInfoSyses[3].deployAddrCounty||null]
                    }
                    if(this.stepData2.entInfoSyses[4].deployMode == 1 && this.stepData2.entInfoSyses[4].deployAddrProvince) {
                        this.sysBackArea = [this.stepData2.entInfoSyses[4].deployAddrProvince,this.stepData2.entInfoSyses[4].deployAddrCity,this.stepData2.entInfoSyses[4].deployAddrCounty||null]
                    }
                })
            }
            
        },
        //获取省市区--新
        getAreaAll() {
            return registerArea().then((res) => {
                this.aAreaList = res?.data?.data ? res.data.data:{}
                for (const key in this.aAreaList[86]) {
                    if (Object.hasOwnProperty.call(this.aAreaList[86], key)) {
                        const element = this.aAreaList[86][key];
                        this.optionsArea.push({value:key,label:element})
                    }
                }
                for (let i = 0; i < this.optionsArea.length; i++) {
                    const node = this.optionsArea[i];
                    node.children = this.formatArea(this.aAreaList[node.value])
                }
            })
        },
        //递归深度优先处理children
        formatArea(option){
            let children = []
            for (const key in option) {
                if (Object.hasOwnProperty.call(option, key)) {
                    const element2 = option[key];
                    if(this.aAreaList[key]){
                        children.push({
                            value:key,
                            label:element2,
                            children : this.formatArea(this.aAreaList[key])
                        }) 
                    } else {
                        children.push({value:key,label:element2})
                    }
                }
            }
            return children
        },
        handleChangeArea(area,num){
            console.log(area,num);
            this.stepData2.entInfoSyses[num].deployAddrProvince = area[0]
            this.stepData2.entInfoSyses[num].deployAddrCity = area[1]
            if(area[2])
            this.stepData2.entInfoSyses[num].deployAddrCounty = area[2]
        },
        //点击提交检验
        submitForm(type) {
            this.$refs.step2.validate((valid) => {
                if (valid) {
                    this.saveSubmit(type);
                } else {
                    return false;
                }
            });
        },
        //保存提交并下一步
        saveSubmit(type) {
            this.stepData2.code = `${this.$Base64.decode(this.$db.get('TENANT'))}`;
            this.stepData2.currentPage = type
            enterpriseAuthNew2(this.stepData2).then(response => {
                const res = response.data;
                if (res.data) {
                    this.$message({
                        message: "操作成功",
                        type: "success"
                    });
                    // this.$refs.step1.resetFields();
                    this.$emit('child-event','step'+parseInt(type+1))
                    
                }
            })
        },
        handleBeforePictureUpload(file) {
            const isLt1M = file.size / 1024 / 1024 < 5;
            const fileType = ['application/pdf']
            const isJPG = fileType.indexOf(file.type) != -1

            if (!isJPG) {
                this.$message.error('上传图片只能是 PDF 格式!');
            }
            if (!isLt1M) {
                this.$message.error("上传图片大小不能超过 5MB!");
            }
            return isJPG && isLt1M;
        },
        //建设
        handleChangeServSysBuild(files, fileList) {
            this.hideServSysBuild = fileList.length >= this.limitCount;
        },
        handleRemoveServSysBuild(file, fileList) {
            this.stepData2.servSysBuildContractFileRid = ''
            this.servSysBuildFile = fileList
            this.$refs.step2.validateField('servSysBuildContractFileRid')
            this.hideServSysBuild = fileList.length >= this.limitCount;
        },
        handlePictureCardPreviewServSysBuild(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handSuccessServSysBuild(file) {
            this.stepData2.servSysBuildContractFileRid = file.data.idisResult
            this.stepData2.servSysBuildContractFileUrl = file.data.url
            this.servSysBuildFile.push({name: file.data.filename, url: file.data.url, bizType: file.data.bizType})
            this.$refs.step2.validateField('servSysBuildContractFileRid')
        },
        //运营
        handleChangeServSysOper(files, fileList) {
            this.hideServSysOper = fileList.length >= this.limitCount;
        },
        handleRemoveServSysOper(file, fileList) {
            this.stepData2.servSysOperContractFileRid = ''
            this.servSysOperFile = fileList
            this.$refs.step2.validateField('servSysOperContractFileRid')
            this.hideServSysOper = fileList.length >= this.limitCount;
        },
        handlePictureCardPreviewServSysOper(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handSuccessServSysOper(file) {
            this.stepData2.servSysOperContractFileRid = file.data.idisResult
            this.stepData2.servSysOperContractFileUrl = file.data.url
            this.servSysOperFile.push({name: file.data.filename, url: file.data.url, bizType: file.data.bizType})
            this.$refs.step2.validateField('servSysOperContractFileRid')
        },
    }
}
</script>

<style lang="scss" scoped>
.el-select {
    // display: inline-block;
    // position: relative;
    width: 100%;
}
.el-cascader {
    width: 100%;
}
</style>