<template>
    <view class="body">
        <view v-for="(value,key) in data" class="newsList" @click="goList(value)" :key="key">
            <view class="newsIcon">
                <image :src="value.icon" mode=""></image>
                <view v-if="news.unread[value.uid] > 0" class="point"></view>
            </view>
            <view class="newsListRight">
                <view class="head">
                    <view class="head_left">
                        {{value.title}}
                    </view>
                    <view class="head_right" v-if="value.data.length > 0">
                        {{value.data[0][0][value.prop.time]}}
                    </view>
                </view>
                <view class="content" v-if="value.data.length > 0">
                    {{value.prop.desc(value)}}
                </view>
            </view>
        </view>
        <cs-button></cs-button>
    </view>
</template>

<script>
    import {
        mapGetters
    } from 'vuex'
    import {
        GoLogin
    } from '@/untils/AxiosUtils.js';
    export default {
        data() {
            return {
                loading: false
            }
        },
        onLoad() {},
        onShow() {
            if (/token/g.test(location.href)) {
                this.$api.sleep(2000).then(() => {
                    if (!this.$api.haslogin()) {
                        GoLogin()
						console.log('300')
                    } else {
                        uni.$emit('newsReadChange')
						console.log('000')
                    }
                })
            } else {
                if (!this.$api.haslogin()) {
                    GoLogin()
                } else {
                    uni.$emit('newsReadChange')
                }
            }
        },
        onPullDownRefresh() {
            this.loading = true
            this.$store.dispatch("newsInit").then(() => {
                this.loading = false
                uni.stopPullDownRefresh();
            }).catch(() => {
                this.loading = false
                uni.stopPullDownRefresh();
            })
        },
        methods: {
            goList(item) {
                // if (item.data.length === 0) {
                // 	uni.showToast({
                // 		title: '暂无消息',
                // 		icon: 'none'
                // 	});
                // 	return
                // }
                console.log(item)
                // 0消息 1任务推送、2岗位推送、4政策推送
                if (item.uid === '1') {
                    console.log('零工岗位推送')
                    uni.navigateTo({
                        url: './taskProjectList?type=' + item.uid
                    })
                } else if (item.uid === '2') {
                    console.log('全职岗位推送')
                    uni.navigateTo({
                        url: './jobProjectList?type=' + item.uid
                    })
                } else if (item.uid == '3') {
                    console.log('政策推送')
                    uni.navigateTo({
                        url: './policyList?type=' + item.uid
                    })
                } else {
                    uni.navigateTo({
                        url: './newsList?type=' + item.uid
                    })
                }
            }
        },
        computed: {
            ...mapGetters(['news']),
            data() {
                console.log(this.news.data, '-----------------------------');
                return this.news.data
            }
        }
    }
</script>

<style>
    .content {
        font-family: PingFangSC-Regular;
        font-size: 28rpx;
        color: #666666;
        width: 560rpx;
        overflow: hidden;
        white-space: nowrap;
        /*不换行*/
        text-overflow: ellipsis;
        /*超出部分文字以...显示*/
    }

    .head_right {
        float: right;
        font-family: PingFangSC-Regular;
        font-size: 24rpx;
        color: #CCCCCC;
    }

    .head_left {
        float: left;
        font-family: PingFangSC-Regular;
        font-size: 36rpx;
        color: #333333;
    }

    .head {
        overflow: hidden;
        width: 560rpx;
    }

    .newsListRight {
        float: left;
        width: 560rpx;
        height: 50rpx;
        line-height: 50rpx;
        padding-left: 30rpx;
    }

    .newsList .newsIcon {
        position: relative;
        width: 100rpx;
        height: 100rpx;
        display: inline-block;
        float: left;
    }

    .newsList image {
        width: 100rpx;
        height: 100rpx;
    }

    .newsList .point {
        position: absolute;
        top: 5rpx;
        right: 10rpx;
        width: 20rpx;
        height: 20rpx;
        background: red;
        border-radius: 50%;
    }

    .newsList {
        border-bottom: 1rpx solid #dddddd;
        padding-bottom: 30rpx;
        padding-right: 30rpx;
        padding-top: 30rpx;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    .body {
        background-color: #fefefe;
        padding-left: 30rpx;

        width: 720rpx;
    }

    page {
        background: #f6f6f6;
    }
</style>