<template>
  <div class="container store-page">
    <div class="store-toolbar">
      <div class="toolbar">
        <div class="item item1" >
         <van-search
            :value="value"
            placeholder="请输入搜索关键词"
            show-action
            shape="round"
            focus
            @change="onChange"
            @cancel="onCancel"
          />
        </div>
      </div>
    </div>
    <scroll-view scroll-y class="store-content">
      <v-card style="height:auto" :thumb="item.icon" v-for="(item, index) in storeList" :key="item.id">
        <div class="store-info">
          <div class="title txt-clip">{{item.name}}</div>
          <div class="content">
            <div class="left">
              <div class="desc">
                <van-rate :value="item.star" size="10" color="#ff5500" allow-half void-color="#eee" void-icon="star" />
                <span class="rate-num">{{item.star}}</span>
              </div>
              <div class="phone">
                <van-icon name="phone" class="phone-icon" />
                <div @click="callPhone(item.managerMobile)"> {{item.managerMobile}} </div>
              </div>
            </div>
            <div class="right" v-if="item.distance" @click="openLocation(item)">
              <div class="navigation">
                <van-icon name="location" />
                导航
              </div>
              <div>
                距您{{item.distance}}KM
              </div>
            </div>
          </div>
          <div>
            <div class="">
              {{item.addrProvinceName + item.addrCityName + item.addrDistrictName}}
            </div>
            <div class="tags">
              <div class="tag" v-for="(tag, index2) in item.storeBizList" :key="tag.id">{{tag.bizTypeName}}</div>
            </div>
          </div>
        </div>
      </v-card>
      <no-data :options="list"/>
    </scroll-view>
  </div>
</template>

<script>
import { getListStore } from '@/api/store.js'
import NoData from '@/components/NoData';
import storage from '@/utils/storage.js'
export default {
  name: 'storeSearch',
  components: { 'no-data': NoData },
  data() {
    return {
      storeList: [],
      isSearched: false,
      searchVal: '',
      isfocus: true,
      pageNo: 1,
      pageSize: 10,
      isLastPage: false,
      areaCode: '',
      currentPosition: {
        lat: '',
        lng: ''
      },
    };
  },
  computed: {

  },
  methods: {
    onChange (e) {
      this.isSearched = false
      this.isLastPage = false
      this.searchVal = e.mp.detail
      this.pageNo = 1
      this.storeList = []
      this.getStoreList()
      console.log(e, "e.detail")
      console.log(this.searchVal, "this.searchVal")
    },
    onCancel () {
      wx.navigateBack({
        delta: 1
      })
    },
    callPhone(phone) {
      wx.makePhoneCall({
        phoneNumber: phone
      });
    },
    getStarNum(level) {
      const star = (5 - 0.5 * (level - 1)).toString();
      return star.indexOf('.') > -1 ? star : star + '.0';
    },
    openLocation(item) {
      wx.openLocation({
        latitude: item.lat - 0,
        longitude: item.lng - 0,
        name: item.name,
        address: item.addrProvinceName + item.addrCityName + item.addrDistrictName + item.addrDetail
      });
    },
    // 格式化数据
    formatList(list) {
      const _this = this;
      if (list.length) {
        list.forEach(item => {
          item.distance = item.distance ? (item.distance/1000).toFixed(2) : '';
          item.star = this.getStarNum(item.level);
        });
        return list;
      } else {
        return [];
      }
      return [];
    },
    getStoreList() {
      const val = this.searchVal
      if(val==''||val.length==0){
        return false
      }
      const _this = this;
      wx.showLoading({
        mask: true,
        title: '加载中'
      });
      let params={
        name: val,
        enableFlag: 1,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        lat: this.currentPosition.lat,
        lng: this.currentPosition.lng
      }
      if (this.areaCode.length == 4){ // 查询市的门店
        params.addrCity = this.areaCode
      } else {  // 查询区的门店
        params.addrDistrict = this.areaCode
      }
      if (!params.lat && !params.lng){
        delete params.lat
        delete params.lng
      }
      getListStore(params).then(res => {
          if (res.status === '200') {
            _this.isSearched = true
            if (res.data.list && res.data.list.length) {
              if(this.pageNo>1){
                _this.storeList = _this.storeList.concat(_this.formatList(res.data.list))
              }else{
                _this.storeList = _this.formatList(res.data.list)
              }
              let len = _this.storeList.length
              console.log(len)
              console.log(res.data.count)
              if(len>=res.data.count){
                if(this.pageNo>1){
                  wx.showToast({
                  	title: '已经是最后一页'
                  })
                }
              	_this.isLastPage = true
              }else{
                _this.isLastPage = false
              }
            } else {
              _this.storeList = []
            }
          } else {
            wx.showToast({
              title: res.message,
              icon: 'none',
              duration: 2500
            });
          }
          setTimeout(function(){
            wx.hideLoading();
          },500)
        })
    },
  },
  // 监听用户上拉触底事件
  onReachBottom() {
  	if(!this.isLastPage){
  		this.pageNo = this.pageNo + 1
  		this.getStoreList()
  	}
  },
  onShow() {
    this.searchVal = '';
    this.isfocus = true
    this.isSearched = false
    this.isLastPage = false
  },
  onLoad(options) {
    console.log(options)
    this.currentPosition.lat = options.lat
    this.currentPosition.lng = options.lng
    this.areaCode = options.areaCode
  }
};
</script>

<style lang="stylus">
._v-card .v-card{
  border-bottom: 1px solid #eee;
  height:auto;
}
.vcard .van-card__img{
  border-radius:5px;
}
.container {
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding-top: 70rpx;
}

.store-content {
  height: 100%;
  box-sizing: border-box;
  margin-top :10px;
}

.store-toolbar {
  position: fixed;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
  background-color: #fff;
  z-index: 9;
  .toolbar {
    display: flex;
    justify-content: space-around;
    height: 70rpx;

    .item {
      width: 100%;
    }

    .item1 {
      text-align: right;
    }
  }

  .toolbar-detail {
    background-color: #fff;
    position: absolute;
    top: 73rpx;
    left: 0;
    right: 0;
    opacity: 0;

    &.show {
      opacity: 1;
    }
  }
}

.icon {
  position: relative;
  top: 4rpx;
}

.store-info {
  box-sizing: border-box;
  font-size: 25rpx;
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .content {
    display: flex;
    flex: 1;

    .left {
      flex: 1;
    }

    .navigation {
      font-size: 1em;
      text-align: right;
    }
  }

  .title {
    font-size: 1em;
    padding: 10rpx 0;
    font-weight:bold;
  }

  .desc {
    color: #80848f;
    display: flex;
  }

  .rate-num {
    padding: 0 15rpx;
  }

  .phone {
    display: flex;
    align-items: center;
    padding: 12rpx 0;
    color:#57a3f3;
  }

  .tags {
    margin-top: 5rpx;
    display: flex;
    font-size: 0.8em;

    .tag {
      color: #808695;
      border: 1rpx solid rgba(255, 0, 0, 0.3);
      padding: 5rpx 10rpx;
    }

    .tag + .tag {
      margin-left: 10rpx;
    }
  }
}

.checkbox-group {
  padding: 5px 20px 5px 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.checkbox-item {
  width: 40vw;
  padding: 15rpx 0;
}

.toolbar-detail-control {
  display: flex;

  .btn {
    flex: 1;
  }
}
</style>
