<template>
    <div class="main_box">
        <!-- <navbar title="家庭成员"></navbar> -->
        <div class="main">
            <div class="top_btn">
                <div class="sj_btn" :class="isActived == '1' ? 'activedBtn' : ''" @click="listPerspective">列表视角</div>
                <div class="sj_btn" :class="isActived == '2' ? 'activedBtn' : ''" @click="mapPerspective">图谱视角</div>
            </div>
            <div class="main_bottom" v-if="isActived == '1'">
                <div class="main_item" v-for="(item, index) in list" :key="index">
                    <div class="item_left_box">
                        <div class="item_left">
                            <div class="item_left_top_man" v-if="item.gender == 'M'">
                                <img src="../../images/home/man.png" alt="" style="width: 30px;height: 30px;">

                            </div>
                            <div class="item_left_top_women" v-if="item.gender == 'F'">
                                <img src="../../images/home/woman.png" alt="" style="width: 30px;height: 30px;">
                            </div>
                            <div class="item_left_bottom">{{ item.callName }}</div>
                        </div>
                        <div class="item_middle">
                            <div class="item_name">{{ item.name }}</div>
                            <div class="item_other">
                                <span>身份证号：</span>
                                <span>{{ item.idCard }}</span>
                            </div>
                            <div class="item_other">
                                <span>年龄：</span>
                                <span>{{ item.age }}</span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="viewCust" @click="handleView(item)">查看客户详情</div>
                        <div class="addCust" @click="handleAdd(item)">添加成员</div>
                    </div>
                </div>
            </div>
            <div class="tree_box">
                <div class="family-tree" v-if="isActived == '2'">

                    <div v-for="(generation, index) in familyData" :key="index" class="generation" ref="tree"
                        :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 !== '空气人'">
                                <div v-if="member.name !== '虚拟成员'">
                                    <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>
                                </div>

                                <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>
            </div>

            <van-dialog v-model="czShow" title="操作栏">
                <div class="drawer_main" v-if="czStatus == 'home'">
                    <div class="li_box">
                        <div class="icon_box" @click="handleGoView">
                            <div class="drawer_icon"> <van-icon name="edit"></van-icon></div>
                            <div class="drawer_text">编辑资料</div>
                        </div>
                        <div class="icon_box" @click="handleGoView">
                            <div class="drawer_icon"> <van-icon name="closed-eye"></van-icon></div>
                            <div class="drawer_text">查看资料</div>
                        </div>
                    </div>
                    <div class="li_box">
                        <div class="icon_box" @click="handleClickAdd">
                            <div class="drawer_icon"> <van-icon name="add"></van-icon></div>
                            <div class="drawer_text">添加关系</div>
                        </div>
                        <div class="icon_box" @click="handleDelect">
                            <div class="drawer_icon"> <van-icon name="delete"></van-icon></div>
                            <div class="drawer_text">解除关系</div>
                        </div>
                    </div>
                    <div class="li_box">
                        <div class="icon_box" @click="handleClickChangeView">
                            <div class="drawer_icon"> <van-icon name="closed-eye"></van-icon></div>
                            <div class="drawer_text">跳转该视角</div>
                        </div>
                        <!-- <div class="icon_box" @click="handleClickAddZf"
                            v-if="isHeadAdmin || isPublic || isPrivate || isHeadOps || isBranchAdmin">
                            <div class="drawer_icon"> <van-icon name="add"></van-icon></div>
                            <div class="drawer_text">添加走访</div>
                        </div> -->
                    </div>
                    <div class="footer_btn">
                        <van-button @click="handleCancle">取消</van-button>
                    </div>
                </div>
                <div class="drawer_main" v-if="czStatus == 'add'">
                    <van-form ref="form">
                        <van-field v-model="addForm.name" maxlength="18" label="姓名" name="name" placeholder="请输入"
                            class="required-field" :rules="[{ required: true, message: '姓名不能为空' }]"></van-field>
                        <van-field v-model="relationText" label="关系" is-link readonly placeholder="请选择"
                            class="required-field" :rules="[{ required: true, message: '请选择关系' }]"
                            @click="showPicker = true"></van-field>
                        <van-popup v-model="showPicker" position="bottom" :style="{ height: '62%' }">
                            <van-picker show-toolbar :columns="gxList" @cancle="showPicker = false" :value-key="'label'"
                                @confirm="onConfirm" @cancel="showPicker = false"></van-picker>
                        </van-popup>
                        <van-field v-model="addForm.idCard" maxlength="18" label="身份证号" name="idCard" class="required-field"
                            :rules="[{ required: true, message: '身份证号不能为空' }, { required: true, validator: validateCustIdc }]"
                            placeholder="请输入" @blur="handleBlurIdCard(addForm.idCard)"></van-field>
                        <van-field v-model="addForm.birthDay" is-link readonly label="出生日期" name="birthDay"
                            placeholder="请选择" @click="showDatePicker = true"></van-field>
                        <van-popup v-model:show="showDatePicker" position="bottom">
                            <van-datetime-picker v-model="currentDate" :min-date="minDate" :max-date="maxDate" type="date"
                                title="选择日期" @confirm="onConfirmDate"
                                @cancel="showDatePicker = false"></van-datetime-picker>
                        </van-popup>
                    </van-form>
                    <div class="addFormFotter">
                        <van-button type="primary" @click="handleAddCommit">确定</van-button>
                        <van-button @click="handleAddCancle">取消</van-button>
                    </div>
                </div>

            </van-dialog>
        </div>
    </div>
</template>

<script>
import navbar from '../../components/navbar/navbar.vue';
import { uid } from './utils'
import { listByIdCard, getFamilyTreeByIdCard, addRelatePerson, removePerson } from "@/service/api/custome";
import {
    Icon,
    Button,
    Search,
    List,
    Form,
    Field,
    Popup,
    DatetimePicker,
    Picker,

} from 'vant';
export default {
    props:{
        childIdCard: {
            type: String,
            default: "",   
        },
    },
    data() {
        return {
            list: [],
            tagName: '',
            isActived: '1',
            sidebarWidth: 0,
            familyData: [],
            familyArr: [],
            svgWidth: 1000,
            svgHeight: 800,
            connectors: [],
            czShow: false,
            gxList: [],
            selectGender: '',
            isXnJd: false,
            czStatus: 'home',
            isHeadAdmin: false,
            isPublic: false,
            isPrivate: false,
            isHeadOps: false,
            isBranchAdmin: false,
            isOutletAdmin: false,
            isCommonManager: false,
            addForm: {
                name: '',
                idCard: '',
                relation: '',
                birthDay: ''
            },
            showPicker: false,
            showDatePicker: false,
            currentDate: new Date(),
            minDate: new Date(1900, 0, 1),
            maxDate: new Date(),
            relationText: '',
            addRelate: ''
        }
    },
    components: {
        navbar: navbar,
        VanIcon: Icon,
        VanButton: Button,
        VanSearch: Search,
        VanList: List,
        VanForm: Form,
        VanField: Field,
        VanPopup: Popup,
        VanDatetimePicker: DatetimePicker,
        VanPicker: Picker,

    },
    created() {
        let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        if (userInfo.roles.includes('headAdmin')) {
            this.isHeadAdmin = true
        } else if (userInfo.roles.includes('headPublic')) {
            this.isPublic = true
        } else if (userInfo.roles.includes('headPrivate')) {
            this.isPrivate = true
            this.custPattern = '0'
        } else if (userInfo.roles.includes('headOps')) {
            this.isHeadOps = true
        } else if (userInfo.roles.includes('branchAdmin')) {
            this.isBranchAdmin = true
        } else if (userInfo.roles.includes('outletAdmin')) {
            this.isOutletAdmin = true
        } else if (userInfo.roles.includes('commonManager')) {
            this.isCommonManager = true
        }
        this.init()

    },
    methods: {
        validateCustIdc(value) {
            if (!value?.trim()) {
                this.$toast('请输入正确的身份证号码')
                this.addForm.idCard = ''
                return
            }
            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)) {
                this.$toast('请输入正确的身份证号码')
                this.addForm.idCard = ''
                return

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

                    if (_this.selectGender == 'F') {
                        if (nowGender % 2 != 0) {
                            return
                        } else {
                            this.$toast('请输入男性的身份证号码')
                            this.addForm.idCard = ''
                            return

                        }
                    } else {
                        if (nowGender % 2 != 0) {
                            this.$toast('请输入女性的身份证号码')
                            this.addForm.idCard = ''
                            return
                        } else {
                            return
                        }
                    }
                } 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) {
                        return
                    } else {
                        this.$toast('请输入男性的身份证号码')
                        this.addForm.idCard = ''
                        return

                    }
                } 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) {
                        this.$toast('请输入女性的身份证号码')
                        this.addForm.idCard = ''
                    } else {
                        return
                    }

                } else {
                    return
                }

            }
        },
        init(card) {
            let idCard = card ? card : this.childIdCard
            listByIdCard(idCard).then(res => {
                console.log(res, 'res')
                if (res.code == 200) {
                    this.list = res.rows
                }
            })
        },
        listPerspective() {
            this.isActived = '1'
        },
        mapPerspective() {
            this.isActived = '2'
            this.initFamilyTreeByIdCard(this.card)
        },
        initFamilyTreeByIdCard(card) {

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

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

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

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

                            res.data.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.data.spouseFamily = []
                            res.data.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.data.mainFamily.forEach(item => {
                            if (item.spouse) {
                                item.spouse.level = 1
                                res.data.mainFamily.push(item.spouse)
                            }

                        })
                    } else if (selfStr.level < spouseStr.level) {
                        res.data.mainFamily = []
                        res.data.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.data.spouseFamily.forEach(item => {
                            if (item.spouse) {
                                item.spouse.level = 2
                                res.data.spouseFamily.push(item.spouse)
                            }

                        })
                    } else {

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

                        })
                    }
                }

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

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

                const mainObjs = { id: '', children: res.data.mainFamily }
                const spouseObjs = { id: '', children: res.data.spouseFamily }
                let mainLevel = this.getTreeLeve(mainObjs)
                let spouseLevel = this.getTreeLeve(spouseObjs)
                if ((mainLevel == 3 && spouseLevel == 3 || (mainLevel == 3 && spouseLevel == 1))) {
                    res.data.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.data.mainFamily.forEach(item => {
                        if (item.spouse) {
                            item.children = [
                                {
                                    name: '空气人',
                                    fatherCard: item.idCard,
                                    motherCard: item.spouse.idCard,
                                    level: 2,
                                    idCard: uid()
                                }
                            ]
                        }

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

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

                    })
                    res.data.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.data.spouseFamily) {
                    res.data.spouseFamily.forEach(item => {
                        // item.sibling.forEach(el => {
                        //     el.level = 1
                        //     res.spouseFamily.push(el)
                        // })
                        if (item.spouse) {
                            item.spouse.level = 1
                            res.data.spouseFamily.push(item.spouse)
                        }

                    })
                    res.data.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.data.mainFamily ? this.groupByLevel(res.data.mainFamily) : {}
                let spouseObj = res.data.spouseFamily ? this.groupByLevel(res.data.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)
                if (this.familyData.length > 0) {

                    this.calculateConnectors(this.familyData)
                }


            })
        },
        calculateConnectors(familyData) {
            console.log(this.$refs.tree, 'treetree')
            this.$nextTick(() => {

                let this_ = this
                const connectors = []
                //获取第一层成员位置信息
                let firstlist = familyData[0].map((item, index) => {
                    console.log(this.$refs, ' this_.$refs[`member-${item.idCard}`]')
                    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
            })


        },
        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
        },
        transFormate(data) {
            const result = []
            data.forEach(person => {
                result.push(person)
                if (person.spouse) {
                    result.push(person.spouse)
                }
            })
            return result
        },
        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

        },
        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.czShow = true
            if (item.name == '虚拟成员') {
                this.isXnJd = true
            } else {
                this.isXnJd = false
            }
        },
        handleView(item) {
            this.idCard = item.idCard
            this.handleGoView()
        },
        handleGoView() {
            let custId = `101${this.card}`
            sessionStorage.setItem('custId', custId);
            this.$router.push('/customePersonDetail')
        },
        handleAdd(item) {
            this.idCard = item.idCard
            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.addRelate = 'listView'
            this.czShow = true
            this.czStatus = 'add'
        },
        handleClickAdd() {
            if (this.isXnJd) {
                Message.warning('当前节点为虚拟节点，不允许添加关系')
            } else {
                this.addRelate = 'mapView'
                this.czStatus = 'add'
            }
        },
        handleDelect() {
            removePerson(this.card).then(res => {
                if (res.code == 200) {
                    this.czShow = false
                    this.initFamilyTreeByIdCard()
                }
            })
        },
        handleClickChangeView() {
            this.czShow = false
            this.isActived = '1'
            // this.initFamilyTreeByIdCard(this.card)

        },
        handleClickAddZf() { },
        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
        },
        onConfirm(value) {
            this.relationText = value.label
            this.addForm.relation = value.value
            this.showPicker = false
        },
        onConfirmDate(value) {
            this.addForm.birthDay = this.formatDate(value);
            this.showDatePicker = false
        },
        formatDate(date) {
            if (date.getMonth() + 1 < 10) {
                return `${date.getYear() + 1900}-0${date.getMonth() + 1}-${date.getDate()}`;
            } else {
                return `${date.getYear() + 1900}-${date.getMonth() + 1}-${date.getDate()}`;
            }

        },
        handleAddCommit() {
            this.$refs.form.validate().then(() => {
                const params = {
                    card: this.card,
                    relation: this.addForm.relation,
                    member: {
                        name: this.addForm.name,
                        idCard: this.addForm.idCard,
                        gender: this.gender,
                        age: this.age,
                        birthDay: this.addForm.birthDay
                    }
                }
                addRelatePerson(params).then(res => {
                    if (res.code == 200) {
                        this.handleAddCancle()
                        this.czShow = false
                        Message.success('添加成功');
                        this.initFamilyTreeByIdCard()
                    }
                })
            }).catch(() => {
                this.$toast('请输入必填项')
            })
        },
        handleAddCancle() {
            this.addForm = {
                name: '',
                idCard: '',
                relation: '',
                birthDay: ''
            }
            this.relationText = ''
            if (this.addRelate == 'mapView') {
                this.czStatus = 'home'
            } else if (this.addRelate == 'listView') {
                this.czStatus = 'home'
                this.czShow = false
            }
        },
        handleCancle() {
            this.czShow = false
        },
    },
}
</script>

<style lang="less" scoped>
.main {
    // padding-top: 46px;
    // min-height: 100vh;
    font-size: 14px;
    // padding-bottom: 60px;
    position: relative;
}

.top_btn {
    margin: 15px;
    display: flex;
}

.main_buttom {
    margin-top: 10px;
}

.main_item {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    margin-top: 10px;
    background-color: #fff;
}

.item_left_box {
    display: flex;
    align-items: center;
}

.item_left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.item_left_top_man {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #1684fc;
}

.item_left_top_women {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #fc6675;
}

.item_left_bottom {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
}

.item_middle {
    margin-left: 15px;
}

.item_name {
    font-size: 14px;
    font-weight: 600;
}

.item_other {
    font-size: 12px;
    color: rgb(140, 140, 140);
    margin-top: 10px
}

.item_viewDetail {
    background-color: rgba(233, 241, 253);
    color: rgb(35, 114, 235);
    padding: 5px 10px;
    border-radius: 5px;

}

.footer {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.footer_btn {
    text-align: center;
}

.fotter_btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgb(70, 130, 255);
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.sj_btn {
    width: 50%;
    text-align: center;
    line-height: 50px;
    background-color: #fff;
}

.activedBtn {
    background-color: rgb(70, 130, 255);
    color: #fff;
}

.tree_box {
    overflow-x: auto;
    background-color: rgb(219, 228, 241);
}

.family-tree {
    // height: 100vh;
    font-family: Arial, sans-serif;
    width: 1000px;
    padding-top: 150px;
    background-color: rgb(219, 228, 241);
    margin-left: 200px;
}

.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 {

    margin-top: 30px;
    display: flex;
    justify-content: space-around
}

/deep/ .van-dialog__footer {
    display: none;
}

.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;
}

/deep/ .van-dialog {
    height: 500px;
}

.required-field {
    /deep/ .van-field__label::after {
        content: " *";
        color: red;
    }
}

.viewCust {
    background-color: rgba(233, 241, 253);
    color: rgb(35, 114, 235);
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 12px;
}

.addCust {
    background-color: rgba(253, 243, 231);
    color: rgb(239, 144, 31);
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 12px;
    margin-top: 10px;
    text-align: center;
}
</style>