<template>
    <view class="container safe-area-top">
        <!-- 自定义头部搜索框 -->
        <view class="custom-header">
            <view class="top">
                <image class="btnback button-click" src="@/static/icon/back.png" @click="navBack"></image>
                <view class="search-box">
                    <uni-icons
                        class="iconsearch"
                        color="#666666"
                        type="search"
                        size="18"
                    ></uni-icons>
                    <input
                        class="inputed"
                        type="text"
                        focus
                        v-model="searchValue"
                        placeholder="搜索职位名称"
                        placeholder-class="placeholder"
                        @confirm="searchBtn"
                    />
                </view>
                <view class="search-btn button-click" @click="searchBtn">搜索</view>
            </view>
        </view>
        <scroll-view scroll-y class="Detailscroll-view" v-show="listCom.length" @scrolltolower="choosePosition">
            <view class="cards-box">
                <renderJobs :list="listCom" :longitude="longitudeVal" :latitude="latitudeVal"></renderJobs>
            </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">
                    <uni-icons type="trash" color="#C1C1C1" size="20"></uni-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 } 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 img from '@/static/icon/filter.png';
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
const searchValue = ref('');
const historyList = ref([]);
const searchParams = ref({});
const listCom = ref([]);
const pageState = reactive({
    page: 0,
    total: 0,
    maxPage: 2,
    pageSize: 10,
    search: {
        order: 0,
    },
});
// 响应式搜索条件（可以被修改）

async function choosePosition(index) {
    getJobList('add');
}

onLoad((query) => {
    let arr = uni.getStorageSync('searchList');
    if (arr) {
        historyList.value = uni.getStorageSync('searchList');
    }
    const {job, area, regionCode} = query;
    if (area) {
        pageState.search.area = area;
    }
    if (regionCode) {
        pageState.search.regionCode = regionCode;
    }
    if (job) {
        searchValue.value = job;
        searchBtn();
    }
});

function changeType(type) {
    getJobList('refresh');
}
function searchFn(item) {
    searchValue.value = item;
    searchBtn();
}

function searchBtn() {
    if (!searchValue.value) {
        return;
    }
    historyList.value.unshift(searchValue.value);
    historyList.value = unique(historyList.value);
    uni.setStorageSync('searchList', historyList.value);
    searchParams.value = {
        jobTitle: searchValue,
    };
    getJobList('refresh');
}

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?encryptJobId=${encodeURIComponent(job.encryptJobId)}`);
}

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,
        jobTitle: searchValue.value,
    };

    $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);
        } else {
            listCom.value = rows;
        }
        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: 100vh;
    .custom-header {
        background-color: #fff;
        padding:0;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
    }
    .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;
            .inputed {
                width: 100%;
            	font-size: 28rpx;
            	font-family: PingFang SC;
            	font-weight: 400;
            	line-height: 36rpx;
            	color: #666666;
            	padding: 0 30rpx 0 80rpx;
            	box-sizing: border-box;
                height: 80rpx;
                background: #F5F5F5;
                border-radius: 75rpx 75rpx 75rpx 75rpx;
            }
            .iconsearch{
                position: absolute;
                top: 50%;
                left: 36rpx;
                transform: translate(0, -50%)
            }
        }
		.search-btn {
            padding-right: 18rpx;
			text-align: center;
			height: 64rpx;
			line-height: 64rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #256BFA;
		}
	}
    .main-content{
        background: #FFFFFF;
        height: 100%;
        margin-top: 140rpx;
        .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
            }
        }
    }
    .Detailscroll-view{
        flex: 1;
        overflow: hidden;
        margin-top: 140rpx;
    }
}

.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;
    }
}
</style>
