Vue.component("tower-crane", {
    template: `
        <div class="tower-crane-border" :style="{'width':width+'px','height':height+'px','top':top+'px','left':left+'px'}">
            <div class="tower-crane-sweep" ref="needle">
                <div class="tower-crane-track">
                    <div class="tower-crane-dot" ref="dot"></div>
                </div>
            </div>
            <div class="jx-field-layout-text" @click="checkClick()">{{text}}</div>
        </div>
    `,
    props: {
        top:{
            type:Number
        },
        left:{
            type:Number
        },
        width:{
            type:Number
        },
        height:{
            type:Number
        },
        angle:{
            type:Number
        },
        range:{
            type:Number
        },
        brachium:{
            type:Number
        },
        devicenum:{
            type:String
        },
        text:{
            type:String
        }
    },
    data() {
        return {

        }
    },
    mounted(){
        this.init()
    },
    methods: {
        init(){
            var that = this
            var distance = that.range / that.brachium * 100
            setTimeout(function () {
                $(that.$refs.needle).css("transform","rotate("+that.angle+"deg)")
                $(that.$refs.dot).animate({left:distance+'%'},1000);
            },1000)
        },
        checkClick(){
            this.machineInfoCard(this.devicenum);
            this.getMachineDeviceInfo(this.devicenum);
        },
        machineInfoCard(device_num){
            $.ajax({
                type: "POST",
                url: requestUrl+"getMachineInfo",
                data: {"device_num": device_num},
                async: true,
                success: function (res) {
                    vm.baiduMapShow = true
                    let data = res.data;
                    $("#basicDataDeviceName").html(data.device_name);
                    $("#basicDataDeviceModel").html(data.device_model);
                    $("#basicDataBrand").html(data.device_brand);
                    $("#basicDataManageNum").html(data.manage_num);
                    $("#basicDataPower").html(data.power);
                    $("#basicDataImg").attr("src",data.device_photo==''?'https://fileimg.makalu.cc/wjj.jpg':data.device_photo);

                    $("#gsmc").html(data.dept_name);
                    $("#xmmc").html(data.project_Name);
                    $("#dqwz").html(data.address);

                    $("#pgjz").html(data.costRemark);
                    $("#zhpj").html(data.examineRemark);
                    $("#yssj").html(data.examineDate);
                    if(data.pdfUrl=="" || data.pdfUrl==null || data.pdfUrl==undefined){
                        $("#ysbg").hide();
                    }else{
                        $("#ysbg").attr("href",data.pdfUrl)
                    }

                    if(data.maintenance_content=="" || data.maintenance_content ==undefined || data.maintenance_content==null){
                        $("#upkeep").hide();
                    }else {
                        $("#wblx").html(data.maintenance_type);
                        $("#wbnr").html(data.maintenance_content);
                        $("#wbje").html(data.maintenance_money);
                        $("#wbsj").html(data.maintenance_time);
                        $("#wbry").html(data.maintenance_person);
                        let  maintenance_photo = data.maintenance_photo;
                        let maintenance_photo_str = maintenance_photo ==''?"":'<img src="'+maintenance_photo+'"  onClick="enlarge(this)" class="img-border">'
                        $("#wbtp").html(maintenance_photo_str);
                        $("#upkeep").show();
                    }


                    $("#dycq").html(data.attendance);
                    $("#ygs").html(data.sum_work);
                    $("#ypjgs").html(data.avg_work);
                    $("#yhy").html(data.sum_oil);
                    $("#ypjhy").html(data.avg_oil);
                    data.manual_url == "" || data.manual_url == undefined ? $("#czgfDiv").hide():$("#czgfDiv").show();
                    $("#czgf").attr("href",data.manual_url)
                    $.ajax({
                        type: "POST",
                        url: requestUrl+"getMachinePhoto",
                        data: {"id": data.examine_id},
                        async: true,
                        success: function (res) {
                            $("#ystp").empty();
                            var str = "";
                            if(res.code == 0){
                                for (let i = 0; i < res.data.length; i++) {
                                    str += '<figure style="padding-right: 20px">' +
                                        '<a>' +
                                        '    <img src="'+res.data[i].imageUrl+'" class="img-border" onClick="enlarge(this)"/>' +
                                        '    <p>'+res.data[i].site+'</p>' +
                                        '</a>' +
                                        '</figure>';
                                }
                            }
                            $("#ystp").append(str);
                        }
                    })
                }
            })
        },
        getMachineDeviceInfo(deviceNum){
            var that = this
            $.ajax({
                type: "GET",
                url: requestUrl+"getMachineDeviceInfo",
                data: {"device_num": deviceNum},
                async: true,
                success: function (res) {
                    that.selectMachineCardImageList(res.data,deviceNum);
                }
            })
        },
        selectMachineCardImageList(array,deviceNum) {
            $.ajax({
                type: "POST",
                url: "/api/warning/selectMachineCardImageList",
                data: {
                    "projectId": JSON.parse(localStorage.getItem("data")).id,
                    "deviceNum":deviceNum,
                    "imageStatus":1
                },
                async: true,
                success: function (res) {
                    for(let i = 0;i<array.length;i++){
                        for(let j = 0;j<res.length;j++){
                            if(array[i].num == res[j].certificateNum){
                                array[i]["imageUrl"] = res[j].imageUrl;
                                break;
                            }
                        }
                    }
                    let data = array;
                    $("#certInfo").empty();
                    var str = "";
                    for (let i = 0; i < data.length; i++) {
                        var photo = "";
                        if(data[i].photo != '' && data[i].photo != null){
                            photo = '<img src="'+data[i].photo+'" onclick="enlarge(this)"/>'
                        }
                        var imageUrl = "";
                        if(data[i].imageUrl != '' && data[i].imageUrl != null){
                            let image = data[i].imageUrl.split(",");
                            for(let j = 0;j<image.length;j++){
                                imageUrl += '<img src="'+image[j]+'" onclick="enlarge(this)"/>&nbsp;&nbsp;&nbsp;&nbsp;';
                            }
                        }
                        str += '<table id="certInfo">' +
                            '    <tr>' +
                            '        <td>证书编码：</td>' +
                            '        <td>'+data[i].num+'</td>' +
                            '    </tr>' +
                            '    <tr>' +
                            '        <td>人员名称：</td>' +
                            '        <td>'+data[i].name+'</td>' +
                            '    </tr>' +
                            '    <tr>' +
                            '        <td>人员电话：</td>' +
                            '        <td>'+data[i].phone+'</td>' +
                            '    </tr>' +
                            '    <tr>' +
                            '        <td>有效日期：</td>' +
                            '        <td>'+data[i].date+'</td>' +
                            '    </tr>' +
                            '    <tr>' +
                            '        <td>交底培训：</td>' +
                            '        <td>已进行交底培训</td>' +
                            '    </tr>' +
                            '    <tr>' +
                            '        <td>操作证图片：</td>' +
                            '        <td>'  +photo+
                            '        </td>' +
                            '    </tr>' +
                            '    <tr>' +
                            '        <td>交底图片：</td>' +
                            '        <td>'  +imageUrl+
                            '        </td>' +
                            '    </tr>' +
                            '</table>';
                    }
                    $("#certInfo").append(str);
                }
            })
        },
    },
    watch:{
        angle:function () {
            this.init()
        },
        range:function () {
            this.init()
        },
        brachium:function () {
            this.init()
        },
        devicenum:function () {
            this.init();
        }
    },

})

function  enlarge(e) {
    var w = $(e).width();
    var h = $(e).height();
    var src = $(e).attr("src");
    var img = "<div onclick='hideImg(this)' style='position: fixed;background: rgba(0,0,0,0.7);width: 100%;height: 100%;top: 0;left: 0;z-index: 9999999;'>" +
        "<table style='height: 100%;text-align: center;margin: auto;'>" +
        " <tr>" +
        "<td height='800'><img id='viewArea' "+(w > h?'width=\'90%\'':'height=\'90%\'')+"  src='"+src+"' /></td>" +
        "</tr>" +
        "</table>"
    "</div>"
    $("body").append(img);
}

function hideImg(e) {
    $(e).remove();
}