<template>
  <div class="main">
      <div class="leftArrow" :style="{top:(menu.top + ((menu.height - 24)/2) )+ 'px'}" @click="handleBack">
          <image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"></image>
      </div>
      <map id="myMap" :longitude="longitude" :latitude="latitude"  class="map"></map>
      <div class="list" :style="{transform:isMoveUp?`translateY(calc(-40vh + ${menu.bottom + 5}px))`:''}">
          <div class="top">
              <div class="topImg" @click="handleChangeUp">
                  <image class="packUp" :style="{transform:isMoveUp?'rotate(180deg)':''}" src="https://eshangtech.com/ShopICO/ahyd-BID/service/packUp.svg"></image>
              </div>
              <div class="search">
                  <div class="left">
                      <picker class="pick" @change="handleChangeService" :value="selectIndex" :range="array" range-key="name">
                          <view class="picker">
                              {{array[selectIndex].name?array[selectIndex].name:''}}
                          </view>
                      </picker>
                      <image class="selectIcon"  src="https://eshangtech.com/ShopICO/ahyd-BID/service/upArrow.svg"></image>
                  </div>
                  <div class="right">
                      <input class="searchText" v-model="searchText" confirm-type="search" @confirm="handleSearch" placeholder="搜索服务区" 	placeholder-style="font-size: 14px;color: #A69E9F;"/>
                  </div>
              </div>
          </div>
          <div class="serviceList" :style="{height:isMoveUp?`calc(100vh - 90px - ${menu.bottom + 5}px)`:''}">
              <div class="serviceItem" v-for="(item,index) in serviceList" :key="index" @click="handleGoDetail(item.SERVERPART_ID)">
                  <div class="topItem">
                      <p class="title">{{item.SERVERPART_NAME }}</p>
                      <div class="box">
                          <div class="imgBox">
                              <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/phone.svg"></image>
                          </div>
                          <div class="imgBox" style="margin-right: 0px">
                              <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/map.svg"></image>
                          </div>
                      </div>
                  </div>
                  <p class="distance">距您 <text class="number">{{item.SERVERPART_DISTANCE}}</text> km</p>
                  <div class="info">
                      <image class="infoIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/address.svg"></image>
                      <p class="address">{{item.SERVERPART_ADDRESS}}</p>
                  </div>
                  <div class="info" v-if="item.STARTDATE">
                      <image class="infoIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/service/time.svg"></image>
                      <p class="time">{{item.STARTDATE}}</p>
                  </div>
                  <div class="typeList">
                      <image class="typeItem" v-if="item.SERVERPART_TYPE"  src="https://eshangtech.com/ShopICO/ahyd-BID/service/health.svg"></image>
                      <image class="typeItem" v-if="item.HASMOTHER" src="https://eshangtech.com/ShopICO/ahyd-BID/service/baby.svg"></image>
                      <image class="typeItem" v-if="item.HASPILOTLOUNGE" src="https://eshangtech.com/ShopICO/ahyd-BID/service/car.svg"></image>
                      <image class="typeItem" v-if="item.HASCHARGE" src="https://eshangtech.com/ShopICO/ahyd-BID/service/Charging.svg"></image>
                      <image class="typeItem" v-if="item.HASGUESTROOM" src="https://eshangtech.com/ShopICO/ahyd-BID/service/hotel.svg"></image>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import request from '@/util/index.js'
export default {
    name: "index",
    data(){
        return {
            mapCtx: {},
            latitude:30.207269999999998,//维度
            longitude:120.18023,//经度
            menu:{},//手机参数
            statusBarHeight:'',// 每个手机的状态栏高度
            selectIndex:0,//服务区选择器选择的值
            array:[],//服务区选择器选择的列表
            serviceList:[],
            searchText:'',
            isMoveUp:false, //是否展开
        }
    },
    onLoad(){
        // 获取手机参数
        let systemInfo = uni.getSystemInfoSync()
        this.statusBarHeight = Number(systemInfo.statusBarHeight)
        this.menu = uni.getMenuButtonBoundingClientRect()
        console.log('this.menu',this.menu)
        // 地图初始化
        this.mapCtx = uni.createMapContext('myMap')
        this.getServiceList()
        this.getLocation()
        // this.getListData()
    },
    methods:{
        //返回上一级页面
        handleBack(){
            uni.navigateBack({
                delta: 1
            })
        },
        //获取片区列表
        async getServiceList(){
            let req = {
                Province_Code:'340000'
            }
            const data = await request.$webGet('CommercialApi/BaseInfo/GetSPRegionList',req)
            console.log('data22222',data)
            this.array = data.Result_Data.List
        },
        //选择服务区
        handleChangeService(e){
            console.log('e',e)
            this.selectIndex = Number(e.detail.value)
            let value = this.array[Number(e.detail.value)].value
            this.getListData(value)
        },
        //搜索框触发的方法
        async handleSearch(){

            let req = {
                longitude:this.longitude,
                Province_Code:'340000',
                latitude:this.latitude,
                Serverpart_Name:this.searchText
            }
            const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartList',req)
            console.log('data',data)
            this.serviceList = data.Result_Data.List
        },
        //跳转相对应的服务区详情界面
        handleGoDetail(id){
            uni.navigateTo({
                url:`/pages/map/detail?SERVERPART_ID=${id}&latitude${this.latitude}&longitude=${this.longitude}&isPicker=${false}`
            })
        },
        async getListData(value){
            let req = {
                longitude:this.longitude,
                Province_Code:'340000',
                latitude:this.latitude,
                SPRegionType_ID:value?value:this.array[this.selectIndex].value
            }
            console.log('req',req)
            const data = await request.$webGet('CommercialApi/BaseInfo/GetServerpartList',req)
            console.log('data',data)
            this.serviceList = data.Result_Data.List
        },
        //点击向上移动
        handleChangeUp(){
            if (this.isMoveUp){
                this.isMoveUp = false
            }else{
                this.isMoveUp = true
            }
        },
         getLocation(){
            let _this = this
             uni.getFuzzyLocation({
                type:'gcj02',
                altitude:true,
                success:function (res){
                    console.log('res21312',res)
                    this.latitude = res.latitude
                    this.longitude = res.latitude
                    console.log('this.latitude',this.latitude)
                    _this.getListData()
                }
            })
        },
        //添加标点
        addMarkers(){

        }
    }
}
</script>

<style scoped lang="scss">
.main{
  max-height: 100vh;
  width: 100%;
  position: relative;
    .leftArrow{
        width: 24px;
        height: 24px;
        position: absolute;
        left: 16px;
        z-index:99999999999;
        .img{
            width: 100%;
            height: 100%;
        }
    }
  .map{
    width: 100%;
    height: 40vh;
  }
  .list{
    width: 100%;
    height: calc(60vh + 20px);
    box-sizing: border-box;
    transform: translateY(-20px);
    background: #F2F4F5;
    .top{
      width: 100%;
      height: 74px;
      padding: 0 16px;
      border-radius: 20px 20px 0 0;
      box-sizing: border-box;
      background: #fff;
      box-shadow: 0 4px 4px 0 rgba(22,0,2,0.04);
      .topImg{
        display: flex;
        justify-content: center;
        .packUp{
          width: 26px;
          height: 5px;
          margin-top: 8px;
        }
      }
      .search{
        width: 100%;
        height: 36px;
        background: #F2F4F5;
        border-radius: 4px;
        margin-top: 13px;
        box-sizing: border-box;
        padding: 8px 16px;
        display: flex;
        align-items: center;
          .left{
              width: 30%;
              display: flex;
              align-items: center;
              position: relative;
              .picker{
                  font-size: 14px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #160002;
                  line-height: 20px;
              }
              .selectIcon{
                  width: 15px;
                  height: 15px;
                  margin-left: 6px;
              }
          }
          .left:after{
              content:'';
              width: 2px;
              height: 20px;
              position: absolute;
              right: 0;top: 0;
              background: #E1DFDF;
          }
          .right{
              margin-left: 12px;
              .searchText{
                  font-size: 14px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #A69E9F;
                  line-height: 20px;
              }
          }
      }
    }
      .serviceList{
          margin-top: 12px;
          width: 100%;
          height: calc(100% - 90px);
          box-sizing: border-box;
          padding: 0 16px ;
          overflow-y: auto;
          .serviceItem{
              width: 100%;
              padding: 12px;
              box-sizing: border-box;
              background: #FFFFFF;
              border-radius: 8px;
              margin-bottom: 12px;
              .topItem{
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  .title{
                    font-size: 14px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #160002;
                    line-height: 20px;
                  }
                  .box{
                      display: flex;
                      align-items: center;
                      .imgBox{
                          width: 28px;
                          height: 28px;
                          border: 1px solid #F1F1F1;
                          overflow: hidden;
                          margin-right: 16px;
                          border-radius: 50%;
                          .icon{
                              width: 100%;
                              height: 100%;
                          }
                      }
                  }
              }
              .distance{
                  font-size: 12px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #786B6C;
                  line-height: 18px;
                  .number{
                      color:#D7000F;
                      margin: 0 2px;
                  }
              }
              .info{
                  display: flex;
                  align-items: center;
                  margin-top: 4px;
                  .infoIcon{
                      width: 12px;
                      height: 15px;
                      margin-right: 4px;
                  }
                  .address,.time{
                      font-size: 12px;
                      font-family: PingFangSC-Regular, PingFang SC;
                      font-weight: 400;
                      color: #786B6C;
                      line-height: 18px;
                  }
              }
              .typeList{
                  margin-top: 8px;
                  display: flex;
                  align-items: center;
                  .typeItem{
                      width: 16px;
                      height: 16px;
                      margin-right: 9px;
                  }
              }
          }
      }
  }
}
</style>
