<template>
    <view class="container">
        <view v-show="searchFocus" class="search-mask"></view>
        <view>
            <view class="top">
                <image
                    v-if="isMiniProgram"
                    class="btnback button-click"
                    src="@/static/icon/back.png"
                    @click="navBack"
                ></image>
                <view class="search-box">
                    <!-- 修改为左右布局的切换按钮 -->
                    <view class="search-type-tabs">
                        <view
                            class="type-tab button-click"
                            :class="{ active: searchType === 'job' }"
                            @click="setSearchType('job')"
                        >
                            职位
                        </view>
                        <view
                            class="type-tab button-click"
                            :class="{ active: searchType === 'major' }"
                            @click="setSearchType('major')"
                        >
                            专业
                        </view>
                    </view>
                    <input
                        class="inputed"
                        type="text"
                        :focus="autoFocus"
                        v-model="searchValue"
                        :placeholder="searchType === 'job' ? '搜索职位名称' : '搜索专业名称'"
                        placeholder-class="placeholder"
                        @input="handleInputChange"
                        @blur="handleInputBlur"
                        @focus="handleInputFocus"
                        @confirm="searchBtn"
                    />
                    <!-- 联想搜索下拉列表 -->
                    <scroll-view
                        scroll-y
                        class="search-suggestions"
                        v-show="showSuggestions && filteredSuggestions.length"
                    >
                        <view
                            class="suggestion-item"
                            v-for="(item, index) in filteredSuggestions"
                            :key="index"
                            @click="selectSuggestion(item)"
                        >
                            <view class="item-txt line_1">{{ item }}</view>
                        </view>
                    </scroll-view>
                </view>
                <view class="search-btn button-click" @click="searchBtn">搜索</view>
            </view>
            <view class="view-top" v-show="listCom.length || list.length">
                <view class="top-item" @click="changeType(0)" :class="{ active: currentTab === 0 }">综合</view>
                <view class="top-item" @click="changeType(1)" :class="{ active: currentTab === 1 }">视频</view>
            </view>
        </view>
        <scroll-view scroll-y class="Detailscroll-view" v-show="listCom.length" @scrolltolower="choosePosition">
            <view class="cards-box" v-show="currentTab === 0">
                <renderJobs :list="listCom" :longitude="longitudeVal" :latitude="latitudeVal"></renderJobs>
            </view>
            <view class="cards-box" style="padding-top: 24rpx" v-show="currentTab === 1">
                <custom-waterfalls-flow
                    ref="waterfallsFlowRef"
                    :column="columnCount"
                    :columnSpace="columnSpace"
                    @loaded="imageloaded"
                    :value="list"
                >
                    <template v-slot:default="job">
                        <view class="slot-item">
                            <view class="job-image btn-feel" @click="nextVideo(job)">
                                <image class="cover-image" :src="job.cover" mode="aspectFill"></image>
                                <view class="cover-triangle"></view>
                            </view>
                            <view class="job-info" @click="nextDetail(job)">
                                <view class="salary">
                                    <Salary-Expectation
                                        :max-salary="job.maxSalary"
                                        :min-salary="job.minSalary"
                                        :is-month="true"
                                    ></Salary-Expectation>
                                    <image v-if="job.isHot" class="flame" src="/static/icon/flame.png"></image>
                                </view>
                                <view class="title">{{ job.jobTitle }}</view>
                                <view class="desc">{{ job.companyName }}</view>
                            </view>
                        </view>
                    </template>
                </custom-waterfalls-flow>
                <loadmore ref="loadmoreRef"></loadmore>
            </view>
        </scroll-view>
        <view class="main-content" v-show="!listCom.length">
            <view class="content-top">
                <view class="top-left">历史搜索</view>
                <view class="top-right button-click" @click="remove">
                    <my-icons type="trash" color="#C1C1C1" size="40"></my-icons>
                </view>
            </view>
            <view class="content-history">
                <view class="history-tag" v-for="(item, index) in historyList" :key="index" @click="searchFn(item)">
                    {{ item }}
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { inject, ref, reactive, nextTick, computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import SelectJobs from '@/components/selectJobs/selectJobs.vue';
const { $api, navBack, navTo } = inject('globalFunction');
import useLocationStore from '@/stores/useLocationStore';
import { storeToRefs } from 'pinia';
import { useColumnCount } from '@/hook/useColumnCount';
import { usePagination } from '@/hook/usePagination';
import img from '@/static/icon/filter.png';
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
import useUserStore from '@/stores/useUserStore';
const { isMiniProgram } = storeToRefs(useUserStore());
import { playTextDirectly } from '@/hook/useTTSPlayer-all-in-one';

// 搜索类型：job-职位，major-专业
const searchType = ref('job');
const searchValue = ref('');
const historyList = ref([]);
const listCom = ref([]);
const showSuggestions = ref(false);
const searchFocus = ref(false);
const autoFocus = ref(false)

// 专业数据源（示例数据，可以替换为实际数据）
const majorDataSource = ref([]);

// 计算属性：过滤后的联想列表
const filteredSuggestions = computed(() => {
    if (!searchValue.value || searchType.value !== 'major') {
        return [];
    }

    const searchText = searchValue.value.toLowerCase();
    try {
        return majorDataSource.value.filter((item) => item.toLowerCase().includes(searchText));
    } catch (error) {
        return [];
    }
});

const pageState = reactive({
    page: 0,
    total: 0,
    maxPage: 2,
    pageSize: 10,
    search: {
        order: 0,
    },
});
const isLoaded = ref(false);
const waterfallsFlowRef = ref(null);
const loadmoreRef = ref(null);
const currentTab = ref(0);

const searchParams = ref({});
const pageSize = ref(10);

const { list, loading, refresh, loadMore } = usePagination(
    (params) => $api.createRequest('/app/job/littleVideo', params, 'GET', true),
    dataToImg, // 转换函数
    {
        pageSize: pageSize,
        search: searchParams,
        dataKey: 'data',
        autoWatchSearch: true,
        onBeforeRequest: () => {
            loadmoreRef.value?.change('loading');
        },
        onAfterRequest: () => {
            loadmoreRef.value?.change('more');
        },
    }
);

async function choosePosition(index) {
    if (currentTab.value === 0) {
        getJobList('add');
    } else {
        loadMore();
    }
}

function imageloaded() {
    loadmoreRef.value?.change('more');
}

const { columnCount, columnSpace } = useColumnCount(() => {
    pageSize.value = 10 * (columnCount.value - 1);
    nextTick(() => {
        waterfallsFlowRef.value?.refresh?.();
    });
});

onLoad((options) => {
    if (options.keyWord) {
        searchValue.value = decodeURIComponent(options.keyWord);
        searchBtn();
    }else{
        //从标签点进来不自动聚焦
        autoFocus.value = true
    }
    let arr = uni.getStorageSync('searchList');
    if (arr) {
        historyList.value = uni.getStorageSync('searchList');
    }

    getMajorDataSource();
});

function getMajorDataSource() {
    const LoadCache = (resData) => {
        if (resData.code === 200) {
            majorDataSource.value = resData.data;
            console.log(majorDataSource.value);
        }
    };
    $api.createRequestWithCache('/app/common/majorManagement/getMajorList', {}, 'GET', false, LoadCache).then(
        LoadCache
    );
}

// 设置搜索类型并触发搜索
function setSearchType(type) {
    if (searchType.value === type) return;
    searchType.value = type;

    // 如果输入框有值且当前是专业搜索，显示联想列表
    if (searchValue.value && searchType.value === 'major' && searchFocus.value) {
        showSuggestions.value = true;
    } else {
        showSuggestions.value = false;
    }

    // 如果有搜索值，触发搜索
    if (searchValue.value) {
        // 重置页码
        pageState.page = 0;

        // 触发搜索
        playTextDirectly('正在为您查找岗位');

        // 根据搜索类型设置不同的参数
        if (searchType.value === 'job') {
            searchParams.value = {
                jobTitle: searchValue.value,
            };
        } else {
            searchParams.value = {
                majorTitle: searchValue.value,
            };
        }

        if (currentTab.value === 0) {
            getJobList('refresh');
        } else {
            refresh();
            waterfallsFlowRef.value?.refresh?.();
        }

        // 隐藏联想列表
        showSuggestions.value = false;
    }
}

function changeType(type) {
    if (currentTab.value === type) return;
    switch (type) {
        case 0:
            currentTab.value = 0;
            getJobList('refresh');
            break;
        case 1:
            currentTab.value = 1;
            refresh();
            waterfallsFlowRef.value?.refresh?.();
            break;
    }
}

function searchFn(item) {
    searchValue.value = item;
    searchBtn();
}

function handleInputChange(e) {
    const val = e.detail.value;
    searchValue.value = val;

    // 如果是专业搜索且输入框有值，显示联想列表
    if (searchType.value === 'major' && val && searchFocus.value) {
        showSuggestions.value = true;
    } else {
        showSuggestions.value = false;
    }
}

function handleInputFocus() {
    searchFocus.value = true;
    // 如果是专业搜索且输入框有值，显示联想列表
    if (searchType.value === 'major' && searchValue.value) {
        showSuggestions.value = true;
    }
}

function handleInputBlur() {
    searchFocus.value = false;
    // 延迟隐藏联想列表，以便点击项能触发
    setTimeout(() => {
        showSuggestions.value = false;
    }, 100);
}

// 选择联想项
function selectSuggestion(item) {
    searchValue.value = item;
    showSuggestions.value = false;
    // 直接触发搜索
    searchBtn();
}

function searchBtn() {
    if (!searchValue.value) {
        return;
    }
    playTextDirectly('正在为您查找岗位');

    // 保存到历史记录（仅当搜索成功时保存）
    historyList.value.unshift(searchValue.value);
    historyList.value = unique(historyList.value);
    uni.setStorageSync('searchList', historyList.value);

    // 根据搜索类型设置不同的参数
    if (searchType.value === 'job') {
        // 职位搜索
        searchParams.value = {
            jobTitle: searchValue.value,
        };
    } else {
        // 专业搜索
        searchParams.value = {
            majorTitle: searchValue.value,
        };
    }

    // 重置页码
    pageState.page = 0;

    if (currentTab.value === 0) {
        getJobList('refresh');
    } else {
        refresh();
        waterfallsFlowRef.value?.refresh?.();
    }

    // 隐藏联想列表
    showSuggestions.value = false;
}

function searchCollection(e) {
    const value = e.detail.value;
    pageState.search.jobTitle = value;
    getJobList('refresh');
}

function unique(arr) {
    for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
            if (arr[i] == arr[j]) {
                //第一个等同于第二个，splice方法删除第二个
                arr.splice(j, 1);
                j--;
            }
        }
    }
    return arr;
}

function remove() {
    uni.removeStorage({
        key: 'searchList',
    });
    historyList.value = [];
}

function nextDetail(job) {
    // 记录岗位类型，用作数据分析
    if (job.jobCategory) {
        const recordData = recommedIndexDb.JobParameter(job);
        recommedIndexDb.addRecord(recordData);
    }
    navTo(`/packageA/pages/post/post?jobId=${btoa(job.jobId)}`);
}

function nextVideo(job) {
    uni.setStorageSync(`job-Info`, job);
    navTo(`/packageA/pages/tiktok/tiktok`);
}

function getJobList(type = 'add') {
    if (type === 'add' && pageState.page < pageState.maxPage) {
        pageState.page += 1;
    }
    if (type === 'refresh') {
        pageState.page = 1;
        pageState.maxPage = 2;
    }

    // 根据搜索类型构建参数
    let params = {
        current: pageState.page,
        pageSize: pageState.pageSize,
        ...pageState.search,
    };

    // 移除之前的搜索参数，根据当前搜索类型添加
    if (searchType.value === 'job') {
        params.jobTitle = searchValue.value;
        // 确保没有majorTitle参数
        delete params.majorTitle;
    } else {
        params.majorTitle = searchValue.value;
        // 确保没有jobTitle参数
        delete params.jobTitle;
    }

    $api.createRequest('/app/job/list', params, 'GET', true).then((resData) => {
        const { rows, total } = resData;
        if (type === 'add') {
            const str = pageState.pageSize * (pageState.page - 1);
            const end = listCom.value.length;
            const reslist = rows;
            // listCom.value.splice(str, end, ...reslist);
            listCom.value = [...listCom.value, ...reslist];
        } else {
            listCom.value = [...rows];
            // 一体机语音提示
            if (searchType.value === 'major') {
                if (rows.length) {
                    $api.msg('为您找到相关专业的职位');
                    playTextDirectly(`为您找到相关专业的职位`);
                } else {
                    $api.msg('未找到相关专业的职位，请尝试其他关键词');
                    playTextDirectly(`未找到相关专业的职位，请尝试其他关键词`);
                }
            }
        }
        pageState.total = resData.total;
        pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
        if (rows.length < pageState.pageSize) {
            // loadmoreRef.value?.change('noMore');
        } else {
            // loadmoreRef.value?.change('more');
        }
    });
}

function dataToImg(data) {
    return data.map((item) => ({
        ...item,
        // image: item.cover,
        image: img,
        hide: true,
    }));
}
</script>

<style lang="stylus" scoped>
.cards-box{
     padding: 0 28rpx 28rpx 28rpx
}
.Detailscroll-view{
    flex: 1
    overflow: hidden
}
.container{
    display: flex
    flex-direction: column
    background: #F4f4f4
    height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
    .view-top{
        display: flex;
        justify-content: space-around
        background: #FFFFFF;
        .top-item{
            padding: 6rpx 0 18rpx 0
        }
        .active{
            color: #256BFA;
            font-weight: 500;
            position: relative;
        }
        .active::after{
            position: absolute;
            content: ''
            left: calc(50% - 12rpx)
            bottom: 10rpx
            width: 24rpx
            height: 6rpx
            background: #256BFA
        }
    }
    .main-content{
        background: #FFFFFF
        height: 100%
        .content-top{
            padding: 28rpx
            display: flex
            justify-content: space-between
            align-items: center
            .top-left{
                font-weight: 600;
                font-size: 36rpx;
                color: #000000;
                line-height: 42rpx;
            }
        }
        .content-history{
            padding: 0 28rpx;
            display: flex
            flex-wrap: wrap
            .history-tag{
                margin-right: 40rpx
                margin-bottom: 20rpx
                white-space: nowrap
                font-weight: 400;
                font-size: 28rpx;
                color: #333333;
                background: #F5F5F5;
                border-radius: 12rpx 12rpx 12rpx 12rpx;
                width: fit-content;
                padding: 12rpx 20rpx
            }
        }
    }
    .top {
		display: flex;
		align-items: center;
        justify-content: space-between
		background-color: #fff;
		padding: 20rpx 20rpx;
        .btnback{
            width: 60rpx;
            height: 60rpx;
        }
        .search-box{
            flex: 1;
            padding: 0 24rpx 0 6rpx;
            position: relative;
            z-index: 10;
            .search-type-tabs {
               background: #FFFFFF;
               position: absolute;
               top: 50%;
               left: 21rpx;
               transform: translate(0, -50%);
               display: flex;
               align-items: center;
               border-radius: 8rpx;
               padding: 4rpx;
               z-index: 2;
               border: 1rpx solid #E0E0E0;
               box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
               border-radius: 60rpx

               .type-tab {
                   padding: 10rpx 24rpx;
                   font-size: 24rpx;
                   color: #666666;
                   border-radius: 30rpx;
                   transition: all 0.2s ease;
                   white-space: nowrap;

                   &.active {
                       background: #256BFA;
                       color: #FFFFFF;
                       font-weight: 500;
                   }
               }

               .type-tab:first-child {
                   margin-right: 1rpx;
               }
            }
            .inputed {
               width: 100%;
                background: #F8F8F8;
                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: 400;
                line-height: 36rpx;
                color: #666666;
                padding: 0 30rpx 0 230rpx;
                box-sizing: border-box;
                height: 80rpx;
                background: #F5F5F5;
                border-radius: 73rpx;
            }

            .search-suggestions {
                position: absolute;
                top: 105%;
                width:calc(100% - 24rpx - 6rpx);
                background: #FFFFFF;
                border: 2rpx solid #ECECEC;
                border-top: 0;
                z-index: 10;
                border-radius: 30rpx
                max-height: 40vh;
                overflow hidden;
                .suggestion-item {
                    height: 80rpx;
                    padding: 0rpx 24rpx;
                    display: flex;
                    align-items: center;
                    justify-items: flex-start;
                    border-top: 2rpx dashed #e3e3e3;

                    .item-txt {
                        font-size: 28rpx;
                        color: #333333;
                        width: 100%;
                    }
                }

                .suggestion-item:hover {
                    background: #e5e5e5;
                }

                .suggestion-item:first-child {
                    border-top: none;
                }
            }
        }
		.search-btn {
            padding-right: 18rpx;
			text-align: center;
			height: 64rpx;
			line-height: 64rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #256BFA;
		}
	}
}

.slot-item
    // background: #f4f4f4;
    background: #FFFFFF;
    .job-info{
        padding: 10rpx 24rpx 24rpx 24rpx
    }
    .job-image{
        width: 100%;
        height: 280rpx;
        position: relative;
        .cover-image{
            width: 100%;
            height: 100%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .cover-triangle{
            position: absolute;
            right: 20rpx;
            top: 20rpx
            width: 36rpx
            height: 36rpx
            border-radius: 50%
            background: rgba(0,0,0,0.3)
        }
        .cover-triangle::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-40%, -50%) rotate(90deg);
          width: 0;
          height: 0;
          border-left: 8rpx solid transparent;
          border-right: 8rpx solid transparent;
          border-bottom: 12rpx solid #fff;
        }
    }
    .salary
        color: #4C6EFB;
        font-size: 28rpx
        display: flex
        align-items: flex-start
        justify-content: space-between
        .flame
            margin-top: 4rpx
            margin-right: 4rpx
            width: 24rpx
            height: 31rpx
    .title
        font-weight: 500;
        font-size: 32rpx;
        color: #333333;
        margin-top: 6rpx;
        white-space: pre-wrap
    .desc
        font-weight: 400;
        font-size: 24rpx;
        color: #6C7282;
        margin-top: 6rpx;
.search-mask{
    position fixed;
    width 100vw;
    height:100vh;
    top:0;
    left:0
    z-index:9;
    background: #33333355;
}
</style>