<view class="appeal-container">
  <view class="appeal-title">你的位置</view>
  <view class="appeal-address">
    <view>
      <span class="appeal-address-city">{{city}}</span>
      <span class="appeal-address-area">{{district}}</span>
    </view>
    <view wx:if="{{ street.length <= 8 }}" class="appeal-address-detail" >{{street}}</view>
    <view wx:if="{{ street.length > 8 }}" class="appeal-address-detail-small" >{{street}}</view>
  </view>
  <view class="appeal-telephone-container">
    <image
      class="appeal-telephone"
      src="../../assets/images/telephone-large.svg"
      bindtap="callPhone"
    />
  </view>
</view>

.appeal-container {
  font-family: PingFangSC-Regular, sans-serif;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.appeal-title {
  font-family: PingFangSC;
  color: #1B4149;
  font-size: 50rpx;
  margin-left: 50rpx;
  padding: 20rpx 0;
  font-weight: bold;
}

.appeal-address {
  color: #1B4149;
  font-family: PingFangSC;
  font-size: 80rpx;
  font-weight: normal;
  /*font-weight: lighter;*/
  /*padding: 30rpx;*/
  margin-left: 50rpx;
  flex: 1;
  line-height: 120rpx;
}

.appeal-address-city {
  margin-right: 40rpx;
  white-space:nowrap;
}
.appeal-address-detail {
  font-weight: normal;
}
.appeal-address-detail-small {
  font-weight: normal;
  font-size: 50rpx;
}


.appeal-telephone-container {
  display: flex;
  width: 750rpx;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  bottom: 200rpx;
}

.appeal-telephone {
  height: 300rpx;
  width: 300rpx;
}

var bmap = require('../../libs/bmap-wx');
var wxMarkerData = [];
Page({
  data: {
    city: '',
    district: '',
    street: '',
    street_number: '',
  },

  onLoad: function () {
    var that = this;
    var BMap = new bmap.BMapWX({
      ak: 'L0Npf6qyYzrXxHSnwfGccjvBoKj0my8E'
    });
    var fail = function(data) {
      console.log(data)
    };
    var success = function(data) {
      console.warn(data);
      that.setData({
        city: data.originalData.result.addressComponent.city,
        district: data.originalData.result.addressComponent.district,
        street: `${data.originalData.result.addressComponent.street}${data.originalData.result.addressComponent.street_number}`,
      })
    }
    BMap.regeocoding({
      fail: fail,
      success: success,
    });
  },

  callPhone: function() {
    wx.makePhoneCall({
      phoneNumber: '120' //仅为示例，并非真实的电话号码
    });
  }

});