<template>
    <div class="family-tree">
        <el-button type="plain" size="small" @click="goBackToIndex">返回上一层</el-button>
        <div>
            <div v-for="(generation, index) in familyData" :key="index" class="generation"
                :class="`generation-${index + 1}`">
                <div v-for="member in generation" :key="member.idCard" :class="member.name !== '空气人' ? 'member' : ''"
                    :ref="`member-${member.idCard}`" @click="handleClick(member)">
                    <div v-if="member.name !== '空气人'">
                        <el-tooltip effect="dark" placement="top" v-if="member.name !== '虚拟成员'">
                            <template slot="content">
                                <div class="toop_item">
                                    <span>姓名：</span>
                                    <span>{{ member.name }}</span>
                                </div>
                                <div class="toop_item">
                                    <span>关系：</span>
                                    <span>{{ member.callName }}</span>
                                </div>
                                <div class="toop_item">
                                    <span>年龄：</span>
                                    <span>{{ member.age }}</span>
                                </div>
                                <div class="toop_item">
                                    <span>性别：</span>
                                    <span v-if="member.gender == 'M'">男</span>
                                    <span v-if="member.gender == 'F'">女</span>
                                </div>
                                <div class="toop_item">
                                    <span>身份证号：</span>
                                    <span>{{ member.idCard }}</span>
                                </div>
                                <div class="toop_item">
                                    <span>存款：</span>
                                    <span>{{ member.depositBalance }}</span>
                                </div>
                                <div class="toop_item">
                                    <span>贷款：</span>
                                    <span v-if="member.loanBalance">{{ member.loanBalance }},{{ member.loanManager }}</span>
                                </div>
                            </template>
                            <div>
                                <div class="item_topM" v-if="member.gender == 'M'">
                                    <img src="../../../../../../assets/images/iconPark-boy.svg" alt="" class="member_icon">
                                    <div>{{ member.callName }}</div>
                                </div>
                                <div class="item_topF" v-if="member.gender == 'F'">
                                    <img src="../../../../../../assets/images/iconPark-girl.svg" alt="" class="member_icon">
                                    <div>{{ member.callName }}</div>
                                </div>
                                <div class="item_name">{{ member.name }}</div>
                            </div>
                        </el-tooltip>

                        <div v-if="member.name == '虚拟成员'">
                            <div class="item_topM">{{ member.callName }}</div>
                            <div class="item_name">{{ member.name }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <svg class="connectors" :width="svgWidth" :height="svgHeight" ref="svgElement">
                <path v-for="(connector, index) in connectors" :key="index" :d="connector.path" stroke="rgb(96,98,102)"
                    storke-width="2" fill="none" />
            </svg>

        </div>


        <el-drawer title="操作栏" :visible.sync="drawer" :direction="direction" size="23%" :before-close="handleCloseDrawer">
            <div class="drawer_main" v-if="drawerStatus == 'home'">
                <div class="li_box">
                    <div class="icon_box" @click="handleGoView">
                        <div class="drawer_icon"><i class="el-icon-edit-outline"></i></div>
                        <div class="drawer_text">编辑资料</div>
                    </div>
                    <div class="icon_box" @click="handleGoView">
                        <div class="drawer_icon"><i class="el-icon-tickets"></i></div>
                        <div class="drawer_text">查看资料</div>
                    </div>
                </div>
                <div class="li_box">
                    <div class="icon_box" @click="handleClickAdd">
                        <div class="drawer_icon"><i class="el-icon-circle-plus-outline"></i></div>
                        <div class="drawer_text">添加关系</div>
                    </div>
                    <div class="icon_box" @click="handleDelect">
                        <div class="drawer_icon"><i class="el-icon-delete"></i></div>
                        <div class="drawer_text">解除关系</div>
                    </div>
                </div>
                <div class="li_box">
                    <div class="icon_box" @click="handleClickChangeView">
                        <div class="drawer_icon"><i class="el-icon-view"></i></div>
                        <div class="drawer_text">跳转该视角</div>
                    </div>
                    <div class="icon_box" @click="handleClickAddZf"
                        v-if="isHeadAdmin || isPublic || isPrivate || isHeadOps || isBranchAdmin">
                        <div class="drawer_icon"><i class="el-icon-view"></i></div>
                        <div class="drawer_text">添加走访</div>
                    </div>
                </div>
            </div>
            <div class="drawer_main" v-if="drawerStatus == 'add'">
                <el-form ref="addForm" :model="addForm" :rules="addRule" class="addForm" label-width="78px">
                    <el-row :gutter="24">
                        <el-form-item label="姓名" prop="name" label-width="">
                            <el-input v-model="addForm.name"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row :gutter="24">
                        <el-form-item label="关系" prop="relation">
                            <el-select v-model="addForm.relation" @change="handleRelation(addForm.relation)">
                                <el-option v-for="(item, index) in gxList" :key="index" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-row>
                    <el-row :gutter="24">
                        <el-form-item label="身份证号" prop="idCard">
                            <el-input v-model="addForm.idCard" @blur="handleBlurIdCard(addForm.idCard)"
                                ref="inputIdCard"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row :gutter="24">
                        <el-form-item label="出生日期" prop="birthDay">
                            <el-date-picker v-model="addForm.birthDay" type="date"
                                value-format="yyyy-MM-dd"></el-date-picker>
                        </el-form-item>
                    </el-row>

                </el-form>
                <div class="addFormFotter">
                    <el-button type="primary" @click="handleAddCommit">确定</el-button>
                    <el-button @click="handleAddCancle">取消</el-button>
                </div>
            </div>
        </el-drawer>
        <el-dialog title="添加走访" :visible.sync="zfVisible" width="25%" :before-close="handleCloseZf" class="zfDialog">
            <el-form :model="formObj" :rules="formRules" ref="formObj" class="my-form">
                <el-form-item label="" prop="campaignId" label-width="50px">
                    <el-select style="width: 300px" v-model="formObj.campaignId" placeholder="请选择任务" filterable>
                        <el-option v-for="item in taskOptions" :key="item.value" :label="item.label" :value="item.value">{{
                            item.label }}</el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="person-footer">
                <el-button @click="handleCloseZf">取消</el-button>
                <el-button type="primary" @click="handlZfCommit" class="commit_btn">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getFamilyTreeByIdCard, addRelatePerson, removePerson } from '@/api/system/familyMember.js'
import { getCurrentExistTask } from "@/api/system/grouplist";
import { addAppointCustCamp } from '@/api/grid/mycustomer.js'
import { getInfoByCustIdc } from '@/api/system/listByRetailKeywords.js'
import { Message } from 'element-ui'
import { uid } from '@/utils'
import { mapGetters } from 'vuex'
export default {
    // components: {
    //     FamilyMember
    // },
    data() {
        var validateCustIdc = (rule, value, callback) => {
            if (!value?.trim()) {
                return callback(new Error('请输入身份证号码'))
            }
            const regex = /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
            if (!regex.test(value)) {
                callback(new Error('请输入正确的身份证号码'))

            } else {
                let _this = this
                let nowGender = parseInt(value[16])
                if (_this.addForm.relation == 'spouse') {

                    if (_this.selectGender == 'F') {
                        if (nowGender % 2 != 0) {
                            callback()
                        } else {
                            callback(new Error('请输入男性的身份证号码'))

                        }
                    } else {
                        if (nowGender % 2 != 0) {
                            callback(new Error('请输入女性的身份证号码'))
                        } else {
                            callback()
                        }
                    }
                } else if (_this.addForm.relation == 'father' || _this.addForm.relation == 'son' ||
                    _this.addForm.relation == 'GG' || _this.addForm.relation == 'DD' || _this.addForm.relation == 'grandson') {

                    if (nowGender % 2 != 0) {
                        callback()
                    } else {
                        callback(new Error('请输入男性的身份证号码'))

                    }
                } else if (_this.addForm.relation == 'mother' || _this.addForm.relation == 'doughter' ||
                    _this.addForm.relation == 'JJ' || _this.addForm.relation == 'MM' || _this.addForm.relation == 'granddoughter') {
                    if (nowGender % 2 != 0) {
                        callback(new Error('请输入女性的身份证号码'))
                    } else {
                        callback()
                    }

                } else {
                    callback()
                }

            }

        }
        return {
            zfVisible: false,
            formObj: {
                campaignId: ''
            },
            taskOptions: [],
            formRules: {
                campaignId: [
                    {
                        required: true,
                        message: '任务不能为空',
                        trigger: 'blur'
                    },
                ]
            },
            sidebarWidth: 0,
            familyData: [],
            familyArr: [],
            svgWidth: 1000,
            svgHeight: 600,
            connectors: [],
            drawer: false,
            direction: 'rtl',
            drawerStatus: 'home',
            gxList: [],
            addForm: {
                name: '',
                idCard: '',
                relation: '',
                birthDay: ''
            },
            addRule: {
                name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                idCard: [{ required: true, validator: validateCustIdc, trigger: 'blur' }],
                relation: [{ required: true, message: '请选择', trigger: 'change' }],
            },
            card: '',
            gender: '',
            selectGender: '',
            isXnJd: false,
        }
    },
    computed: {
        ...mapGetters(['roles']),
        isHeadAdmin() {
            return this.roles.includes('headAdmin')
        },
        //公司部
        isPublic() {
            return this.roles.includes('headPublic')
        },
        //零售部
        isPrivate() {
            return this.roles.includes('headPrivate')
        },
        //运管部
        isHeadOps() {
            return this.roles.includes('headOps')
        },
        //支行
        isBranchAdmin() {
            return this.roles.includes('branchAdmin')
        },
        // 网点主任
        isOutletAdmin() {
            return this.roles.includes('outletAdmin')
        },
        // 客户经理
        isCommonManager() {
            return this.roles.includes('commonManager')
        },
        pageId() {
            return this.$route.query.custIdc
        }
    },
    created() {

    },
    async mounted() {
        this.sidebarWidth = document.querySelector('.sidebar-container').offsetWidth
        await this.initFamilyTreeByIdCard()
    },
    methods: {
        searchCurrentExistTask() {
            const params = {
                custType: 0
            }
            getCurrentExistTask(params).then(res => {
                if (res.code == 200) {
                    this.taskOptions = res.data.map(item => {
                        return {
                            label: item.campaignName,
                            value: item.campaignId,
                        }
                    });
                }
            })
        },
        findNodeById(tree, id) {
            for (let node of tree) {
                if (node.idCard === id) {
                    return node
                }
                if (node.children && node.children.length > 0) {
                    const result = this.findNodeById(node.children, id)
                    if (result) {
                        return result
                    }
                }
            }
            return null
        },
        getTreeLeve(tree) {

            if (!tree || !tree.children || tree.children.length === 0) {
                return 1
            }
            let maxChildDepth = 0
            for (const child of tree.children) {
                const childDepth = this.getTreeLeve(child)
                maxChildDepth = Math.max(maxChildDepth, childDepth)
            }
            return maxChildDepth + 1
        },
        initFamilyTreeByIdCard(card) {

            let id = card ? card : this.pageId
            getFamilyTreeByIdCard(id).then(res => {
                let spouseList = res.spouseFamily
                let mainList = res.mainFamily
                const selfStr = this.findNodeById(res.mainFamily, this.pageId)
                let spouseStr = {}

                if (selfStr.spouse && res.spouseFamily) {

                    spouseStr = this.findNodeById(res.spouseFamily, selfStr.spouse.idCard)
                }
                if (spouseStr) {

                    if (selfStr.level > spouseStr.level) {
                        if (selfStr.level == 2) {
                            res.spouseFamily = []

                            res.spouseFamily.push({

                                name: '',
                                level: 1,
                                idCard: '',
                                children: spouseList.map(item => {

                                    return {
                                        callName: item.callName,
                                        name: item.name,
                                        level: 2,
                                        idCard: item.idCard,
                                        gender: item.gender,
                                        age: item.age,
                                        depositBalance: item.depositBalance,
                                        loanBalance: item.loanBalance,
                                        loanManager: item.loanManager,
                                    }
                                })
                            })

                        } else if (selfStr.level == 3) {
                            res.spouseFamily = []
                            res.spouseFamily.push({

                                name: '',
                                level: 1,
                                idCard: '',
                                children: [{
                                    name: '',
                                    level: 2,
                                    idCard: '',
                                    children: spouseList.map(item => {
                                        return {
                                            callName: item.callName,
                                            name: item.name,
                                            level: 3,
                                            idCard: item.idCard,
                                            gender: item.gender,
                                            age: item.age,
                                            depositBalance: item.depositBalance,
                                            loanBalance: item.loanBalance,
                                            loanManager: item.loanManager,
                                        }
                                    })
                                }]
                            })
                        }
                        res.mainFamily.forEach(item => {
                            if (item.spouse) {
                                item.spouse.level = 1
                                res.mainFamily.push(item.spouse)
                            }

                        })
                    } else if (selfStr.level < spouseStr.level) {
                        res.mainFamily = []
                        res.mainFamily.push({
                            name: '',
                            level: 1,
                            idCard: '',
                            children: mainList.map(item => {
                                return {
                                    callName: item.callName,
                                    name: item.name,
                                    level: 2,
                                    idCard: item.idCard,
                                    gender: item.gender,
                                    spouse: item.spouse,
                                    sibling: item.sibling,
                                    age: item.age,
                                    depositBalance: item.depositBalance,
                                    loanBalance: item.loanBalance,
                                    loanManager: item.loanManager,
                                }
                            })
                        })
                        res.spouseFamily.forEach(item => {
                            if (item.spouse) {
                                item.spouse.level = 2
                                res.spouseFamily.push(item.spouse)
                            }

                        })
                    } else {

                        res.mainFamily.forEach(item => {
                            if (item.spouse) {
                                item.spouse.level = 1
                                res.mainFamily.push(item.spouse)
                            }

                        })
                    }
                }

                //  item.children = item.children.flatMap(v=>{
                //                     const result = []
                //                     result.push(v)
                //                     return result
                //                 })

                //当第二层节点有配偶，无子女的时候无法连线，古在此添加虚拟子节点

                const mainObjs = { id: '', children: res.mainFamily }
                const spouseObjs = { id: '', children: res.spouseFamily }
                let mainLevel = this.getTreeLeve(mainObjs)
                let spouseLevel = this.getTreeLeve(spouseObjs)
                if ((mainLevel == 3 && spouseLevel == 3 || (mainLevel == 3 && spouseLevel == 1))) {
                    res.mainFamily.forEach(item => {
                        if (item.children) {
                            item.children.forEach(el => {

                                if (el.spouse) {
                                    el.spouse.level = 2
                                    item.children = this.transFormate(item.children)
                                }

                                if (el.spouse && !el.children) {
                                    el.children = [
                                        {
                                            name: '空气人',
                                            fatherCard: el.idCard,
                                            motherCard: el.spouse.idCard,
                                            level: 3,
                                            idCard: uid()
                                        }
                                    ]
                                }
                            })
                        }
                    })
                } else if ((mainLevel == 2 && spouseLevel == 2) || (mainLevel == 2 && spouseLevel == 1)) {
                    res.mainFamily.forEach(item => {
                        if (item.spouse) {
                            item.children = [
                                {
                                    name: '空气人',
                                    fatherCard: item.idCard,
                                    motherCard: item.spouse.idCard,
                                    level: 2,
                                    idCard: uid()
                                }
                            ]
                        }

                    })
                } else {
                    res.mainFamily.forEach(item => {
                        if (item.children) {
                            item.children.forEach(el => {

                                if (el.spouse) {
                                    el.spouse.level = 2
                                    item.children = this.transFormate(item.children)
                                }
                            })
                        }

                    })
                    res.spouseFamily.forEach(item => {
                        if (item.children) {
                            item.children.forEach(el => {
                                if (el.spouse) {
                                    el.spouse.level = 2
                                    item.children = this.transFormate(item.children)
                                }
                            })
                        }

                    })
                }


                if (res.spouseFamily) {
                    res.spouseFamily.forEach(item => {
                        // item.sibling.forEach(el => {
                        //     el.level = 1
                        //     res.spouseFamily.push(el)
                        // })
                        if (item.spouse) {
                            item.spouse.level = 1
                            res.spouseFamily.push(item.spouse)
                        }

                    })
                    res.spouseFamily.forEach(item => {
                        if (item.children) {
                            item.children.forEach(el => {
                                if (el.spouse) {
                                    el.spouse.level = 2
                                    item.children.push(el.spouse)
                                }
                            })
                        }
                    })
                }
                let mainObj = res.mainFamily ? this.groupByLevel(res.mainFamily) : {}
                let spouseObj = res.spouseFamily ? this.groupByLevel(res.spouseFamily) : {}
                //本人家族

                const [firstMainKey, firstMainValue] = Object.entries(mainObj)[0] ? Object.entries(mainObj)[0] : []
                const [secondMainKey, secondMainValue] = Object.entries(mainObj)[1] ? Object.entries(mainObj)[1] : []
                const [thirdMainKey, thisrdMainValue] = Object.entries(mainObj)[2] ? Object.entries(mainObj)[2] : []


                //配偶家族
                const [firstSpouseKey, firstSpouseValue] = Object.entries(spouseObj)[0] ? Object.entries(spouseObj)[0] : []
                const [secondSpouseKey, secondSpouseValue] = Object.entries(spouseObj)[1] ? Object.entries(spouseObj)[1] : []
                const [thirdSpouseKey, thisrdSpouseValue] = Object.entries(spouseObj)[2] ? Object.entries(spouseObj)[2] : []


                let list1 = [firstMainValue, firstSpouseValue].flat(Infinity)
                let list2 = [secondMainValue, secondSpouseValue].flat(Infinity)
                let list3 = [thisrdMainValue, thisrdSpouseValue].flat(Infinity)

                let copyList11 = list1.filter(item => item !== undefined)
                let copyList1 = copyList11.filter(item => item.idCard != '')
                let copyList22 = list2.filter(item => item !== undefined)
                let copyList2 = copyList22.filter(item => item.idCard != '')

                let copyList3 = list3.filter(item => item !== undefined)
                //let copyList3 = Array.from(new Map(copyList33.map(item=>[item.fatherCard,item])).values())

                let arr1 = copyList1.map(item => {

                    return {
                        idCard: item.idCard,
                        name: item.name,
                        callName: item.callName,
                        gender: item.gender,
                        age: item.age,
                        depositBalance: item.depositBalance,
                        loanBalance: item.loanBalance,
                        loanManager: item.loanManager,
                    }
                })
                let arr2 = copyList2.map(item => {

                    return {
                        idCard: item.idCard,
                        gender: item.gender,
                        name: item.name,
                        callName: item.callName,
                        fatherCard: item.fatherCard,
                        motherCard: item.motherCard,
                        spouseCard: item.spouseCard,
                        age: item.age,
                        depositBalance: item.depositBalance,
                        loanBalance: item.loanBalance,
                        loanManager: item.loanManager,
                    }
                })
                let arr3 = copyList3.map(item => {
                    return {
                        idCard: item.idCard,
                        gender: item.gender,
                        name: item.name,
                        callName: item.callName,
                        fatherCard: item.fatherCard,
                        motherCard: item.motherCard,
                        age: item.age,
                        depositBalance: item.depositBalance,
                        loanBalance: item.loanBalance,
                        loanManager: item.loanManager,
                    }
                })
                let arr11 = arr1.filter((item, index, self) => index === self.findIndex((t) => t.idCard === item.idCard))
                let arr22 = arr2.filter((item, index, self) => index === self.findIndex((t) => t.idCard === item.idCard))
                let arr33 = arr3.filter((item, index, self) => index === self.findIndex((t) => t.idCard === item.idCard))
                this.familyData.push(arr11)
                this.familyData.push(arr22)
                this.familyData.push(arr33)
                console.log(this.familyData, 'this.familyDatathis.familyData')
                setTimeout(() => {
                    this.calculateConnectors(this.familyData)
                }, 1000)

            })
        },
        groupByLevel(tree) {
            const result = {}
            const traverse = (nodes) => {

                nodes.forEach(node => {
                    if (!result[node.level]) {
                        result[node.level] = []
                    }
                    result[node.level].push(node)
                    if (node.children) {
                        traverse(node.children)
                    }
                })
            }
            traverse(tree)
            return result

        },
        calculateConnectors(familyData) {
            this.$nextTick(() => {
                let this_ = this
                const connectors = []
                //获取第一层成员位置信息
                let firstlist = familyData[0].map((item, index) => {

                    return {
                        idCard: item.idCard,
                        name: item.name,
                        callName: item.callName,
                        depositBalance: item.depositBalance,
                        loanBalance: item.loanBalance,
                        loanManager: item.loanManager,
                        gender: item.gender,
                        age: item.age,
                        detail: this_.$refs[`member-${item.idCard}`][0] ? this_.$refs[`member-${item.idCard}`][0].getBoundingClientRect() : ''
                    }
                })
                //获取第二层成员位置信息
                let secondList = this.familyData[1].map((item, index) => {
                    return {
                        name: item.name,
                        idCard: item.idCard,
                        callName: item.callName,
                        gender: item.gender,
                        detail: this.$refs[`member-${item.idCard}`][0] ? this.$refs[`member-${item.idCard}`][0].getBoundingClientRect() : '',
                        fatherCard: item.fatherCard,
                        motherCard: item.motherCard,
                        spouseCard: item.spouseCard,
                        age: item.age,
                        depositBalance: item.depositBalance,
                        loanBalance: item.loanBalance,
                        loanManager: item.loanManager,
                    }
                })
                //第一层到第二层的连接线
                for (let i = 0; i < firstlist.length; i++) {
                    for (let j = 0; j < secondList.length; j++) {
                        if (firstlist[i].idCard == secondList[j].fatherCard) {
                            connectors.push({ path: this.createRightAnglePath(firstlist[i].detail, secondList[j].detail) })
                        }
                        if (firstlist[i].idCard == secondList[j].motherCard) {
                            connectors.push({ path: this.createRightAnglePath(firstlist[i].detail, secondList[j].detail) })
                        }
                    }
                }
                //低二次夫妻连线
                // for(let si=0;si<secondList.length-1; si++){

                //     if(secondList[si].spouseCard == secondList[si+1].idCard){
                //         connectors.push({ path: this.createRightAnglePath(secondList[si].detail, secondList[si+1].detail) })
                //     }

                // }
                //获取第三层成员位置信息
                let thirdList = this.familyData[2].map((item, index) => {
                    return {
                        name: item.name,
                        idCard: item.idCard,
                        callName: item.callName,
                        gender: item.gender,
                        detail: this.$refs[`member-${item.idCard}`][0] ? this.$refs[`member-${item.idCard}`][0].getBoundingClientRect() : '',
                        fatherCard: item.fatherCard,
                        motherCard: item.motherCard,
                        age: item.age,
                        depositBalance: item.depositBalance,
                        loanBalance: item.loanBalance,
                        loanManager: item.loanManager,
                    }
                })

                //第二层到第三层的连接线
                for (let ii = 0; ii < secondList.length; ii++) {

                    for (let jj = 0; jj < thirdList.length; jj++) {

                        if (secondList[ii].idCard == thirdList[jj].fatherCard) {

                            connectors.push({ path: this.createRightAnglePath(secondList[ii].detail, thirdList[jj].detail) })
                        }
                        if (secondList[ii].idCard == thirdList[jj].motherCard) {
                            connectors.push({ path: this.createRightAnglePath(secondList[ii].detail, thirdList[jj].detail) })
                        }
                    }
                }
                this.connectors = connectors
            })


        },
        transFormate(data) {
            const result = []
            data.forEach(person => {
                result.push(person)
                if (person.spouse) {
                    result.push(person.spouse)
                }
            })
            return result
        },
        createRightAnglePath(startElem, endElem) {
            const startX = (startElem.left + startElem.width / 2) - this.sidebarWidth - 200
            const startY = startElem.bottom - 40
            const endX = (endElem.left + endElem.width / 2) - this.sidebarWidth - 200
            const endY = endElem.top - 40
            const midY = (startY + endY) / 2
            return `M${startX},${startY} L${startX},${midY} L${endX},${midY} L${endX},${endY}`
        },
        handleClick(item) {
            this.card = item.idCard
            if (item.gender == 'F') {
                this.gxList = [
                    {
                        label: '父亲',
                        value: 'father'
                    },
                    {
                        label: '母亲',
                        value: 'mother'
                    },
                    {
                        label: '丈夫',
                        value: 'spouse'
                    },
                    {
                        label: '儿子',
                        value: 'son'
                    },
                    {
                        label: '女儿',
                        value: 'doughter'
                    },
                    {
                        label: '哥哥',
                        value: 'GG'
                    },
                    {
                        label: '弟弟',
                        value: 'DD'
                    },
                    {
                        label: '姐姐',
                        value: 'JJ'
                    },
                    {
                        label: '妹妹',
                        value: 'MM'
                    },
                    {
                        label: '孙子',
                        value: 'grandson'
                    },
                    {
                        label: '孙女',
                        value: 'granddoughter'
                    },

                ]
            } else if (item.gender == 'M') {
                this.gxList = [
                    {
                        label: '父亲',
                        value: 'father'
                    },
                    {
                        label: '母亲',
                        value: 'mother'
                    },
                    {
                        label: '妻子',
                        value: 'spouse'
                    },
                    {
                        label: '儿子',
                        value: 'son'
                    },
                    {
                        label: '女儿',
                        value: 'doughter'
                    },
                    {
                        label: '哥哥',
                        value: 'GG'
                    },
                    {
                        label: '弟弟',
                        value: 'DD'
                    },
                    {
                        label: '姐姐',
                        value: 'JJ'
                    },
                    {
                        label: '妹妹',
                        value: 'MM'
                    },
                    {
                        label: '孙子',
                        value: 'grandson'
                    },
                    {
                        label: '孙女',
                        value: 'granddoughter'
                    },

                ]
            }
            this.selectGender = item.gender
            this.drawer = true
            if (item.name == '虚拟成员') {
                this.isXnJd = true
            } else {
                this.isXnJd = false
            }
        },
        handleClickAdd() {
            if (this.isXnJd) {
                Message.warning('当前节点为虚拟节点，不允许添加关系')
            } else {

                this.drawerStatus = 'add'
            }
        },
        handleDelect() {
            removePerson(this.card).then(res => {
                if (res.code == 200) {
                    this.drawer = false
                    Message.success('解除成功');
                    this.$emit('refshHome', '1')
                    this.initFamilyTreeByIdCard()
                }
            })
        },
        handleClickChangeView() {
            this.$emit('refshHome', '1')
            this.$router.push({ path: '/360charts/familyDetail', query: { custIdc: this.card } })
            this.initFamilyTreeByIdCard()
        },
        handleGoView() {
            let custId = `101${this.card}`
            this.$router.push({ path: '/360charts/indexcharts/', query: { custId: custId } })

        },
        handleClickAddZf() {
            this.zfVisible = true
            this.searchCurrentExistTask()
        },
        handlZfCommit() {
            const params = {
                custId: this.card,
                campaignId: this.formObj.campaignId,
                custType: 0
            }
            addAppointCustCamp(params).then(res => {
                if (res.code == 200) {
                    this.zfVisible = false
                    this.formObj.campaignId = ''
                    Message.success('添加成功!')
                }
            })

        },
        handleCloseZf() {
            this.zfVisible = false
            this.formObj.campaignId = ''
        },
        handleRelation(val) {
            this.$refs.inputIdCard.focus()
        },
        handleBlurIdCard(data) {
            let sexCode = data.charAt(16)
            this.gender = parseInt(sexCode, 10) % 2 === 0 ? 'F' : 'M'
            //年龄
            let today = new Date()
            let birthDate = new Date(data.substring(6, 10))
            this.age = today.getFullYear() - birthDate.getFullYear()
            //出生日期
            let year = data.substring(6, 10)
            let mounth = data.substring(10, 12)
            let day = data.substring(12, 14)
            let csDate = `${year}-${mounth}-${day}`

            this.addForm.birthDay = csDate
        },
        formDataPamars(json) {
            const params = []
            for (const key in json) {
                const value = json[key]
                if (value && typeof value === 'object' && !Array.isArray(value)) {
                    params.push(...Object.keys(value).map((k) => `${key}[${k}]=${encodeURIComponent(value[k])}`))
                } else if (Array.isArray(value)) {
                    value.forEach((item) => {
                        params.push(`${key}[]=${encodeURIComponent(item)}`)
                    })
                } else {
                    params.push(`${key}=${encodeURIComponent(value)}`)
                }
            }
            return params.join('&')
        },
        handleAddCommit() {
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                    const params = {
                        name: this.addForm.name,
                        idCard: this.addForm.idCard,
                        card: this.card,
                        relation: this.addForm.relation,
                        gender: this.gender,
                        age: this.age,
                        birthDay: this.addForm.birthDay
                    }
                    addRelatePerson(this.formDataPamars(params)).then(res => {
                        if (res.code == 200) {
                            this.handleAddCancle()
                            this.drawer = false
                            Message.success('添加成功');
                            this.$emit('refshHome', '1')
                            this.initFamilyTreeByIdCard()
                        }
                    })
                } else {
                    return false
                }
            })
        },
        handleAddCancle() {
            this.$refs.addForm.resetFields()
            this.drawerStatus = 'home'

        },
        handleCloseDrawer() {
            this.drawer = false
            if (this.$refs.addForm) {
                this.handleAddCancle()
            }
        },
        goBackToIndex() {
            this.$router.push(
                { path: '/customer/family' }
            )
        }
    },

};
</script>

<style lang="scss" scoped>
.family-tree {

    font-family: Arial, sans-serif;
    width: 1000px;
    margin-left: 200px;
    padding-top: 150px;
    background-color: rgb(219, 228, 241)
}

.generation {
    display: flex;
    width: 100%;
    margin-top: 60px;
}

.member {
    border-radius: 2px;
    background-color: #fff;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    width: 160px;
    height: 80px;
}



.connectors {
    position: absolute;
    top: 40px;
    left: 200px;
    pointer-events: none;
}

.generation-1 {
    width: 100%;
    justify-content: space-around;


}

.generation-2 {
    width: 100%;
    justify-content: space-around;
}

.generation-3 {
    width: 100%;
    justify-content: space-around;

}

.drawer_main {
    padding: 20px 50px;
}

.li_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.icon_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    &:hover {
        color: #4886f8;
    }
}

.drawer_icon {
    font-size: 30px;
    margin-bottom: 15px;
}

.drawer_text {
    font-size: 14px;
}

.addForm {
    ::v-deep .el-input {
        width: 200px;
    }
}

.addFormFotter {
    text-align: center;
    margin-top: 30px;
}

.member_icon {
    font-size: 40px;
}

.toop_item {
    line-height: 25px;
    font-size: 14px;
}

.item_topM {
    background-color: rgb(22, 132, 252);
    color: #fff;
    line-height: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item_topF {
    background-color: rgb(252, 102, 117);
    color: #fff;
    line-height: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item_name {
    line-height: 45px;
}

.member_icon {
    width: 20px;
}
</style>
<style>
.el-tooltip__popper.is-dark {
    transform: translate(0, -20px) !important;
}
</style>