<template>
    <div id="show-platform" v-loading="loading" element-loading-text="数据分析中" element-loading-spinner="el-icon-loading"  element-loading-background="rgba(0, 0, 0, 0.8)">
        <my-header/>
        <login-out/>
        <div id="interfaceBrowse">
            <div id="dtjbgn" class="interface_type" @mouseover="showButton(1)" @mouseout="hideButton">
                <img width="72px" height="76px" src="../../assets/imgs/interfaceKoolkit/dtjbgn.png"/>
                <div>{{name_map["1"]}}</div>
                <el-button v-show="interface_type == 1" @click="toPage(1)">进入</el-button>
            </div>
            <div id="dw" class="interface_type" @mouseover="showButton(2)" @mouseout="hideButton">
                <img width="68px" height="75px" src="../../assets/imgs/interfaceKoolkit/dw.png"/>
                <div>{{name_map["2"]}}</div>
                <el-button v-show="interface_type == 2" @click="toPage(2)">进入</el-button>
            </div>
            <div id="dthz" class="interface_type" @mouseover="showButton(3)" @mouseout="hideButton">
                <img width="72px" height="67px" src="../../assets/imgs/interfaceKoolkit/dthz.png"/>
                <div>{{name_map["3"]}}</div>
                <el-button v-show="interface_type == 3" @click="toPage(3)">进入</el-button>
            </div>
            <div id="ztt" class="interface_type" @mouseover="showButton(4)" @mouseout="hideButton">
                <img width="78px" height="67px" src="../../assets/imgs/interfaceKoolkit/ztt.png"/>
                <div>{{name_map["4"]}}</div>
                <el-button v-show="interface_type == 4" @click="toPage(4)">进入</el-button>
            </div>
            <div id="bim" class="interface_type" @mouseover="showButton(5)" @mouseout="hideButton">
                <img width="74px" height="79px" src="../../assets/imgs/interfaceKoolkit/BIM.png"/>
                <div>{{name_map["5"]}}</div>
                <el-button v-show="interface_type == 5" @click="toPage(5)">进入</el-button>
            </div>
            <div id="kjfx" class="interface_type" @mouseover="showButton(6)" @mouseout="hideButton">
                <img width="72px" height="77px" src="../../assets/imgs/interfaceKoolkit/kjfx.png"/>
                <div>{{name_map["6"]}}</div>
                <el-button v-show="interface_type == 6" @click="toPage(6)">进入</el-button>
            </div>
            <div id="IOT" class="interface_type" @mouseover="showButton(7)" @mouseout="hideButton">
                <img width="76px" height="76px" src="../../assets/imgs/interfaceKoolkit/IOT.png"/>
                <div>{{name_map["7"]}}</div>
                <el-button v-show="interface_type == 7" @click="toPage(7)">进入</el-button>
            </div>
            <div id="CYGJ" class="interface_type" @mouseover="showButton(8)" @mouseout="hideButton">
                <img width="73px" height="73px" src="../../assets/imgs/interfaceKoolkit/cygj.png"/>
                <div>{{name_map["8"]}}</div>
                <el-button v-show="interface_type == 8" @click="toPage(8)">进入</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import {MessageBox} from "element-ui";
    import {baseUrl} from "@/service/config";
    import MyHeader from "@/view/show-platform/common/MyHeader";
    import LoginOut from "@/view/show-platform/common/LoginOut";
    import {selectInterfaceKooleitMainType} from "@/service/interfaceKoolkit";

    export default {
        name: "interfaceBrowseMain",
        components: {LoginOut,MyHeader},
        data() {
            return {
                loading: false,
                show_num:0,
                show_width:346,//图片宽度
                show_height:319,//图片高度
                totalCount:0,
                tableHeight: 0,
                interface_type:0,
                name_map:{
                    "1":"地图基本功能",
                    "2":"定位",
                    "3":"地图绘制",
                    "4":"专题图",
                    "5":"BIM",
                    "6":"空间分析",
                    "7":"IOT",
                    "8":"常用工具"
                },
                block:{
                    "display":"inline-block",
                    "border":"1px solid #00aaff",
                    "border-radius":"4px",
                    "background":"rgba(0, 38, 115, 0.6)",
                    "position":"relative",
                    "left":"0px",
                    "top":"0px",
                    "margin-bottom":"20px",
                    "width":"346px",
                    "height":"300px"},
                block_left:{
                    "display":"inline-block",
                    "border":"1px solid #00aaff",
                    "border-radius":"4px",
                    "background":"rgba(0, 38, 115, 0.6)",
                    "position":"relative",
                    "left":"0px",
                    "top":"0px",
                    "margin-bottom":"20px",
                    "width":"346px",
                    "height":"300px",
                    "margin-left":"20px"},
                tableData:[],
                currentPage:1,
                pageSize:10,
                formData:{
                    name:'',
                    type:''
                },
            }
        },mounted(){
            this.selectInterfaceKooleitMainType();
        },methods:{
            selectInterfaceKooleitMainType(){
                selectInterfaceKooleitMainType().then(response => {
                    let dataArr = response.msg[0].Rows
                    this.totalCount =response.msg[0].TotalRowCount;
                    for(var i = 0 ; i < dataArr.length ; i++ ){
                        this.name_map[dataArr[i]["CODE"]] = dataArr[i]["NAME"];
                    }
                });
            },showButton(num){
               this.interface_type = num;
            },hideButton(){
                this.interface_type = 0;
            },toPage(num){
                var json_para = {
                    type:num
                };
                localStorage.setItem("JSON_MAIN_PARA",JSON.stringify(json_para));
                this.$router.push('interfaceBrowse');
            }
        }
    }
</script>


<style scoped lang="scss">
    ::v-deep{
        .el-button{
            box-sizing: border-box;
            border: 1px solid #00aaff;
            background: rgba(255, 255, 255, 0.1);
            outline: #00aaff;
            color: white;
            resize:none;
        }
        .el-form-item__label{
            color: white;
        }
        .el-pagination__total{
            color:white;
        }
        .el-pagination button{
            background: rgba(255, 255, 255, 0.1);
            color:white;
            border: 1px solid #00aaff;
            outline: #00aaff;
        }
        .el-pager li.active {
            color: #409EFF;
            cursor: default;
        }
        .el-pager li {
            padding: 0 4px;
            background: rgba(255, 255, 255, 0.1);
            font-size: 13px;
            min-width: 35.5px;
            height: 28px;
            line-height: 28px;
            box-sizing: border-box;
            color:#ffffff;
            border: 1px solid #00aaff;
        }
        .el-pagination__jump{
            color:white;
        }
    }
    #show-platform{
        width: 100%;
        height:100%;
        overflow: hidden;
    }
    #interfaceBrowse{
        width:100%;
        height: 100%;
        background: url('../../assets/imgs/interfaceKoolkit/首页3.jpg');
        background-size: 100% 100%;
        background-color:#061635;
        position: absolute;
        color: white;
        font-size: 14px;
    }
    #queryCriteria{
        width: 96%;
        border:1px solid red;
        height: 8%;
        position:absolute;
        left: 2%;
        top:13%;
        background: rgba(0, 38, 115, 0.6);
        border: 1px solid #00aaff;
        border-radius: 4px;
        color: white;
        font-size: 14px;
    }
    #queryCriteria_select{
        width: 96%;
        height: 60%;
        position: absolute;
        top:25%;
        left:2%;
        color: white;
        font-size: 14px;
        color: #ffffff;
    }

    #querybody{
        width: 96%;
        height: 70%;
        position:absolute;
        left: 2%;
        top:24%;
        color: white;
        font-size: 14px;
        broder:1px solid red;
        overflow-y: scroll;/*y轴滚动*/
    }
    #querybody::-webkit-scrollbar {
        display: none;/*隐藏滚动条*/
    }

    #querybottom{
        width: 96%;
        height: 64%;
        position:absolute;
        left: 2%;
        top:94%;
        color: white;
        font-size: 14px;
        broder:1px solid red;
        text-align:center;
    }

    #dtjbgn{
        width: 280px;
        height: 320px;
        background: #00407F;
        /*opacity: 0.4;*/
        border-radius: 8px;
        position: absolute;
        top:255px;
        left:310px;
        background: url('../../assets/imgs/interfaceKoolkit/1.png');
        background-size: 100% 100%;
    }
    #dtjbgn img{
        position: absolute;
        top:62px;
        left:104px;
    }
    #dtjbgn div{
        width: 178px;
        height: 23px;
        font-size: 32px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #E3F3FF;
        position: absolute;
        top:163px;
        left:51px;
    }
    #dtjbgn button{
        width: 120px;
        height: 40px;
        background: rgba(255,255,255,0.2);
        border: 1px solid #FFFFFF;
        border-radius: 20px;
        position: absolute;
        top:217px;
        left:80px;
    }

    #dw{
        width: 280px;
        height: 280px;
        background: #0080FF;
        border: 1px solid #0080FF;
        border-radius: 8px;
        position: absolute;
        top:255px;
        left:600px;
        background: url('../../assets/imgs/interfaceKoolkit/2.png');
        background-size: 100% 100%;
    }

    #dw div{
        width: 178px;
        height: 23px;
        font-size: 32px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #E3F3FF;
        position: absolute;
        top:163px;
        left:110px;
    }

    #dw img{
        position: absolute;
        top:73px;
        left:106px;
    }

    #dw button{
        width: 120px;
        height: 40px;
        background: rgba(255,255,255,0.2);
        border: 1px solid #FFFFFF;
        border-radius: 20px;
        position: absolute;
        top:217px;
        left:80px;
    }


    #dthz{
        width: 430px;
        height: 280px;
        background: #000000;
        /*opacity: 0.3;*/
        border-radius: 8px;
        position: absolute;
        top:255px;
        left:890px;
        background: url('../../assets/imgs/interfaceKoolkit/3.png');
        background-size: 100% 100%;
    }
    #dthz img{
        position: absolute;
        top:73px;
        left:179px;
    }

    #dthz div{
        width: 178px;
        height: 23px;
        font-size: 32px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #E3F3FF;
        position: absolute;
        top:155px;
        left:155px;
    }

    #dthz button{
        width: 120px;
        height: 40px;
        background: rgba(255,255,255,0.2);
        border: 1px solid #FFFFFF;
        border-radius: 20px;
        position: absolute;
        top:217px;
        left:155px;
    }

    #ztt{
        width: 280px;
        height: 320px;
        background: #000000;
        /*opacity: 0.3;*/
        border-radius: 8px;
        position: absolute;
        top:255px;
        left:1330px;
        background: url('../../assets/imgs/interfaceKoolkit/4.png');
        background-size: 100% 100%;
    }

    #ztt img{
        position: absolute;
        top:97px;
        left:100px;
    }
    #ztt div{
        width: 178px;
        height: 23px;
        font-size: 32px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #E3F3FF;
        position: absolute;
        top:199px;
        left:96px;
    }

    #ztt button{
        width: 120px;
        height: 40px;
        background: rgba(255,255,255,0.2);
        border: 1px solid #FFFFFF;
        border-radius: 20px;
        position: absolute;
        top:250px;
        left:80px;
    }


    #bim{
        width: 280px;
        height: 240px;
        background: #000000;
        /*opacity: 0.3;*/
        border-radius: 8px;
        position: absolute;
        top:585px;
        left:310px;
        background: url('../../assets/imgs/interfaceKoolkit/5.png');
        background-size: 100% 100%;
    }
    #bim img{
        position: absolute;
        top:53px;
        left:102px;
    }

    #bim div{
        width: 178px;
        height: 23px;
        font-size: 32px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #E3F3FF;
        position: absolute;
        top:125px;
        left:108px;
    }

    #bim button{
        width: 120px;
        height: 40px;
        background: rgba(255,255,255,0.2);
        border: 1px solid #FFFFFF;
        border-radius: 20px;
        position: absolute;
        top:175px;
        left:80px;
    }

    #kjfx{
        width: 430px;
        height: 280px;
        background: #000000;
        /*opacity: 0.3;*/
        border-radius: 8px;
        position: absolute;
        top:545px;
        left:600px;
        background: url('../../assets/imgs/interfaceKoolkit/6.png');
        background-size: 100% 100%;
    }

    #kjfx img{
        position: absolute;
        top:70px;
        left:177px;
    }

    #kjfx div{
        width: 178px;
        height: 23px;
        font-size: 32px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #E3F3FF;
        position: absolute;
        top:159px;
        left:155px;
    }

    #kjfx button{
        width: 120px;
        height: 40px;
        background: rgba(255,255,255,0.2);
        border: 1px solid #FFFFFF;
        border-radius: 20px;
        position: absolute;
        top:215px;
        left:150px;
    }


    #IOT{
        width: 280px;
        height: 280px;
        background: #000000;
        /*opacity: 0.3;*/
        border-radius: 8px;
        position: absolute;
        top:545px;
        left:1040px;
        background: url('../../assets/imgs/interfaceKoolkit/7.png');
        background-size: 100% 100%;
    }

    #IOT img{
        position: absolute;
        top:70px;
        left:102px;
    }

    #IOT div{
        width: 178px;
        height: 23px;
        font-size: 32px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #E3F3FF;
        position: absolute;
        top:156px;
        left:113px;
    }

    #IOT button{
        width: 120px;
        height: 40px;
        background: rgba(255,255,255,0.2);
        border: 1px solid #FFFFFF;
        border-radius: 20px;
        position: absolute;
        top:206px;
        left:85px;
    }


    #CYGJ{
        width: 280px;
        height: 240px;
        background: #0080FF;
        border: 1px solid #0080FF;
        border-radius: 8px;
        position: absolute;
        top:585px;
        left:1330px;
        background: url('../../assets/imgs/interfaceKoolkit/8.png');
        background-size: 100% 100%;
    }

    #CYGJ img{
        position: absolute;
        top:57px;
        left:104px;
    }

    #CYGJ div{
        width: 178px;
        height: 23px;
        font-size: 32px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #E3F3FF;
        position: absolute;
        top:134px;
        left:82px;
    }

    #CYGJ button{
        width: 120px;
        height: 40px;
        background: rgba(255,255,255,0.2);
        border: 1px solid #FFFFFF;
        border-radius: 20px;
        position: absolute;
        top:184px;
        left:82px;
    }
</style>