<template>
<div class="wrapper enseDetail">
    <div class="flexBox">
        <div class="flexBox-item" style="width: 40%">
            <div class="enterDetail" >
                <h3>*企业注册信息*</h3>
                <div style="display:flex;flex-direction:row;justify-content:flex-start;">
                    <div class="enterDetail-item">
                        <span class="itit">单位名称必填：</span>
                        {{ editForm.unitName }}
                    </div>
                    <div class="enterDetail-item">
                        <span class="itit">统一社会信用代码：</span>
                        {{ editForm.orgCode }}
                    </div>
                </div>
                <div style="display:flex;flex-direction:row;justify-content:flex-start;">
                    <div class="enterDetail-item">
                        <span class="itit">法定代表人：</span>
                        {{ editForm.legalPerson }}
                    </div>
                    <div class="enterDetail-item">
                        <span class="itit">法人手机：</span>
                        {{ editForm.legalPersonPhone }}
                    </div>
                </div>
                <div style="display:flex;flex-direction:row;justify-content:flex-start;">
                    <div class="enterDetail-item">
                        <span class="itit">所属区域：</span>
                        <!--<City :valueqv="cityval" :disabled="true"></City>-->
                        {{editForm.provinceName+editForm.cityName+editForm.countyName}}
                    </div>
                    <div class="enterDetail-item">
                        <span class="itit">营业执照：</span>
                        <span class="dbtn sd qiCr" v-if="editForm.viewOrgFilePath" @click="checkFile(editForm.viewOrgFilePath)">
                        <i class="el-icon el-icon-view"></i>查看
                    </span>
                    </div>
                </div>

                <div class="enterDetail-item">
                    <span class="itit">单位注册地址：</span>
                    {{ editForm.regAddress }}
                </div>
                <div class="enterDetail-item">
                    <div class="link-top"></div>
                    <span class="itit" style="font-weight:900 ">隐患列表：</span>
                    <el-table
                            :data="tableData2"
                            max-height="110"
                            border
                            size="mini"
                            style="width: 100%;">
                        <el-table-column
                                prop="troubleName"
                                label="隐患名称"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                prop="troubleType"
                                label="隐患类型"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="troubleLevel"
                                label="等级"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="address"
                                label="地址">
                        </el-table-column>
                    </el-table>
                </div>
                <div class="link-top"></div>
                <div class="enterDetail-item">
                    <span class="itit" style="font-weight:900 ">危险源列表：</span>
                    <el-table
                            :data="tableData3"
                            max-height="110"
                            border
                            size="mini"
                            style="width: 100%;">
                        <el-table-column
                                prop="goodsName"
                                label="名称"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                prop="number"
                                label="设备编号"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="dangerGrade"
                                label="等级"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="factoryLocation"
                                label="厂区位置">
                        </el-table-column>
                    </el-table>
                </div>
                <div class="link-top"></div>
                <div class="enterDetail-item">
                    <span class="itit" style="font-weight:900 ">职业危害场所：</span>
                    <el-table
                            :data="tableData4"
                            max-height="110"
                            border
                            size="mini"
                            style="width: 100%;">
                        <el-table-column
                                prop="placeName"
                                label="场所名称"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                prop="placeType"
                                label="类型"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="harmLevel"
                                label="等级"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="address"
                                label="地址">
                        </el-table-column>
                    </el-table>
                </div>
                <div class="link-top"></div>
                <div class="enterDetail-item">
                    <span class="itit" style="font-weight:900 ">监控检测点位：</span>
                    <el-table
                            :data="tableData1"
                            max-height="110"
                            border
                            border-radius="6px"
                            size="mini"
                            style="width: 100%;">
                        <el-table-column
                                prop="deviceName"
                                label="设备名称"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                prop="deviceNumber"
                                label="设备编号:"
                                width="250">
                        </el-table-column>
                        <el-table-column
                                prop="factoryLocation"
                                label="所在位置">
                        </el-table-column>
                    </el-table>
                </div>
                <div class="link-top"></div>
                <h3>
                    <span class="dbtn dg fr" @click="$router.go(-1)">
                        <i class="el-icon-d-arrow-left"></i> 返回上一页
                    </span>
                </h3>
                <div style="height: 40px;">

                </div>
            </div>
        </div>
        <div class="flexBox-item" style="width: 60%">
            <el-row>
                <el-checkbox @change="handleCheckAllChange" :indeterminate="isIndeterminate" v-model="checkAll">全选</el-checkbox>
                <el-checkbox-group v-model="checkList" @change="CheckChange">
                    <el-checkbox label="1">
                        监控检测点位
                        <img src="@/assets/mark/jiankong.png" width="25" />
                    </el-checkbox>
                    <el-checkbox label="2">
                        隐患
                        <img src="@/assets/mark/yinhuan.png" width="25" />
                    </el-checkbox>
                    <el-checkbox label="3">
                        危险源
                        <img src="@/assets/mark/weixianyuan.png" width="25" />
                    </el-checkbox>
                    <el-checkbox label="4">
                        职业危害场所
                        <img src="@/assets/mark/weihaichangsuo.png" width="25" />
                    </el-checkbox>
                </el-checkbox-group>
            </el-row>
            <div id="mapbox">
                <Search :MAP="MAP" :Mutil="Mutil" v-if="mapLoadDone"></Search>
                <DrawTool :MAP="MAP" v-if="mapLoadDone"></DrawTool>
            </div>
        </div>
    </div>
</div>
</template>

<script lang="ts">
import {
    Component,
    Vue,
    Provide,
    Prop,
    Watch
} from "vue-property-decorator";
import {
    State,
    Getter,
    Mutation,
    Action
} from "vuex-class";
import METHOD from "@/utils/methods";
import City from "@/components/city.vue";
import "@/utils/VamapLoad.ts";

import DrawTool from "@/components/drawTool.vue";
import Search from "@/components/search.vue";
import Mutil from "@/utils/mapUtil.js";
@Component({
    components: {
        City,
        DrawTool,
        Search,
    },
})
export default class EnseListDetail extends Vue {
    @Provide() Mutil: any;
    @Provide() mapLoadDone = false;
    @Provide() MAP: any;
    @Provide() enterpriseId: string = "";
    @Provide() cityval: any = [];
    @Provide() editForm: any = {};
    @Provide() checkList: any = ["1", "2", "3", "4"];
    @Provide() checkListOpt: any = ["1", "2", "3", "4"];
    @Provide() isIndeterminate: boolean = false;
    @Provide() checkAll: boolean = true;
    /* 地图 */
    @Provide() mapOption = {
        plugin: [{
                pName: "MapType",
                defaultType: 1,
            },
            {
                pName: "ToolBar",
            },
        ],
        center: [115, 28],
        zoom: 10,
        events: {},
    };
    @Provide() markers: any = [];
    @Provide() deviceDataArr: any = [];
    @Provide() goodsDataArr: any = [];
    @Provide() mapData: any = [];
    @Provide() windowsArr: any = [];
    @Provide() currentWindow: any = "";
    @Provide() tableData1 : any = [];
    @Provide() tableData2 : any = [];
    @Provide() tableData3 : any = [];
    @Provide() tableData4 : any = [];
    @Provide() toolobj: any;
    @Provide() mouseTool: any; //测量工具
    @Provide() toolVisble: boolean = false;
    /*获取物品*/
    // getMapDataA() {
    //     let that = this;
    //     return new Promise((resolve, reject) => {
    //         METHOD.axiosPost(
    //             that,
    //             `/enterpriseGoods/selectEnterpriseGoodsList/${that.enterpriseId}`, {
    //                 page: 1,
    //                 size: 10000,
    //             },
    //             (res: any) => {
    //                 if (res.code == 0) {
    //                     resolve(res.data.pageData);
    //                 }
    //             }
    //         );
    //     });
    // }
    getDetailList() {
        let that = this;
        METHOD.axiosGet(
            that,
            `/dataStatistics/enterpriseDatainfo/${that.enterpriseId}`,
            function (res: any) {
                if (res.code == 0) {
                    that.addMarksToMapTwo(res.data)
                }
            }
        );
    }
    /*获取安全设备*/
    // getMapDataB() {
    //     let that = this;
    //     return new Promise((resolve, reject) => {
    //         METHOD.axiosPost(
    //             that,
    //             `/safetyDeviceInfo/selectSafetyDeviceInfoList/${that.enterpriseId}`, {
    //                 page: 1,
    //                 size: 10000,
    //             },
    //             (res: any) => {
    //                 if (res.code == 0) {
    //                     let mapData = res.data.pageData;
    //                     resolve(res.data.pageData);
    //                 }
    //             }
    //         );
    //     });
    // }
    addMarksToMapTwo(alldata) {
        let that = this;
        let res1: any = alldata.cameraList;
        let res2: any = alldata.troubleList;
        let res3: any = alldata.goodsList;
        let res4: any = alldata.harmPlace;
        that.mapData = [...res1, ...res2, ...res3, ...res4];
        console.log(res1)
        this.tableData1=res1;
        this.tableData2=res2;
        this.tableData3=res3;
        this.tableData4=res4;
        let mapData = [...res1, ...res2, ...res3, ...res4];
        let latSum = 0;
        let lngSum = 0;
        if (res1.length > 0) {
            res1.forEach((ele: any, index: any) => {
                that.addMark(ele, index,"1");
                lngSum += ele.longitude;
                latSum += ele.latitude;
            });
        }

        if (res2.length > 0) {
            res2.forEach((ele: any, index: any) => {
                that.addMark(ele, index,"2");
                lngSum += ele.longitude;
                latSum += ele.latitude;
            });
        }
        if (res3.length > 0) {
            res3.forEach((ele: any, index: any) => {
                that.addMark(ele, index,"3");
                lngSum += ele.longitude;
                latSum += ele.latitude;
            });
        }
        if (res4.length > 0) {
            res4.forEach((ele: any, index: any) => {
                that.addMark(ele, index,"4");
                lngSum += ele.longitude;
                latSum += ele.latitude;
            });
        }
        let mapcenter = [lngSum / mapData.length, latSum / mapData.length];
        that.Mutil.setViewF({
            center: mapcenter,
            zoom:12
        });
    }
    // addMarksToMap() {
    //     let that = this;
    //     Promise.all([that.getMapDataA(), that.getMapDataB()]).then(
    //         (iter) => {
    //             let res1: any = iter[0];
    //             let res2: any = iter[1];
    //             let mapData = [...res1, ...res2]
    //             that.mapData = [...res1, ...res2];
    //             if (mapData.length > 0) {
    //                 let latSum = 0;
    //                 let lngSum = 0;
    //                 mapData.forEach((ele: any, index: any) => {
    //                     that.addMark(ele, index);
    //                     lngSum += ele.longitude;
    //                     latSum += ele.latitude;
    //                 });
    //                 let mapcenter = [lngSum / mapData.length, latSum / mapData.length];
    //                 that.Mutil.setViewF({
    //                     center: mapcenter,
    //                 });
    //             } else {
    //                 that.$message.warning("没有设备及物品信息！");
    //             }
    //         }
    //     );
    // }
    addMark(obj: any, index: any,type: any) {
        let icon,titleName,
            that = this;
        switch (type) {
            case "1":
                icon = require("@/assets/mark/jiankong.png");
                titleName = obj.deviceName;
                break;
            case "2":
                icon = require("@/assets/mark/yinhuan.png");
                titleName = obj.troubleName;
                break;
            case "3":
                icon = require("@/assets/mark/weixianyuan.png");
                titleName = obj.goodsName;
                break;
            case "4":
                icon = require("@/assets/mark/weihaichangsuo.png");
                titleName = obj.placeName;
                break;
        }
        this.Mutil.addMarkerToMap(
            type,
            titleName,
            icon,
            [obj.longitude, obj.latitude],
            0.9,
            obj.id
        );
    }
    getDetail() {
        let that = this;
        METHOD.axiosGet(
            that,
            `/enterpriseInfo/queryEnterpriseInfoById/${that.enterpriseId}`,
            function (res: any) {
                if (res.code == 0) {
                    that.editForm = res.data;
                    if (that.editForm.provinceId) {
                        that.cityval = [
                            that.editForm.provinceId,
                            that.editForm.cityId,
                            that.editForm.countyId,
                        ];
                    }
                    that.$nextTick(() => {
                        //console.log(that.editForm.boundary)
                        if (that.editForm.boundary) {
                            that.Mutil.drawPloygon(JSON.parse(that.editForm.boundary));
                        }
                    });
                }
            }
        );
    }
    checkFile(url: any) {
        window.open(METHOD.URL + url, "_blank");
    }
    /*radio group*/
    CheckChange(val: any) {
        let that = this;
        that.checkListOpt.forEach((ele: any) => {
            if (val.indexOf(ele) == -1) that.Mutil.visibleMarks(false, ele);
            else that.Mutil.visibleMarks(true, ele);
        });

        let len = that.checkListOpt.length;
        that.checkAll = val.length == len;
        that.isIndeterminate = val.length > 0 && val.length < len;
    }
    handleCheckAllChange(val: any) {
        let that = this;
        that.checkList = val ? [...that.checkListOpt] : [];
        that.isIndeterminate = false;
        that.checkListOpt.forEach((ele: any) => {
            if (val) that.Mutil.visibleMarks(true, ele);
            else that.Mutil.visibleMarks(false, ele);
        });
    }
    creatWindowHtml(obj: any) {
        console.log(obj);
        let htmlA =
            `<div class="windowDg"><h3>详细信息</h3>` +
            `<p><span>名称:</span>${obj.goodsName}</p>` +
            `<p><span>编号:</span>${obj.number}</p>` +
            `<p><span>介绍:</span>${obj.goodsInfo}</p>` +
            `<p><span>物品类型:</span>${obj.category}</p>` +
            `<p><span>是否是重大危险源:</span>${
        obj.isBigDanger == 1 ? "是" : "否"
      }</p>` +
            `<p><span>联系人:</span>${obj.contacts}</p>` +
            `<p><span>联系电话:</span>${obj.phone}</p>` +
            `<p><span>库存数量:</span>${obj.stockNum}</p>` +
            `<p><span>类型:</span>${obj.category}</p>` +
            `<p><span>仓库编号:</span>${obj.warehouseNum}</p>` +
            `<p><span>危险等级:</span>${obj.dangerGrade}</p>` +
            `<p><span>所在厂区位置:</span>${obj.factoryLocation}</p></div>`;
        let htmlB =
            `<div class="windowDg"><h3>详细信息</h3>` +
            `<p><span>设备名称:</span>${obj.deviceName}</p>` +
            `<p><span>设备编号:</span>${obj.deviceNumber}</p>` +
            `<p><span>设备短号:</span>${obj.shortNum}</p>` +
            `<p><span>设备介绍:</span>${obj.deviceInfo}</p>` +
            `<p><span>设备IP:</span>${obj.deviceIp}</p>` +
            `<p><span>是否是重大危险源:</span>${
        obj.isBigDanger == 1 ? "是" : "否"
      }</p>` +
            `<p><span>联系人:</span>${obj.contacts}</p>` +
            `<p><span>危险等级:</span>${obj.dangerGrade}</p>` +
            `<p><span>所在位置:</span>${obj.factoryLocation}</p></div>`;
        let htmlC =
            `<div class="windowDg"><h3>详细信息</h3>` +
            `<p><span>危害场所名称:</span>${obj.placeName}</p>` +
            `<p><span>场所类型:</span>${obj.placeType}</p>` +
            `<p><span>危害等级:</span>${obj.harmLevel}</p>` +
            `<p><span>联系人:</span>${obj.contacts}</p>` +
            `<p><span>联系方式:</span>${obj.phone}</p>` +
            `<p><span>危险等级:</span>${obj.dangerGrade}</p>` +
            `<p><span>所在位置:</span>${obj.address}</p></div>`;
        let htmlD =
            `<div class="windowDg"><h3>详细信息</h3>` +
            `<p><span>隐患名称:</span>${obj.troubleName}</p>` +
            `<p><span>隐患类型:</span>${obj.troubleType}</p>` +
            `<p><span>隐患等级:</span>${obj.troubleLevel}</p>` +
            `<p><span>所在位置:</span>${obj.address}</p></div>`;
        let html ;
        if(obj.goodsName!=undefined){
            html= htmlA;
        }else if(obj.deviceName!=undefined){
            html = htmlB
        }else if(obj.placeName!=undefined){
            html = htmlC
        }else {
            html = htmlD
        }
        return html;
    }
    getPopcon(id: any) {
        let that = this,
            aimArr = that.mapData.filter((ele: any) => ele.id == id);
        let htmlcon = that.creatWindowHtml(aimArr[0]);
        that.Mutil.addPopup(htmlcon, id, aimArr[0].longitude, aimArr[0].latitude);
    }
    created() {
        (this as any).enterpriseId = this.$route.query.enterpriseId;
        this.getDetail();
        this.getDetailList()
        //this.addMarksToMap();
    }
    mounted() {
        let that = this;
        that.mapLoadDone = true;
        that.Mutil = new Mutil("mapbox");
        that.MAP = that.Mutil.MAP;
        that.Mutil.mapSelectBind((evt: any) => {
            that.Mutil.closeAllOverlays();
            let id = evt.selected[0].get('did');
            if (id) that.getPopcon(id);
        })
    }
}
</script>

<style lang="scss">
@import "@/utils/public.scss";

#mapbox {
    width: 100%;
    position: relative;
}

@media screen and (min-width: 1500px) {
    #mapbox {
        height: calc(100% - 46px);
    }
}

@media screen and (max-width: 1500px) {
    #mapbox {
        height: calc(100% - 80px);
    }
}

.enterDetail {
    .el-row {
        height: 100%;
    }
}
.ol-zoom {
    top: .5em;
    left: 5px !important;
}
main>div {
    padding: 10px;
    box-sizing: border-box;
}

.flexBox .flexBox-item:nth-child(2) {
    padding-left: 10px;
    border-left: 1px solid #eeeeee;
}
.link-top {
    width: 110%;
    margin-left: -10px;
    margin-top: 2px;
    height: 1px;
    border-top: solid #ACC0D8 3px;
}

</style><style lang="scss" scoped>
.enterDetail {
    border:1px solid #CDCDCD;
    overflow-y:auto;
    height: 100%;
}
::-webkit-scrollbar {
    width: 6px;   /* 滚动条宽度， width：对应竖滚动条的宽度  height：对应横滚动条的高度*/
}
/*定义滑块 样式*/
::-webkit-scrollbar-thumb {
    border-radius: 3px;
    height: 100px;    /* 滚动条滑块长度 */
    background-color: #ccc;
}
.enterDetail .enterDetail-item {
    width: 100%;
}
</style>
