<template>
  <u-navbar
      :title="title"
      :auto-back="true"
      left-icon-size="40rpx"
      :safe-area-inset-top="true"
      :placeholder="true"
      bgColor="#fff"
  ></u-navbar>
  <view class="body-background"></view>
  <view class="screen-body row" :class="{pad:(tabCheck === 'item')}">
    <u-row :custom-style="{boxSizing:'border-box',width:'100%',flexWrap:'wrap'}">
      <u-col :custom-style="{backgroundColor:'#fff',borderRadius:'10rpx',padding:'0rpx 26rpx',boxSizing:'border-box'}">
<!--        <u-tabs-->
<!--            :list="list"-->
<!--            u-sticky-->
<!--            lineWidth="64"-->
<!--            lineHeight="4"-->
<!--            :inactiveStyle="{color:'#AFB5BE'}"-->
<!--            :activeStyle="{color:'#F47210'}"-->
<!--            lineColor="#F47210"-->
<!--            :custom-style="{margin:'auto'}"-->
<!--            :scrollable="false"-->
<!--            :current="current"-->
<!--            @change="tabsChange"-->
<!--        ></u-tabs>-->
      </u-col>
      <u-col
          :custom-style="{backgroundColor:'#fff',borderRadius:'10rpx',padding:((tabCheck === 'item')?'0 0':'0 26rpx'),boxSizing:'border-box'}">
        <view class="screen-container row">
          <view class="screen-search col-12" :style="{width:'100%',display:'flex'}">
            <u-input @blur="getServiceList(true)" v-model="pages.name" shape="circle" placeholder="小区/商圈/地铁站"
                     prefixIcon="search" prefix-icon-style="font-size:32rpx;"
                     custom-style="background-color:#F5F5F6;"></u-input>
          </view>
          <view class="item-screen" :style="{display:'block'}" style="width:100%;">
            <u-tabs
                :list="listItem"
                lineWidth="64"
                lineHeight="4"
                lineColor="#F47210"
                :inactiveStyle="{color:'#AFB5BE'}"
                :activeStyle="{color:'#FF9545'}"
                :scrollable="false"
                :custom-style="{margin:'auto',width:'auto'}"
                @change="tabsChangeItem"
            ></u-tabs>
          </view>
          <view :style="{width:'100%',display:'flex'}">
            <view class="row" style="justify-content: space-around;margin-top:10rpx;">
              <view class="screen-type">
                <view class="screen-type-button row " @click="showStreetPicker">
                  <view class="button-text">
                    <u-text :bold="(pages.jurisdiction!=='')" text="辖区" size="28" color="#020B18"></u-text>
                  </view>
                  <view class="button-icon">
                    <u-icon name="arrow-down-fill" size="12"></u-icon>
                  </view>
                </view>
              </view>
              <view class="screen-type">
                <view class="screen-type-button row " @click="showRentPicker">
                  <view class="button-text">
                    <u-text :bold="(pages.type!=='')" text="类别" size="28" color="#020B18"></u-text>
                  </view>
                  <view class="button-icon">
                    <u-icon name="arrow-down-fill" size="12"></u-icon>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <!--        -->
        </view>

      </u-col>
    </u-row>
  </view>

  <view class="map-container" :style="{display:(tabCheck === 'room'?'flex':'none')}" >
    <view class="top-map" :style="{marginTop:size.height+'px'}">
      <view id="map" class="map" v-if="tabCheck === 'room'">
        <MzMap ref="mzMap" :coordinates="roomCoordinate" @markerTap="markerTap" @tap="mapTap" ></MzMap>
      </view>

    </view>
    <view id="popMap" class="popMap row " v-if="popMapShow">
      <view class="pop-container row">
        <view class="title row">
          <view class="value">
            <u-text :text="mapData.name" color="#020B18" size="32"></u-text>
          </view>
          <view class="button" style="width:50rpx;height:50rpx;">
            <u-image mode="widthFix" width="=50" height="50" :src="staticImage.mapClose" @click="popMapShow = false"></u-image>
          </view>
        </view>
        <view class="address row">
          <view class="value">
            <u-text :text="mapData.address" color="#AFB5BE" size="28"></u-text>
          </view>
          <view class="button" style="width:50rpx;height:50rpx;">
            <u-image mode="widthFix" width="=50" height="50"  :src="staticImage.position" @click="callPostion"></u-image>
          </view>
        </view>
        <view class="pop-add"></view>
      </view>

    </view>
  </view>

  <view class="room-container" :style="{display:(tabCheck === 'room'?'block':'none')} ">
    <view class="gradient-background"></view>
    <view class="item-container" style="padding:16rpx 26rpx;position: relative;z-index: 2">
      <view class="item" v-for="item in listWater" style="padding:20rpx;background-color:#fff;border-radius:20rpx;margin-bottom:16rpx;">
        <view class="title row" style="margin-bottom:32rpx;">
          <view class="title-item">
            <u-text :text="item.jurisdiction" color="#AFB5BE" size="28"></u-text>
          </view>
          <view class="title-item">
            <u-text :text="'|'" color="#AFB5BE" size="28"></u-text>
          </view>
          <view class="title-item">
            <u-text :text="item.type" color="#AFB5BE" size="28"></u-text>
          </view>
        </view>
        <view class="body row">
          <view class="cover" style="margin-right:24rpx;">
            <u-image mode="widthFix" width="260" height="160" :src="item.cover" radius="10"></u-image>
          </view>
          <view class="content col">
            <view class="content-title" style="margin-bottom:32rpx;">
              <u-text :text="item.name" color="#020B18" size="32"></u-text>
            </view>
            <view class="content-body">
              <view class="body-address row" style="margin-bottom:10rpx;">
                <view class="icon" style="margin-right:20rpx;">
                  <u-image mode="widthFix" width="32" height="32" :src="staticImage.listPosition"></u-image>
                </view>
                <view class="value col " @click="callLocal(item.lat,item.lng)">
                  <u-text :text="item.address" color="#AFB5BE" size="28" custom-style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; "></u-text>
                </view>
              </view>
              <view class="body-phone row" style="justify-content: flex-start">
                <view class="icon" style="margin-right:20rpx;">
                  <u-image mode="widthFix" width="32" height="32" :src="staticImage.listPhone"></u-image>
                </view>
                <view class="value row col" @click="callPhone(item.tel)">
                  <view class="" style="margin-right:10rpx;">
                    <u-text :text="item.connect_name" color="#AFB5BE" size="28"></u-text>
                  </view>
                  <view class="">
                    <u-text :text="item.tel" color="#AFB5BE" size="28"></u-text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-loadmore :custom-style="{display:'flex'}" :status="status" fontSize="28"
                marginBottom="30" marginTop="30" @loadmore="getServiceList()" v-if="(tabCheck === 'room')"/>
  </view>


  <uv-picker
      ref="streetPicker"
      :show="streetShow"
      :columns="[serviceList]"
      keyName="name"
      @close="streetShow = false"
      @cancel="streetShow = false"
      @confirm="selectStreet"></uv-picker>
  <uv-picker
      ref="rentPicker"
      :show="rentShow"
      :columns="[jurisdictionList]"
      keyName="name"
      @close="rentShow = false"
      @cancel="rentShow = false"
      @confirm="selectRent"></uv-picker>
</template>

<script>
import api from "@/utils/functions.js";
import {goodsList, goodsType, roomList, streetList} from "@/api/shop";
import MzCard from "@/components/MzCard/index.vue";
import {imghost} from "@/config/host";
import shop from "@/pages/Shop/index.vue";
import {getServiceStreet, serviceStreet, systemConfig} from "@/api/other";
import MzMap from "@/components/MzMap/index.vue";

const img = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/logo.png';
export default {
  computed: {},
  components: {
    MzMap,
    MzCard,
  },
  data() {
    return {
      mapShow:true,
      listWater: [],
      list1: [],
      list2: [],
      listWaterItem: [],
      list1Item: [],
      list2Item: [],
      list: [{
        name: '公寓出租',
        id: 'room'
      }, {
        name: '商品兑换',
        id: 'item'
      },],
      listItem: [{
        name: '全部',
        id: ''
      }, {
        name: '驿站展示',
        id: 1
      }, {
        name: '爱心商家',
        id: 2
      },],
      tabCheck: 'room',
      current: 0,
      show: false,
      title: '暖新服务',
      size: {
        height: 0
      },
      pages: {
        page: 1,
        limit: 10,
        category : '',
        jurisdiction : '',
        type  : '',
        name : '',
        lng: '',
        lat: '',
      },
      pagesItem: {
        page: 1,
        limit: 10,
        keyword: '',
        goods_type: ''
      },
      status: 'loadmore',
      statusItem: 'loadmore',
      streetShow: false,
      rentShow: false,
      houseShow: false,
      priceShow: false,
      columns: [],
      streetColumns: [],
      rentColumns: [
        {
          name: '合租',
          value: 1,
        },
        {
          name: '整租',
          value: 2
        }
      ],
      houseColumns: [],
      priceColumns: [],
      serviceList:[],
      jurisdictionList:[],
      lng: 113.324520,
      lat: 23.099994,
      mapContext: {},
      popMapShow: false,
      isGetLocal:false,
      roomCoordinate:[
        // {
        //   latitude:30.810122,
        //   longitude:104.194078,
        // },{
        //   latitude:30.57447,
        //   longitude:103.92377,
        // },
      ],
      mapIcon1:imghost+'/map-icon1.png',
      mapIcon2:imghost+'/map-icon2.png',
      staticImage:{
        position:imghost+'/map-position.png',
        mapClose:imghost+'/map-close.png',
        listPosition:imghost+'/service-position.png',
        listPhone:imghost+'/service-phone.png',
      },
      mapData:{},
    }
  },
  onLoad(option) {
    console.log('shop', option)
    if (option.tabCheck) {
      this.tabCheck = option.tabCheck;
      if(this.tabCheck === 'item'){
        this.current = 1;
      }
    }
    console.log('shopPage123')
    // this.getStreet();
  },
  onReady() {
    this.size.height = api.navHeight().navigationBar + api.navHeight().systemBar

  },
  onReachBottom() {
      this.getServiceList();
  },
  methods: {
    getConfig(){
      systemConfig({type:'service_type'}).then(res => {
        let data = [{name:'全部'}];
         res.data.map(item => {
          data.push( {name:item});
        });
        this.jurisdictionList = data;
      });
      systemConfig({type:'jurisdiction'}).then(res => {
        let data = [{name:'全部'}];
        res.data.map(item => {
          data.push( {name:item});
        });
        this.serviceList = data;
      });
    },
    showStreetPicker(){
      this.$refs.streetPicker.open();
    },
    showRentPicker(){
      this.$refs.rentPicker.open();
    },
    tabsChange(e) {
      this.tabCheck = e.id
      if(this.tabCheck === 'room'){
        this.getServiceList(true);
      }else{
        this.getItemList(true);
      }
      if(this.tabCheck === 'room' && !this.isGetLocal){
        this.getLocal();
      }
    },
    getServiceList(clear = false) {
      if (clear) {
        this.status = 'loadmore'
        this.pages.page = 1;
        this.listWater = [];
        // this.$refs.waterfall.clear();
        this.list1 = [];
        this.list2 = [];
        this.roomCoordinate = [];
      }
      if (this.status === 'nomore') {
        return false;
      }
      this.status = 'loading'
      if(!this.pages.lat || !this.pages.lng){
        this.getLocal().then(res1 => {
          serviceStreet(this.pages).then(res => {
            let data = [];
            res.data.map(item => {
             data.push({
               latitude:parseFloat(item.lat),
               longitude:parseFloat(item.lng),
               iconPath:(item.category === 1)?this.mapIcon1:this.mapIcon2,
               // width:'48rpx',
               // height:'48rpx'
             });
              return item;
            });
            this.roomCoordinate = this.roomCoordinate.concat(this.roomCoordinate,data)

            this.listWater.push.apply(this.listWater, res.data);
            if (res.data.length === 0) {
              this.status = 'nomore'
            }else{
              this.status = 'loadmore'
            }
            this.pages.page++;
          });
        });

      }else{
        serviceStreet(this.pages).then(res => {
          let data = [];
          res.data.map(item => {
            data.push({
              latitude:parseFloat(item.lat),
              longitude:parseFloat(item.lng),
              iconPath:(item.category === 1)?this.mapIcon1:this.mapIcon2,
              // width:'48rpx',
              // height:'48rpx'
            });
            return item;
          });
          this.roomCoordinate = this.roomCoordinate.concat(this.roomCoordinate,data)

          this.listWater.push.apply(this.listWater, res.data);
          if (res.data.length === 0) {
            this.status = 'nomore'
          }else{
            this.status = 'loadmore'
          }
          this.pages.page++;
        });

      }



    },
    getItemList(clear = false) {
      if (clear) {
        this.statusItem = 'loadmore'
        this.pagesItem.page = 1;
        this.listWaterItem = [];
        this.$refs.waterfallItem.clear();
        this.list1Item = [];
        this.list2Item = [];
      }
      if (this.statusItem === 'nomore') {
        return false;
      }
      goodsList(this.pagesItem).then(res => {
        this.listWaterItem.push.apply(this.listWaterItem, res.data);
        if (res.data.length === 0) {
          this.statusItem = 'nomore'
        }
      })
      this.pagesItem.page++;
    },
    changeList(e) {
      this[e.name].push(e.value)
    },
    changeListItem(e) {
      this[e.name + 'Item'].push(e.value)
    },
    selectType() {
    },
    getStreet() {
      streetList({}).then(res => {
        this.streetColumns = res.data;
      });
    },
    getGoodsType() {
      // goodsType({}).then(res => {
      //   this.listItem = res.data.map(item => {
      //     return {
      //       name: item
      //     }
      //   });
      // });
    },
    selectRent(e) {
      if(e.value[0].name === '全部') {
        this.pages.type = '';
      }else{
        this.pages.type = e.value[0].name;
      }
      this.getServiceList(true);
      this.rentShow = false;
    },
    selectHouse() {
      this.getServiceList(true);
      this.houseShow = false;
    },
    selectPrice() {
      this.getServiceList(true);
      this.priceShow = false;
    },
    selectStreet(e) {
      if(e.value[0].name === '全部'){
        this.pages.jurisdiction = '';
      }else{
        this.pages.jurisdiction = e.value[0].name;
      }
      this.getServiceList(true);
      this.streetShow = false;
    },
    tabsChangeItem(e) {
      console.log(e)
      this.pages.category = e.id
      this.getServiceList(true)
    },
    navTo(url) {
      wx.navigateTo({
        url: url
      })
    },
    markerTap(e) {
      let that = this
      let id = e.markerId;
      this.mapData = that.listWater[id];
      console.log('mapData',this.mapData)
      this.popMapShow = true;
    },
    mapTap() {
      this.popMapShow = false;
    },
    afterCreateMap(){
      this.getServiceList(true);
    },
    callPostion(){
      const latitude=parseFloat(this.mapData.lat);
      const longitude=parseFloat(this.mapData.lng);
      uni.openLocation({
        latitude:latitude,
        longitude:longitude,
        name:this.mapData.name,
      })
    },
    callLocal(lat,lng){
      const latitude=parseFloat(lat);
      const longitude=parseFloat(lng);
      uni.openLocation({
        latitude:latitude,
        longitude:longitude,
        name:this.mapData.name,
      })
    },
    callPhone(phone){
      uni.makePhoneCall({
        phoneNumber: phone?.toString()
      });
    },
    getLocal() {
      let that = this;
      return new Promise((relove, reject) => {
        uni.getLocation({
          type: 'wgs84',
          success: function (res) {
            that.pages.lng = res.longitude;
            that.pages.lat = res.latitude;
            relove(res)
          },
        })
      })
    },
  },
  onPageScroll(res) {

  },
  created() {

  },
  mounted() {
    let shopMore = uni.getStorageSync('shopMore');
    if(shopMore){
      this.current = 1;
      this.tabCheck = 'item';
      uni.setStorageSync('shopMore',false);
    }
    this.getItemList();
    this.getStreet();
    this.getGoodsType();
    this.getConfig();
    this.getServiceList();
  },
}
</script>

<style lang="scss">
.room-container {
  box-sizing: border-box;
  width: 100%;
}

.body-background {
  background: {
    color: #F5F5F6;
  }
}

.screen-type-button {
  justify-content: space-between;
  //border:2rpx solid #eee;
  align-items: center;
  //padding:12rpx 24rpx;
  border-radius: 10rpx;

  .button-text {
    margin-right: 10rpx;
  }
}

.screen-date-button {
  justify-content: space-between;
  border: 2rpx solid #eee;
  align-items: center;
  padding: 12rpx 24rpx;
  border-radius: 10rpx;

  .button-date {
    //margin-right:50rpx;
  }
}

.screen-button-group {
  justify-content: flex-start;

  .screen-button + .screen-button {
    margin-left: 16rpx;
  }
}

.screen-body {
  position: fixed;
  top: 91px;
  z-index: 9;
  transition-duration: .2s;
  transition-timing-function: ease-in-out;
  transition-delay: .2s;

  -webkit-transition-duration: .2s;
  -webkit-transition-timing-function: ease-in-out;
  -webkit-transition-delay: .2s;
  background: {
    color: transparent;
  }
  padding: 16rpx 26rpx;

  &.pad {
    padding: 0rpx 26rpx 16rpx 26rpx;
    position: sticky;
    background: #fff;

    .screen-container {
      margin-bottom: 0;
    }

  }

  .screen-container {
    position: relative;
    opacity: 1;
    margin-top: 32rpx;
    margin-bottom: 26rpx;
  }

}

.item-screen {

}

@keyframes show {
  0% {
    display: block;
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.show {
  animation: show .5s;
}

.screen-search {
  padding-bottom: 16rpx;
}

.top-map {
  width: 100%;
}

#map {
  width: 100%;
  height: 1000rpx;
  background-color: gray;
}

.room-container {
  position: relative;
  bottom:20rpx;
  width: 100%;
  box-sizing: border-box;
  background: rgba(245, 245, 246, 1);
  border-radius: 20rpx 20rpx 0 0;
  padding: 24rpx 0;

  &.item-container {
    padding: 0rpx 0;
    background: none;
    margin-top: 16rpx;
  }
}

.waterfall-item {
  overflow: hidden;
  background-color: #fff;
  border-radius: 20rpx;
  margin-bottom: 16rpx;

  .waterfall-item-body {
    padding: 18rpx 16rpx;

    .title {
      margin-bottom: 12rpx;
    }

    .ext-container {
      margin-bottom: 8rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #AFB5BE;

      .street {
        color: #178AF2;
        margin-left: auto;
      }
    }

    .tags {
      margin-bottom: 10rpx;

      .tag {
        font-size: 24rpx;
        color: #AFB5BE;
        font-weight: 400;
        padding: 10rpx 12rpx;
        background-color: rgba(175, 181, 190, 0.1);
        border-radius: 8rpx;
        margin-right: 8rpx;
        margin-bottom: 8rpx;
      }
    }
  }
}

.item-screen {
  background-color: #fff;
}

#map, .map {
  width: 100%;
  height: 1000rpx;
}

#popMap, .popMap {
  position: absolute;
  z-index: 9999;
  width: 100%;
  left: 0;
  justify-content: center;

  .pop-container {
    position: relative;
    background: {
      color: #fff;
    };
    width: 550rpx;
    border-radius: 10rpx;
    padding: 26rpx;

    .title {
      justify-content: space-between;
      margin-bottom: 18rpx;
    }

    .address {
      justify-content: space-between;
    }

    .pop-add {
      position: absolute;
      bottom: -15rpx;
      left: 20%;
      width: 30rpx;
      height: 30rpx;
      transform: rotateZ(45deg);
      z-index: -1;
      background: {
        color: #fff;
      }
    }
  }
}

.map-container {
  position: relative;
  justify-content: center;
  align-items: center;
}
::v-deep .u-tabs__wrapper__nav__line {
  left: 24rpx;
}
::v-deep .u-text__price{
  display:none;
}
.room-container{
  position: relative;
  overflow:hidden;
  .gradient-background{
    height:500rpx;
    width:100%;
    position: absolute;
    top:0;
    left:0;
    z-index:1;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
  }
  .water-container{
    position: relative;
    z-index: 2;
  }
}
</style>