import * as echarts from '../../../../../../ec-canvas/echarts';
import {
    getFamilyRelationshipListByHouseId
} from "../../../../../../utils/api";
var chart;

Component({
    properties: {
        houseId: {
            type: String,
            value: '',
            observer(val) {
                this.getData()
            }
        },
        houseName:{
            type: String,
            value: '',
        }
    },
    data: {
        ec: {
            lazyLoad: true
            // onInit: initChart
        },
        tabList: [{
            label: "问题突出类别",
            value: 1
        }, {
            label: '行业领域分析',
            value: 2
        }],
        tabValue: 1
    },
    lifetimes: {
        ready() {
            console.log(this.data.houseName,'houseName');
            this.getData()
        }
    },
    methods: {

        getData() {
            this.selectComponent('#hotlineComplaints').init((canvas, width, height, dpr) => {
                chart = echarts.init(canvas, null, {
                    width: width,
                    height: height,
                    devicePixelRatio: dpr // 像素比
                });
                let than = this
                chart.on('click', function (param) {
                    if (param.dataType == 'node') {
                        than.triggerEvent('clickGraphNode', {data: param.data.data });
                    } else {
                    }
                })
                canvas.setChart(chart);
                let params = {
                    id: this.data.houseId
                }
                getFamilyRelationshipListByHouseId(params).then(({
                    data
                }) => {
                    data = data.filter(item=>item.id!=this.data.houseId);
                    if(data && data.length>0){
                        this.triggerEvent('getResiId', data[0].id);
                    }
                    const rootNode = {};
                    rootNode["id"] = this.data.houseId;
                    rootNode["name"] = this.data.houseName;
                    rootNode["type"] = 1;
                    data.unshift(rootNode);
                    let nodeList = data.map((item, index) => {
                        let symbolUrl = '';
                        if (item.type === 1) {
                            symbolUrl = 'image://https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240402/a6cdfe6f699040f58fd8b2c10486b41d.png';
                        } else {
                            // 如果 type 不等于 1，则根据 gender 进行判断
                            if (item.gender === '1') {
                                // 如果 gender 等于 1，则根据 age 进行进一步的判断
                                symbolUrl = item.age > 18 && item.age < 60 ?
                                    'image://https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240402/1e21790833b04e9abe61e2a8f40446cb.png' :
                                    item.age < 18 ?
                                    'image://https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240402/62c2b6a1ce834f8dae081b562b2579b9.png' :
                                    item.age > 60 ?
                                    'image://https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240402/bd586a4e7d0f4b3aa68c79067dfe1428.png' :
                                    '';
                            } else if (item.gender === '2') {
                                // 如果 gender 等于 2，则根据 age 进行进一步的判断
                                symbolUrl = item.age > 18 && item.age < 60 ?
                                    'image://https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240402/3b44e3495dcd4d96a3c07baad1bd7c5e.png' :
                                    item.age < 18 ?
                                    'image://https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240402/0c38251bba644a6b8e4a925aea74c9a7.png' :
                                    item.age > 60 ?
                                    'image://https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240402/2465ff7633a94413bf4ed2aa778c2765.png' :
                                    '';
                            }
                        }
                        return {
                            'name': item.name,
                            'id': index + 1,
                            'category': 0,
                            'symbolSize': item.id == this.data.houseId ? 50 : 30,
                            'symbol': symbolUrl,
                            label: {
                                "position": "bottom"
                            },
                            'data':{
                                type:item.type,
                                id:item.id
                            },
                        };
                    });
                    let links = data.map((item, index) => ({
                        "source": 0,
                        "target": index,
                        "name":item.resiHouseRel ===null?'未知':item.resiHouseRel ==='0'?'自住':item.resiHouseRel === '1'?'出租':'未知',
                        "label": {
                            "align": "center",
                            "fontSize": 12,
                            "color":"#9cbbf9"
                        },
                        "lineStyle": {
                            "color": "#9cbbf9"
                        }
                    }))
                    let categories = data.map((item, index) => ({
                        "name":item.houseHolderRel||'未知',
                        "id":index+1,
                        "itemStyle": {
                            "color": '#9cbbf9'
                        },
                    }))
                    

                    var option = {

                        legend: [{
                            // selectedMode: 'single',
                            // icon: 'circle'
                            show: false
                        }],
                        series: [{
                            type: 'graph',
                            layout: 'force',
                            // symbolSize: 10,
                            force: {
                                repulsion: 80,
                                gravity: 0,
                                edgeLength: 100,//线条长度
                                layoutAnimation: true,
                            },
                            draggable: true,
                            roam: false,
                            nodeScaleRatio: 0, 
                            focusNodeAdjacency: false,
                            lineStyle: {
                                normal: {
                                    opacity: 0.5,
                                    width: 1.5,
                                    curveness: 0
                                }
                            },
                            categories: categories,
                              edgeSymbol: ['', 'arrow'],
                            // edgeSymbolSize: [80, 10],
                            edgeLabel: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        fontSize: 20
                                    },
                                    formatter(x) {
                                        return x.data.name;
                                    }
                                }
                            },
                            label: {
                                show: true
                            },
                          
                            data: nodeList,
                            links: links
                        }]
                    };
                    chart.setOption(option);
                })
                return chart;
            });
        }
    }
});