<template>
    <div class="top">
        <img src="../assets/image/safe.jpg" width="100%" height="400px" alt="背景图片">
    </div>

    <!-- 导航栏 -->
    <div class="main">
        <h2 style="text-align: center;margin-top: 0px;line-height: 50px">算法商城</h2>
        <div class="select">
            <div class="table">
                <dl class="line1">
                    <dt class="dt">行业</dt>
                    <dd class="dd">
                        <ul class="no-wrap">
                            <li v-for="items, id in title_list" :key="id" :class="{'active': items.selected}" @click="handleClick(items, id)">
                                <a @click.prevent href="">{{ items.name }}</a>
                            </li>
                        </ul>
                    </dd>
                </dl>

                <dl class="line1">
                    <dt class="dt">场景</dt>
                    <dd class="dd">
                        <ul class="no-wrap">
                            <li v-for="data, id in scene_list" :key="id" :class="{'active': data.selected}" @click="sceneClick(data, id)">
                                <a @click.prevent href="">{{ data.name }}</a>
                            </li>
                        </ul>
                    </dd>
                </dl>

            </div>
        </div>
        
        <!-- 展示所有算法 -->
        <div class="base">
            <div class="model" >
                <ul class="suanfa" >
                    <li class="set" v-for="items, id in constructList" :key="id">
                        <div class="box1">
                            <a class="img-box" href="">
                                <img src="../assets/image/phone.jpg" @click="clickRouter(items)">
                            </a>
                            <div class="box1-text">
                                <span class="icon"><img src="../assets/image/icon.png"></span>
                                <h6 class="box1-title">
                                    <a href="" @click="clickRouter(items)">{{ items.algorithm_name }}</a>
                                </h6>
                                <div class="tags">
                                    <div class="tags-more">
                                        <a href="">{{ items.fieldList[0] }}</a>
                                        <i class="line"></i>
                                        <a href="">{{ items.fieldList[1] }}</a>
                                        <i class="line"></i>
                                        <a href="">{{ items.fieldList[2] }}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>

                <div class="change-box">
                    <div class="padding"></div>
                    <div class="demo-pagination-block">
                        <el-pagination 
                        @current-change="handleCurrentChange" 
                        @size-change="handleSizeChange"
                        layout="prev, pager, next" 
                        :total="50" />
                    </div>
                </div>
            </div>
        </div>
    </div>
   
</template>
  
<script setup lang="ts" name="About">
import router from '@/router';
import { useRoute } from 'vue-router';
import { reactive, ref, computed } from 'vue'
import type { Item, alList } from '@/api/interface';
import { getAllAlgorithm, login } from '@/api/uesr';
import { MyClass } from '@/api/interface'

//算法类别
let title_list = reactive([
    {name:'全部',url:'',selected:false},
    {name:'安全生产',url:'',selected:false},
    {name:'智慧交通',url:'',selected:false},
    {name:'智慧园区',url:'',selected:false},
    {name:'智慧零售',url:'',selected:false},
    {name:'智慧银行',url:'',selected:false}
])

const route = useRoute();
// 获取并设置选中的类别selected为true
const selectedCategory = computed(() => route.params.need);

title_list.forEach(item => {
    if (item.name === selectedCategory.value) {
        item.selected = true;
    } 
    else {
        item.selected = false;
    }
});

//场景
let scene_list = reactive([
    {name:'全部',url:'',selected:true},
    {name:'建筑楼宇',url:'',selected:false},
    {name:'工厂',url:'',selected:false},
    {name:'工地',url:'',selected:false},
    {name:'楼宇',url:'',selected:false},
    {name:'公共场所',url:'',selected:false},
    {name:'城管',url:'',selected:false},
    {name:'园区',url:'',selected:false},
    {name:'海上',url:'',selected:false},
    {name:'港口码头',url:'',selected:false},
    {name:'体育场',url:'',selected:false},
    {name:'山林',url:'',selected:false},
    {name:'田野',url:'',selected:false},
    {name:'景区',url:'',selected:false},
    {name:'公园',url:'',selected:false},
    {name:'社区',url:'',selected:false},
])

//根据主页点击的算法类型显示对应的算法
getAllAlgorithm().then(res => {
    console.log("noClick",res);
    allMes.list = res.data.filter((item: alList) => item.fieldStr.includes(selectedCategory.value.toString()))
    console.log(allMes.list.length);
})

const allMes = reactive(new MyClass())
//顺序与title_list一致
const classList = ref<string[]>(['全部','安全生产', '智慧交通', '智慧园区', '智慧零售', '智慧银行']);
//保存点击的行业名
const cn = ref<string[]>([])
cn.value[0] = selectedCategory.value.toString()

//根据点击的行业显示对应的算法
const handleClick = (items: Item, index: number) => {
    title_list.forEach(i => i.selected = false);
    items.selected = true;
    cn.value[0] = classList.value[index]
    getAllAlgorithm().then(res => {
        console.log("结果2");
        console.log(res);
        allMes.list = res.data.filter((item: alList) => item.fieldStr.includes(cn.value[0]))
        if(cn.value[0] === '全部'){
            allMes.list = res.data.filter((item: alList) => item.fieldStr.includes(''))
        }
    })
}

//保存点击的场景名
const sceneName = ref<string[]>([])
//顺序与scene_list一致
const sceneList = ref<string[]>(
    ['全部','建筑楼宇','工厂','工地','楼宇','公共场所','城管','园区','海上','港口码头','体育场','山林','田野','景区','公园','社区','快递站'])
//场景选择
const sceneClick = (items: Item, id: number) => {
    scene_list.forEach(i => i.selected = false);
    items.selected = true;
    sceneName.value[0] = sceneList.value[id]
    getAllAlgorithm().then(res => {
        allMes.list = res.data.filter((item: alList) => item.fieldStr.includes(cn.value[0]))
        allMes.list = allMes.list.filter((item: alList) => item.userStr.includes(sceneName.value[0]))
        console.log("scene", allMes.list)
        if(sceneName.value[0] === '全部'){
            allMes.list = res.data.filter((item: alList) => item.fieldStr.includes(cn.value[0]))
        }
    })
}

//页面分页
const constructList=computed(()=>{
    console.log("pageList",allMes.list);
    return allMes.list.slice((allMes.select.page - 1)*allMes.select.pagesize, allMes.select.page * allMes.select.pagesize)
})

const handleCurrentChange=(page:number)=>{
    allMes.select.page=page
    console.log("page",page);
}

const handleSizeChange=(pagesize:number)=>{
    allMes.select.pagesize=pagesize
    console.log("size",pagesize)
}

//点击算法块 跳转到算法详情界面
function clickRouter(items: alList){
    router.push({name: 'detail', params:{algorithm_name:items.algorithm_name}})
}
</script>
  
<style scoped>
.top {
    margin-top: 0px;
}

.main {
    background-color: #66666611;
    height: 100%;
}
.select {
    width: 1500px;
    margin-top: 20px;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}
.table {
    background-color: #ffffff;
    box-shadow: 0px 0px 4px 0px rgb(24, 24, 24, 0.1);
    padding-bottom: 10px;
}

.line1 {
    display: flex;
    margin: 0px;
}

.dt {
    line-height: 3.28em;
    margin-right: 15px;
    margin-left: 20px;
    padding-top: 5px;
    height: 50px;
}

.dd {
    margin-left: 10px;
    height: 50px;
}
.no-wrap {
    display: flex;
    flex-wrap: wrap;
    white-space: no-wrap;
    list-style-type: none;
    padding-left: 10px;
}
.no-wrap li{
    margin-right: 30px;
    padding: 5px;
}

a {
    text-decoration: none;
    color: #000000;
}

a:hover {
    color: #2B33A8;
}
.active {
    background-color: #66666611;
    border: 1px solid #444BB2;
}
.active a{
    color: #2B33A8;
}
.base {
    width: 100%;
}

.model {
    margin-left: auto;
    width: 1500px;
    margin-right: auto;
}

.suanfa {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding-left: 0px;
}

.set {
    width: 23.6%;
    padding: 10px;
}

.box1 {
    background-color: #ffffff;
    overflow: hidden;
    height: 300px;
}

.box1:hover {
    box-shadow: 0px 4px 4px 0px rgb(24, 24, 24, 0.1);
}
.box1:hover img {
    transform: scale(1.1);
}

.img-box img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    transition: transform .3s ease-in-out;
}

.box1-text {
    padding: 24px;
}

.icon{
    transform: translate(450%, -100%);
    position: absolute;
    width: 56px;
    height: 56px;
}

.icon img{
    max-width: 100%;
    max-height: 100%;
    transition: transform .3s ease-in-out;
}

.box1-title {
    font-size: 22px;
    margin: 0px;
}

.tags {
    display: flex;
    margin-top: 5px;
}

.tags-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.line{
    margin: 0 0.4em;
    height: 0.8em;
    width: 2px;
    background-color: #66666611
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.change-box {
    padding-top: 24px;
    padding-bottom: 24px;
    display: flex;
    justify-content: space-between;
}

.padding{
    background-color: #66666611
}
</style>