<template>
    <div class="main">
        <div class="left_content">
            <el-image :src="img" class="img"></el-image>
            绩效视图
        </div>
        <div class="right_content">
            <div class="row_one">
                <div class="col-item">
                    <a :href="url1" class="link-box one">
                        <el-image :src="img1" class="img img1"></el-image>
                        <span class="span1">添加数据源</span>
                    </a>
                </div>
                <div class="col-item">
                    <!-- <a :href="url5" class="more-link">
                        <span class="quan"></span>
                        <span class="quan"></span>
                        <span class="quan"></span>
                        更多
                        </a> -->
                    <a :href="url2" class="link-box">
                        <el-image :src="img2" class="img img2"></el-image>
                        <span class="span2">创建数据集</span>
                    </a>
                </div>
            </div>
            <div class="row_two">
                <div class="col-item">
                    <a :href="url3" class="link-box">
                        <el-image :src="img3" class="img img3"></el-image>
                        <span class="span3">制作报告</span>
                    </a>
                </div>
                <div class="col-item">
                    <a :href="url4" class="link-box four">
                        <el-image :src="img4" class="img img4"></el-image>
                        <span class="span4">查看报告</span>
                    </a>
                </div>
            </div>
            <div class="footer">
                <a :href="url5" class="more-link">
                    <el-image :src="img5" class="img"></el-image>
                    查看更多
                </a>
            </div>
        </div>

    </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import {getLinkList} from "@/api/grid/link/link"
export default {
   data() {
    return {
        img:require("@/assets/imgs/fast_study.png"),
        img1:require("@/assets/imgs/antFill-database.png"),
        img2:require("@/assets/imgs/iconPark-database-network-point.png"),
        img3:require("@/assets/imgs/riFill-edit-box-fill.png"),
        img4:require("@/assets/imgs/antFill-read.png"),
        img5:require("@/assets/imgs/riFill-apps-fill1.png"),
        // url1:'http://158.220.52.42:9388/bi/Viewer?proc=0&action=conn&sysFlag=pre&token=' + getToken(),
        // url2:'http://158.220.52.42:9388/bi/Viewer?proc=0&action=query&sysFlag=pre&token='+ getToken(),
        // url3:'http://158.220.52.42:9388/bi/Viewer?proc=0&action=editor&sysFlag=pre&token='+ getToken(),
        // url4:'http://158.220.52.42:9388/bi/Viewer?proc=0&action=viewerManager&sysFlag=pre&token='+ getToken(),
        // url5:'http://158.220.52.42:9388/bi?sysFlag=pre&token='+ getToken(),
        url1:'',
        url2:'',
        url3:'',
        url4:'',
        url5:''
    }
  },
  mounted() {},
  created(){
    getLinkList({}).then(res=>{
        console.log(res)
        if(res){
            res.map((item,index)=>{
                const key = `url${index+1}`;
                this[key] = item + getToken();
            })
        }
    })
  },
  methods:{

  },
}
</script>
<style lang="scss" scoped>
    .main{
        .left_content{
            width: 400px;
            background: linear-gradient(180deg,rgba(221,234,248,0.15) 1%,
            rgba(185,219,255,0.77) 75%,rgba(87,169,255,1) 100%);
            .img{
                width: 320px;
                height: 350px;
                margin-top: 88px;
                margin-bottom: 19px;
            }
            display: flex;
            flex-direction: column;
            // justify-content: center;
            align-items: center;
            font-size: 40px;
            color:rgba(37,43,49,1)
        }
        display: flex;
        .right_content{
            width: calc(100% - 400px);
            box-sizing: border-box;
            padding: 0 20px;
            .row_one,.row_two{
                display: flex;
                justify-content: space-between;
            }
            .footer{
                // width: calc(90% + 30px);
                height: 60px;
                // border: 1px solid rgba(25,144,255,1);
                //  border-radius: 8px;
                //  display: flex;
                //  justify-content: center;
                //  align-items: center;
                 
                 .img{
                    width: 32px;
                    height: 32px;
                 }
                //  margin-left: 30px;
                 margin-top: 25px;
                 .more-link{
                    border: 1px solid rgba(25,144,255,1);
                    border-radius: 8px;
                    display: flex;
                    height: 100%;
                    // flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    font-size: 24px;
                    color:rgba(37,43,49,1);
                    &:hover{
                        background: linear-gradient(180deg,rgba(255,255,255,1) 0%,rgba(221,234,248,0.5) 95%);
                    }
                 }
            }
        }
        .col-item{
            width: 49%;
            height: 320px;
            position: relative;
            border: 1px solid rgba(25,144,255,1);
            // margin-bottom: 20px;
            margin-top: 25px;
            border-radius: 8px;
            // margin-right: 10px;
            //  margin-left: 30px;
            .link-box{
                display: flex;
                height: 100%;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .img{
                    width: 150px;
                    height: 150px;  
                }
                .img1,.img3{
                    // margin-right: -200px;
                }
                .img2,.img4{
                    // margin-left: -200px;
                }
                span{
                    font-size: 24px;
                    color:rgba(37,43,49,1)
                }
            }
            // &:nth-child(2),&:nth-child(4){
            //     margin-left: 20px;
            // }
            &:hover{
                background: linear-gradient(180deg,rgba(255,255,255,1) 0%,rgba(221,234,248,0.5) 95%);
            }
        }
    }
</style>