<template>
    <view>
        <!-- 卡券详情 -->
        <view class="details">
        	<view class="detailsTop">
        		<view class="detailsTop-name">
        			{{ coupon.details.name }}
        		</view>
        		<view class="detailsTop-time">
        			有效期： {{ coupon.details.startTime }} - {{ coupon.details.endTime }}
        		</view>
        	</view>
        	<view class="source">活动来源 ： {{ coupon.details.activity_name }}</view>
        	<view class="detailsBar">
        		<view class="detailsCode-text">劵码</view>
        		<image :src="code.barcode" mode="widthFix"></image>
        	</view>
        	<view class="detailsCode-text">
        		{{ coupon.details.code }}
        	</view>
        	<view class="detailsCode">
        		<image :src="code.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=' + coupon.details.id" v-if="location.longitude != 0 && location.latitude != 0">
        				查看所有
        				<image src="/static/icon/arrow_left.png"></image>
        			</navigator>
        		</view>
        		<view class="location" v-if="location.longitude == 0 && location.latitude == 0">
        			<image class="location-img" src="https://card.ysd-bs.com/storage/materials/2021/09/01/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="coupon.stores != ''">
        				<view class="detailsStore-list" v-for="(item,index) in coupon.stores" :key="index"
        					@click="detailsTap(item.store_id)">
        					<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" @click.stop="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="coupon.remark"></rich-text>
        	</view>
        </view>
        
        
        <!-- 内容介绍 -->
        <view class="detailsText">
        	<view class="detailsText-title">
        		内容介绍
        	</view>
        	<view class="detailsText-tips" v-if="coupon.content != null">
        		<rich-text :nodes="coupon.content"></rich-text>
        	</view>
        </view>
    </view>
</template>

<script>
    import { couponinfo, merchant_card, qrcode, barcode } from '@/apis/interfaces/user'
    export default {
    	data() {
    		return {
                coupon       : {
                    couponId : '',  // 优惠券id
                    details  : '',  // 优惠券信息
                    stores   : [],  // 商家列表
                    remark   : '',  // 使用须知
                    content  : '',  // 内容介绍
                },
                code         : {
                    qrcode   : '', //二维码
                    barcode  : '', //条形码
                },
                location     : {
                    latitude : 126.66837,  // 纬度
                    longitude: 45.76021   // 经度
                }
            }
        },
        onLoad(options) {
            this.coupon.couponId = options.id
            
            // 获取二维码
            this.detailsCode()
            
            // 获取条形码
            this.detailsBarcode()
        },
        onShow () {
            // 查看定位信息
            this.getCity();
        },
        methods:{
            // 详情信息
            detailsInfo() {
                couponinfo({
                    coupon_id: this.coupon.couponId,
                    user_lng : this.location.longitude,
                    user_lat : this.location.latitude
                }).then(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.coupon.details = res.info
                    this.coupon.stores  = stores
                    this.coupon.remark  = res.info.right.remark.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
                    this.coupon.content = res.info.right.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
                })
            },
            
            // 获取城市信息
            getCity(){
                uni.getLocation({
                    success: res => {
                        this.location.latitude   = res.latitude,
                        this.location.longitude  = res.longitude
                    },
                    complete: (err) => {
                        // 获取详情信息
                        this.detailsInfo();
                    }
                })
            },
            
            // 二维码
            detailsCode() {
                qrcode(this.coupon.couponId).then(res=>{
                    this.code.qrcode = res.qrcode
                })
            },
            
            // 条形码
            detailsBarcode() {
                barcode(this.coupon.couponId).then(res=>{
                    this.code.barcode = res.barcode
                })
            },
            
            // 拨打电话
            tel(number) {
                uni.showActionSheet({
                    itemList    : ['呼叫商家电话'],
                    success     : res =>{
                        if(res.tapIndex==0){
                            uni.makePhoneCall({
                                phoneNumber: number
                            })
                        }
                    }
                })
            },
            
            // 查看门店详情页
            detailsTap(id) {
                uni.navigateTo({
                  url: '/pages/store/details?store_id=' + id + '&user_lng=' +  this.location.longitude  + '&user_lat=' + this.location.latitude,
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    /* 卡券详情 */
    .details {
        background: #fff;
        margin: 20rpx;
        width: calc(100% - 40rpx);
        border-radius: 20rpx;
        padding: 30rpx;
        box-sizing: border-box;
        box-shadow: 0 0 20rpx rgba(0, 0,0, .1);
        .detailsTop {
            border-bottom: 2rpx dashed #c8c8c8;
            padding-bottom: 40rpx;
            .detailsTop-name {
                font-size: 36rpx;
                font-weight: 600;
                margin-bottom: 20rpx;
            }
            .detailsTop-time {
                color: #7e7e7e;
                font-size: 26rpx;
            }
        }
        .source{ 
            margin: 30rpx 0;
            font-size: 28rpx;
        }
        .detailsBar {
            text-align: center;
            padding: 0 50rpx;
            box-sizing: border-box;
            margin-top: 60rpx;
            margin-bottom: 40rpx;
            image {
                width: 100%;
            }
            .detailsCode-text {
                margin-bottom: 10px;
                color: #000;
            }
        }
        .detailsCode-text {
            text-align: center;
            font-size: 32rpx;
            font-weight: 600;
            color: #000;
            text {
                color: #999;
                font-weight: normal;
                font-size: 26rpx;
            }
        }
        .detailsCode {
            text-align: center;
            padding: 0 0 20rpx;
            margin: 40rpx 0 30rpx;
            image {
                width: 300rpx;
                height: 300rpx;
                margin-bottom: 30rpx;
            }
        }
        .detailsStore {
            border-top: 2rpx #c8c8c8 solid;
            padding-top: 40rpx;
            .detailsStore-top {
                display: flex;
                line-height: 30rpx;
                margin-bottom: 20rpx;
                .detailsStore-title {
                    flex: 1;
                    font-weight: 600;
                }
            }
            .location {
                background: white;
                width: 100%;
                text-align: center;
                margin: 60rpx 0 0;
                text {
                    font-size: 28rpx;
                    display: block;
                    line-height: 46rpx;
                    color: #999;
                }
                .location-img {
                    width: 150rpx;
                    height: 120rpx;
                    margin-bottom: 20rpx;
                }
                .location-btn[size="mini"] {
                    background-color: #ee8e44;
                    color: #fff;
                    font-size: 26rpx;
                    line-height: 66rpx;
                    margin-top: 30rpx;
                }
            }
        }
    }
    
    .detailsText {
        padding: 30rpx 30rpx 20rpx;
        box-sizing: border-box;
        .detailsText-title {
            font-size: 32rpx;
            font-weight: 600;
            margin-bottom: 20rpx;
        }
        .detailsText-tips {
            font-size: 26rpx;
            line-height: 50rpx;
            color: #555557;
            padding-bottom: 20rpx;
        }
    }
    
    // 门店
    .detailsStore-title {
        flex: 1;
        font-weight: 600;
    }
    .detailsStore-top, .detailsStore-row {
        display: flex;
        line-height: 30rpx;
        margin-bottom: 20rpx;
    }
    .detailsCode-text, .detailsStore-row {
        color: #949494;
        font-size: 28rpx;
    }
    .detailsStore-row image  {
        width: 26rpx;
        height: 26rpx;
        margin: 3rpx 0 0 6rpx;
    }
    .detailsStore-list {
        position: relative;
        margin-bottom: 40rpx;
        .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-name {
                    margin-bottom: 20rpx;
                }
                .detailsStore-place {
                    font-size: 24rpx;
                    line-height: 40rpx;
                    color: #5a5a5a;
                    display: flex;
                    text {
                        flex: 1;
                        display: inline-block;
                        font-size: 28rpx;
                        margin-right: 20rpx;
                    }
                }
            }
            .detailsStore-tel {
                width: 60rpx;
                height: 60rpx;
                margin-top: 25rpx;
            }
        }
    }
</style>
