<template>
<div class="home">
    <div>
        <Particles 
        id="tsparticles"
        class="login-background"
        :particlesInit="particlesInit" 
        :options="options"/>

        <img src="../assets/11.jpg" width="100%" height="400px" alt="算法集">
        <span class="title">算法集</span>
    </div>

    <span class="titleName ">{{ name }}</span>

    <div class="first">
        <div class="left">
            <div class=" part" >
                <div class="biaoti">
                    <img src="../assets/2.png" width="30px">
                    <span style="margin-left: 2px; line-height: 1em;" v-if="show_secrtity">安全生产</span>
                    <span style="margin-left: 2px; line-height: 1em;" v-if="show_traffic">智慧交通</span>
                    <span style="margin-left: 2px; line-height: 1em;" v-if="show_campus">智慧园区</span>
                    <span style="margin-left: 2px; line-height: 1em;" v-if="show_retail">智慧零售</span>
                    <span style="margin-left: 2px; line-height: 1em;" v-if="show_bank">智慧银行</span>
                </div>
               
                <div class="name">相关算法</div>

                <div class="kind1">
                    <div class="anquan" v-if="show_secrtity" >
                        <span class="text" v-for="items, id in buildNames" :key="id" >
                            <a href="" class="href" @click="clickDetail(items)" >{{ items }}</a>
                        </span>
                    </div>
                    
                    <div class="jiaotong" v-if = "show_traffic">
                        <span class="text" v-for="items, id in trafficNames" :key="id">
                            <a href="" class="href" @click="clickDetail(items)" >{{ items }}</a>
                        </span>
                    </div>

                    <div class="yuanqu" v-if="show_campus">
                        <span class="text" v-for="items, id in campusNames" :key="id">
                            <a href="" class="href" @click="clickDetail(items)" >{{ items }}</a>
                        </span>
                    </div>
                    
                    <div class="lingshou" v-if="show_retail">
                        <span class="text" v-for="items, id in retailNames" :key="id">
                            <a href="" class="href" @click="clickDetail(items)" >{{ items }}</a>
                        </span>
                    </div>

                    <div class="bank" v-if="show_bank">
                        <span class="text" v-for="items, id in bankNames" :key="id">
                            <a href="" class="href" @click="clickDetail(items)" >{{ items }}</a>
                        </span>
                    </div>
                </div>
                <div class="more">查看更多</div>
            </div>
        </div>

        <div class="right" >

            <div class="pic" >
                
                    <div class="img-box" @mouseover="show_secrtity = true,show_traffic = false,show_campus = false,
                    show_retail = false,show_bank = false" @click="isClick('安全生产')">
                        <img src="../assets/1-1.png" alt="安全生产">
                        <p class="word">安全生产</p>
                    </div>

                    <div class="img-box" @mouseover="show_secrtity = false,show_traffic = true,show_campus = false,
                    show_retail = false,show_bank = false" @click="isClick('智慧交通')">
                        <img src="../assets/1-2.png" alt="智慧交通">
                        <p class="word">智慧交通</p>
                    </div>

                    <div class="img-box" @mouseover="show_secrtity = false,show_traffic = false,show_campus = true,
                    show_retail = false,show_bank = false" @click="isClick('智慧园区')">
                        <img src="../assets/1-3.png" alt="智慧园区">
                        <p class="word">智慧园区</p>
                    </div>

                    <div class="img-box" @mouseover="show_secrtity =false,show_traffic = false,show_campus = false,
                    show_retail = true,show_bank = false" @click="isClick('智慧零售')">
                        <img src="../assets/1-4.png" alt="智慧零售">
                        <p class="word">智慧零售</p>
                    </div>

                    <div class="img-box" @mouseover="show_secrtity = false,show_traffic = false,show_campus = false,
                    show_retail = false,show_bank = true" @click="isClick('智慧银行')">
                        <img src="../assets/1-5.png" alt="智慧银行">
                        <p class="word">智慧银行</p>
                    </div>

                     <div class="img-box">
                         <img src="../assets/1-6.png" alt="更多行业">
                         <p class="word">更多行业</p>
                     </div>
            </div>
        </div>
        <div>
    
        <img src="../assets/dcbg.jpg" class="bg3" v-show="show_secrtity" >
        <img src="../assets/bankbg.jpg" class="bg3" v-show="show_bank">
        <img src="../assets/jtbg.jpg" class="bg3" v-show="show_traffic">
        <img src="../assets/lsbg.jpg" class="bg3" v-show="show_retail">
        <img src="../assets/campusBg.jpg" class="bg3" v-show="show_campus">
        </div>
    </div>

    
</div>

</template>

<script setup lang="ts" name="home">
import {ref, onMounted, reactive} from 'vue';
import { loadSlim } from "tsparticles-slim";
import type { Engine } from "tsparticles-engine"
import { getAllAlgorithm, login } from '@/api/uesr';
import { MyClass } from '@/api/interface'
import type { alList } from '@/api/interface';
import router from '@/router';

//选择展示哪一类算法
let show_secrtity  = ref(true)
let show_traffic = ref(false)
let show_campus = ref(false)
let show_retail = ref(false)
let show_bank = ref(false)

const name ="开创AI视觉算法平台"

//登录用户名密码
const data = {
  username:"admin",
  password:"123456"
}

//保存axios所有数据
const allMes = reactive(new MyClass())
//保存建筑地产类的算法
const buildNames = ref()
//保存智慧交通类的算法
const trafficNames = ref()
//保存智慧园区类的算法
const campusNames = ref()
//保存智慧零售类的算法
const retailNames = ref()
//保存智慧银行类的算法
const bankNames = ref()

// //登录获得数据
onMounted(async() => {
  login(data).then(response =>{
    console.log("登录结果", response);
    //获得所有的算法信息
    getAllAlgorithm().then((res)=>{
      //将axios返回的值保存到list:alList中
      allMes.list = res.data
      //保存建筑地产类的算法名称保存到buildNames中
      buildNames.value = allMes.list.filter(item => item.fieldStr.includes('安全生产')).map(items => items.algorithm_name)
      //保存智慧交通类的算法名称保存到trafficNames中
      trafficNames.value = allMes.list.filter(item => item.fieldStr.includes('智慧交通')).map(items => items.algorithm_name)
      //保存智慧园区类的算法名称保存到campusNames中
      campusNames.value = allMes.list.filter(item => item.fieldStr.includes('智慧园区')).map(items => items.algorithm_name)
      //保存智慧零售类的算法名称保存到retailNames中
      retailNames.value = allMes.list.filter(item => item.fieldStr.includes('智慧零售')).map(items => items.algorithm_name)
      //保存智慧银行类的算法名称保存到bankNames中
      bankNames.value = allMes.list.filter(item => item.fieldStr.includes('智慧银行')).map(items => items.algorithm_name)
    })
    .catch(error => {
      console.log(error)
    });
  })
})

//根据点击的图片类别跳转到相关页面，并点亮相关类别
function isClick(className: string){
  router.push({name:'algorithm', params:{need:className}})
}

//点击算法块 跳转到算法详情界面
function clickDetail(items:string){
    router.push({name: 'detail', params:{algorithm_name:items}})
}

 //动画效果
 const particlesInit = async (engine: Engine) => {
    //await loadFull(engine);
    await loadSlim(engine);
};
const options = {
      fpsLimit: 120,
      interactivity: {
        events: {
          onClick: {
            enable: true,
            mode: 'push'
          },
          onHover: {
            enable: true,
            mode: 'grab'
          },
          resize: true
        },
        modes: {
          bubble: {
            distance: 400,
            duration: 2,
            opacity: 0.8,
            size: 40
          },
          push: {
            quantity: 4
          },
          grab: {
            distance: 200,
            duration: 0.4
          }
        }
      },
      fullScreen:{
            enable:false,
            zIndex:0
      },
      particles: {
        color: {
          value: '#ffffff'
            //  value: '#1f124f'
        },
        links: {
          color: '#ffffff',
          distance: 160,
          enable: true,
          opacity: 0.65         ,
          width: 0.7
        },
        collisions: {
          enable: true
        },
        move: {
          direction: 'none',
          enable: true,
          outModes: {
            default: 'bounce'
          },
          random: false,
          speed: 1,
          straight: false
        },
        number: {
          density: {
            enable: true,
            area: 800
          },
          value: 80
        },
        opacity: {
          value: 0.5
        },
        shape: {
          type: 'circle'
        },
        size: {
          value: { min: 1, max: 2 }
        }
      },
      detectRetina: true
}

</script>

<style scoped>

.home {
  text-align: center;
  margin-top: 0px;
  position: relative;
}

.login-background {
  /* background: url('../assets/11.jpg'); */
  width: 100%;
  height: 40%;
  position: absolute;
}
.title {
  position: absolute; /* 将文本放置于图片之上 */
  top: 20%;
  left: 30%;
  display: flex;
  color: #ffffff;
  font-size: xx-large;
}
.titleName {
  position: absolute; /* 将文本放置于图片之上 */
  top:43%;
  left: 45%;
  display: flex;
  color: black;
  font-size: xx-large;
  z-index: 2;
}
.first {
  width: 100%;
  height: 600px;
  position: relative;
  background: url("../assets/bg.jpg");
  /* z-index: -2; */
  display: flex;
}
.left {
  width: 1050px;
  margin-left: 100px;
  margin-top: 190px;
  /* background: url("../assets/bg.jpg"); */
  position: relative;
}
.part {
  width: 950px;
  overflow: hidden;
}
.biaoti {
  text-align: left;
  margin-left: 100px;
  margin-top: auto;
  font-size: large;
  color: #0685C1;
  line-height: 1em;
  position: relative;
  top: 0px;
}
.name {
  text-align: left;
  margin-left: 100px;
  margin-top: 30px;
  font-size: large;
  font-weight: bold;
}
.more{
    color: #0685C1;

    text-align: left;
    margin-left: 100px;
    margin-top: 30px;
}
.anquan {
  width: 800px;
  display: flex;
  flex-wrap: wrap;
}
.jiaotong {
  width: 800px;
  display: flex;
  flex-wrap: wrap;
}
.lingshou {
  width: 800px;
  display: flex;
  flex-wrap: wrap;
}
.yuanqu {
  width: 800px;
  display: flex;
  flex-wrap: wrap;
}
.bank {
  width: 800px;
  display: flex;
  flex-wrap: wrap;
}
.kind1 {
  display: flex;
  text-align: start;
  margin-left: 100px;
  margin-top: 20px;
  line-height: 40px;
}
/*  */
.href {
  text-decoration: none;
  color: #666666;
}
.href:hover{
    color: #0685C1;
}
.text {
  margin-right: 20px;
  /* font-size: medium; */
}
.text:hover {
    /* text-decoration-color: #0000FF; */
    /* background-color: #0685C1; */
    color: #0685C1;
}
.right {
  width: 100%;
  height: 100%;
  position: relative;
  /* padding-left: 300px; */
  /* background-image: url('../assets/bg3.jpg');
  background-position: right; */
  
}
.pic {
  background-color: #FFFFFF;
  width: 300px;
  height: 245px;
  display: flex;
  flex-wrap: wrap;
  z-index: 2;
  position: absolute;
  top: 180px;
  right: 280px;
}
.bg3{
  position: absolute;
  z-index: 1;
  width: auto;
  height: auto;
  display: block;
  margin-left: 1200px;
  /* padding-left: 100px; */
  right: 0px;
}
.img-box{
  width: auto;
  height: auto;
}
.img-box:hover {
  transition: transform 0.3s;
  transition-property: transform;
  transition-timing-function: ease;
  transition-duration: 0.3s;
  transition-delay: 0s;
  transform: translateY(-5px);
  background: #F3F3FA;
}
.word {
  text-align: center;
  color: #666666;
  margin-top: auto;
  font-size: small;
  margin-bottom: auto;
}


</style>