<template>
    <view class="home-body">
        <view class="body_header">
            <view class="home_logo"> </view>
            <uni-nav-bar :shadow="false" backgroundColor="transparent">
                <view class="headd" @click="goSeach">
                    <!-- <image  src="../../static/img/search.svg" style="width: 32rpx;height: 32rpx; color: blue;" mode=""></image> -->
                    <view class="headd_left">
                        <u-icon name="search" color="#2297fa" size="24"></u-icon>
                        <input placeholder-class="search_style" type="text" confirm-type="搜索" v-model="keywords"
                            placeholder="搜零工岗位/搜全职岗位/搜政策" />
                    </view>
                    <view class="headd_right">
                        搜索
                    </view>
                </view>
            </uni-nav-bar>
            <!-- <view class="homeHead"> -->
            <view class="headSwiper">
                <swiper :indicator-dots="true" indicator-active-color="#fff" indicator-color="rgba(255,255,255,0.80)"
                    :autoplay="true" :interval="3000" :duration="1000" class="yswiper" :circular="true">
                    <swiper-item v-for="(item,index) in swiperList" :key="index" v-if="item.isShow !== '2'">
                        <view class="swiper-item">
                            <image :src="item.image" mode="" class="swiperImg"></image>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
            <view class="newPolicy" v-if="policyContentList.length!=0">
                <view class="policyContent">
                    <view class="policyImgIndex">
                        <image src="../../static/img/index/newPolicy.png"></image>
                    </view>
                    <swiper style="width: 100%;height: 100rpx; line-height: 100rpx;margin-left: 164rpx;"
                        :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :vertical="true"
                        :circular="true">
                        <swiper-item v-for="(item,index) in policyContentList" :key="index"
                            @click="goPolicyInfo(item.id)">
                            <view class="swiper-item">
                                <view class="policyText">
                                    <view class="textTitle">{{item.articleTitle}}</view>
                                    <view class="textDate">{{dateFormat(item.createTime)}}</view>
                                    <image src="../../static/img/right.svg" mode=""
                                        style="width: 18rpx;height: 32rpx;position:absolute;top: 12rpx;right:0;">
                                    </image>
                                </view>
                            </view>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
            <!-- </view> -->
        </view>


        <view class="jobService">
            <view class="cardTips">就业服务</view>
            <view class="serviceItem" @click="goures()">
                <view class="serviceItemContent">
                    <view class="itemIcon">
                        <image class="Icon_size" src="../../static/img/index/jobRegister.png" mode=""></image>
                    </view>
                    <view class="itemText">
                        <view class="font30">简历登记</view>
                        <view class="font22">求职登记意向</view>
                    </view>
                </view>
            </view>
            <view class="serviceItem" @click="toNewTask">
                <view class="serviceItemContent">
                    <view class="itemIcon">
                        <image class="Icon_size" src="../../static/img/index/skill.png" mode=""></image>
                    </view>
                    <view class="itemText">
                        <view class="font30">零工岗位</view>
                        <view class="font22">最新零工岗位推荐</view>
                    </view>
                </view>
            </view>
            <!-- <view class="serviceItem" @click="">
				<view class="serviceItemContent">
					<view class="itemIcon">
						<image class="Icon_size" src="../../static/img/index/union.png" mode=""></image>
					</view>
					<view class="itemText">
						<view class="font30">监管投诉</view>
						<view class="font22">构建和谐劳动关系</view>
					</view>
				</view>
			</view> -->
            <!-- <view class="serviceItem" @click="goLocation()">
				<view class="serviceItemContent">
					<view class="itemIcon">
						<image class="Icon_size" src="../../static/img/index/near.png" mode=""></image>
					</view>
					<view class="itemText">
						<view class="font30">就近任务</view>
						<view class="font22">地图定位找工作</view>
					</view>
					<view class="hotFunction">
						<view class="text">
							热门功能
						</view>
						<image src="../../static/img/index/hotBg.png" class="hot_img" mode=""></image>
					</view>
				</view>
			</view> -->
            <view class="serviceItem" @click="toNewWork">
                <view class="serviceItemContent">
                    <view class="itemIcon">
                        <image class="Icon_size" src="../../static/img/index/gangwei-2.png" mode=""></image>
                    </view>
                    <view class="itemText">
                        <view class="font30">全职岗位</view>
                        <view class="font22">最新全职岗位推荐</view>
                    </view>
                </view>
            </view>
            <view class="serviceItem" @click="toNewProject">
                <view class="serviceItemContent">
                    <view class="itemIcon">
                        <image class="Icon_size" src="../../static/img/index/shenqing.png" mode=""></image>
                    </view>
                    <view class="itemText">
                        <view class="font30">最新政策</view>
                        <view class="font22">我申请的信息</view>
                    </view>
                </view>
            </view>
            <!-- <view class="serviceItem" @click="">
            	<view class="serviceItemContent">
            		<view class="itemIcon">
            			<image class="Icon_size" src="../../static/img/index/shoucang.png" mode=""></image>
            		</view>
            		<view class="itemText">
            			<view class="font30">我的收藏</view>
            			<view class="font22">我收藏的信息</view>
            		</view>
            	</view>
            </view>
            <view class="serviceItem" @click="">
            	<view class="serviceItemContent">
            		<view class="itemIcon">
            			<image class="Icon_size" src="../../static/img/index/icon-liulan.png" mode=""></image>
            		</view>
            		<view class="itemText">
            			<view class="font30">我的浏览</view>
            			<view class="font22">我浏览的信息</view>
            		</view>
            	</view>
            </view> -->
        </view>
        <view class="helpSupport">
            <view class="cardTips">帮助与支持</view>
            <view class="helpCard">
                <!-- <button type="default" open-type="contact" plain style="width: 266rpx;
					text-align: center;
					border: none;
					border-right: 1px solid #F5F6F7;padding-left: 0;">
					<view class="helpCardItem" style="border-right: 1px solid #F5F6F7;">
						<view class="cardItemIcon">
							<image src="../../static/img/index/consult.png" mode=""></image>
						</view>
						<view class="font24" style="margin-top: 22rpx !important;">在线咨询</view>
					</view>
				</button> -->
                <!--   <view class="helpCardItem" style="border-right: 1px solid #F5F6F7;" @click="">
                    <view class="cardItemIcon">
                        <image src="../../static/img/index/consult.png" mode=""></image>
                    </view>
                    <view class="font24">在线咨询</view>
                </view>
                <view class="helpCardItem" style="border-right: 1px solid #F5F6F7;" @click="">
                    <view class="cardItemIcon">
                        <image src="../../static/img/index/bangzhu.png" mode=""></image>
                    </view>
                    <view class="font24">就业帮助</view>
                </view> -->
                <view class="helpCardItem" style="border-right: 1px solid #F5F6F7;" @click="">
                    <view class="cardItemIcon" @click="navTo('/pageMy/setUserBase/applicationsRecord')">
                        <image src="../../static/img/index/legal.png" mode=""></image>
                    </view>
                    <view class="font24">问卷调查</view>
                </view>
                <view class="helpCardItem" @click="go('/pageMy/help/questions/questions')">
                    <view class="cardItemIcon">
                        <image src="../../static/img/index/question.png" mode=""></image>
                    </view>
                    <view class="font24">常见问题</view>
                </view>
            </view>
        </view>

        <!--   <view class="info_market">
            <view class="market_top">
                <view class="top_log"></view>
                <view class="next_market" @click="navTo('/pages/market/market')">去市场</view>
            </view>
            <view class="market_bottom">
                <view>了解市场<u-icon name="arrow-right" color="#666666" size="13"></u-icon></view>
                <view>我要咨询<u-icon name="arrow-right" color="#666666" size="13"></u-icon></view>
            </view>
        </view> -->

        <view class="latestMission">
            <view class="cardTips"
                style="margin: 0 26rpx;display: flex;align-items: center;justify-content: space-between;padding-bottom: 10rpx;">
                <view>政策资讯</view>
                <view style="display: flex;align-items: center;" @click="toNewProject">
                    <view style="color:#707070;font-size:26rpx;margin-right: 10rpx;">更多</view>
                    <image src="../../static/img/right.svg" mode="" style="width: 14rpx;height: 26rpx;"></image>
                </view>

            </view>
            <view class="newPeojectList">
                <!-- <block v-if="companyList.length>0" v-for="(item, index) in companyList" :key="item.id">
					<view class="baddd"></view>
					<company-list :companyitem="item"></company-list>
				</block> -->
                <view style="background-color: #fff;padding: 20rpx 30rpx;">
                    <view v-for="(item,index) in policyContentList" :key="index"
                        style="display: flex;align-items: center;padding: 20rpx 0;" @click="toArticleDetail(item.id)">
                        <image :src="item.headPic"
                            style="width: 80rpx;height: 80rpx;margin-right: 20rpx;border-radius: 10rpx;" mode="">
                        </image>
                        <view style="flex: 1; font-size: 28rpx;">{{ item.articleTitle }}</view>
                    </view>
                </view>
                <view v-if="policyContentList.length<=0">
                    <image src="../../static/img/pic_notask.svg" class="nothing" mode=""></image>
                    <view class="nothing_text">暂无数据</view>
                    <view class="baddd"></view>
                </view>
            </view>

        </view>
        <view class="homeFooter">
            <view class="atBottom">德阳市人力资源和社会保障局主办</view>
            <!-- <image src="../../static/img/index/seeMore.png" mode="" @click="goMore()"></image> -->
        </view>
        <policy-content ref="pContent"></policy-content>
    </view>
</template>

<script>
    import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
    import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue';
    import companyList from '@/components/companyList/companyList.vue';
    import policyContent from '../user/policyContent.vue'
    import {
        labourUnionDetail
    } from '@/api/federation.js'
    import {
        newMission,
        recMission
    } from '@/api/mission.js';
    import {
        mapGetters
    } from 'vuex'
    import {
        setStore,
        getStore
    } from '@/untils/store.js'
    import {
        getSwiperList,
        getPolicyContent
    } from '@/api/newIndex.js'
    import {
        myResume,
    } from '@/api/resume.js';
    import {
        dateFormat
    } from "../../untils/format.js";
    export default {
        components: {
            uniNavBar,
            uniSearchBar,
            companyList,
            policyContent
        },
        data() {
            return {
                companyList: [],
                recommendList: [],
                keywords: '',
                isLogin: false,
                open: false,
                swiperList: [],
                policyContentList: [],
                policyType: 1,
                swiperType: 1,
                IsResume: true,
            };
        },
        onLoad: function(options) {
            if (this.$api.haslogin()) {
                this.$store.dispatch('getResumeInfo')
            }
        },
        onShow: function() {
            this.download()
            this.getSwiperList()
            this.getPolicy()
            if (this.$api.haslogin()) {
                this.$store.dispatch('refreshAuthState').then((e) => {
                    var auth = this.$store.state.auth
                    if (!auth.bankCardState) {
                        this.step()
                    }
                })
            }
        },
        onReady() {
            uni.setNavigationBarTitle({
                title: this.face.homeTitle
            });

        },
        /*下拉刷新*/
        onPullDownRefresh: function() {
            this.download();
            setTimeout(function() {
                uni.stopPullDownRefresh();
            }, 1000);
        },
        computed: {
            ...mapGetters(['face', 'authInfo'])
        },
        onShareAppMessage(obj) {
            return {
                title: '智慧就业',
                path: '/pages/index/index',
            }
        },
        methods: {
            getPolicy() {
                getPolicyContent(this.policyType).then(res => {
                    this.policyContentList = res.data.data.records
                })
            },
            swiperItemSrc() {
                /* 
                	查看是否加入工会
                	加入：数据记录长度不为0
                */
                labourUnionDetail(this.authInfo.idNumber).then(res => {
                    const data = res.data.data.records;
                    if (data.length == 0) { //未查到数据，代表未加入工会
                        this.go('/pageMy/federation/forMembership/Notice');
                    } else {
                        this.go('/pageMy/federation/vip/information');
                    }
                })
            },

            step() {
                var that = this
                that.open = true
                uni.showModal({
                    id: 'testModal',
                    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}`
                })
            },
            go(url) {
                uni.navigateTo({
                    url
                })
            },
            download: function() {
                this.isLogin = this.$api.haslogin() ? true : false;
                newMission().then(res => {
                    this.companyList = res.data.data;
                });
                if (this.$api.haslogin()) {
                    uni.$emit('newsReadChange')
                    this.$store.dispatch("getUnreadNum");
                    recMission().then(res => {
                        this.recommendList = res.data.data;
                    })
                };
            },
            goLocation: function() {
                this.navTo('../mapSeach/mapSeach', true)
            },
            goResume: function() {
                uni.navigateTo({
                    url: '/pageMy/my/resume/addSkill'
                })
            },
            goMore: function() {
                uni.setStorageSync('active', 2);
                uni.switchTab({
                    url: '../project/project',
                });
            },
            goures: function() {
                this.navTo('/pageMy/my/resume/index', true)
            },
            toNewTask() {
                this.navTo(`/pages/project/newProject?tabIndex=${0}`, false)
            },
            toNewWork() {
                this.navTo(`/pages/project/newProject?tabIndex=${1}`, false)
            },
            toNewProject() {
                this.navTo(`/pages/project/newProject?tabIndex=${2}`, false)
            },
            toArticleDetail(id) {
                if (id) {
                    uni.navigateTo({
                        url: `/pages/user/policyContent?id=${id}`
                    })
                }
            },
            gouserSet: function() {
                this.navTo('/pageMy/setUserBase/index', true)
            },
            goSeach: function() {
                this.navTo('../seach/seach?keywords=' + this.keywords, true)
                this.keywords = ''
            },
            getSwiperList() {
                getSwiperList(this.swiperType).then(res => {
                    const data = res.data.data;
                    this.swiperList = data;
                })
            },
            dateFormat,

            goPolicyInfo(data) {
                if (data) {
                    // var val=encodeURIComponent(data)

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

                } else {
                    // uni.showToast({
                    // 	title:'暂无内容',
                    // 	icon:'none'
                    // })
                }
            }
        }
    };
</script>

<style lang="scss">
    .info_market {
        margin: 24rpx;
        height: fit-content;
        background-color: #FFFFFE;
        border-radius: 18rpx;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .market_top {
            background: url(@/static/img/index/bannerBg.png) no-repeat center center;
            background-size: 100% 100%;
            height: 100rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 24rpx;

            .top_log {
                background: url(@/static/img/index/inLogo.png) no-repeat center center;
                background-size: cover;
                height: 60rpx;
                width: 450rpx;

            }

            .next_market {
                font-size: 26rpx;
                color: #FFFFFF;
                background: linear-gradient(to right, rgba(137, 168, 253, 1), rgba(87, 129, 250, 1));
                width: 120rpx;
                height: 60rpx;
                text-align: center;
                line-height: 60rpx;
                border-radius: 30rpx;
                font-weight: bold;
            }
        }

        .market_bottom {
            font-size: 32rpx;
            height: 80rpx;
            display: flex;
            align-items: center;
            justify-content: space-around;

            view {
                display: flex;
            }

        }
    }

    .home_logo {
        background: url(@/static/img/index/inLogo.png) no-repeat center center;
        background-size: cover;
        height: 76rpx;
        width: 560rpx;
        margin: 24rpx 24rpx 24rpx 24rpx;
    }

    .body_header {
        background: url(@/static/img/index/bannerBg.png) no-repeat center center;
        background-size: 100% 100%;
        padding-top: 24rpx;
        padding-bottom: 18rpx;
    }

    .search_style {
        color: #2297fa;
    }

    .home-body {
        overflow-x: hidden;
        /* background-color: #FFFFFF; */
    }

    page {
        background: #F5F6F7;
        padding: 0 !important;
    }

    .homeHead {
        width: 100%;
        height: auto;
        background-color: #FFFFFF;
        margin-top: -20rpx;
        padding-bottom: 32rpx;
    }

    .headd {
        background-color: #f6f6f6;
        border-radius: 200rpx;
        border: 4rpx solid #2297fa;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        width: 690rpx;
        margin-right: auto;
        height: 80rpx;

        .headd_left {
            padding-left: 15rpx;
            display: flex;
            align-items: center;
            flex: 1;
        }

        .headd_right {
            padding: 0 30rpx;
            color: #2297fa;
            font-size: 28rpx;
            display: flex;
            align-content: center;
            justify-content: center;
            position: relative;
            font-weight: bold;
        }

        .headd_right::before {
            position: absolute;
            content: '';
            left: 0;
            top: calc(50% - 15rpx);
            width: 4rpx;
            height: 30rpx;
            background-color: #2297fa;

        }
    }

    .headd input {
        width: 100%;
        font-size: 26rpx;
    }

    .headSwiper {
        width: 690rpx;
        height: 260rpx;
        margin: 20rpx auto;
        border-radius: 30rpx;
    }

    .yswiper {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        margin: 20rpx 0;
    }

    .swiper-item {
        width: 100%;
        height: 100%;
        border-radius: 12rpx;
        overflow: hidden;
    }

    .swiperImg {
        width: 100%;
        height: 100%;
    }

    .newPolicy {
        width: 690rpx;
        height: 100rpx;
        background: #FEFFFE;
        box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.06);
        border-radius: 16rpx;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

    }

    .newPolicy .policyContent {
        padding: 20rpx 20rpx 20rpx 34rpx;
        width: 580rpx;
        height: 100rpx;
        position: relative;
    }

    .swiper-item {

        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .policyImgIndex {
        position: absolute;
        top: 48rpx;
    }

    .policyImgIndex image {
        width: 140rpx;
        height: 48rpx;
    }

    .policyText {
        width: 466rpx;
        height: 58rpx;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.8);
        line-height: 34rpx;
        position: relative;
    }

    .textTitle {
        width: 416rpx;
        height: 34rpx;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.8);
        line-height: 34rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .textDate {
        width: 140rpx;
        height: 28rpx;
        font-size: 20rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.4);
        line-height: 28rpx;
    }

    .jobService {
        width: 100%;
        height: 440rpx;
        background: #FEFFFE;
        // margin-top: 16rpx;
        padding: 24rpx 0rpx 0rpx 32rpx;
    }

    .cardTips {

        height: 50rpx;
        font-size: 36rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.8);
        line-height: 50rpx;
        margin-bottom: 16rpx;
    }

    .serviceItem {
        width: 338rpx;
        height: 168rpx;
        background: #FEFFFE;
        box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.06);
        border-radius: 8rpx;
        float: left;
        margin-right: 8rpx;
        margin-bottom: 8rpx;

    }

    .serviceItem .serviceItemContent {
        padding: 42rpx 0rpx 42rpx 32rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    .serviceItemContent .itemText {
        width: 200rpx;
        margin-left: 16rpx;
    }


    .hotFunction {
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        position: absolute;
        top: 0;
        right: 0;
        text-align: center;
    }

    .hotFunction .hot_img {
        width: 144rpx;
        height: 34rpx;
    }

    .hotFunction .text {
        position: absolute;
        top: 0;
        right: 22rpx;
        z-index: 9;
        border-radius: 16rpx;
    }


    .serviceItem .itemIcon image,
    .serviceItem .itemIcon {
        width: 84rpx;
        height: 84rpx;
        border-radius: 50%;
    }

    .font22 {
        font-size: 22rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.4);
        width: 200rpx;
    }

    .font30 {
        font-size: 30rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);

    }

    .helpSupport {
        width: 100%;
        height: auto;
        background: #FEFFFE;
        padding: 24rpx 0rpx 36rpx 32rpx;
        margin-top: 16rpx;
    }

    .helpCard {
        width: 690rpx;
        height: 144rpx;
        background: #FEFFFF;
        box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.06);
        border-radius: 8px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .helpCardItem {
        width: 266rpx;
        text-align: center;
    }

    .helpCardItem .cardItemIcon image,
    .helpCardItem .cardItemIcon {
        width: 52rpx;
        height: 52rpx;
        margin: 0 auto;
    }

    .font24 {
        height: 28rpx;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.6);
        line-height: 34rpx;
        margin-top: 16rpx;
    }

    .latestMission {
        width: 100%;
        height: auto;
        background: #FEFFFE;
        margin-top: 16rpx;
        padding: 24rpx 0 0 0;

    }

    .baddd {
        background: #f6f6f6;
        height: 2rpx;
    }

    .nothing {
        width: 345px;
        height: 130px;
        display: block;
    }

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

    .homeFooter {
        width: 690rpx;
        height: auto;
        margin: 0 auto;
        background-color: #f5f6f7;
        margin-top: 16rpx;
        margin-bottom: 60rpx;
        text-align: center;
    }

    .homeFooter .atBottom {
        width: 690rpx;
        height: 0rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #cccdce;
        line-height: 80rpx;
        text-align: center;
        margin-bottom: 20rpx;

    }

    .homeFooter image {
        width: 200rpx;
        height: 64rpx;
        text-align: center;
    }

    .serviceItemContent .itemIcon {
        background-color: rgba(0, 0, 0, 0.06);
        width: 90rpx;
        height: 90rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .Icon_size {
            width: 60rpx;
            height: 60rpx;
            border-radius: 0;
        }
    }
</style>