<script setup lang="ts">
import EquipCard from 'components/equipCard.vue'
import EquipCardNew from 'components/equipCardNew/index.vue'
import NavMenu from 'components/Navmenu/index.vue'
import { getGoodsClassListApi, getCompanyListApi } from 'http/api/home'
import { useStore } from 'store/user'
import { mainStore } from 'store/main'
import { getHotList } from 'http/api/equip'
import userClass from '../../hooks/userClass'

import imgSrc from '../../assets/img/home/nw.png'
import swiper_1 from '../../assets/img/home/swiper01.png'
import swiper_2 from '../../assets/img/home/swiper02.png'
import swiper_4 from '../../assets/img/home/swiper04.png'
import swiper_5 from '../../assets/img/home/swiper05.png'

const { getCompanyList, getGoodsClassList } = userClass()
const router: any = useRouter()
const userStore = useStore()
const store: any = mainStore()

// const leftNavList: any = ref([])
const companyList: any = ref([])
const classList: any = ref([])

const selectOptions = ref<boolean>(false) // 分类
const selectOptionsValue = ref<string>('分类筛选')

const loopList = ref([swiper_2, swiper_4])

if (userStore.companyList.length === 0) {
    getCompanyList()
    companyList.value = userStore.companyList
} else {
    companyList.value = userStore.companyList
}
if (userStore.goodsClassList.length === 0) {
    getGoodsClassList().then(() => {
        classList.value = userStore.goodsClassList
    })
} else {
    classList.value = userStore.goodsClassList
}

// // 获取公司名称
// const getCompanyListData = async () => {
//     const res: any = await getCompanyListApi()
//     companyList.value = res.data
//     console.log('res公司名称', res)
// }

// getCompanyListData()

// 点击跳转装备共享大厅
const onSharedHall = (level: number, typeId: any, name: any) => {
    router.push({
        name: 'equipList',
        query: {
            level,
            typeId,
            name,
        },
    })
}
const onSharedHallByCompany = (companyId: any, name: any) => {
    router.push({
        name: 'equipList',
        query: {
            companyId,
            name,
        },
    })
}

const handlerGoodsDetails = (...arg: any) => {
    const arr = arg.map((key: any, index: number) => {
        return {
            level: index + 1 + '',
            typeId: key.id,
            typeName: key.name,
        }
    })

    router.push({
        name: 'equipList',
        state: { typeTag: arr },
    })
}

const detailsList = ref([])

// const handelInformation = () => {
//     detailsList.value = baseData.map((item) => {
//         return {
//             v_title: item.title,
//             v_content_info: '',
//             v_time: `[${item.create_time}]`,
//             id: item.id,
//         }
//     })
// }
// handelInformation()

const hotDeviceList: any = ref([])

/* 获取热搜装备 */
const getHotDeviceList = async () => {
    const res: any = await getHotList({ pageSize: 3 })
    hotDeviceList.value = res.data
}

getHotDeviceList()

/* 热搜卡片点击跳转至详情页 */
const onClick = (val: any) => {
    router.push({
        name: 'equipDetail',
        query: {
            id: val.id,
        },
    })
}

// 分类点击事件
const onSelectOptions = () => {
    selectOptions.value = !selectOptions.value
}

// 分类选择事件
const onSelectItem = (type: number) => {
    if (type === 1) {
        selectOptionsValue.value = '分类筛选'
    } else {
        selectOptionsValue.value = '公司筛选'
    }
    selectOptions.value = false
}
</script>

<template>
    <div class="home-index-banner">
        <div class="home-index">
            <!-- 商品菜单导航以及轮播图区域 -->
            <div class="home-goods">
                <ul class="left-nav">
                    <!-- 左侧机械名称菜单按钮 -->
                    <li class="left-filter" @click="onSelectOptions">
                        <div>
                            {{ selectOptionsValue }}
                            <el-icon style="margin-left: 10px"><ArrowDownBold /></el-icon>
                        </div>

                        <div class="select-options" v-if="selectOptions">
                            <div @click.stop="onSelectItem(1)">分类筛选</div>
                            <div @click.stop="onSelectItem(2)">公司筛选</div>
                        </div>
                    </li>

                    <template v-if="selectOptionsValue === '分类筛选'">
                        <div v-for="item in classList" :key="item.name" class="item-container">
                            <li class="item-nav" @click="onSharedHall(1, item.id, item.name)">
                                {{ item.name }}
                                <ul class="sub-goods">
                                    <!-- 级联框内 类别名称 -->
                                    <li
                                        v-for="child in item.children"
                                        :key="child.id"
                                        @click.stop="onSharedHall(2, child.id, child.name)"
                                    >
                                        <!-- 第二级 -->
                                        <span class="second-name">
                                            {{ child.name }}
                                        </span>

                                        <span style="display: flex; flex: 1; flex-wrap: wrap">
                                            <a
                                                v-for="son in child.children"
                                                :key="son.id"
                                                style="font-size: 14px; font-weight: normal"
                                                @click.stop="onSharedHall(3, son.id, son.name)"
                                            >
                                                {{ son.name }} ( {{ son.maCount }} )
                                            </a>
                                        </span>

                                        <!-- <span style="display: flex; flex: 1">
                                            <span
                                                v-for="son in child.children"
                                                :key="son.id"
                                                style="font-size: 14px; font-weight: normal"
                                                @click="onSharedHall(3, son.id)"
                                            >
                                                {{ son.name }} -->

                                        <!-- <span
                                                    style="
                                                        width: 70%;
                                                        display: flex;
                                                        flex-wrap: wrap;
                                                    "
                                                >
                                                    <span
                                                        v-for="son_1 in son.children"
                                                        :key="son_1.id"
                                                        style="
                                                            font-size: 12px;
                                                            font-weight: normal;
                                                            padding: 0 2px;
                                                            border-bottom: 1px solid #ccc;
                                                        "
                                                        class="last-level"
                                                        @click="onSharedHall(4, son_1.id)"
                                                    >
                                                        {{ son_1.name }}
                                                    </span>
                                                </span> -->
                                        <!-- </span>
                                        </span> -->

                                        <!-- <span>{{ child.name }}</span>
                                <span>
                                    <a
                                        v-for="son in child.children"
                                        :key="son.id"
                                        @click="handlerGoodsDetails(item, child, son)"
                                    >
                                        {{ son.name }}
                                    </a>
                                </span> -->
                                    </li>
                                </ul>
                            </li>
                        </div>
                    </template>

                    <template v-else>
                        <div
                            v-for="item in companyList"
                            :key="item.companyId"
                            class="item-container"
                        >
                            <li
                                class="item-nav"
                                @click="onSharedHallByCompany(item.companyId, item.companyName)"
                            >
                                {{ item.companyName }}
                                {{ item.maCount ? `(${item.maCount})` : '(0)' }}
                            </li>
                        </div>
                    </template>
                </ul>
                <div class="right-content">
                    <!-- 轮播图上方导航按钮 -->
                    <NavMenu />
                    <!-- 轮播图 -->
                    <div class="swiper-img">
                        <el-carousel :interval="5000" arrow="always" style="height: 100%">
                            <el-carousel-item
                                v-for="(item, index) in loopList"
                                :key="index"
                                style="height: 100%"
                            >
                                <el-image
                                    style="width: 100%; height: 100%"
                                    :src="item"
                                    fit="cover"
                                />
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </div>
            </div>
            <!-- 热搜装备 -->

            <div class="hot-equip-container" v-if="false">
                <div class="hot-equip">
                    <span>最新装备</span>
                    <a
                        @click="
                            () => {
                                router.push({ name: 'equipList' })
                            }
                        "
                        style="
                            color: #00a288;
                            font-weight: bold;
                            text-decoration: underline;
                            font-size: 16px;
                            letter-spacing: 1px;
                        "
                        >更多产品</a
                    >
                </div>

                <div v-for="item in hotDeviceList" :key="item.typeName" style="margin-top: 15px">
                    <div class="hot-title">
                        {{ item.typeName }}
                    </div>
                    <ul class="equip-pic">
                        <li v-for="g in item.devInfoList" :key="g.maId" style="cursor: pointer">
                            <!-- <EquipCardNew
                            @onClick="onClick"
                            :company="item.companyName || '安徽博诺斯有限公司'"
                            :price="item.dayLeasePrice"
                            :tags="[item.maStatusStr || '待租', item.cityStr || '合肥']"
                            :name="item.modelName + item.deviceName"
                           
                            :id="item.maId"
                        /> -->
                            <EquipCardNew
                                @onClick="onClick"
                                :id="g.maId"
                                :companyId="g.companyId"
                                :company="g.companyName"
                                :operateAddress="g.operateAddress"
                                :name="g.deviceName"
                                :typeName="g.typeName"
                                :price="g.dayLeasePrice"
                                :url="g.picUrl"
                            />
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 专题咨询 -->

            <!-- <div class="hot-equip">
                <span>专题资讯</span>
                <a></a>
            </div>

            <ul class="consult-nav">
                <li>
                    <a>资讯</a>
                </li>
                <li>
                    <a>专题</a>
                </li>
                <li>
                    <a>检验</a>
                </li>
                <li>
                    <a>保险</a>
                </li>
            </ul> -->

            <!-- <div class="consult-content">
               
                <div class="left-bg"></div>

           
                <div class="right-consult">
                    <div
                        class="consult-box"
                        @click="goInformation(item.id)"
                        v-for="item in detailsList"
                        :key="item.v_time"
                    >
                        <div class="consult-title">
                            <h3>{{ item.v_title }}</h3>
                            <span>{{ item.v_time }}</span>
                        </div>

                        <div class="consult-info">
                            {{ item.v_content_info }}
                        </div>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</template>

<style lang="scss" scoped>
:deep(.el-carousel__container) {
    .el-carousel__item {
        .el-image {
            height: 100%;
            img {
            }
        }
    }
}
.home-index-banner {
    background-color: #fff;
    // padding: 20px 5px;
    // border-radius: 10px;
    // box-sizing: border-box;
}

.home-index {
    .home-goods {
        height: 700px;
        display: flex;
        position: relative;

        .left-nav {
            // padding: 10px 0;
            // margin-top: 8px;
            width: 270px;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #f7f9fa;
            overflow: hidden;
            overflow-y: auto;
            border-radius: 16px;

            .left-filter {
                margin-top: 10px;
                padding: 8px 0;
                position: relative;
                display: flex;
                align-content: center;
                justify-content: center;
                color: #38b2a4;
                // height: 46px;
                // line-height: 46px;
                // text-align: center;
                font-weight: bold;
                cursor: pointer;

                width: 100%;

                .select-options {
                    position: absolute;
                    bottom: 0;
                    left: 0;

                    transform: translate(50%, 100%);
                    // left: 50%;
                    // bottom: -65px;
                    border-radius: 4px;
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
                    // transform: translateX(-50%);
                    background-color: #fff;

                    div {
                        padding: 10px 30px;
                        text-align: left;
                        // font-size: 14px;
                        font-size: 16px;
                        font-weight: normal;
                        cursor: pointer;
                        color: #333;
                    }
                    div:hover {
                        color: #fff;
                        background-color: #00a288;
                    }
                }
            }

            .item-container {
                width: 100%;
                text-align: center;
                .item-nav {
                    // text-align: left;
                    // padding-left: 50px;
                    display: inline-block;
                    margin-top: 10px;
                    // padding: 0 10px;
                    color: #000;
                    height: 32px;
                    line-height: 32px;
                    text-align: center;
                    // font-size: 16px !important;

                    &:hover {
                        cursor: pointer;
                        // color: #2282ff;
                        // font-weight: bold;
                        background-color: #1abc9c;
                        border-radius: 18px;
                        color: #fff;
                    }
                }

                .sub-goods {
                    position: absolute;
                    display: none;
                    top: 0;
                    left: 270px;
                    width: 1242px;
                    min-height: 100%;
                    max-height: 100%;
                    background-color: #fff;
                    z-index: 999;
                    // opacity: 0.9;
                    border: 1px solid #eee;
                    overflow-y: auto;
                    box-sizing: border-box;

                    li {
                        // margin: 10px 0;
                        padding: 10px 80px;
                        color: #333;
                        font-weight: bold;
                        display: flex;
                        align-items: center;
                        // background: orange;

                        .second-name {
                            // width: 160px;
                            margin-left: 10px;
                        }

                        span a {
                            margin: 0 30px;
                            font-size: 16px;
                            font-weight: normal;
                            color: #333;
                            &:hover {
                                color: #1abc9c;
                                border-bottom: 1px solid #1abc9c !important;
                            }
                        }

                        .last-level {
                            margin-left: 3px;
                        }

                        .last-level:hover {
                            color: #1abc9c;
                            border-bottom: 1px solid #1abc9c !important;
                        }
                    }
                }
            }
            .item-container:hover {
                .sub-goods {
                    display: block !important;
                    z-index: 9999;
                }
            }
        }

        .right-content {
            box-sizing: border-box;
            flex: 1;
            height: 100%;
            margin-left: 20px;
            display: flex;
            flex-direction: column;

            .swiper-img {
                margin-top: 20px;
                flex: 1;
                border-radius: 8px;
            }
        }
    }

    .hot-equip {
        margin-top: 30px;
        height: 37px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        span {
            background-color: #1abc9c;
            padding: 10px 18px;
            color: #fff;
        }

        a {
            color: rgba(24, 103, 221, 0.8);
            font-size: 14px;
            cursor: pointer;
        }
    }

    .hot-title {
        padding: 15px 0 10px 20px;
        font-size: 16px;
        font-weight: bold;
        letter-spacing: 1px;
    }
    .equip-pic {
        display: flex;
        flex-wrap: wrap;
        li {
            width: calc((100% - 100px) / 4);
            margin: 8px 0 8px 20px;
            &:nth-child(4n) {
                margin-right: 20px;
            }
        }
    }

    .consult-nav {
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #e0e0e0;
        display: flex;

        li {
            height: 40px;
            line-height: 40px;
            margin: 0 15px;

            &:hover {
                border-bottom: 1px solid #3cb4a6;
                cursor: pointer;
            }
        }
    }

    .consult-content {
        margin-top: 20px;
        height: 210px;
        display: flex;
        align-items: center;

        .left-bg {
            background: url(../../assets/img/home/2023_12_01_beijing2/left_bg.png) no-repeat;
            background-size: cover;
            width: 340px;
            height: 210px;
        }

        .right-consult {
            height: 210px;
            flex: 1;
            width: calc(100% - 340px);
            // padding-left: 35px;
            overflow-y: auto;
            .consult-box {
                margin-bottom: 10px;
                //height: 70px;
                padding-left: 15px;
                cursor: pointer;
                .consult-title {
                    height: 30px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    h2 {
                        font-weight: bold;
                    }

                    span {
                        color: #827d7d;
                        font-size: 14px;
                    }
                }

                .consult-info {
                    width: calc(100% - 100px);
                    height: 10px;
                    line-height: 40px;
                    border-bottom: 1px dashed #979797;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
        }
    }
}

:deep(.el-carousel__container) {
    height: 100%;
}

.el-carousel--horizontal {
    border-radius: 14px;
}
</style>
