<template>
<div class="wrapper enseDetail">
    <div class="flexBox">
        <div class="flexBox-item">
            <div class="enterDetail">
                <h3>*企业注册信息*</h3>
                <div class="enterDetail-item">
                    <span class="itit">单位名称必填：</span>
                    {{ editForm.unitName }}
                </div>
                <div class="enterDetail-item">
                    <span class="itit">统一社会信用代码：</span>
                    {{ editForm.orgCode }}
                </div>
                <div class="enterDetail-item">
                    <span class="itit">法定代表人：</span>
                    {{ editForm.legalPerson }}
                </div>
                <div class="enterDetail-item">
                    <span class="itit">法人邮箱：</span>
                    {{ editForm.legalPersonEmail }}
                </div>
                <div class="enterDetail-item">
                    <span class="itit">所属区域：</span>
                    <City :valueqv="cityval" :disabled="true"></City>
                </div>
                <div class="enterDetail-item">
                    <span class="itit">所属街道：</span>
                    {{ editForm.streetName }}
                </div>
                <div class="enterDetail-item">
                    <span class="itit">单位注册地址：</span>
                    {{ editForm.regAddress }}
                </div>
                <div class="enterDetail-item">
                    <span class="itit">生产经营地址：</span>
                    {{ editForm.runAddress }}
                </div>
                <div class="enterDetail-item">
                    <span class="itit">法人手机：</span>
                    {{ editForm.legalPersonPhone }}
                </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 class="enterDetail-item">
                    <span class="itit">授权书：</span>
                    <span class="dbtn sd qiCr" v-if="editForm.viewAuthorizeFile" @click="checkFile(editForm.viewAuthorizeFile)">
                        <i class="el-icon el-icon-view"></i>查看
                    </span>
                </div>
                <div class="enterDetail-item">
                    <span class="itit">管理员姓名：</span>
                    {{ editForm.userName }}
                </div>
                <div class="enterDetail-item">
                    <span class="itit">管理员身份证：</span>
                    {{ editForm.idCard }}
                </div>
                <div class="enterDetail-item">
                    <span class="itit">管理员Email：</span>
                    {{ editForm.email }}
                </div>
                <div class="enterDetail-item">
                    <span class="itit">管理员手机：</span>
                    {{ editForm.mobliePhone }}
                </div>
                <h3>
                    <span class="dbtn dg fr" @click="$router.go(-1)">
                        <i class="el-icon-d-arrow-left"></i> 返回上一页
                    </span>
                </h3>
            </div>
        </div>
        <div class="flexBox-item">
            <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/mark05.png" width="25" />
                    </el-checkbox>
                    <el-checkbox label="2">
                        生产设备
                        <img src="@/assets/mark/mark03.png" width="25" />
                    </el-checkbox>
                    <el-checkbox label="3">
                        企业产品
                        <img src="@/assets/mark/mark01.png" width="25" />
                    </el-checkbox>
                    <el-checkbox label="4">
                        应急物资
                        <img src="@/assets/mark/mark02.png" width="25" />
                    </el-checkbox>
                    <el-checkbox label="5">
                        监控设备
                        <img src="@/assets/mark/markjk.png" width="25" />
                    </el-checkbox>
                    <el-checkbox label="6">
                        传感设备
                        <img src="@/assets/mark/markcgq.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", "5", "6"];
    @Provide() checkListOpt: any = ["1", "2", "3", "4", "5", "6"];
    @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() 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);
                    }
                }
            );
        });
    }
    /*获取安全设备*/
    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);
                    }
                }
            );
        });
    }
    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) {
        let icon,
            that = this;
        switch (obj.dataType) {
            case "3":
                icon = require("@/assets/mark/mark01.png");
                break;
            case "4":
                icon = require("@/assets/mark/mark02.png");
                break;
            case "2":
                icon = require("@/assets/mark/mark03.png");
                break;
            case "1":
                icon = require("@/assets/mark/mark05.png");
                break;
            case "5":
                icon = require("@/assets/mark/markjk.png");
                break;
            case "6":
                icon = require("@/assets/mark/markcgq.png");
                break;
        }
        that.Mutil.addMarkerToMap(
            obj.dataType,
            obj.goodsName,
            icon,
            [obj.longitude, obj.latitude],
            0.5,
            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 html = obj.dataType == 5 || obj.dataType == 6 ? htmlB : htmlA;
        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.addMarksToMap();
    }
    mounted() {
        let that = this;
        that.mapLoadDone = true;
        that.Mutil = new Mutil("mapbox");
        that.MAP = that.Mutil.MAP;
        that.Mutil.mapSelectBind((evt: any) => {
            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%;
    }
}

main>div {
    padding: 10px;
    box-sizing: border-box;
}

.flexBox .flexBox-item:nth-child(2) {
    padding-left: 10px;
    border-left: 1px solid #eeeeee;
}
</style><style lang="scss" scoped>
.enterDetail {
    border: none;
}

.enterDetail .enterDetail-item {
    width: 100%;
}
</style>
