<template>
    <view class="body">
        <mescroll-uni ref="mescrollRef" @down="downCallback" @up="getData" :up="upOption" :down="downOption">
            <view class="body_content">
                <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 v-show="tabIndex==1" class="tab_con3 d_flex j_space_around a_center">
                    <view
                        v-for="(item, index) in tabs3"
                        :key="index"
                        v-text="item.title"
                        class="tab_nav"
                        :class="tabIndex3 == index ? 'on' : ''"
                        @click="tabClick3(index)"
                    ></view>
                </view>
                <view class="changguan_list" :class="tabIndex==0?'changguan_list1':'changguan_list2'">
                    <navigator hover-class="none" :url="'/pages/changguan/detail/index?id=' + item.cgid" class="changguan_nav" v-for="(item, index) in items" :key="index">
                        <view 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 two_hidden" v-text="item.cgname"></view>
                                <view class="changguan_nav_subtitle text_hidden" v-text="item.Author"></view>
                                <view class="changguan_nav_label d_flex">
                                    <view v-for="(item2,index2) in item.Source" :key="index2" class="changguan_nav_label_txt" :class="[index2==0?'label1':'',index2==1?'label2':'',index2==2?'label3':'']" v-text="item2"></view>
                                </view>
                            </view>
                        </view>
                        <view class="changguan_time d_flex a_center">
                            <image class="icon" src="/static/time_icon.png"></image>
                            <view class="">预约时间：<text v-text="item.startDate + ' - ' + item.endDate"></text></view>
                        </view>
                    </navigator>
                </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: 0,
            tabs: [
                {
                    title: '个人'
                },
                {
                    title: '团队'
                }
            ],
            tabIndex3: 0,
            tabs3: [
                {
                    title: '审核中'
                },
                {
                    title: '已通过'
                },
                {
                    title: '未通过'
                }
            ],
            items: []
        };
    },
    onLoad(options) {
        let that = this;
        that.tabIndex = options.tabIndex || 0;
        that.tabIndex3 = options.tabIndex3 || 0;
    },
    onReady() {},
    onShow() {},
    methods: {
        tabClick(e) {
            this.tabIndex = e;
            this.mescroll.resetUpScroll();
        },
        tabClick3(e) {
            this.tabIndex3 = e;
            this.mescroll.resetUpScroll();
        },
        getData(mescroll) {
            let that = this;
            let mod = "getMyCG";
            let issh = "";
            if(that.tabIndex==1){
                mod = "getMyCGTeam";
                issh = that.tabIndex3;
            }else{
                mod = "getMyCG";
                issh = 1;
            }
            that.$doPost('Server.aspx', {
                mod: mod,
                page: mescroll.num,
                pagesize: mescroll.size,
                issh:issh
            })
            .then(res => {
                if (res.data.resultcode != 0) {
                    that.$util.showToast(res.data.msg);
                    return;
                }
                let body = res.data.data;
                body.filter(function(item,index){
                    item.imgurl = that.baseImgUrl + item.imgurl;
                    item.startDate = that.$util.strDateFormat(item.startDate,"yyyy.MM.dd hh:mm");
                    item.endDate = that.$util.strDateFormat(item.endDate,"hh:mm");
                    if(item.Source){
                        item.Source = item.Source.split("|");
                    }
                })
                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;
}
.tab_con3{
    padding: 30upx 30upx 10upx 30upx;
    position: fixed;
    width: calc(100% - 60upx);
    left: 0;
    top: 70upx;
    z-index: 1000;
    background: #fff;
}
.tab_con3 .tab_nav {
    border: 1upx solid #e5e5e5;
    border-radius: 10upx;
    padding:0 30upx;
    height: 50upx;
    line-height: 50upx;
    text-align: center;
    font-size: 28upx;
    color:#999;
}
.tab_con3 .tab_nav.on{
    border: 1upx solid #ffb155;
    background:#ffb155;
    color:#fff;
}
/*场馆列表*/

.changguan_list {
    width: 100%;
    overflow: hidden;
}
.changguan_list1 {
    padding-top: 70upx;
}
.changguan_list2 {
    padding-top: 160upx;
}
.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 .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;
}
.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>
