<template>
  <view class="content">
    <map :style="{width: '100%', height: mapHeight + 'px'}"
         id="wash_map"
         :latitude="state.latitude"
         :longitude="state.longitude"
         :markers="state.covers"
         min-scale="1"
         :scale="12"
         :show-compass="false"
         @regionchange="handleMapRegionChange"
         @updated="handleMapUpdated"
         @labeltap="handleMapTapMarker"
         @markertap="handleMapTapMarker">

      <view class="content_reset-btn" @click="resetLocation">
        <uv-icon name="empty-address" size="28" color="#333333" icon="/static/map-re-location.png"></uv-icon>
      </view>
    </map>


    <view class="w100 content_search mt10">
      <uv-search :showAction="true" actionText="搜索" placeholder="请输入站点名称搜索" :animation="true" @search="handleSearchStation"></uv-search>
    </view>

    <!--    站点清单  start-->
    <view class="w100 content_station">
      <view class="station_item" v-for="item in state.stationList" :key="item.id">
        <view class="station_item-title">
          <text class="font13">{{ item.name }}</text>
        </view>

        <view class="station_item-status">
          <text class="station_item-status-text">营业中</text>
        </view>

        <view class="station_item-content">
          <view class="station_item-content-left">
            <view class="station_item-content-left-label">
              <view class="font12 station_item-content-left-label-left">
                <text class="station_item-content-left-label-left_idle">空闲</text>
                <text class="station_item-content-left-label-left_count">{{ item.idle }}/{{ item.total }}</text>
              </view>
              <view class="station_item-content-left-label_func">{{ item.funs?.join(" | ") }}</view>
            </view>
            <view class="station_item-content-left-position">
              <uv-icon name="empty-address" size="20" color="#AAAAAA"></uv-icon>
              <text>{{ item.address }}</text>
            </view>
          </view>
          <view class="station_item-content-right">
            <uv-button shape="circle" type="primary" color="#C6171E" size="mini" plain @click="handleNavStation(item)">去洗车</uv-button>
          </view>
        </view>

        <view class="station_item-distance">
          <uv-text type="primary" :text="item.tips" size="12"></uv-text>
        </view>
      </view>
    </view>
    <!--    站点清单  end-->
    <tab-bar :index="1"/>
  </view>
</template>


<script setup lang="ts">
import {reactive, ref} from 'vue'
import {onHide, onShow} from "@dcloudio/uni-app";
import TabBar from "@/components/tab-bar/index.vue";
import LoginBar from "@/components/login-bar/index.vue";

const mapCtx = ref(); // 地图上下文
const mapHeight = ref(400);

const initState = () => ({
  latitude: 23.098994,
  longitude: 113.32252,
  covers: [] as any[],
  markers: [] as any[],
  isIgnoreChangeLocation: false,
  loading: false,
  stationList: [
    {
      id: 1,
      name: '河源路洗车场',
      status: 1,
      total: 7,
      idle: 2,
      funs: ['清洁', '泡沫', '吸尘', '消毒', '吹干'],
      address: '深圳市宝安区河源路12345号',
      tips: '半小时内免停车费，超时领取停车券免费',
    },
    {
      id: 2,
      name: '宝安中心洗车场',
      status: 1,
      total: 17,
      idle: 5,
      funs: ['清洁', '泡沫', '吸尘', '消毒', '吹干'],
      address: '深圳市宝安区创业二路88号',
      tips: '半小时内免停车费，超时领取停车券免费',
    }
  ] as any[]
})

const state = reactive(initState())

onShow(() => {
  const windowInfo = uni.getWindowInfo();
  mapHeight.value = windowInfo.windowHeight - (48 + uni.getSystemInfoSync().statusBarHeight!);
  let gd = getApp<any>().globalData;
  if (!gd.token) {
    return;
  }
  mapCtx.value = uni.createMapContext("wash_map");
});

onHide(() => {
  Object.assign(state, initState());
})

const fetchLocationPermission = ()=>{
  uni.authorize({
    scope: 'scope.userLocation',
    success() {
      uni.getLocation()
    }
  })
}

const handleMapRegionChange = (e: any) => {
  if (state.isIgnoreChangeLocation) {
    return;
  }
  if (e.type === "end" && state.markers.length) {
    const current = e.target.centerLocation;
    const {latitude, longitude} = current;
    relocation(longitude, latitude);
  }
}


const relocation = (longitude: number, latitude: number) => {
  mapCtx.value?.moveToLocation({
    latitude,
    longitude,
  });
}

//重置地图定位
const resetLocation = () => {
  uni.authorize({
    scope: 'scope.userLocation',
    success() {
      uni.getLocation({
        type: 'gcj02',
        success: res=>{
          const latitude = res.latitude;
          const longitude = res.longitude;
          uni.openLocation({
            latitude: latitude,
            longitude: longitude,
            success: function () {
            }
          });
        }
      });
    }
  })

};

const handleMapUpdated = (e: any) => {
  setTimeout(() => {
    state.isIgnoreChangeLocation = false;
  }, 500);
}


const handleMapTapMarker = (e: any) => {
  if (e.detail.markerId === -1) {
    return;
  }
  let chooseMarker = state.stationList.find((k: any) => k.id == e.detail.markerId);
  if (chooseMarker) {
  }
}

const handleSearchStation = (e: any) => {
}

const handleNavStation = (station: any) => {
  uni.openLocation({
    latitude:station.stationLat,
    longitude:station.stationLng,
    scale: 18,
    name: station.stationName,
    address:station.address,
  });
}
</script>


<style lang="scss" scoped>
.content {
  width: 100%;

  &_reset-btn {
    position: absolute;
    right: 10rpx;
    bottom: 10rpx;
  }

  &_search {

  }

  &_station {
    height: calc(100vh - 460px);
  }
}

.station_item {
  display: flex;
  flex-direction: column;
  border-radius: 16rpx;
  margin-top: 20rpx;
  padding: 15rpx;
  background: $uni-bg-color-card;

  &-title {
    display: inline-flex;
    padding-left: 10rpx;
  }

  &-status {
    position: absolute;
    right: 0;
    top: 0;

    &-text {
      background: $uni-color-primary;
      padding: 6rpx;
      color: $uni-text-color-inverse;
      font-size: 26rpx;
    }
  }

  &-content {
    display: flex;
    justify-content: space-between;
    width: 100%;

    &-left {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 5rpx;

      &-label {
        padding: 4rpx 8rpx;
        display: inline-flex;
        margin-top: 8rpx;

        &-left {
          border-radius: 4rpx;

          &_idle {
            background: $uni-color-primary;
            padding: 6rpx;
            color: $uni-text-color-inverse;
            border-radius: 4rpx;
          }

          &_count {
            margin-left: 20rpx;
            color: $uni-color-primary;
            font-size: 26rpx;
          }

          &_tag {
            width: 30rpx;
          }

        }


        &_func {
          padding-left: 50rpx;
          font-size: 26rpx;
          color: $uni-text-color-tertiary;
        }
      }

      &-position {
        display: inline-flex;
        font-size: 26rpx;
        margin-top: 8rpx;
      }
    }

    &-right {
      width: 120rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
    }
  }

  &-distance {
    font-size: 26rpx;
    padding-left: 10rpx;
    margin-top: 8rpx;
  }
}
</style>
