<template>
	<view :style="viewColor">
    <view class='content-box'>
     <view v-if="Object.values(list).length > 0" class="content-list">
       <view class="site-box" v-for="(item,index) in list" :key="index">
         <view class="left">
           <view class="title">
             <view class="title-text">{{item.title}}</view>
             <view v-if="item.distance > 0" class="distance">{{item.distance_text}}</view>
           </view>
           <view class="address">{{item.address}}</view>
         </view>
         <view class="right" @click="navigationAddress(item)">导航</view>
       </view>
     </view>
      <emptyPage v-else title="暂无信息～"></emptyPage>
		</view>
	</view>
</template>

<script>
import { pointList } from '@/api/exchange.js';
import {mapGetters} from "vuex";
import emptyPage from '@/components/emptyPage.vue';

const app = getApp();
export default {
  components: {
    emptyPage,
  },
  data() {
    return {
      // 定位信息
      lng: null,
      lat: null,
      // 列表信息相关
      list: [],
      page: 1,
    };
  },
  computed: {
    // ...mapGetters(['isLogin', 'userInfo', 'viewColor'])
    ...mapGetters(['viewColor'])
  },
  onLoad(options) {
    this.getLocation();
  },
  onReachBottom: function () {
    this.getPointList();
  },
  methods: {
    // 用户定位
    getLocation() {
      let _this = this;
      uni.getLocation({
        type: 'gcj02', // 返回国测局经纬度坐标系统的结果
        success(res) {
          _this.lng = res.longitude || null;
          _this.lat = res.latitude || null;
          _this.getPointList();
        },
        fail(err) {
          console.error('获取地理位置失败', err)
          _this.getPointList();
        }
      })
    },
    // 站点列表
    getPointList() {
      let _this = this;
      let params = {
        page: _this.page,
        lng: _this.lng,
        lat: _this.lat
      };
      pointList(params).then(res => {
        let list = res.data || {};
        if (Object.values(list).length > 0) {
          _this.list = _this.$util.SplitArray(list, _this.list);
          _this.$set(_this, 'list', _this.list);
          _this.page++;
        }
      }).catch(err => {
        console.log('错误', err)
        this.$util.Tips({
          title: err
        });
      });
    },
    // 导航
    navigationAddress(item){
      uni.openLocation({
        longitude: Number(item.lng),
        latitude: Number(item.lat),
        // name: '南京站',
        // address: '江苏省南京市玄武区龙蟠路',
        success: function (res) {
          console.log('打开系统位置地图成功')
        },
        fail: function (error) {
          console.log(error)
        }
      });
    }
  },
}
</script>

<style scoped lang="scss">
.content-box{
  min-height: 100vh;
  width: 100%;
  background: #f6f6f6;

  .content-list{
    width: 100%;
    .site-box{
      width: 100%;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx;
      border-bottom: 2rpx solid #CCCCCC;
      .left{
        width: calc(100% - 120rpx);

        .title{
          width: 100%;
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: flex-start;
          .title-text{
            max-width: calc(100% - 200rpx);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 30rpx;
            font-weight: bold;
          }
          .distance{
            font-size: 24rpx;
            background-color: #e6a23c;
            color: #fff;
            font-weight: initial;
            height: 35rpx;
            line-height: 35rpx;
            border-radius: 50rpx;
            margin-left: 20rpx;
            padding: 0 15rpx;
            text-align: center;
          }
        }
        .address{
          width: 100%;
          text-align: left;
          font-size: 26rpx;
          color: #a0a1a7;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .right{
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
        height: 40rpx;
        line-height: 40rpx;
        padding: 0 15rpx;
        border-radius: 50rpx;
        width: 100rpx;
        text-align: center;
      }
    }
    .site-box:last-child{
      border-bottom: 0!important;
    }
  }
}
</style>
