<template>
    <view class="body">
        <mescroll-uni ref="mescrollRef" @down="downCallback" @up="getData" @init="mescrollInit" :up="upOption" :down="downOption">
            <view class="body_content">
                <view class="swiper_con">
                    <swiper
                        :current="swiperIndex"
                        @change="swiperChange"
                        class="swiper"
                        :indicator-dots="indicatorDots"
                        :autoplay="autoplay"
                        :interval="interval"
                        :duration="duration"
                    >
                        <swiper-item v-for="(item, index) in detail.ImgList" :key="index"><image class="swiper_img" :src="item" mode="widthFix"></image></swiper-item>
                    </swiper>
                    <view class="swiper_page d_flex j_center a_center">
                        <view class="swiper_page_txt" v-text="swiperIndex + 1"></view>
                        <view class="swiper_page_line">/</view>
                        <view class="swiper_page_txt" v-text="detail.ImgList.length"></view>
                    </view>
                </view>
                <view class="detail_con">
                    <view class="detail_box">
                        <view class="detail_box_1 d_flex j_between">
                            <view class="left">
                                <view class="detail_title font_bold" v-text="detail.Title">百人体育馆</view>
                                <view class="detail_subtitle" v-text="detail.Author">常熟市社区活动</view>
                            </view>
                            <view class="right d_flex j_center">
                                <view class="detail_box_nav" @click="collectClick">
                                    <image v-if="isCollect==0" class="detail_box_icon icon1" src="/static/collect1.png" mode="heightFix"></image>
                                    <image v-else class="detail_box_icon icon1" src="/static/collect2.png" mode="heightFix"></image>
                                    <view class="txt">收藏</view>
                                </view>
                                <button hover-class="none" open-type="share" class="detail_box_nav">
                                    <image class="detail_box_icon icon2" src="/static/share_icon.png" mode="heightFix"></image>
                                    <view class="txt">分享</view>
                                </button>
                            </view>
                        </view>
                        <view class="detail_box_2 d_flex a_center" @click="callPhone(detail.Summary)">
                            <image class="phone_icon" src="/static/phone.png"></image>
                            <view class="phone_txt">负责人电话</view>
                            <view class="phone_num" v-text="detail.Summary"></view>
                        </view>
                        <view class="detail_box_2" v-text="detail.MContent"></view>
                    </view>
                    <view class="cgd_box cgd1_box">
                        <view class="i1_head">
                            <view class="i1_head_left">场馆介绍</view>
                            <view class="i1_head_right"></view>
                        </view>
                        <view class="cgd1_content" v-html="detail.Content">
                            <view class="cgd1_txt1">
                                百人体育馆（ Sports
                                Centre）位于浙江省杭州市余杭区，可进行足球、篮球等多种比赛，是现中甲球队浙江绿城队的主场，也是FIFA2007年中国女足世界杯的比赛场地之一。
                            </view>
                            <image class="img" src="/static/changguan_detail1.png" mode="widthFix"></image>
                            <view class="cgd1_txt2">干净卫生,基础设施完善</view>
                            <view class="cgd1_txt3">地理位置优越，四周环境独特，景色宜人，交通便利，生活方便，是福州迄今为止保留最完整的一座古典园林...</view>
                        </view>
                    </view>
                    <view class="cgd_box cgd2_box">
                        <view @click="goUrl" :data-url="'/pages/changguan/comment/index?id=' + id" class="i1_head d_flex j_between a_center">
                            <view class="i1_head_left">网友评论</view>
                            <view class="i1_head_right d_flex a_center">
                                <view class="txt">发表评论</view>
                                <image class="more_arrow" src="/static/more_arrow2.png"></image>
                            </view>
                        </view>
                        <view class="comment_list">
                            <view class="comment_nav" v-for="(item, index) in comments" :key="index">
                                <view class="left"><image class="header" :src="item.userimg"></image></view>
                                <view class="right">
                                    <view class="comment_nav_name" v-text="item.username"></view>
                                    <view class="comment_nav_time" v-text="item.CreateDate"></view>
                                    <view class="comment_nav_content" v-text="item.Content"></view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </mescroll-uni>
        <view v-if="detail.note3==1" @click="goUrl" :data-url="'/pages/changguan/reservation/index?id=' + id" class="content_btn_con">
            <view class="main_content_btn">去预约</view>
        </view>
        <view v-else class="content_btn_con">
            <view class="main_content_btn gray_content_btn">无预约时间</view>
        </view>
    </view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
    mixins: [MescrollMixin],
    components: {},
    data() {
        return {
            indicatorDots: false,
            autoplay: true,
            interval: 5000,
            duration: 1000,
            mescroll: null,
            downOption: {
                use: false, //是否启用下拉刷新
                auto: false //是否自动加载
            },
            upOption: {
                use: true, //是否启用上拉加载更多
                auto: false //是否自动加载
            },
            swiperIndex: 0,
            banners: [],
            id: '',
            detail: {},
            comments: [],
            isCollect: 0 ,// 判断收藏
            isLogin: false,
        };
    },
    onLoad(options) {
        let that = this;
        that.id = options.id;
    },
    onReady() {},
    onShow() {
        if(this.$util.isLogin()){
            this.isLogin = true;
            this.getCollect();
        }else{
            this.isLogin = false;
        }
        this.getDetail();
    },
    methods: {
        goUrl(e){
            let toUrls = e.currentTarget.dataset.url;
            if(!this.isLogin){
                this.goLogin();
                return;
            }
            uni.navigateTo({
                url: toUrls
            });
        },
        goLogin(){
            let url = '/pages/changguan/detail/index?id=' + this.id;
            url = encodeURIComponent(url);
            uni.navigateTo({
                url: '/pages/login/index?url=' + url
            });
        },
        callPhone(phone) {
            this.$util.callPhone(phone);
        },
        collectClick(e) {
            let that = this;
            if(!that.isLogin){
                that.goLogin();
                return;
            }
            that.$doPost('Server.aspx', {
                mod: 'addSC',
                scid: that.id,
                type: 1
            })
            .then(res => {
                if (res.data.resultcode != 0) {
                    that.$util.showToast(res.data.msg);
                    return;
                }
                if (that.isCollect == 0) {
                    that.isCollect = 1;
                } else {
                    that.isCollect = 0;
                }
                that.$util.showToast('操作成功');
            })
            .catch(err => {
                console.log('request fail', err);
            });
        },
        swiperChange(e) {
            this.swiperIndex = e.detail.current;
        },
        getCollect() {
            let that = this;
            that.$doPost('Server.aspx', {
                mod: 'isSC',
                scid: that.id,
                type: 1
            })
            .then(res => {
                if (res.data.resultcode != 0) {
                    that.$util.showToast(res.data.msg);
                    return;
                }
                let body = res.data.data;
                that.isCollect = body.id && body.id!=0 ? 1 : 0;
            })
            .catch(err => {
                console.log('request fail', err);
            });
        },
        getDetail() {
            let that = this;
            that.$doPost('Server.aspx', {
                mod:'getCSinfo',
                cgid:that.id
            })
            .then(res => {
                if (res.data.resultcode != 0) {
                    that.$util.showToast(res.data.msg);
                    return;
                }
                let body = res.data.data;
                body.ImgList = body.ImgList.split('|');
                body.ImgUrl = that.baseImgUrl + body.ImgUrl;
                for (let i = 0; i < body.ImgList.length; i++) {
                    body.ImgList[i] = that.baseImgUrl + body.ImgList[i];
                }
                that.detail = body;
                that.$nextTick(function(){
                    that.mescroll.resetUpScroll();
                })
            })
            .catch(err => {
                console.log('request fail', err);
            });
        },
        mescrollInit(mescroll) {
            this.mescroll = mescroll;
        },
        downCallback(mescroll) {
            this.getData();
        },
        getData(mescroll) {
            let that = this;
            that.$doPost('Server.aspx', {
                mod: 'getPL',
                myuserid: 0,
                cgid: that.id,
                page: that.mescroll.num,
                pagesize: that.mescroll.size
            })
            .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.CreateDate = that.$util.strDateFormat(item.CreateDate, 'yyyy-MM-dd');
                });
                if (that.mescroll.num == 1) {
                    that.comments = body;
                } else {
                    that.comments = that.comments.concat(body);
                }
                that.mescroll.endSuccess(body.length);
            })
            .catch(err => {
                that.$util.showToast('网络错误，稍后重试');
                that.mescroll.endErr();
                console.log('request fail', err);
            });
        }
    },
    onShareTimeline(res) {
        let that = this;
        let detail = this.detail;
        return {
            title: detail.Title,
            imageUrl: detail.ImgUrl,
            query: 'pages/changguan/detail/index?id=' + that.id
        };
    },
    onShareAppMessage(res) {
        let that = this;
        let detail = this.detail;
        return {
            title: detail.Title,
            imageUrl: detail.ImgUrl,
            path: 'pages/changguan/detail/index?id=' + that.id
        };
    }
};
</script>

<style lang="scss">
page,
.body {
    background: #fff;
}
.mescroll-uni-fixed {
    height: calc(100% - 148upx) !important;
}
/*标题*/
.i1_head {
    padding: 30upx 0 0 0;
    overflow: hidden;
    background: #fff;
}
.i1_head .i1_head_left {
    color: #000000;
    font-size: 36upx;
    padding-left: 14upx;
    position: relative;
}
.i1_head .i1_head_left::after {
    width: 8upx;
    height: 26upx;
    background: #ffb155;
    border-radius: 10upx;
    content: '';
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}
.i1_head .i1_head_right {
    font-size: 24upx;
    color: #888a87;
}
.i1_head .more_arrow {
    width: 12upx;
    height: 19upx;
    margin-left: 8upx;
}
/*广告*/
.swiper,
.swiper_img,
.swiper_con {
    width: 100%;
    height: 430upx;
    position: relative;
}
.swiper_page {
    width: 76upx;
    height: 30upx;
    border-radius: 20upx;
    background: rgba(0, 0, 0, 0.6);
    text-align: center;
    color: #fff;
    font-size: 20upx;
    position: absolute;
    right: 30upx;
    bottom: 50upx;
    z-index: 1000;
}
.swiper_page .swiper_page_line {
    margin: 0 5upx;
}
/*详情*/
.detail_con {
    background: #fff;
}
.detail_con .detail_box {
    border-radius: 20upx;
    box-shadow: 0px 0px 15upx 0px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1010;
    top: -20upx;
    background: #fff;
    padding: 0 30upx;
}
.detail_box_1 {
    width: 100%;
    border-bottom: 1upx solid #edeaea;
    padding: 46upx 0;
}
.detail_box_1 .detail_box_nav {
    background: transparent;
    line-height: 24upx;
}
.detail_box_1 .detail_box_nav:first-child {
    margin-right: 26upx;
}
.detail_box_1 .left {
    width: 72%;
}
.detail_box_1 .right {
    width: 28%;
    position: relative;
}
.detail_box_1 .right::after {
    content: '';
    left: 0;
    width: 1upx;
    background: #edeaea;
    height: 80upx;
    top: 0;
    position: absolute;
}
.detail_box_1 .detail_box_icon {
    height: 39upx;
}
.detail_box_1 .detail_box_icon.icon1 {
    width: 40upx;
}
.detail_box_1 .detail_box_icon.icon2 {
    width: 42upx;
}
.detail_box_1 .txt {
    font-size: 20upx;
    text-align: center;
    margin-top: 10upx;
    color: #767676;
}
.detail_box_1 .detail_title {
    font-size: 36upx;
    line-height: 40upx;
    color: #000000;
    padding-bottom: 20upx;
    padding-right: 26upx;
}
.detail_box_1 .detail_subtitle {
    font-size: 24upx;
    line-height: 30upx;
    color: #767676;
}
.detail_box_2 {
    width: 100%;
    border-bottom: 1upx solid #edeaea;
    padding: 30upx 0;
    color: #6a6a6a;
    font-size: 28upx;
}
.detail_box_2:last-child {
    border-bottom: none;
}
.detail_box_2 .phone_icon {
    width: 29upx;
    height: 29upx;
    margin-right: 10upx;
}
.detail_box_2 .phone_txt {
    font-size: 30upx;
    color: #000000;
}
.detail_box_2 .phone_num {
    margin-left: 16upx;
    padding-left: 16upx;
    border-left: 1upx solid #edeaea;
}
.cgd_box {
    margin: 0 30upx;
}
.cgd1_box .i1_head {
    padding-top: 20upx !important;
}
.cgd1_box .cgd1_content {
    font-size: 28upx;
    line-height: 38upx;
    color: #000;
    padding-top: 26upx;
    padding-bottom: 20upx;
}
.cgd1_box .img {
    width: 100%;
    margin: 20upx 0 10upx 0;
}
.cgd1_box .cgd1_txt1 {
    font-size: 30upx;
    color: #777777;
    line-height: 48upx;
}
.cgd1_box .cgd1_txt2 {
    font-size: 30upx;
    color: #000;
    line-height: 48upx;
    margin: 0 0 10upx 0;
}
.cgd1_box .cgd1_txt3 {
    font-size: 24upx;
    color: #777777;
    line-height: 38upx;
}
.cgd1_box image {
    display: block;
    margin: auto;
    max-width: 100%;
}
.cgd2_box .i1_head_right .txt {
    color: #a0bdf7;
    font-size: 30upx;
}
.cgd2_box .i1_head_right .more_arrow {
    width: 13upx;
    height: 21upx;
}
/*评论*/
.comment_list {
    width: 100%;
    overflow: hidden;
}
.comment_nav:first-child {
    padding-top: 26upx;
}
.comment_nav {
    border-bottom: 1upx solid #edeaea;
    padding-top: 56upx;
    padding-bottom: 30upx;
    overflow: hidden;
}
.comment_nav .left {
    width: 100upx;
    height: 100upx;
    float: left;
}
.comment_nav .left .header {
    box-sizing: border-box;
    border: 6upx solid #f5f5f5;
    border-radius: 50%;
    width: 100%;
    height: 100%;
}
.comment_nav .right {
    float: left;
    width: calc(100% - 120upx);
    margin-left: 20upx;
}
.comment_nav .comment_nav_content {
    margin-bottom: 28upx;
    margin-top: 40upx;
    overflow: hidden;
    font-size: 30upx;
    color: #393a38;
}
.comment_nav .comment_nav_name {
    font-size: 24upx;
    padding-top: 10upx;
    padding-bottom: 20upx;
}
.comment_nav .comment_nav_time {
    font-size: 20upx;
    color: #767676;
}
.gray_content_btn {
    background: #bbb8b8;
}
.content_btn_con {
    padding: 30upx;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1002;
    width: calc(100% - 60upx);
    background: #fff;
}
</style>
