import * as echarts from '../../../../../../ec-canvas/ec-canvas';
import api from "../../../../../../utils/api";
var chart;
var listdata = []; 
var links = []; 
var legendes = ["手机IMSI", "人脸ID", "车牌号码", "人脸ID"];
var texts = []; 
// function initChart(canvas, width, height, dpr) {
//     chart = echarts.init(canvas, null, {
//         width: width,
//         height: height,
//         devicePixelRatio: dpr // 像素比
//     });
//     canvas.setChart(chart);


//     return chart;
// }

Component({
    properties: {
        resid: {
            type: String,
            value: '',
            observer(val) {
                this.getData()
            }
        }
    },
    data: {
        ec: {
            lazyLoad: true
        },
    },

    lifetimes: {
        ready() {
            console.log(this.data.resid);
            this.getData()
        }
    },
    methods: {

        getData() {
            this.selectComponent('#hotlineComplaints').init((canvas, width, height, dpr) => {
                // chart = echarts.init(canvas, null, {
                //     width: width,
                //     height: height,
                //     devicePixelRatio: dpr // 像素比
                // });
                // canvas.setChart(chart);
                let params = {
                    type: 0,
                    resid: this.data.resiId
                }
                api.getFamilyRelationshipList(params).then(({
                    data
                }) => {
                    console.log(data);
                    var phoneNum = {
                        "手机号:13856978256": "13856978256",
                        "手机号:13998745632": "13998745632",
                        "手机号:18812345678": "18812345678",
                        "手机号:16812345678": "16812345678",
                        "手机号:13856971111": "13856978256",
                        "手机号:13998742222": "13998745632",
                        "手机号:18812344444": "18812345678",
                        "手机号:16812343333": "16812345678",
                        "手机号:13878978256": "13856978256",
                        "手机号:137895632": "13998745632",
                    };

                    var phoneIMSI = ["次数:1，匹配度:6%", "次数:3，匹配度:30%", "次数:2，匹配度:26%",
                        "次数:2，匹配度:26%", "次数:2，匹配度:26%", "次数:2，匹配度:26%",
                        "匹配手机号码", "匹配手机号码", "匹配手机号码", "匹配手机号码"
                    ]


                    var carNum = {
                        "车牌号码:豫AJ9685": "豫AJ9685",
                        "车牌号码:豫AG5123": "豫AG5123",
                        "车牌号码:豫AG6822": "豫AG6822",
                        "车牌号码:豫CJ9685": "豫AJ9685",
                        "车牌号码:豫AD5123": "豫AG5123",
                        "车牌号码:豫AT6822": "豫AG6822",
                        "车牌号码:豫AG6622": "豫AG6822",
                        "车牌号码:豫CJ9885": "豫AJ9685",
                    }
                    const relationShipCar = ["匹配车牌号码", "匹配车牌号码", "匹配车牌号码", "匹配车牌号码", "匹配车牌号码", "匹配车牌号码", "匹配车牌号码", "匹配车牌号码", "匹配车牌号码"]
                    this.setDataPhone(phoneNum, 0);
                    this.setDataCar(carNum, 2);
                    this.setDataPerson(mainRelationShip, 3);
                    this.setLinkData(phoneNum, phoneIMSI, legendes[3]);
                    this.setLinkData(carNum, relationShipCar, legendes[3]);
                    let option = {
                        title: {
                            text: "关系图绑定点击事件",
                            top: "top",
                            left: "left",
                            textStyle: {
                                color: '#000000'
                            }
                        },
                        tooltip: {
                            formatter: '{b}'
                        },

                        backgroundColor: '#f7f7f7',
                        legend: {
                            data: legendes,
                            textStyle: {
                                color: '#000000'
                            },
                            icon: 'circle',
                            type: 'scroll',
                            orient: 'vertical',
                            left: 10,
                            top: 20,
                            bottom: 20,
                            itemWidth: 10,
                            itemHeight: 10
                        },
                        animationDuration: 1000,
                        animationEasingUpdate: 'quinticInOut',
                        series: [{
                            type: 'graph',
                            layout: 'force',
                            force: {
                                repulsion: 80,
                                gravity: 0,
                                edgeLength: 150,
                                layoutAnimation: true,
                            },
                            data: listdata,
                            links: links,
                            categories: texts,
                            roam: false,
                            nodeScaleRatio: 0,
                            focusNodeAdjacency: false,
                            lineStyle: {
                                normal: {
                                    opacity: 0.5,
                                    width: 1.5,
                                    curveness: 0
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    position: 'inside',
                                    textStyle: {
                                        color: '#000000',
                                        fontWeight: 'normal',
                                        fontSize: "12" //字体大小
                                    },
                                    formatter: function (params) {
                                        return params.data.showName
                                    },
                                    fontSize: 18,
                                    fontStyle: '600',
                                }
                            },
                            edgeLabel: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        fontSize: 12
                                    },
                                    formatter: "{c}"
                                }
                            }
                        }],
                        color: ['#e8b842', '#41b1ef', '#667aed', '#347fbb', '#772cdc',
                            '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'
                        ]
                    }
                    chart.setOption(option);
                })
                return chart;
            });
        },
        setDataPhone(json, n) {
            var i = 0;
            for (var p in json) {
                listdata.push({
                    x: i * 50,
                    y: size + i * 10,
                    "name": p,
                    "showName": json[p],
                    "symbol": 'image://' + "/asset/get/s/data-1561621386236-0IGCc48l6.png",
                    "symbolSize": size,
                    "category": n,
                    "draggable": "false",
                    formatter: function (params) {
                        return params.data.showName
                    },
                    label: {
                        position: 'bottom'
                    }
                });
                i++;
            }
        },
        setDataCar(json, n) {
            var i = 0;
            for (var p in json) {
                listdata.push({
                    x: i * 50,
                    y: size + i * 10,
                    "name": p,
                    "showName": json[p],
                    "symbol": 'image://' + "/asset/get/s/data-1561621379686-rZHoryrBV.png",
                    "symbolSize": size,
                    "category": n,
                    "draggable": "false",
                    formatter: function (params) {
                        return params.data.showName
                    },
                    label: {
                        position: 'bottom'
                    }
                });
                i++;
            }
        },
        setLinkData(json, relarr, title) {
            if (relarr !== "") {
                var i = 0;
                for (var p in json) {
                    links.push({
                        "source": p,
                        "target": title,
                        "value": relarr[i],
                        lineStyle: {
                            normal: {
                                // text: relarr[i],
                                color: 'source'
                            }
                        }
                    });
                    i++;
                }
            } else {
                for (var p2 in json) {
                    links.push({
                        "source": p2,
                        "target": title,
                        "value": "",
                        lineStyle: {
                            normal: {
                                color: 'source'
                            }
                        }
                    });
                }
            }
        }
    }
});