<template>
    <div class="maxWidth home-banner" style="width:1920px;margin:0px auto;">
        <el-carousel trigger="click" height="480px" width="100%" :direction="bannerdirection">
            <el-carousel-item v-for="(item,index) in bannerList" :key="item">
                <div class="maxWidth maxHeight pos-r">
                    <img class="pos-a" :src="item" style="width: 1920px;height:480px;left:0;top:0" />
                    <div class="bannerbat1 pos-a" v-if="index==0"  @click="goPage('/serverSupermarket','banner',1,null)">这里有你想看的></div>
                    <div class="bannerbat2 pos-a" v-if="index==1"  @click="goPage('/serverSupermarket','banner',1,null)">查看详情</div>
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
    <div class="maxWidth home-servers">
        <div class="commoncontainer maxHeight flex jc-c ai-c column">
            <div class="fz-28 fc-b mb-20" style="margin-top:-45px">资源中心</div>
            <div class="fc-b fz-14 mb-20">Resource Centre</div>
            <div class="flex ai-c mb-20">
                <div class="serve-line"></div>
                <div class="serve-img">
                    <img src="/images/home/tuoyuan.png" />
                </div>
                <div class="serve-line"></div>
            </div>
            <div class="flex maxWidth jc-sb" style="margin-top: 40px;">
                <div v-for="(item,index) in serveList" :key="index" class="outbox cursor" @click="serveClick(item)">
                    <div class="inbox">
                        <div class="maxWidth" style="margin: 40px 0;">
                            <img :src="item.img" />
                        </div>
                        <div class="fc-b fz-16 ta-c serlabel">{{item.label}}</div>
                        <div class="fc-b fz-14 ta-l serdescribe">{{item.describe}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="maxWidth home-tool">
        <div class="commoncontainer maxHeight flex jc-c ai-c column">
            <div class="fz-28 fc-b mb-20" style="margin-top:-45px">工具资源</div>
            <div class="fz-14 fc-b mb-20">Tool Resources</div>
            <div class="flex ai-c mb-20">
                <div class="serve-line bg-b"></div>
                <div class="serve-img">
                    <img src="/images/home/tuoyuan.png" />
                </div>
                <div class="serve-line bg-b"></div>
            </div>
            
            <div class="maxWidth" style="overflow-x: scroll;margin-top: 40px;">
                <div style="white-space: nowrap;">
                    <div v-for="(item,index) in toolList" :key="index" class="tooloutbox cursor"  @click="goPage('/serverSupermarket','serverSupermarket',1,item)">
                        <div class="toolinbox flex pos-r">
                            <div class="pos-a maxWidth maxHeight">
                                <img class="maxWidth maxHeight" :src="item.url" />
                            </div>
                            <div class="righttool"></div>
                            <div class="righttoolcontent flex ai-c jc-c column">
                                <img :src="item.icon" />
                                <div class="fz-14 fc-w mt-10 mb-10">{{item.name}}</div>
                                <div class="bg-w fz-10" style="padding: 1px 10px;border-radius: 10px;">点击查看</div>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="maxWidth home-datas">
        <div class="commoncontainer maxHeight flex jc-c ai-c column">
            <div class="fz-28 fc-w mb-20" style="margin-top:-45px">数据引擎</div>
            <div class="fc-w fz-14 mb-20">Data engine</div>
            <div class="flex ai-c mb-20">
                <div class="serve-line"></div>
                <div class="serve-img">
                    <img src="/images/home/tuoyuan.png" />
                </div>
                <div class="serve-line"></div>
            </div>
            <div class="flex maxWidth jc-sb" style="margin-top: 90px;">
                <div class="fc-w fz-16 ta-l data-label">时空大数据控掘分析引整，实现了海量时空数据的分布式计算处理和洞察控掘的能力，通过对大规模时空数据进行资源池化管理，
                    并利用分布式存储机制形成统一的大数据分析资源池，利用分布式计算和处理工具、时空挖掘工具、结合机器学习工具，
                    实现了时空数据的价值挖掘、规律探索和趋势预测的能力。大数据分析引擎设计过程中，采用分布式计算能力，通过多节点并行和调度，
                    实现计算任务的快速处理、计算模型的高效调度。</div>
                <div style="width: 45%;">
                    <img class="maxWidth" src="/images/home/databg.png" />
                </div>
            </div>
        </div>
    </div>
    <div class="maxWidth home-special bg-w">
        <div class="commoncontainer maxHeight flex jc-c ai-c column">
            <div class="fz-28 fc-b mb-20" style="margin-top:-45px">公共专题</div>
            <div class="fz-14 fc-b mb-20">SourceHanSansCN-Normal</div>
            <div class="flex ai-c mb-20">
                <div class="serve-line bg-b"></div>
                <div class="serve-img">
                    <img src="/images/home/tuoyuan.png" />
                </div>
                <div class="serve-line bg-b"></div>
            </div>
            <div class="flex maxWidth jc-sb mt-20" style="margin-top: 40px;">
                <div class="special-li cursor" v-for="(item,index) in specialList.before" :key="index" @click="goCim(item)">
                    <div class="special-inbox">
                        <div class="bg-blue">
                            <img :src="item.coverImg" style="width:100%;height:100%" />
                        </div>
                        <div class="fz-16 fc-b ta-l mt-20 special-label">{{item.label}}</div>
                        <div class="fz-14 fc-9 ta-l mt-10 special-desc">{{item.desc}}</div>
                    </div>
                </div>
               
                <div class="special-li flex wrap jc-sb" style="border: none;">
                    <div class="special-box cursor" v-for="(item,index) in specialList.after" :key="index" @click="goCim(item)">
                        <div class="special-box-img">
                            <img :src="item.url" />
                        </div>
                        <div class="special-box-label fz-16 fc-b">{{item.label}}</div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- <div class="maxWidth home-footer">
        <div class="commoncontainer maxHeight flex jc-c ai-c column">
            <div class="flex">
                <div class="footer-li">关于我们</div>
                <div class="footer-li">免责声明</div>
                <div class="footer-li">联系我们</div>
                <div class="footer-li">意见反馈</div>
            </div>
            <div class="flex" style="margin: 10px 0;">
                <div style="margin-right: 25px;">山东慧创信息科技有限公司.版权所有</div>
                <div>地址：山东省临沂市应用科学城A栋14F</div>
            </div>
            <div>技术支持：山东慧创信息科技有限公司</div>
        </div>
    </div> -->
</template>
<script>
import {getMethodCommon, postMethodCommon} from '../../api/common';
import {defineComponent, reactive, onMounted, toRefs} from "vue";
import {useRouter} from 'vue-router'
// import homeHeader from "../../components/layer/header/NewHomeHeader.vue";
import {BASE_API,BASE_IMAGE_URL} from '../../../public/config/server.js'
export default defineComponent({
    name: 'Cim',
    components: {
        // homeHeader
    },
    setup() {
        let data = reactive({
            bannerdirection: 'horizontal',
            bannerList:[
                '/images/home/banner1-a.png',
                '/images/home/banner2.png',
            ],
            serveList:[
                { label: '数据服务' , img: '/images/home/source1.png' , describe: '费县数据模型服务超市，包含三维图层服务及二维数据服务等数据资源' ,path: '/serverSupermarket' ,status: 0},
                { label: '应用服务' , img: '/images/home/source2.png' , describe: '费县专题应用管理页面，内可进行专题各种操作',path: '/usercenter/myapplication' ,status: 2},
                { label: '进度查询' , img: '/images/home/source3.png' , describe: '平台服务申请进度查询，可查看申请详情进度信息',path: '/usercenter/myapply' ,status: 3},
                { label: '个人中心' , img: '/images/home/source4.png' , describe: '当前登录账号基本信息',path: '/usercenter/myinfo' ,status: 2}
            ],
            toolList:[],
            toolImg:[
                '/images/home/tool1.png',
                '/images/home/tool2.png',
                '/images/home/tool3.png',
                '/images/home/tool4.png'
            ],
            specialList:{
                before:[
                    {label: '规划管控专题' ,  path: '/cim' , desc: '',value:''},
                    {label: '不动产登记专题' ,  path: '/cim' , desc: '',value:'' },
                    {label: '违建监测专题' ,  path: '/cim' , desc: '',value:'' },
                ],
                after:[
                    {label: '交通专题' , url: '/images/home/gaosu.png' , path: '/cim' },
                    {label: '综合管网专题' , url: '/images/home/guanwang.png' , path: '/cim' },
                    {label: '教育专题' , url: '/images/home/jiaoyu.png' , path: '/cim' },
                    {label: '卫生专题' , url: '/images/home/yiyuan.png' , path: '/cim'},
                    {label: '旅游专题' , url: '/images/home/lvyou.png' , path: '/cim'},
                    {label: '更多专题' , url: '/images/home/qitafenlei.png' ,path: '/usercenter/myapplication' ,status: 2 }
                ]
            }
        })
        const router = useRouter()
        onMounted(() => {
            methods.getAllTool()
            methods.getMenu()
        })
        let methods = {
            serveClick(param){
                router.push({
                    path: param.path,
                    query: {
                        status: param.status
                    }
                }) 
            },
            goCim(param){
                console.log('pp',param)
                if(param.status){
                    router.push({
                        path: param.path,
                        query: {
                            status: param.status
                        }
                    })
                }else{
                    router.push({
                        path: param.path,
                        query: {
                            type: param.type,
                            id: param.value,
                            title: param.label,
                        }
                    })
                }
                
            },
            goPage(param, type, state, data) {
                console.log('type',type)
                if (type === 'serverSupermarket') {
                    console.log('data',data)
                    console.log('param',param)
                    console.log('state',param)
                    router.push({
                        path: param,
                        query: {
                            status: state,
                            toolid: data.Id
                        }
                    })
                } else {
                    router.push({
                        path: param,
                        query: {
                            status: state,
                            type: type
                        }
                    })
                }
            },
             getAllTool(){
                let param ={
                    page: 1,
                    limit: 600,
                    name:null,
                    is_recommend:1
                }
                getMethodCommon("/CimBackStageManagement/LoadCimToolsListNoAuth",param).then(res=>{
                    if(res.code == 200){
                        data.toolList = res.data
                        data.toolList.forEach((item,index) =>{
                            item.icon = data.toolImg[index]
                            if(item.cover_img){
                                item.url = BASE_IMAGE_URL+"/"+item.cover_img;
                            }else{
                                item.url = '/images/trans.png'
                            }
                        })
                    }
                })

            },
            getMenu() {
                getMethodCommon("/CimApplication/GetSysCimList", {}).then(res => {
                    if (res.code === 200) {
                        let arr = []
                        let obj = []
                        res.result.forEach((item,index) =>{
                            data.specialList.before.forEach(val =>{
                                if(item.name == val.label){
                                    val.desc = item.description
                                    val.type = item.page_code
                                    val.value = item.id,
                                    val.coverImg = BASE_IMAGE_URL+"/"+item.cover_img
                                }
                            })
                            data.specialList.after.forEach(val =>{
                                if(item.name == val.label){
                                    val.desc = item.description
                                    val.type = item.page_code
                                    val.value = item.id
                                }
                            })
                        })
                    }
                })
            },
        };
        return {
            ...methods,
            ...toRefs(data),
        };
    },
    });
</script>

<style scoped>
.home-banner{
    height: 484px;
}
.bannerbat1{
    width: 179px;
    height:38px;
    text-align: center;
    line-height: 38px;
    font-size: 14px;
    color: #fff;
    bottom: 95px;
    left: 323px;
    background: url('/images/home/batbg.png');
    background-size: 100% 100%;
    cursor: pointer;
}
.bannerbat2{
    width: 461px;
    height:47px;
    text-align: center;
    line-height: 47px;
    font-size: 14px;
    color: #fff;
    bottom: 111px;
    left: 323px;
    background: url('/images/home/batbg1.png');
    background-size: 100% 100%;
    cursor: pointer;
}
.home-servers{
    height: 593px;
    background: #fff;
    padding-top:40px;
}
.serve-line{
    width: 120px;
    height: 2px;
    background: #2C3134;
}
.serve-img{
    width: 46px;
    height: 46px;
    margin: 0 62px;
}

.outbox{
    width: 295px;
    height: 278px;
    background: rgba(255,255,255,0.85);
    box-shadow: 0px 1px 8px 0px #BBBBBB;
    border-radius: 4px;
}
.inbox{
    width: 86%;
    height: 86%;
    margin: 7%;
}
.serlabel,.special-label{
    margin: 10px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
.special-label{
    padding-left: 15px;
}
.serdescribe,.special-desc{
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
.special-desc{
    -webkit-line-clamp: 2;
}
.home-tool{
    height: 505px;
    background: #fff;
}
.tooloutbox{
    width: 290px;
    height: 180px;
    background: rgba(47,52,57,0.8500);
    border-radius: 4px;
    margin: 0 5px;
    display: inline-block;
}
.toolinbox{
    width: 270px;
    height: 160px;
    margin: 10px auto;
}
.righttool{
    width: 50%;
    height: 100%;
    background: linear-gradient(180deg, #0361EF 0%, #073E78 100%);
    position: absolute;
    left: 50%;
    opacity: 0.8;
}
.righttoolcontent{
    width: 50%;
    height: 100%; 
    position: absolute;
    left: 50%;
    color: #3C3CF3;
}
.home-datas{
    height: 660px;
    background: #2C3134;
}
.home-special{
    height: 605px;
}

.special-li{
    width: 290px;
    height: 263px;
    background: #FFFFFF;
    border: 1px solid #CACBCC;
    border-radius: 4px;
}
.special-inbox{
    width: 94%;
    height: 94%;
    margin: 3%;
}
.special-inbox .bg-blue{
    height: 160px;
    background: linear-gradient(180deg, #0361EF 0%, #073E78 100%);
    border-radius: 4px;
}
.special-box{
    width: 90px;
    height: 57%;
}
.special-box-img{
    width: 92px;
    height: 68px;
}
.special-box-label{
    width: 100%;
    background: #fff;
    line-height: 70px;
    white-space: nowrap;
}
.data-label{
    width: 48%;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 24px;
}


.home-footer{
    height: 128px;
    color: #B3B3B3;
    font-size: 14px;
}
.footer-li{
    padding: 0 10px;
    border-right: 1px solid #B3B3B3;
}
.bg-w{
    background: #fff;
}
.bg-b{
    background: #2C3134;
}
.fw-b{
    color: #2C3134;;
}
.cursor{
    cursor: pointer;
}
.maxWidth{
    width: 100%;
}
.maxHeight{
    height: 100%;
}
.flex{
    display: flex;
    flex-shrink: 0;
}
.column{
    flex-direction: column;
}
.wrap{
    flex-wrap: wrap;
}
.mb-20{
    margin-bottom: 20px;
}
.mt-20{
    margin-top: 20px;
}
.mt-10{
    margin-top: 10px;
}
.ta-l{
    text-align: left;
}
.ai-c{
    align-items: center;
}
.jc-c{
    justify-content: center;
}
.jc-sa{
    justify-content: space-around;
}
.jc-sb{
    justify-content: space-between;
}
.fc-w{
    color: #fff;
}
.commoncontainer{
    width: 1200px;
    margin: 0 auto;
}
.fw-b{
    font-weight: bold;
}
.fz-10{
    font-size: 10px;
}
.fz-14{
    font-size: 14px;
}
.fz-16{
    font-size: 16px;
}
.fz-18{
    font-size: 18px;
}
.fz-20{
    font-size: 20px;
    line-height: 20px
}
.fz-24{
    font-size: 24px;
    line-height: 24px
}
.fz-28{
    font-size: 28px;
    line-height: 28px
}
.fz-30{
    font-size: 30px;
    line-height: 30px
}
.fc-9{
    color: #999;
}
.mb-10{
    margin-bottom: 10px;
}
.pos-r{
    position: relative;
}
.pos-a{
    position:absolute;
}

.el-icon-helloworld{
    background: url("/images/user1.png") center no-repeat;
}

.el-icon-helloworld::before{
    content:"\8d3a";
    font-size:40px;
    visibility: hidden;
}

</style>