<template>
    <view>
        <view class="titleSearch">
            <view class="searchName">搜 索</view>

            <u-search placeholder="搜零工岗位/搜全职岗位/搜政策" @focus="goSeach" shape="round" :showAction="false"></u-search>
        </view>

        <view class="content">
            <view class="typeButtonWrapper">
                <view class="typeButtonLeft">
                    <view v-for="(item, index) in nonReactiveArray" :key="index"
                        v-show="(activeTab != 2) && (index == activeTab)"
                        :class="['typeButton', index == activeTab ? 'activeButton' : '']" @click="changeTab(index)">{{
				item
			}}</view>
                </view>
                <!-- 筛选 -->
                <!-- <view class="screenButton" @click="showPopUp = true">
					筛选
					<view class="arrow-up-right"> </view>
				</view> -->
            </view>

            <u-popup closeable :show="showPopUp" mode="right" @close="closePopUp">
                <view class="popUpWrapper">
                    <verticalMenu :closePopUp="closePopUp" :subMitPopUp="subMitPopUp" />
                </view>
            </u-popup>

            <block v-if="activeTab == 0">
                <view v-if="newList.length > 0">
                    <block v-for="(item, index) in newList" :key="index">
                        <companyList :companyitem="item" :position="userLocation"></companyList>
                    </block>
                </view>
                <view v-else>
                    <image src="../../static/img/pic_notask.svg" class="nothing" mode=""></image>
                    <view class="nothing_text">暂无信息</view>
                </view>
            </block>

            <block v-if="activeTab == 1">
                <view>
                    <!-- <view class="location" @click="gomap">
						<image src="../../static/img/location.svg" mode=""></image>
						{{ currentAddress }}（切换位置）
						<image src="../../static/img/right.svg" mode=""></image>
					</view> -->
                </view>

                <view v-if="companyList.length > 0">
                    <block v-for="(item, index) in companyList" :key="item.id">
                        <workList :companyitem="item" :position="userLocation" :near="activeTab === 0"></workList>
                    </block>
                </view>
                <view v-else>
                    <image src="../../static/img/pic_notask.svg" mode="" class="nothing"></image>
                    <view class="nothingContnt">
                        暂无信息
                    </view>
                </view>
            </block>

            <block v-if="activeTab == 2">
                <!-- <view v-if="recommendList.length > 0">
					<block v-for="(item, index) in recommendList" :key="item.id">
						<companyList :companyitem="item"></companyList>
					</block>
				</view>

				<view v-else>
					<image src="../../static/img/pic_notask.svg" mode="" class="nothing"></image>
					<view class="nothingContnt">
						完善技能，获取精推荐
					</view>
					<view class="btn" @click="goResume">
						完善技能
					</view>
				</view> -->
                <view v-for="(item, index) in policyContentList" :key="index"
                    style="width: 90%;height: 100rpx;background-color: #fff;border-radius: 10rpx;margin:20rpx 5% 20rpx 5%;display: flex;align-items: center"
                    @click="goPolicyInfo(item.id)">
                    <image :src="item.headPic" style="width: 60rpx;height: 60rpx;margin: 0 20rpx;"></image>
                    <view style="font-size: 26rpx;">{{ item.articleTitle }}</view>
                </view>
            </block>

            <cs-button></cs-button>
        </view>

    </view>
</template>

<script>
    import vTabs from '@/components/v-tabs/v-tabs.vue';
    import testData from '@/common/textdata.js';
    import companyList from '@/components/companyList/companyList.vue';
    import workList from '@/components/companyList/workList.vue'
    import {
        newMissionAll,
        recommendMission,
        nearMission
    } from '@/api/mission.js';
    import {
        getPolicyContent
    } from '@/api/newIndex.js'
    import {
        getcoder
    } from "@/api/map.js";
    import verticalMenu from '@/components/vertical-menu/vertical-menu.vue';
    import {
        mapGetters
    } from 'vuex'
    export default {
        components: {
            vTabs,
            companyList,
            verticalMenu,
            workList
        },
        computed: {
            ...mapGetters(['userLocation']),
        },
        data() {
            return {
                policyContentList: [],
                activeTab: '0',
                companyList: [],
                recommendList: [],
                newList: [],
                nearPage: {
                    current: 1,
                    size: 10,
                    total: 0
                },
                recommendPage: {
                    current: 1,
                    size: 10,
                    total: 0
                },
                newPage: {
                    current: 1,
                    size: 10,
                    total: 0
                },
                currentAddress: '',

                key: 'FW3BZ-6JTK6-GCUS5-MZCRR-3GPR5-HJFEI',
                open: false,
                showPopUp: false,

                nonReactiveArray: ["最新零工岗位", "最新全职岗位", "政策资讯"],
            }
        },
        onLoad: function(option) {
            if (option.tabIndex) {
                this.activeTab = option.tabIndex
            }
            this.$store.dispatch('getUserLocation')
            this.download()
        },
        onShow: function() {

            const enumTitle = {
                "0": '最新零工岗位',
                "1": '最新全职岗位',
                "2": '最新政策',
            }
            uni.setNavigationBarTitle({
                title: enumTitle[this.activeTab]
            })
            if (this.$api.haslogin()) {
                this.$store.dispatch('refreshAuthState').then((e) => {
                    var auth = this.$store.state.auth
                    if (!auth.bankCardState) {
                        this.step()
                    }
                })
            }
            const value = uni.getStorageSync('active');
            if (value) {
                this.activeTab = value;
                uni.removeStorageSync('active')
            }
        },
        /*页面滚动到底部 换页*/
        onReachBottom: function() {
            this.upLoad()
        },
        /*下拉刷新*/
        onPullDownRefresh: function() {
            this.download();
        },
        methods: {
            step() {
                var that = this
                that.open = true
                uni.showModal({
                    title: '实名认证',
                    content: `检查到您还未实名认证，实名认证之后才可进行操作哦`,
                    showCancel: false,
                    confirmText: '立即认证',
                    success: function(res) {
                        if (res.confirm) {
                            that.goSign(0)
                        } else if (res.cancel) {
                            that.step()
                        }
                        that.open = false
                    }
                });
            },
            // 步骤
            goSign(active) {
                uni.navigateTo({
                    url: `/pages/projectInfo/signContract?active=${active}`
                })
            },
            goResume: function() {
                uni.navigateTo({
                    url: '/pageMy/my/resume/addSkill'
                })
            },
            goSeach: function() {
                uni.navigateTo({
                    url: '../seach/seach'
                })
            },
            gomap: function() {
                uni.navigateTo({
                    url: '../mapSeach/mapSeach'
                })
            },
            getPolicy() {
                getPolicyContent(1).then(res => {
                    this.policyContentList = res.data.data.records
                })
            },
            changeTab: function(e) {
                this.activeTab = e;
            },
            //附近任务；
            getNearList: function() {
                nearMission(this.nearPage.current, this.nearPage.size, 1).then(res => {
                    if (this.nearPage.current === 1) {
                        this.companyList = [];
                    }
                    this.nearPage.current += 1;
                    this.nearPage.total = res.data.data.total;
                    if (res.data.data && res.data.data.records.length) {
                        this.companyList = this.companyList.concat(res.data.data.records);
                    }
                })
            },
            goPolicyInfo(data) {
                if (data) {
                    // var val=encodeURIComponent(data)

                    uni.navigateTo({
                        url: `/pages/user/policyContent?id=${data}`
                    })

                } else {
                    // uni.showToast({
                    // 	title:'暂无内容',
                    // 	icon:'none'
                    // })
                }
            },
            //推荐任务；
            getRecommendList: function() {
                recommendMission(this.recommendPage.current, this.recommendPage.size, '').then(res => {
                    if (this.recommendPage.current === 1) {
                        this.recommendList = [];
                    }
                    this.recommendPage.current += 1;
                    this.recommendPage.total = res.data.data.total;
                    if (res.data.data && res.data.data.records.length) {
                        this.recommendList = this.recommendList.concat(res.data.data.records);
                    }
                })
            },
            //最新任务；
            getNewList: function() {
                newMissionAll(this.newPage.current, this.newPage.size, '', 1).then(res => {
                    if (this.newPage.current === 1) {
                        this.newList = [];
                    }
                    this.newPage.current += 1;
                    this.newPage.total = res.data.data.total;
                    if (res.data.data && res.data.data.records.length) {
                        this.newList = this.newList.concat(res.data.data.records);
                    }
                })
            },
            //上拉加载
            upLoad: function() {
                if (this.activeTab === '0') {
                    if (this.newPage.current <= Math.ceil(this.newPage.total / this.newPage.size)) {
                        this.getNewList()
                    } else {
                        uni.showToast({
                            icon: "none",
                            title: '已经是最后一页',
                        })
                    }
                    return
                }
                if (this.activeTab === '1') {
                    if (this.nearPage.current <= Math.ceil(this.nearPage.total / this.nearPage.size)) {
                        this.getNearList();
                    } else {
                        uni.showToast({
                            icon: "none",
                            title: '已经是最后一页',
                        })
                    }
                    return
                }
                if (this.activeTab === '2') {
                    if (this.newPage.current <= Math.ceil(this.newPage.total / this.newPage.size)) {
                        this.getPolicy();
                    } else {
                        uni.showToast({
                            icon: "none",
                            title: '已经是最后一页',
                        })
                    }
                    return
                }
            },
            //下拉刷新
            download: function() {
                console.log(this.activeTab)
                if (this.activeTab === '0') {
                    this.newPage.current = 1;
                    this.getNewList();
                    setTimeout(function() {
                        uni.stopPullDownRefresh();
                    }, 1000);
                    return
                }
                if (this.activeTab === '1') {
                    this.nearPage.current = 1;
                    this.getNearList();
                    setTimeout(function() {
                        uni.stopPullDownRefresh();
                    }, 1000);
                    return
                }
                if (this.activeTab === '2') {
                    // this.newPage.current = 1;
                    this.getPolicy();
                    setTimeout(function() {
                        uni.stopPullDownRefresh();
                    }, 1000);
                    return
                }
            },
            getData: function() {
                uni.$emit('newsReadChange');
                this.nearPage.current = 1;
                this.recommendPage.current = 1;
                this.newPage.current = 1;
                this.getRecommendList();
                this.getNewList();
                this.getNearList();
            },


            closePopUp() {
                this.showPopUp = false
            },
            subMitPopUp({
                submitData,
                areaModal,
                industryModal
            }) {
                console.log(submitData, areaModal, industryModal, "------确定");
                this.showPopUp = false
            }
        }
    }
</script>

<style scoped>
    .titleSearch {
        display: flex;
        width: 80%;
        margin: 0 auto;
        font-size: 22px;
        font-weight: bold;
        padding: 20rpx;
    }



    .searchName {
        margin-right: 28rpx;
    }

    .content {
        background-color: #f3f4f8;
        padding-top: 20rpx;
        /* min-height: 80vh; */
        min-height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
    }



    .screenButton {
        /* position: absolute;
	top: 10px;
	z-index: 1;
	left: 30rpx; */
        position: relative;
        width: 50px;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        background-color: #fff;
    }

    .typeButtonWrapper {
        width: 92%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        /* margin-bottom: 10rpx; */
    }

    .typeButtonLeft {
        display: flex;
    }

    .typeButton {
        font-size: 14px;
        padding: 10rpx 40rpx;
        background: #fff;
        border-radius: 50px;
        margin-right: 10rpx;
    }

    .activeButton {
        color: #4171f9;
        background-color: #cfdaf8;
    }

    .arrow-up-right {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid #949396;
        /* 这里的颜色可以根据你的需要进行修改 */
        border-bottom: 10px solid transparent;
        position: absolute;
        top: 3px;
        right: 3px;

    }


    .topseach {
        width: 25px;
        height: 25px;
        position: absolute;
        top: 10px;
        right: 30rpx;
    }

    .location image:last-child {
        margin-left: auto;
    }

    .location image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
    }

    .location {
        padding: 20rpx 30rpx;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-family: PingFangSC-Regular;
        font-size: 28rpx;
        color: #333333;
    }

    .btn {
        margin: 0 auto;
        color: #999;
        border: 1rpx solid #999;
        font-size: 28rpx;
        height: 52rpx;
        line-height: 52rpx;
        text-align: center;
        width: 180rpx;
        border-radius: 5rpx;
        margin-top: 30rpx;
    }

    .nothing_text {
        font-family: PingFangSC-Regular;
        font-size: 28rpx;
        color: #666666;
        text-align: center;
    }

    .nothingContnt {
        font-family: PingFangSC-Regular;
        font-size: 28rpx;
        color: #333333;
        margin-top: 30rpx;
        text-align: center;
    }

    .nothing {
        width: 400rpx;
        height: 200rpx;
        display: block;
        margin: 0 auto;
        margin-top: 300rpx;
    }



    .popUpWrapper {
        width: 100%;
    }
</style>