<template>
    <div class="video-container">
        <view class="back-box">
            <view class="btn">
                <uni-icons type="left" size="26" color="#FFFFFF" @click="navBack"></uni-icons>
            </view>
        </view>
        <mTikTok :video-list="state.videoList" :pause-type="1" :controls="false" @loadMore="loadMore" @change="change">
            <template v-slot="data">
                <view class="video-layer">
                    <view class="title line_1">{{ currentItem.companyName }}</view>
                    <view class="discription">
                        <text class="line_1">
                            {{ currentItem.jobTitle }}
                        </text>
                        <view class="seedetail" @click="nextDetail">
                            查看详情
                            <uni-icons type="right" color="#FFFFFF" size="14"></uni-icons>
                        </view>
                    </view>
                </view>
            </template>
        </mTikTok>
    </div>
</template>
<script setup>
import { inject, ref, reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const { $api, navBack, navTo } = inject('globalFunction');
import mTikTok from '@/components/TikTok/TikTok.vue';
import useUserStore from '@/stores/useUserStore';
import { useRecommedIndexedDBStore } from '@/stores/useRecommedIndexedDBStore.js';
const recommedIndexDb = useRecommedIndexedDBStore();
const state = reactive({
    videoList: [],
});
const currentItem = ref(null);

onLoad(() => {
    const jobInfo = uni.getStorageSync(`job-Info`);
    if (jobInfo) {
        currentItem.value = jobInfo;
        state.videoList.push(jobInfo);
    }
    getNextVideoSrc(2);
});

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

function getNextVideoSrc(num) {
    let params = {
        uuid: useUserStore().seesionId,
        count: num || 1,
    };
    $api.createRequest('/app/job/littleVideo/random', params).then((resData) => {
        const { data, code } = resData;
        state.videoList.push(...data);
    });
}

const loadMore = () => {
    // 触发加载更多
    console.log('加载更多');
    getNextVideoSrc();
};

const change = (e) => {
    currentItem.value = e.detail;
    console.log('🚀 ~ file: index.vue:53 ~ change ~ data:', e);
};
</script>
<style lang="stylus" scoped>
.video-container{
    width: 100%;
    height: 100vh;
    position: relative
    .back-box{
        position: absolute;
        left: 20rpx;
        top: 20rpx
        color: #FFFFFF
        z-index: 2
    }
}
.video-layer {
    position: absolute;
    left: 24rpx;
    right: 24rpx;
    bottom: 30rpx;
    color: #fff;
    .title{
        font-weight: 500;
        font-size: 30rpx;
        line-height: 100%;
        letter-spacing: 0%;
    }
    .discription{
        font-weight: 400;
        font-size: 28rpx;
        letter-spacing: 0%;
        margin-top: 20rpx
        display: flex
        align-items: center
        .seedetail{
            font-weight: 500;
            font-size: 32rpx;
            line-height: 100%;
            letter-spacing: 0%;
            white-space: nowrap
            padding-left: 20rpx
        }
    }
}

.btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 60rpx;
    height: 60rpx;

    image {
        height: 100%;
        width: 100%;
    }
}
</style>
