<template>
    <view class="body">
        <mescroll-uni ref="mescrollRef" @down="downCallback" @up="getData" @init="mescrollInit" :up="upOption" :down="downOption">
            <view class="search_con d_flex a_center">
                <view class="search_box d_flex">
                    <picker @change="bindPickerChange" :value="genderIndex" :range="arrays" range-key="title" class="filter_con">
                        <view class="filter_box d_flex j_center a_center">
                            <view class="filter_txt">{{ arrays[genderIndex].title }}</view>
                            <view class="triangle_bottom"></view>
                        </view>
                    </picker>
                    <view class="search_icon_box"><image class="search_icon" src="/static/search_icon2.png" mode="widthFix"></image></view>
                    <input placeholder-style="color:#d5cdcd" type="search" class="search_input" v-model="keys" placeholder="请输入名称" />
                </view>
                <view class="search_right d_flex j_end a_center" @click="searchClick">搜索</view>
            </view>
            <view class="history_list">
                <view class="history_list_title d_flex j_between a_center" v-if="keysVal">
                    <view class="left">搜索 “<text v-text="keysVal"></text>”</view>
                </view>
                <view class="activity_list" v-if="genderIndex==0">
                    <navigator hover-class="none" :url="'/pages/activity/detail/index?id=' + item.id" class="activity_nav" v-for="(item, index) in items" :key="index">
                        <view 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>
                        </view>
                        <view class="activity_nav_content">
                            <view class="activity_nav_title two_hidden" v-html="item.Title"></view>
                            <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.dyw.length>0">
                                <view class="activity_nav_label_txt label2" v-for="(item2,index2) in item.dyw" :key="index2" v-text="item2" v-if="index2<3"></view>
                            </view>
                        </view>
                    </navigator>
                </view>
                <view class="changguan_list" v-else>
                    <navigator hover-class="none" :url="'/pages/changguan/detail/index?id=' + item.BsId" class="changguan_nav" v-for="(item, index) in items" :key="index">
                        <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-html="item.Title"></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>
                    </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: false //是否自动加载
            },
            keys: '',
            keysVal:"",
            arrays: [
                {
                    title: '活动',
                    value: 0
                },
                {
                    title: '场馆',
                    value: 1
                }
            ],
            genderIndex: 0,
            items: []
        };
    },
    onLoad(options) {},
    onReady() {},
    onShow() {},
    methods: {
        bindPickerChange(e) {
            if(this.genderIndex==e.detail.value){
                return;
            }
            this.genderIndex = e.detail.value;
            this.items = [];
            this.keysVal = "";
            this.keys = "";
        },
        searchClick(){
            if(!this.keys){
                this.$util.showToast('请输入搜索名称');
                return;
            }
            this.keysVal = this.keys;
            this.mescroll.resetUpScroll();
        },
        getData(mescroll) {
            let that = this;
            let keys = that.keys;
            let data = {
                page:that.mescroll.num,
                pagesize:that.mescroll.size,
                key:keys
            };
            if(that.genderIndex==0){
                data.mod = 'getHDlist';
                data.dbtype = 0;
            }else{
                data.mod = 'getCSlist';
            }
            that.$doPost('Server.aspx', data)
            .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.genderIndex==0){
                        item.imgurl = that.baseImgUrl + item.imgurl;
                        if(!item.dyw){
                            item.dyw = [];
                        }else{
                            item.dyw = item.dyw.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");
                        item.Title = item.Title.replace(new RegExp(keys, 'gm'), '<span class="color_blue">' + keys + '</span>');
                    }else{
                        item.ImgUrl = that.baseImgUrl + item.ImgUrl;
                        if(item.Source){
                            item.Source = item.Source.split("|");
                        }
                        item.Title = item.Title.replace(new RegExp(keys, 'gm'), '<span class="color_blue">' + keys + '</span>');
                    }
                });
                if (that.mescroll.num == 1) {
                    that.items = body;
                } else {
                    that.items = that.items.concat(body);
                }
                that.mescroll.endSuccess(body.length);
            })
            .catch(err => {
                that.$util.showToast('网络错误，稍后重试');
                that.mescroll.endErr();
                console.log('request fail', err);
            });
        },
        mescrollInit(mescroll) {
            this.mescroll = mescroll;
        },
        downCallback(mescroll) {
            
        }
    }
};
</script>

<style lang="scss">
page,
.body {
    background: #fff;
}
.search_con {
    overflow: hidden;
    margin: 20upx 30upx 30upx 30upx;
}
.search_con .search_box {
    height: 60upx;
    background: #f7f5f5;
    border-radius: 60upx;
    width: 90%;
}
.filter_con {
    width: 140upx;
    height: 60upx;
}
.filter_box {
    width: 100%;
    height: 60upx;
    font-size: 28upx;
}
.filter_box .filter_txt {
    margin-right: 10upx;
}
.triangle_bottom {
    border-top: 8upx solid #000;
    border-left: 6upx solid transparent;
    border-right: 6upx solid transparent;
}
.search_con .search_icon_box {
    width: 30upx;
}
.search_con .search_icon {
    width: 28upx;
    height: 28upx;
    float: right;
    margin-top: 18upx;
}
.search_con .share_icon {
    width: 28upx;
    height: 28upx;
    margin: auto;
}
.search_con .search_input {
    color: #001419;
    width: calc(100% - 180px);
    height: 60upx;
    line-height: 60upx;
    font-size: 28upx;
    padding-left: 20upx;
    padding-right: 20upx;
}
.search_con .search_right {
    font-size: 24upx;
    text-align: center;
    color: #121111;
    width: 10%;
    font-size: 30upx;
}
.history_list .history_list_title {
    color: #001419;
    font-size: 30upx;
    line-height: 30upx;
    margin: 0 30upx;
}

/*场馆列表*/
.changguan_list {
    width: 100%;
    overflow: hidden;
}
.changguan_nav {
    border-radius: 20upx;
    box-shadow: 0px 5upx 15upx 0px rgba(0, 0, 0, 0.15);
    height: 183upx;
    margin: 0 30upx 50upx 30upx;
    position: relative;
    z-index: 10;
}
.changguan_nav:first-child {
    margin-top: 30upx;
}
.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;
}

/*活动列表*/
.activity_list {
    width: 100%;
    overflow: hidden;
}
.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;
}
.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;
}
</style>
