<script setup lang="ts">
import $bus from '@/utils/bus'
import { mainStore } from 'store/main'
import { useStore } from 'store/user'
import { ElMessage, ElMessageBox } from 'element-plus'
import headerLogo from 'assets/img/zulinlogo.png'
import userClass from '../../hooks/userClass'
const { getCompanyList } = userClass()
const store: any = mainStore()
const userStore = useStore()
userStore.editMenuList(1)

const route = useRoute()
const router = useRouter()
const isRolesSelect = ref<boolean>(false)
const rolesName = ref<any>('1')
const activeLoginCompanyName = ref('')

rolesName.value = localStorage.getItem('rolesType') || 1

// 是否显示退出登录
const isShowLogout = computed(() => {
    return store.token
})

const setActiveCompanyName = () => {
    const companyList = userStore.companyList
    const activeCompany: any = companyList.filter(
        (e: any) => e.companyId == store.userInfo.companyId,
    )
    activeLoginCompanyName.value = activeCompany[0]?.companyName
}

if (userStore.companyList.length === 0) {
    getCompanyList().then((res) => {
        setActiveCompanyName()
    })
} else {
    setActiveCompanyName()
}

const placeholderText = ref('搜索设备关键词')

// 退出登录
const handlerLogout = () => {
    ElMessageBox.confirm('是否确定退出登录', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            router.push('/login')
            store.cleanUpToken('')
            store.clearUserInfo('')
            ElMessage({
                type: 'success',
                message: '已退出登录',
                duration: 1000,
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}

// 搜索查询绑定值
const keywordIptValue = ref('')

// 输入框 dom
const inputRef: any = ref(null)

// 输入框下方历史搜索记录
// const searchHistoryList = computed(() => {
//     return store.searchHistoryList.slice(0, 1)
// })

const searchHistoryList = ref(['挖掘机', '塔式起重机', '挖掘机', '吊机'])

// 搜索按钮
const searchKeywordBtn = () => {
    /* 去除空格 */
    keywordIptValue.value = keywordIptValue.value.replace(/\s*/g, '')

    store.addHistoryRecord(keywordIptValue.value)
    if (route.path == '/equipList') {
        $bus.emit('search', keywordIptValue.value)
    } else {
        router.push({
            name: 'equipList',
            state: { keyWord: keywordIptValue.value },
        })
    }
}

// 点击下方搜索记录时
const handleHistory = (hisValue: any) => {
    keywordIptValue.value = hisValue
    searchKeywordBtn()
    // inputRef.value.focus()
}
//页面刷新回显模糊搜索词
$bus.on('callBackText', (val) => {
    nextTick(() => {
        keywordIptValue.value = val
    })
})

const onClickMyUser = () => {
    router.push({
        name: userStore.currentMenuItem,
    })
    // console.log(route, 'route')
    // window.location.reload()
}

// 角色切换按钮
const onRolesCheck = () => {
    isRolesSelect.value = !isRolesSelect.value
}
// 选择角色
const onSelectRoles = (type: number) => {
    if (type === 1) {
        rolesName.value = '1'
        userStore.editMenuList(1)
        userStore.editcurrentMenuItem('goodsManagement')
        // userStore.editUserMenuList(1)
        localStorage.setItem('rolesType', '1')

        // window.location.reload()
    } else {
        rolesName.value = '2'
        userStore.editMenuList(2)
        // userStore.editUserMenuList(2)
        localStorage.setItem('rolesType', '2')
        userStore.editcurrentMenuItem('sourcingNeed')
        // window.location.reload()
    }

    window.location.reload()
    isRolesSelect.value = false
}

// 查看预约车
const onCarts = () => {
    console.log('跳转预约车页面')
    router.push({
        name: 'cart',
    })
}

const isMyInfoPage = () => {
    if (
        route.path.indexOf('cart') !== -1 ||
        route.path.indexOf('demand-details') !== -1 ||
        route.path.indexOf('order-confirm') !== -1
    ) {
        return true
    } else {
        return false
    }
}
</script>

<template>
    <!-- 头部个人信息  收藏夹  手机版等图标 -->
    <div class="header-container">
        <div class="header-user-info">
            <div class="header-box">
                <el-image
                    style="width: 190px; cursor: pointer"
                    v-if="isMyInfoPage()"
                    :src="headerLogo"
                    fit="cover"
                    @click="$router.push('/home')"
                />
                <div class="header-right">
                    <div class="header-item" v-if="isShowLogout">
                        <!-- <img src="../assets/img/home/star.png" alt="" /> -->
                        <a class="user-name"
                            >{{ activeLoginCompanyName }} / {{ store.userInfo.nickName }}</a
                        >

                        <div class="line"></div>
                    </div>

                    <div class="header-item">
                        <a
                            v-if="!isShowLogout"
                            class="a-border-none"
                            @click="$router.push('/login')"
                            >登录</a
                        >
                        <span v-if="!isShowLogout" style="margin: 0 3px">/</span>
                        <a
                            v-if="!isShowLogout"
                            style="padding: 0 20px 0 0"
                            @click="$router.push('/register')"
                            >注册</a
                        >
                        <a v-else @click="handlerLogout">退出登录</a>
                        <div class="line"></div>
                    </div>
                    <div class="header-item roles-check" @click="onRolesCheck" v-if="isShowLogout">
                        <!-- <img src="../assets/img/home/star.png" alt="" /> -->
                        <!-- <a style="display: flex; justify-content: center; padding-right: 10px">
                            {{ rolesName == 1 ? '出租方' : '承租方' }}
                            <el-icon style="margin-left: 10px"><ArrowDownBold /></el-icon>
                        </a> -->

                        <a style="display: flex; justify-content: center">
                            <i
                                style="
                                    background-color: #c9e7e5;
                                    color: #47c4ad;
                                    padding: 4px 6px;
                                    font-weight: bold;
                                    font-size: 13px;
                                    border-radius: 4px;
                                "
                            >
                                {{ rolesName == 1 ? '出租方' : '承租方' }}
                            </i>
                            <!-- <el-icon style="margin-left: 10px"><ArrowDownBold /></el-icon> -->
                        </a>

                        <div class="line"></div>

                        <div class="select-list" v-if="isRolesSelect">
                            <div
                                style="border-top-left-radius: 6px; border-top-right-radius: 6px"
                                @click.stop="onSelectRoles(1)"
                            >
                                出租方
                            </div>
                            <div
                                style="
                                    border-bottom-left-radius: 6px;
                                    border-bottom-right-radius: 6px;
                                "
                                @click.stop="onSelectRoles(2)"
                            >
                                承租方
                            </div>
                        </div>
                    </div>
                    <div class="header-item">
                        <a @click="onClickMyUser"> 个人中心 </a>
                        <div class="line"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.header-container {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 88;

    /* 头部个人信息部分 */
    .header-box {
        height: 47px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .header-right {
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
    }

    .header-item {
        height: 47px;
        display: flex;
        align-items: center;
        color: #6d6d6d;
        font-size: 14px;
        cursor: pointer;

        .line {
            width: 1px;
            height: 15px;
            background-color: #666655;
        }

        .user-name:hover {
            color: #6d6d6d;
        }

        img {
            vertical-align: middle;
        }

        a {
            padding: 0 20px;
            // border-right: 1px solid #666655;
        }

        a:hover {
            color: #3cb4a6;
        }

        .a-border-none {
            border: none;
            padding: 0;
        }
    }

    .roles-check {
        position: relative;
    }
    .roles-check .select-list {
        height: 50px;
        // display: none;
        position: absolute;
        left: 1%;
        bottom: -46px;
        width: 98%;
        background-color: #fff;
        border-radius: 6px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        z-index: 999;
        transition: all 1s linear;

        div {
            height: 25px;
            font-size: 14px;
            line-height: 25px;
            text-align: center;
            letter-spacing: 1px;
        }

        div:hover {
            color: #fff;
            background-color: #00a288;
        }
    }

    // .roles-check:hover .select-list {
    //     display: block;
    // }

    .last-item {
        position: relative;
        z-index: 998;
        padding-left: 20px;
        .qr-code {
            position: absolute;
            left: -70px;
            top: -140px;
            width: 140px;
            height: 140px;
            background-color: #fff;
            visibility: hidden;
            padding: 10px;
            box-shadow: 0 2px 2px 2px #ccc;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #333;
            .el-image {
                width: 120px;
                height: 120px;
                margin-bottom: 5px;
            }
        }
    }

    .last-item:hover > .qr-code {
        visibility: visible;
        transform: translateY(177px);
        transition: all 0.6s;
    }

    /* 中间logo  搜索框部分 */
    .logo-ipt-container {
        position: relative;
        display: flex;
        align-items: center;
        background-color: #eeeff6;
        padding: 30px 0;

        img {
            width: 210px;
            height: 48px;
            cursor: pointer;
        }

        input {
            width: 700px;
            height: 45px;
            border: 1px solid #3cb4a6;
            border-radius: 45px;
            margin-left: 70px;
            line-height: 45px;
            color: #333;
            text-shadow: 0 0 0 #333;
            padding-left: 30px;
        }

        input:focus {
            outline: 1px solid #3cb4a6;
        }

        input::-webkit-input-placeholder {
            color: #949494;
        }
        .search-btn {
            width: 100px;
            height: 39px;
            transform: translate(-110px, 0);
            border-radius: 39px;
            background: linear-gradient(132deg, #22ab9b 0%, #0d7462 100%);
            box-shadow: 0px 2px 4px 0px rgba(20, 175, 255, 0.5);
            border: none;
            color: #fff;
            cursor: pointer;
            font-size: 18px;
        }

        .ipt-down {
            position: absolute;
            bottom: 5px;
            left: 22%;
            overflow: hidden;

            a {
                max-width: 140px;
                padding: 0 10px;
                color: #727272;
                font-size: 14px;
                cursor: pointer;
                overflow: hidden;
                display: inline-block;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }

        .cart-icon {
            width: 10%;
            display: flex;
            align-items: center;
            cursor: pointer;

            span {
                margin-left: 10px;
                color: #1abc9c;
            }
        }
    }
}
</style>
