<template>
    <view class="body">
        <mescroll-uni ref="mescrollRef" @down="downCallback" @up="getData" :up="upOption" :down="downOption">
            <!-- <view class="tab_con2 d_flex j_space_around a_center">
                <view v-for="(item, index) in tabs" :key="index" v-text="item.title" class="tab_nav" :class="tabIndex == index ? 'on' : ''" @click="tabClick(index)"></view>
            </view> -->
            <view class="body_content">
                <view class="activity_list" v-if="tabIndex == 0">
                    <view class="activity_nav" v-for="(item, index) in items" :key="index">
                        <navigator hover-class="none" :url="'/pages/activity/detail/index?id=' + item.scid" class="activity_nav_img">
                            <image class="img" :src="item.imgurl"></image>
                            <image v-if="item.isActivity == 1" class="activity_icon" src="/static/activity_icon1.png"></image>
                            <image v-else class="activity_icon" src="/static/activity_icon2.png"></image>
                        </navigator>
                        <view class="activity_nav_content">
                            <view class="activity_nav_title">
                                <navigator hover-class="none" :url="'/pages/activity/detail/index?id=' + item.scid" class="activity_nav_title_1 two_hidden" v-text="item.Title"></navigator>
                                <view class="collect" @click="collectClick(index)">
                                    <image v-if="item.isCollect == 0" class="collect_img" src="/static/collect1.png"></image>
                                    <image v-else class="collect_img" src="/static/collect2.png"></image>
                                </view>
                            </view>
                            <navigator hover-class="none" :url="'/pages/activity/detail/index?id=' + item.scid">
                                <view class="activity_nav_subtitle text_hidden" v-text="item.content2"></view>
                                <view class="activity_nav_time" v-text="item.stime + ' - ' + item.etime"></view>
                                <view class="activity_nav_label d_flex" v-if="item.biaoqian.length>0">
                                    <view class="activity_nav_label_txt label2" v-for="(item2,index2) in item.biaoqian" :key="index2" v-text="item2" v-if="index2<3"></view>
                                </view>
                            </navigator>
                        </view>
                    </view>
                </view>
                <view class="changguan_list" v-else>
                    <view class="changguan_nav" v-for="(item, index) in items" :key="index">
                        <navigator hover-class="none" :url="'/pages/changguan/detail/index?id=' + item.scid" class="changguan_inner">
                            <view class="changguan_nav_img"><image class="img" :src="item.imgurl"></image></view>
                            <view class="changguan_nav_content">
                                <view class="changguan_nav_title font_bold text_hidden" v-text="item.Title"></view>
                                <view class="changguan_nav_subtitle text_hidden" v-text="item.subtitle"></view>
                                <view class="changguan_nav_label d_flex">
                                    <view v-for="(item2,index2) in item.biaoqian" :key="index2" class="changguan_nav_label_txt" :class="[index2==0?'label1':'',index2==1?'label2':'',index2==2?'label3':'']" v-text="item2"></view>
                                </view>
                            </view>
                        </navigator>
                        <view class="collect" @click="collectClick(index)">
                            <image v-if="item.isCollect == 0" class="collect_img" src="/static/collect1.png"></image>
                            <image v-else class="collect_img" src="/static/collect2.png"></image>
                        </view>
                    </view>
                </view>
            </view>
        </mescroll-uni>
    </view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
    mixins: [MescrollMixin],
    components: {},
    data() {
        return {
            mescroll: null,
            downOption: {
                use: false, //是否启用下拉刷新
                auto: false //是否自动加载
            },
            upOption: {
                use: true, //是否启用上拉加载更多
                auto: true //是否自动加载
            },
            tabIndex: 1,
            /* tabs: [{title:'活动'},{title:'场馆'}], */
            items:[]
        };
    },
    onLoad(options) {
        let that = this;
    },
    onReady() {},
    onShow() {},
    methods: {
        tabClick(e) {
            this.tabIndex = e;
            this.mescroll.resetUpScroll();
        },
        collectClick(e) {
            let index = e;
            let that = this;
            that.$doPost('Server.aspx', {
                mod: 'addSC',
                scid: that.items[index].scid,
                type: that.tabIndex
            })
            .then(res => {
                if (res.data.resultcode != 0) {
                    that.$util.showToast(res.data.msg);
                    return;
                }
                if (that.items[index].isCollect == 0) {
                    that.items[index].isCollect = 1;
                } else {
                    that.items[index].isCollect = 0;
                }
                that.$util.showToast('操作成功');
            })
            .catch(err => {
                console.log('request fail', err);
            });
        },
        getData(mescroll) {
            let that = this;
            that.$doPost('Server.aspx', {
                mod: 'getSClist',
                page: mescroll.num,
                pagesize: mescroll.size,
                type:that.tabIndex
            })
            .then(res => {
                if (res.data.resultcode != 0) {
                    that.$util.showToast(res.data.msg);
                    return;
                }
                let body = res.data.data;
                body.filter(function(item, index) {
                    if(that.tabIndex==0){
                        item.imgurl = that.baseImgUrl + item.imgurl;
                        if(!item.biaoqian){
                            item.biaoqian = [];
                        }else{
                            item.biaoqian = item.biaoqian.split("|");
                        }
                        if(new Date() > that.$util.strDateFormat(item.etime)){
                            item.isActivity = 0;
                        }else{
                            item.isActivity = 1;
                        }
                        item.stime = that.$util.strDateFormat(item.stime,"yyyy.MM.dd");
                        item.etime = that.$util.strDateFormat(item.etime,"yyyy.MM.dd");
                    }else{
                        item.imgurl = that.baseImgUrl + item.imgurl;
                        if(!item.biaoqian){
                            item.biaoqian = [];
                        }else{
                            item.biaoqian = item.biaoqian.split("|");
                        }
                    }
                    item.isCollect = 1;
                });
                if (mescroll.num == 1) {
                    that.items = body;
                } else {
                    that.items = that.items.concat(body);
                }
                mescroll.endSuccess(body.length);
            })
            .catch(err => {
                that.$util.showToast('网络错误，稍后重试');
                mescroll.endErr();
                console.log('request fail', err);
            });
        },
        downCallback(mescroll) {
            setTimeout(function() {
                mescroll.endSuccess(0);
            }, 600);
        }
    },
    onShareTimeline(res) {
        return {
            title: '活动列表',
            imageUrl: '',
            query: ''
        };
    },
    onShareAppMessage(res) {
        return {
            title: '活动列表',
            imageUrl: '',
            path: ''
        };
    }
};
</script>

<style lang="scss">
page,
.body {
    background: #fff;
}
.tab_con2 {
    padding: 0 30upx;
    position: fixed;
    width: calc(100% - 60upx);
    left: 0;
    top: 0;
    z-index: 1000;
    background: #fff;
    height: 70upx;
    line-height: 70upx;
}
.tab_con2 .tab_nav {
    color: #999;
    font-size: 30upx;
    position: relative;
}
.tab_con2 .tab_nav::after {
    width: 40upx;
    height: 4upx;
    background: #fff;
    border-radius: 10upx;
    content: '';
    position: absolute;
    left: 50%;
    margin-left: -20upx;
    bottom: 0;
}
.tab_con2 .tab_nav.on::after {
    background: #ffb155;
}
/*活动列表*/
.activity_list {
    width: 100%;
    overflow: hidden;
    padding-top: 70upx;
}
.activity_nav {
    border-radius: 20upx;
    box-shadow: 0px 5upx 15upx 0px rgba(0, 0, 0, 0.15);
    height: 224upx;
    margin: 0 30upx 50upx 30upx;
    position: relative;
    z-index: 10;
}
.activity_nav:first-child {
    margin-top: 50upx;
}
.activity_nav .activity_nav_img {
    width: 302upx;
    height: 100%;
    border-top-left-radius: 20upx;
    border-bottom-left-radius: 20upx;
    float: left;
    position: relative;
}
.activity_nav .activity_nav_img .img {
    width: 100%;
    height: 100%;
    border-top-left-radius: 20upx;
    border-bottom-left-radius: 20upx;
}
.activity_nav .activity_nav_img .activity_icon {
    position: absolute;
    width: 94upx;
    height: 42upx;
    left: 20upx;
    top: -20upx;
    z-index: 10;
}
.activity_nav .activity_nav_content {
    width: calc(100% - 338upx);
    margin-left: 20upx;
    float: left;
    padding-right: 16upx;
}
.activity_nav .activity_nav_title {
    font-size: 30upx;
    color: #3c3d3b;
    margin-top: 10upx;
    line-height: 40upx;
    position: relative;
}
.activity_nav .activity_nav_title_1{
    width: 80%;
}
.activity_nav .collect_img {
    position: absolute;
    width: 40upx;
    height: 39upx;
    z-index: 1003;
    right: -16upx;
    top: -5upx;
    padding-top: 10upx;
    padding-right: 16upx;
}
.activity_nav .activity_nav_subtitle {
    color: #767676;
    font-size: 24upx;
    margin-top: 8upx;
    margin-bottom: 8upx;
}
.activity_nav .activity_nav_time {
    color: #767676;
    font-size: 24upx;
}
.activity_nav .activity_nav_label {
    margin-top: 8upx;
}
.activity_nav .activity_nav_label_txt {
    padding: 0 10upx;
    height: 34upx;
    line-height: 34upx;
    text-align: center;
    font-size: 24upx;
    color: #fff;
    margin-right: 20upx;
}
.activity_nav .activity_nav_label_txt.label1 {
    background: #f27491;
    margin-right: 20upx;
}
.activity_nav .activity_nav_label_txt.label2 {
    background: #eaa24e;
}
.activity_nav .activity_nav_label_txt:last-child{
    margin-right: 0;
}
/*场馆列表*/
.changguan_list {
    width: 100%;
    overflow: hidden;
    padding-top: 0;
}
.changguan_nav {
    margin: 0 30upx 50upx 30upx;
    position: relative;
    z-index: 10;
}
.changguan_nav .changguan_inner {
    width: 100%;
    overflow: hidden;
    border-radius: 20upx;
    box-shadow: 0px 5upx 15upx 0px rgba(0, 0, 0, 0.15);
    height: 183upx;
}
.changguan_nav .collect_img {
    position: absolute;
    width: 40upx;
    height: 39upx;
    z-index: 1003;
    right: 0;
    top: 0;
    padding-top: 20upx;
    padding-right: 24upx;
}
.changguan_nav .changguan_time {
    font-size: 24upx;
    color: #999;
    padding-top: 30upx;
    padding-bottom: 14upx;
    border-bottom: 1upx solid #f4f2f2;
}
.changguan_nav .changguan_time .icon {
    width: 29upx;
    height: 30upx;
    margin-right: 10upx;
}
.changguan_nav:first-child {
    margin-top: 50upx;
}
.changguan_nav .changguan_nav_img {
    width: 302upx;
    height: 100%;
    border-top-left-radius: 20upx;
    border-bottom-left-radius: 20upx;
    float: left;
    position: relative;
}
.changguan_nav .changguan_nav_img .img {
    width: 100%;
    height: 100%;
    border-top-left-radius: 20upx;
    border-bottom-left-radius: 20upx;
}
.changguan_nav .changguan_nav_content {
    width: calc(100% - 338upx);
    margin-left: 20upx;
    float: left;
    padding-right: 16upx;
}
.changguan_nav .changguan_nav_title {
    font-size: 30upx;
    color: #3c3d3b;
    margin-top: 18upx;
    line-height: 40upx;
    width: 82%;
}
.changguan_nav .changguan_nav_subtitle {
    color: #767676;
    font-size: 24upx;
    margin-top: 18upx;
    margin-bottom: 18upx;
}
.changguan_nav .changguan_nav_label {
}
.changguan_nav .changguan_nav_label_txt {
    width: calc((100% - 40upx) / 3);
    height: 34upx;
    line-height: 34upx;
    text-align: center;
    font-size: 24upx;
    color: #fff;
}
.changguan_nav .changguan_nav_label_txt.label1 {
    background: #fdf6e5;
    color: #f4bd67;
    margin-right: 20upx;
}
.changguan_nav .changguan_nav_label_txt.label2 {
    background: #f2fcfe;
    color: #80a9f4;
    margin-right: 20upx;
}
.changguan_nav .changguan_nav_label_txt.label3 {
    background: #f3f5f8;
    color: #9f9d9d;
}
</style>
