<template>
    <view>
        <!-- 卡券详情 -->
        <view class="details">
        	<view class="detailsTop">
        		<view class="detailsTop-name">
        			{{ details.name }}
        		</view>
        		<view class="detailsTop-time">
        			有效期： {{ details.startTime }} - {{ details.endTime }}
        		</view>
        	</view>
        	<view class="detailsCotent">
        	    <view class="source">活动来源 ： {{ details.activity_name }}</view>
        	    <view class="detailsBar">
        	    	<view class="detailsCode-text">劵码</view>
        	    	<image :src="barcode" mode="widthFix"></image>
        	    </view>
        	    <view class="detailsCode-text">
        	    	{{ details.code }}
        	    </view>
        	    <view class="detailsCode">
        	    	<image :src="qrcode"></image>
        	    	<view class="detailsCode-text">
        	    		<text>请出示以上券码给网点工作人员</text>
        	    	</view>
        	    </view>
                
                <!-- 门店定位 -->
                <view class="detailsStore">
                	<view class="detailsStore-top">
                		<view class="detailsStore-title">
                			适用门店
                		</view>
                		<navigator class="detailsStore-row" hover-class="none" :url="'/pages/store/index?id=' + details.id + '&type=campus'" v-if="longitude != 0 && latitude != 0">
                			查看所有
                			<image src="/static/icon/arrow_left.png"></image>
                		</navigator>
                	</view>
                	<view class="location" v-if="longitude == 0 && latitude == 0">
                		<image class="location-img" src="/static/img/location_img.jpg"></image>
                		<text>您尚未授权本时生活开启定位服务</text>
                		<text>不能看到附近的商家哦，点击下方按钮开启</text>
                		<button class="location-btn" size="mini" open-type="openSetting">
                			开启定位服务
                		</button>
                	</view>
                	<view v-else>
                		<block v-if="stores.length > 0">
                			<view class="detailsStore-list" :data-id="(item.store_id)" v-for="(item, index) in stores" :key="index"
                				@tap="detailsTap">
                				<image :src="item.cover" class="detailsStore-logo"></image>
                				<view class="detailsStore-cont">
                					<view class="detailsStore-left">
                						<view class="nowrap detailsStore-name">
                							{{ item.title }}
                						</view>
                						<view class="detailsStore-place">
                							<text class="nowrap">{{ item.address }}</text>
                							{{ item.km }}
                						</view>
                					</view>
                					<image class="detailsStore-tel" src="/static/icon/tel.png" @tap.stop="tel"
                						:data-tel="(item.mobile)"></image>
                				</view>
                			</view>
                		</block>
                		<block v-else>
                			<view class="pages-hint">
                				<image src="/static/img/null_icon.png"></image>
                				<view>暂无门店</view>
                			</view>
                		</block>
                	</view>
                </view>
        	</view>
            <!-- 使用须知 -->
            <view class="detailsText">
            	<view class="detailsText-title">
            		使用须知
            	</view>
            	<view class="detailsText-tips">
            		<rich-text :nodes="remark"></rich-text>
            	</view>
            </view>
            
            <!-- 内容介绍 -->
            <view class="detailsText">
            	<view class="detailsText-title">
            		内容介绍
            	</view>
            	<view class="detailsText-tips" v-if="content != null">
            		<rich-text :nodes="content"></rich-text>
            	</view>
            </view>
        </view>
        
        <!-- 底部 -->
        <view class="detailsBottom">
            <image src="/static/img/campus_details_back.png" mode="aspectFill"></image>
            <view class="detailsBottom-cont">
                <view class="detailsBottom-title">
                    抽奖活动
                </view>
                亿时代 - 本时生活
            </view>
        </view>
    </view>
</template>

<script>
    import { qrcode, barcode, couponinfo, merchantCard } from '@/apis/interfaces/campus'
    export default {
        data() {
            return {
                id          : 0,        //优惠券id
                longitude   : 0,        //经度
                latitude    : 0,        //纬度
                details     : '',       //优惠券信息
                stores      : [],       //商家列表
                content     : '',       //内容介绍
                remark      : '',       //使用须知
                qrcode      : '',       //二维码
                barcode     : '',       //条形码
                merchantcardinfo:''     //商家券信息
            }
        },
        
        // 生命周期函数--监听页面加载
        onLoad(options) {
            // 优惠券id
            this.id = options.id
    
            // 获取二维码
            qrcode(options.id).then(res=>{
                this.qrcode = res.qrcode
            })
            
            // 获取条形码
            barcode(options.id).then(res=>{
                this.barcode = res.barcode
            })
        },
        
        onShow () {
            // 存储环境-用户抽奖活动
            getApp().globalData.envType = 'drawEnv'
            
            // 查看定位信息
            this.getCity();
        },
        
        methods: {
            // 详情信息
            detailsInfo() {
                couponinfo({
                    coupon_id: this.id,
                    user_lng: this.longitude,
                    user_lat: this.latitude
                }).then(res=>{
                    console.log(res)
                    let stores = res.stores
                    stores.map(res=>{
                        let distance = res.distance
                        if(res.distance > 1000){
                            distance = (distance / 1000) + "km"
                        }else{
                            distance = distance + "m"
                        }
                        res.km = distance
                    })
                    this.details = res.info
                    this.stores  = stores
                    this.remark  = res.info.right.remark.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
                    this.content = res.info.right.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
                    //获取商家券信息
                    if(res.info.card_type=='merchant_card'){
                        this.getMerchantCardInfo()
                    }
                }).catch(err => {
                    if (!err.login) {
                        uni.showModal({
                            title: '用户登录已过期',
                            content: '请重新登录',
                            showCancel: false,
                            success: res => {
                                if (res.confirm) {
                                    uni.redirectTo({
                                        url: '/pages/unicom/signin'
                                    });
                                }
                            }
                        });
                    }
                })
            },
            
            // 商家券信息
            getMerchantCardInfo(){
                merchantCard(this.id).then(res=>{
                   this.merchantcardinfo  = res
                }).catch(err => {
                    if (!err.login) {
                        uni.showModal({
                            title: '用户登录已过期',
                            content: '请重新登录',
                            showCancel: false,
                            success: res => {
                                if (res.confirm) {
                                    uni.redirectTo({
                                        url: '/pages/unicom/signin'
                                    });
                                }
                            }
                        });
                    }
                })
            },
            
            // 拨打电话
            tel(e) {
                let tel = e.currentTarget.dataset.tel
                uni.showActionSheet({
                    itemList    : ['呼叫商家电话'],
                    success     : res =>{
                        if(res.tapIndex==0){
                            uni.makePhoneCall({
                                phoneNumber: tel
                            })
                        }
                    }
                })
            },
            
            // 查看门店详情页
            detailsTap(e) {
                let store_id     = e.currentTarget.dataset.id,
                    user_lng     = this.longitude,
                    user_lat     = this.latitude
                uni.navigateTo({
                    url: '/pages/store/details?store_id=' + store_id + '&user_lng=' +  user_lng  + '&user_lat=' + user_lat + '&type=campus'
                })
            },
            
            // 获取位置
            getCity(){
                uni.getLocation({
                    success: res => {
                        this.latitude   = res.latitude,
                        this.longitude  = res.longitude
                    },
                    complete: (err) => {
                        // 获取详情信息
                        this.detailsInfo();
                    }
                })
            }
        }
    }
</script>

<style>
    page {
        background-color: #e83241;
        padding: 20rpx;
        box-sizing: border-box;
    }
    
    /* 卡券详情 */
    .details {
        background: #ffffff;
        margin: 20rpx 20rpx 0;
        overflow: hidden;
        width: calc(100% - 40rpx);
        box-shadow: 0 0 20rpx rgba(0, 0,0, .1);
        position: relative;
        border-radius: 0 0 20rpx 20rpx;
        border-bottom: 240rpx solid transparent;
    }
    
    .details::after,
    .details::before {
        position: absolute;
        background: #e83241;
        content: '';
        top: -50rpx;
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
    }
    
    .details::after {
        left: -50rpx;
    }
    
    .details::before {
        right: -50rpx;
    }
    
    .detailsCotent {
        padding: 40rpx;
        box-sizing: border-box;
    }
    
    .detailsTop {
        border-bottom: 2rpx dashed #c8c8c8;
        padding: 40rpx 0;
        text-align: center;
        background-color: #f5f5f5;
    }
    
    .detailsTop-name {
        font-size: 38rpx;
        font-weight: 600;
        margin-bottom: 20rpx;
        padding: 0 60rpx;
        box-sizing: border-box;
    }
    
    .detailsTop-time {
        color: #7e7e7e;
        font-size: 26rpx;
    }
    
    .detailsCode {
        text-align: center;
        padding: 0 0 20rpx;
        margin: 40rpx 0 30rpx;
    }
    
    .detailsCode image {
        width: 300rpx;
        height: 300rpx;
        margin-bottom: 30rpx;
    }
    
    .detailsCode-text, .detailsStore-row {
        color: #949494;
        font-size: 28rpx;
    }
    
    .detailsCode-text {
        text-align: center;
        font-size: 32rpx;
        font-weight: 600;
        color: #000;
    }
    
    .detailsCode-text text {
        color: #999;
        font-weight: normal;
        font-size: 26rpx;
    }
    
    .detailsStore {
        border-top: 2rpx #c8c8c8 solid;
        padding-top: 40rpx;
    }
    
    .detailsStore-top, .detailsStore-row {
        display: flex;
        line-height: 30rpx;
        margin-bottom: 20rpx;
    }
    
    .detailsStore-title {
        flex: 1;
        font-weight: 600;
    }
    
    .detailsStore-row image  {
        width: 26rpx;
        height: 26rpx;
        margin: 3rpx 0 0 6rpx;
    }
    
    .detailsStore-list {
        position: relative;
        margin-bottom: 40rpx;
    }
    
    .detailsStore-list:last-child {
        margin-bottom: 0;
    }
    
    .detailsStore-logo {
        width: 100rpx;
        height: 100rpx;
        border-radius: 10rpx;
    }
    
    .detailsStore-cont {
        position: absolute;
        left: 130rpx;
        top: 0;
        width: calc(100% - 130rpx);
        display: flex;
    }
    
    .detailsStore-left {
        width: calc(100% - 90rpx);
        margin-right: 30rpx;
    }
    
    .detailsStore-tel {
        width: 60rpx;
        height: 60rpx;
        margin-top: 25rpx;
    }
    
    .detailsStore-place {
        font-size: 24rpx;
        line-height: 40rpx;
        color: #5a5a5a;
        display: flex;
    }
    
    .detailsStore-place text {
        flex: 1;
        display: inline-block;
        font-size: 28rpx;
        margin-right: 20rpx;
    }
    
    .detailsStore-name {
        margin-bottom: 20rpx;
    }
    
    .detailsText {
        padding: 30rpx 30rpx 0;
        box-sizing: border-box;
        border-top: 2rpx solid #ececec;
    }
    
    .detailsText-title {
        font-size: 32rpx;
        font-weight: 600;
        margin-bottom: 20rpx;
    }
    
    .detailsText-tips {
        font-size: 26rpx;
        line-height: 50rpx;
        color: #555557;
        padding-bottom: 20rpx;
    }
    
    .detailsCode-join {
        color: #ee8e44;
        font-size: 24rpx;
        border-radius: 50rpx;
        border: 2rpx solid #ee8e44;
        padding: 10rpx 20rpx;
        display: inline-block;
        margin-top: 30rpx;
    }
    
    .detailsCode-join.active {
        border: 2rpx solid #999;
        color: #999;
    }
    
    .source{ 
        margin: 30rpx 0;
        font-size: 28rpx;
    }
    
    .location {
        background: white;
        width: 100%;
        text-align: center;
        margin: 60rpx 0 0;
    }
    
    .location text {
        font-size: 28rpx;
        display: block;
        line-height: 46rpx;
        color: #999;
    }
    
    .location-btn[size="mini"] {
        background-color: #ee8e44;
        color: #fff;
        font-size: 26rpx;
        line-height: 66rpx;
        margin-top: 30rpx;
    }
    
    .location-img {
        width: 150rpx;
        height: 120rpx;
        margin-bottom: 20rpx;
    }
    
    .detailsBar {
        text-align: center;
        padding: 0 50rpx;
        box-sizing: border-box;
        margin-top: 60rpx;
        margin-bottom: 40rpx;
    }
    
    
    .detailsBar image {
        width: 100%;
    }
    
    .detailsBar .detailsCode-text {
        margin-bottom: 10px;
        color: #000;
    }
    
    .detailsBottom {
        position: fixed;
        width: 100%;
        height: 220rpx;
        left: 0;
        bottom: 0;
        z-index: 9;
    }
    .detailsBottom image {
         width: 100%;
         height: 100%;
         position: absolute;
         left: 0;
         top: 0;
    }
    
    .detailsBottom-cont {
        z-index: 10;
        position: absolute;
        left: 0;
        top: 70rpx;
        width: 100%;
        text-align: center;
        color: #9a9a9a;
        font-size: 26rpx;
    }
    
    .detailsBottom-title {
        font-weight: 600;
        margin-bottom: 20rpx;
        font-size: 30rpx;
    }
</style>
