<template>
    <view>
        <!-- 门店详情 -->
        <view class="detailsImg">
            <image :src="storeinfo.cover" mode="aspectFill"></image>
        </view>
        <view class="detailsCont">
            <view class="detailsName">
                {{ storeinfo.title }}
            </view>
            <view class="detailsLabel">
                <view class="detailsLabel-left">
                    <image src="/static/static/icon/site_icon.png"></image>
                    <view class="detailsLabel-name">
                        <text>{{ storeinfo.address }}</text>
                        距您 {{ distance }}
                    </view>
                </view>
                <image class="detailsLabel-tel" src="/static/icon/tel.png" @tap="tel"></image>
            </view>
            <view class="detailsLabel">
                <view class="detailsLabel-left">
                    <image src="/static/icon/time_icon.png"></image>
                    <view class="detailsLabel-name">
                        <text>营业时间</text>
                        <block v-if="storeinfo.open_time != null">{{ storeinfo.open_time }}</block>
                        <block v-else>00：00</block>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 按钮 -->
        <view class="detailsBtn">
            <view class="detailsBtn-cont" @tap="siteMap">
                去导航
            </view>
        </view>
    </view>
</template>

<script>
    import { storesShow } from '@/apis/interfaces/user'
    export default {
    	data() {
    		return {
    			storeinfo   : '',   // 门店详情
    			distance    : 0,    // 门店距离换算
    			longitude   : 0,    // 门店详情
    			latitude    : 0,    // 门店详情
    		};
    	},
    	onLoad(options){
            storesShow({
                store_id: options.store_id,
                user_lng: options.user_lng,
                user_lat: options.user_lat
            }).then(res => {
                let distance = res.distance;
                if (distance > 1000) {
                    distance = distance / 1000 + "km";
                } else {
                    distance = distance + "m";
                }
                this.storeinfo = res
                this.distance  = distance
            }).catch(err => {
                if (!err.login) {
                    if(options.type == 'campus') {
                        uni.showModal({
                            title: '用户登录已过期',
                            content: '请重新登录',
                            showCancel: false,
                            success: res => {
                                if (res.confirm) {
                                    uni.redirectTo({
                                        url: '/pages/campus/signin'
                                    });
                                }
                            }
                        })
                    }else {
                        uni.showModal({
                            title: '用户登录已过期',
                            content: '请重新登录',
                            showCancel: false,
                            success: res => {
                                if (res.confirm) {
                                    uni.redirectTo({
                                        url: '/pages/auth/login'
                                    });
                                }
                            }
                        })
                    }
                }
            })
    	},
    	methods:{
            // 拨打电话
            tel(e) {
                let tel = this.storeinfo.mobile
                uni.showActionSheet({
                    itemList    : ['呼叫商家'],
                    success     : res =>{
                        if(res.tapIndex==0){
                            uni.makePhoneCall({
                                phoneNumber: tel
                            })
                        }
                    }
                })
            },
        
            // 导航
            siteMap(){
                // uni.openLocation({
                //     latitude    : parseFloat(this.storeinfo.latitude),
                //     longitude   : parseFloat(this.storeinfo.longitude),
                //     address     : this.storeinfo.address
                // })
				let  key = '34ea3d2958aee3ffc154738551a976f9',//高德地图key
					latitude = parseFloat(this.storeinfo.latitude),
				    longitude = parseFloat(this.storeinfo.longitude)
				window.location.href = "http://uri.amap.com/marker?position="+ longitude +","+latitude +"&name="+ name +"&coordinate=gaode&callnative=1";
				
            }
        }
    }
</script>

<style>
    /* 门店详情 */
    .detailsImg {
        position: relative;
        width: 100%;
        padding-top: 60%;
    }
    
    .detailsImg image {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    
    .detailsCont {
        background: #fff;
    }
    
    .detailsName {
        font-size: 34rpx;
        padding: 30rpx;
        font-weight: 600;
        box-sizing: border-box;
    }
    
    .detailsLabel {
        display: flex;
        padding: 30rpx;
        box-sizing: border-box;
        position: relative;
    }
    
    .detailsLabel::after {
        position: absolute;
        content: '';
        left: 0;
        top: 0;
        background: #e7e7e7;
        width: 100%;
        height: 2rpx;
    }
    
    .detailsLabel-left {
        width: calc(100%- 40rpx);
        display: flex;
        flex: 1;
        color: #5e5e5e;
    }
    
    .detailsLabel-left image {
        width: 40rpx;
        height: 40rpx;
        margin: 20rpx 20rpx 0 0;
    }
    
    .detailsLabel-tel {
        width: 60rpx;
        height: 60rpx;
        margin-top: 14rpx;
    }
    
    .detailsLabel-name {
        font-size: 26rpx;
        width: calc(100% - 110rpx);
        margin-right: 10rpx;
    }
    
    .detailsLabel-name text {
        font-weight: 600;
        font-size: 30rpx;
        display: block;
        margin-bottom: 10rpx;
    }
    
    .detailsLabel-add {
        width: 34rpx;
        height: 34rpx;
        margin-top: 24rpx;
    }
    
    .detailsBtn {
        background: #fff;
        width: 100%;
        height: 120rpx;
        text-align: center;
        left: 0;
        bottom: 0;
        position: fixed;
        padding: 20rpx;
        box-sizing: border-box;
    }
    
    .detailsBtn-cont {
        width: 100%;
        background: #ef8e41;
        color: #fff;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        border-radius: 50rpx;
    }
</style>
