<template>
  <div class="container">
    <div class="body">
        <p class="tip">控制台</p>
        <div class="navigation-center">
            <div class="navigation-item" v-for="(item,index) in routerlist" :key="index" :style="{'background':item.bgColor}" @click="goDetail(item)">
                <div class="item-icon">
                    <img class="top-img" :src="'/img/navigation/top-'+item.icon+'.png'" alt="">
                    <img class="bottom-img" :src="'/img/navigation/bottom-'+item.icon+'.png'" alt="">
                </div>
                <div class="item-title">
                    {{item.lable}}
                </div>
            </div>
        </div>

        <div class="two-code-center">
            <div class="two-code-item">
                <div class="code-container bar">
                    <div class="code-text">
                        扫码查看 进山登记 小程序
                    </div>
                    <div class="code-image">
                        <img src="/img/navigation/code.png" alt="">
                    </div>
                </div>

                <div class="code-container">
                    <div class="code-text">
                        扫码<br/>下载 APP 
                    </div>
                    <div class="code-image">
                        <VueQr :text="QRCode" :size="400"></VueQr>
                    </div>
                </div>
            </div>
            <div class="documation-item">
                <p style="font-size:16px;color:#fff;margin-top:40px;">用户手册</p>
                <p>
                    <el-button type="warning" size="middle" round @click="$router.push({'path':'/helpdocument'})">查看
                        <i class="el-icon el-icon-right"></i>
                    </el-button>
                </p>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
 import VueQr from "vue-qr"
import { getMethodCommon } from "../../api/common";

  export default {
    name: 'index',
    components:{
        VueQr
    },
    data(){
        return {
            QRCode: null,
            routerlist:[
                {
                    lable:"防灭火沙盘",
                    icon:"1",
                    url:"/home",
                    bgColor:"linear-gradient(180deg, #4CF6EA 0%, #3C31F5 100%)"
                },{
                    lable:"数据中心",
                    icon:"4",
                    url:"http://60.217.22.153:9003/#/dashboard?id="+ localStorage.getItem("X-Token"),
                    bgColor:"linear-gradient(180deg, #E0FF13 0%, #086D3C 100%)"
                },{
                    lable:"管理中心",
                    icon:"5",
                    url:"/dashboard",
                    bgColor:"linear-gradient(180deg, #FFDF2F 0%, #FB5757 100%)"
                }
            ]
        }
    },
    created(){
        this.getAppUrl();
    },
    methods: {
            goDetail(item) {
                if (item.lable == '数据中心') {
                    window.open('http://60.217.22.153:9003/#/dashboard?id=' + localStorage.getItem("X-Token"), '_blank')
                }else  if (item.lable == '监测中心') {
                    window.open('http://60.213.14.14:6088/forestry/', '_blank')
                }else if (item.lable == "防灭火沙盘"){
                    let userIdentity = localStorage.getItem("userIdentity")
                    if(userIdentity == 5){
                        this.$router.push({ 'path': item.url })
                    }else{
                        this.$message({
                            message: '无权限进入此模块',
                            type: 'warning'
                        })
                    }
                }else {          
                    this.$router.push({ 'path': item.url })
                }
            },
            getAppUrl(){
                getMethodCommon("/FireCodeApp/GetUpdateFiles",{project:"yishuixian"}).then(res=>{
                    if(res.code == 200){
                        this.QRCode = process.env.VUE_APP_BASE_IMG_URL+'/'+ res.data.filepath;
                    }
                })
            },
        }
  }
</script>

<style scoped>
.navigation-container{
    width:100%;
    height:100vh;
    background:#071216;
}

.navigation-header{
    width:100%;
    height:100px;
    background-image:url(/img/navigation/header.png);
    background-size:100% 100px;
    text-align: center;
    font-size:40px;
    line-height:90px;
    color:#fff;
}

.navigation-body{
    width:100%;
    height: calc( 100vh - 100px);
    padding-top:100px;
    background-image:url(/img/navigation/container-bg.png);
    background-size:100% 100%;
}


.tip{
    text-align: center;
    font-size: 30px;
    font-family:SFNS-Regular, SFNS;
    font-weight:400;
    color: #FFFFFF;
    line-height: 35px;
    margin-bottom:80px;
}

.navigation-center{
    width:636px;
    height:255px;
    margin:30px auto;
}

.navigation-center .navigation-item{
    width:192px;
    height:255px;
    float:left;
    margin:0px 10px;
    border-radius:4px;
    cursor:pointer;
    position:relative;
    top:0px;
    transition:all 0.25s;
}

.navigation-center .navigation-item:hover{
    box-shadow: 0px 30px 30px rgba(255,255,255,0.05);
    top:-2px;
}

.navigation-item .item-icon{
    width:134px;
    height:80px;
    margin:0px auto;
    position:relative;
}
.item-title{
    font-size:18px;
    color:#fff;
    margin-top:30px;
    text-align: center;
    position: relative;
}
.item-title::after{
    content:"";
    width:30px;
    height:2px;
    background:#fff;
    position: absolute;
    bottom:-10px;
    left:50%;
    transform: translate(-50%,-50%);
}
.item-icon .top-img{
    position:absolute;
    top:-40px;
    left:21px;
    width:80px;
}
.two-code-center{
    width:616px;
    height:172px;
    margin:0px auto;
}
.two-code-center .two-code-item{
    width:412px;
    height:172px;
    float:left;
    background: #0E2C37;
    position: relative;
    border-radius: 4px;
}

.code-container{
    width:50%;
    height:100%;
    padding:20px;
    float:left;
}
.bar{
    position: relative;
}
.bar::after{
    content:"";
    width:1px;
    height:124px;
    position:absolute;
    top:26px;
    right:0px;
    background:#eee;
}
.code-text{
    width:100%;
    padding:5px 20px;
    min-height:30px;
    text-align: center;
    color:#ccc;
    font-size:12px;
    margin:0px auto;
    position: relative;
}
.code-text::after{
    width:10px;
    height:10px;
    border-top:1px solid #fff;
    border-left:1px solid #fff;
    content:"";
    position: absolute;
    top:0px;
    left:0px;
}
.code-text::before{
    width:10px;
    height:10px;
    border-right:1px solid #fff;
    border-bottom:1px solid #fff;
    content:"";
    position: absolute;
    bottom:0px;
    right:0px;
}

.code-image{
    width:60px;
    height:60px;
    margin:10px auto;
}

.code-image img{
    width:60px;
    height:60px;
}
.two-code-center .two-code-item::after{
    content:"";
    width:0px;
    height:0px;
    border-top:6px solid #0DADC2;
    border-left:6px solid #0DADC2;
    border-bottom:6px solid #0E2C37;
    border-right:6px solid #0E2C37;
    position:absolute;
    top:0px;
    left:0px;
}

.two-code-center .documation-item{
    width:192px;
    height:172px;
    float:right;
    background: #0E2C37;
    position: relative;
    text-align:center;
    border-radius: 4px;
}

.two-code-center .documation-item::after{
    content:"";
    width:0px;
    height:0px;
    border-top:6px solid #0DADC2;
    border-left:6px solid #0DADC2;
    border-bottom:6px solid #0E2C37;
    border-right:6px solid #0E2C37;
    position:absolute;
    top:0px;
    left:0px;
}
</style>