<template>
    <view class="body">
        <mescroll-uni class="mescroll-uni" ref="mescrollRef" @down="downCallback" @up="getData" @init="mescrollInit" :up="upOption" :down="downOption">
            <view class="list">
                <view class="fd2_box" v-for="(item, index) in items" :key="index">
                    <view class="fd2_inner d_flex j_between">
                        <view class="left d_flex j_center"><image class="checked" src="/static/checked2.png" mode="widthFix"></image></view>
                        <view class="right">
                            
                            <view class="fd2_title" v-text="item.title"></view>
                            <view class="fd2_subtitle d_flex a_center">
                                <view class="icon_con"><image class="icon icon1" src="/static/news_icon1.png"></image></view>
                                <view class="txt txt1">活动名称:{{ item.Title }}</view>
                            </view>
                            <view class="fd2_subtitle">
                                <view class="icon_con"><image class="icon icon2" src="/static/news_icon2.png"></image></view>
                                <view class="txt" v-text="item.stime + ' - ' + item.etime"></view>
                            </view>
                            <view class="fd2_subtitle">
                                <view class="icon_con"><image class="icon icon3" src="/static/news_icon3.png"></image></view>
                                <view class="txt">负责人：{{ item.LinkUrl }}</view>
                            </view>
                            <view class="fd2_subtitle">
                                <view class="icon_con"><image class="icon icon4" src="/static/news_icon4.png"></image></view>
                                <view class="txt">活动地址：{{ item.MContent }}</view>
                            </view>
                            <view class="fd2_subtitle">
                                <view class="icon_con"><image class="icon icon5" src="/static/news_icon5.png"></image></view>
                                <view class="txt">活动介绍：{{ item.Content }}</view>
                            </view>
                            <view class="fd2_subtitle" v-if="item.isqd==1" style="color:#f33030">
                                <view class="icon_con">
                                    <image class="icon icon6" src="/static/news_icon6.png"></image>
                                </view>
                                <view class="txt">已签到，签到时间：{{ item.qdtime }}</view>
                            </view>
                            <navigator open-type="switchTab" hover-class="none" url="/pages/tab/my/index" class="fd2_subtitle" style="color:#ffb155" v-else>
                                <view class="icon_con">
                                    <image class="icon icon6" src="/static/news_icon7.png"></image>
                                </view>
                                <view class="txt">暂未签到，快去签到吧</view>
                            </navigator>
                            <!-- <view class="sign_in" v-if="item.isqd==0" @click="showClick(index)">签到</view> -->
                        </view>
                    </view>
                </view>
            </view>
            <!-- <view class="alert_con" v-if="isAlert">
                <view class="alert_content">
                    <image class="qr_img" :src="qrImg"></image>
                </view>
                <image @click="closeClick" class="close_icon" src="/static/close_icon.png"></image>
            </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 //是否自动加载
            },
            items: [],
            id: '',
            isAlert:false,
            itemIndex:0,
            qrImg:""
        };
    },
    onLoad(options) {
        this.id = options.id;
        this.getQr();
    },
    onReady() {},
    onShow() {},
    computed: {},
    methods: {
        showClick(index){
            this.itemIndex = index;
            this.isAlert = true;
        },
        closeClick(){
            this.isAlert = false;
        },
        getQr(){
            let that = this;
            that.$doPost('Server.aspx', {
                mod: 'getQR'
            })
            .then(res => {
                if (res.data.resultcode != 0) {
                    that.$util.showToast(res.data.msg);
                    return;
                }
                let body = res.data.data;
                that.qrImg = body;
            })
            .catch(err => {
                console.log('request fail', err);
            });
        },
        getData(mescroll) {
            let that = this;
            that.$doPost('Server.aspx', {
                mod: 'getHDhistory',
                page: mescroll.num,
                pagesize: mescroll.size,
                hdid:that.id
            })
            .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.stime = that.$util.strDateFormat(item.stime,"yyyy.MM.dd hh:mm");
                    item.etime = that.$util.strDateFormat(item.etime,"yyyy.MM.dd hh:mm");
                    if(item.qdtime){
                        item.qdtime = that.$util.strDateFormat(item.qdtime,"yyyy-MM-dd hh:mm");
                    }
                });
                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);
            });
        },
        mescrollInit(mescroll) {
            this.mescroll = mescroll;
        },
        downCallback(mescroll) {
            this.isAlert = false;
            this.mescroll.resetUpScroll();
        }
    }
};
</script>

<style lang="scss">
page,
.body {
    background: #ffffff;
}
.fd2_box {
    margin: 0 30upx;
    border-bottom: 1upx solid #e6e3e3;
}
.fd2_box:last-child {
    border-bottom: none;
}
.checked {
    width: 24upx;
    height: 24upx;
}
.fd2_box .fd2_inner {
    padding-bottom: 30upx;
    padding-top: 30upx;
    position: relative;
}
.fd2_box .fd2_inner::after {
    background: #ffb155;
    width: 6upx;
    height: calc(100% - 106upx);
    position: absolute;
    left: 23upx;
    top: 74upx;
    z-index: 10;
    content: '';
    border-radius: 10upx;
}
.fd2_inner .left {
    width: 50upx;
}
.fd2_inner .fd2_title {
    color: #313131;
    font-size: 28upx;
    line-height: 32upx;
    width: 85%;
}
.fd2_inner .fd2_subtitle {
    color: #95979d;
    font-size: 24upx;
    line-height: 32upx;
    padding-top: 14upx;
    overflow: hidden;
}
.fd2_inner .right {
    width: calc(100% - 50upx);
    position: relative;
}
.fd2_inner .fd2_subtitle .txt{
    width: calc(100% - 40upx);
    float: left;
}
.fd2_inner .fd2_subtitle .txt1{
    width: 80%;
}
.fd2_inner .fd2_subtitle .icon_con{
    width: 40upx;
    float: left;
}
.fd2_inner .sign_in{
    position: absolute;
    width: 112upx;
    height: 62upx;
    border:1upx solid #ffb155;
    border-radius:10upx;
    color:#ffb155;
    text-align: center;
    line-height: 62upx;
    box-sizing: border-box;
    right: 0;
    top: 0;
    z-index: 10;
}
.icon1 {
    width: 27upx;
    height: 27upx;
}
.icon2 {
    width: 25upx;
    height: 26upx;
    margin-top: 5upx;
}
.icon3 {
    width: 24upx;
    height: 26upx; 
    margin-top: 4upx;
}
.icon4 {
    width: 22upx;
    height: 29upx; 
}
.icon5 {
    width: 24upx;
    height: 26upx; 
    margin-top: 4upx;
}
.icon6 {
    width: 28upx;
    height: 27upx;
    margin-top: 4upx;
}
.alert_con{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1002;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
}
.alert_con .alert_content{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.alert_con .alert_content .qr_img{
    width: 320upx;
    height: 320upx;
    border:10upx solid #fff;
    box-sizing: border-box;
}
.alert_con .close_icon{
    width: 26upx;
    height: 27upx;
    padding:20upx;
    border-radius: 50%;
    background: rgba(255,255,255,1);
    position: absolute;
    right: 50upx;
    top: 50upx;
    z-index: 1003;
}
</style>
