<template>
  <div>
    <div v-if="isShopListBtn === false">
      <div class="shoplist-service">
        <div style="display:flex;align-items:center;">
       
          <image mode="aspectFit" src="https://eshangtech.com/ShopICO/icos/shop-dw.png" style="margin-right:8rpx;width:33rpx;height:33rpx;"></image>
          
          <span class="service-name" style="flex:5">
            <!-- 萧山服务区 -->
            {{serverPart.ServerPart_Name}}
          </span>
          
        </div>
        <div class="service-btn" @click="toggleSever">更换服务区<span class='sj'></span></div>
      </div>
      <!-- 门店列表 -->
      <div class="shoplist">
       
        <div class="shop-unit " v-for="(item,o) in shopData" :key="o">
          <div class="coupon-card" @click="goShop(item)">
            <div class="conpon-img">
              <image :src="item.MERCHANTS_LOGO || 'https://eshangtech.com/ShopICO/no-picture.png'"></image>
            </div>
            <div style="flex:7;"> 
              <div class="flex-b">
                <span class="coupon-title">{{item.MERCHANTS_NAME}}</span>
                <span class="title-ico" v-if="item.SCANCODE_ORDER===1"></span>
              </div>
              <div class="flex-s">
                <van-rate
                  :value='item.MERCHANTS_SCORE'
                  size="12"
                  allow-half=true
                  color="#f28c44"
                  void-color="#eee"
                  void-icon="star"
                  readonly
                >
                </van-rate>
                <span class="text263 mr32 ">{{" "+item.MERCHANTS_SCORE}}</span>
                <span class="text263">月售{{item.MONTHLYSALES}}</span>
              </div>
              <div class="flex-s text246">
                <span class="text246 mr32 icon-trade">{{item.SHOPTRADE_TEXT || "品类"}}</span>
                <span class="text246">人均 ￥{{item.PERCAPITA}}</span>
              </div>
              <div class="flex-b mtb16">
                <span class="shop-comment-text">{{item.COMMENT ? '"'+item.COMMENT+'"' : '"等你来评价哟"'}}</span>
                <span v-show="item.CouponList.length>0" class="icon-coupon">优惠券</span>
              </div>
              <hr/>  
            </div>
            <!-- <image class="my-ico4" src="https://eshangtech.com/ShopICO/you-ico.png"></image> -->
          </div>
          
        </div>
      </div>
    </div>
    <div class="loading-text" v-if="shopData.length>0 ">{{pageMsg.isLoadMore? '正在加载数据...':'——— 尽请期待更多精彩 ———'}}</div>
    <div v-if="pageMsg.isLoadMore===false">
      <no-data :text="''" :isShow="shopData.length" />
    </div>
    <div v-if="isShopListBtn === true" class="set-qx">
        
      <!-- <div >开通权限，我们才能提供附近的服务区门店信息给您！</div> -->
      <!-- <div v-else-if="isShopListShow === false">开启GPS刷新页面，我们才能提供附近的服务区门店信息给您！</div> -->
      <!-- <div v-else-if="isShopListBtn && isShopListShow === false">开启GPS或者微信权限，我们才能提供附近的服务区门店信息给您！</div> -->
      <button type="primary"  @click="bindopensetting" open-type="openSetting" @opensetting='bindopensetting' class="set-btn" >开启定位</button>
      <!-- <div>未开启GPS，我们才能提供附近的服务区门店信息给您！</div>
      <div @click="open" class="set-btn">开通权限</div> -->
    </div>
    <van-popup :show="isShow"
      position="bottom"
      overlay="false"
      @close="onClose">
      <van-picker show-toolbar @cancel="isShow=false" @confirm="chosePart" :columns="serverList" value-key="showName"/>
    </van-popup>
    <!-- <popGet/> -->
  </div>

</template>

<script>
import noData from '@/components/noData.vue'
// import { CITY_GET_LOCATION } from '@/store/mutation-types'
import { mapMutations, mapGetters } from 'vuex'
export default {
  data () {
    return {
      isShow: false,
      shopData: [],
      isShopListShow: true,
      isShopListBtn: false,
      isHidden: false, // 控制折叠
      serverPartList: [],
      serverPart: {},
      currentIndex: 0,
      canIuse: false,
      sessionKey: '',
      pageMsg: {
        pageSize: 10,
        pageIndex: 1,
        total: 0,
        isLoadMore: false
      }
    }
  },
  components: {
    noData
  },
  computed: {
    ...mapGetters({
      homeserverPart: 'serverPart',
      //   'provinceCode': 'provinceCode',
      'user': 'user',
      'serverList': 'severList',
      'appointServerPart': 'appointServerPart'
    })
  },
  methods: {
    // ...mapActions('city', {
    //   'getLocation': CITY_GET_LOCATION
    // }),
    ...mapMutations({
    //   'setprovinceCode': 'setprovinceCode',
      setSeverList: 'severList',
      setServerPart: 'setAppointServerPart',
      'setArea': 'setHomeServer'
    }),

    toggleSever () {
      if (this.serverList.length > 0) {
        this.isShow = !this.isShow
      } else {
        mpvue.showToast({title: '没有可选择服务区数据。', icon: 'none'})
      }
    },
    collapse (item) {
      item.isShow = !item.isShow
      // this.$forceUpdate()
    },
    getShopList () {
      let _this = this
      _this.$api.getCoop({
        action_type: 'GetSellerList',
        showSales: 1,
        showCoupon: 1,
        showComment: 1,
        serverpartId: this.serverPart.ServerPart_Id,
        provinceCode: this.serverPart.ProvinceCode,
        scancodeOrder: 1,
        pageSize: _this.pageMsg.pageSize,
        pageIndex: _this.pageMsg.pageIndex
      }).then(function (data) {
        if (data.ResultCode === '100') {
          data.Data.List.map(n => {
            if (n.COUPON_TYPE === 1000) {
              n.coast = Math.round((n.WITH_AMOUNT - n.USED_AMOUNT) * 100) / 100
            }
          })
          _this.shopData = _this.shopData.concat(data.Data.List)
          if (data.Data.TotalCount > _this.shopData.length) {
            _this.pageMsg.isLoadMore = true
          } else {
            _this.pageMsg.isLoadMore = false
          }
        }
      })
    },

    getLocalServer () { // 根据定位获取周边服务区
      let _this = this
      mpvue.choosePoi({
        type: 'wgs84',
        success: function (res) {
          let latitude = res.latitude
          let longitude = res.longitude
          _this.$api.getCoop({
            action_type: 'getServerPartByLocation',
            action_data: latitude,
            action_record: longitude,
            distance: 150,
            type: 1000
          }).then(function (data) {
            if (data.ResultCode === '100') {
              let _data = data.Data.List
              _data.map(n => { n.showName = n.ServerPart_Name + '(' + Math.round(n.Distance * 100) / 100 + 'km)' })
              _this.serverPartList = _data
              _this.setSeverList(_data)
              let hasIt = _data.findIndex(element => {
                return _this.serverPart.ServerPart_Id === element.ServerPart_Id
              })
              if (hasIt === -1) {
                _this.serverPart = _data[0]
                _this.setArea(_data[0])
                // _this.setServerPart(_data[0])
              }
              _this.getShopList()
              _this.isShopListBtn = false
            }
          })
        },
        fail (res) {
          _this.isShopListBtn = true
        }
      })
    },
    bindopensetting (e) {
      if (e.mp.detail.authSetting && e.mp.detail.authSetting['scope.userLocation']) {
        this.getLocalServer()
      }
    },
    goShop (item) {
      let id = item.SERVERPARTSHOP_IDS.split(',')[0]
      // let arr = {
      //   id: id,
      //   shopName: item.MERCHANTS_NAME,
      //   serverpartId: item.SERVERPART_ID

      // }
      //   this.setprovinceCode(item.PROVINCE_CODE)
      // this.$store.commit('nowStore', arr)
      mpvue.navigateTo({url: '/pages/shopPages/shop/main?id=' + id + '&mid=' + item.MERCHANTS_ID + '&province=' + item.PROVINCE_CODE})
    },
    chosePart (event) {
      let index = event.target.index
      this.serverPart = this.serverList[index]
      this.setServerPart(this.serverList[index])
      this.pageMsg.pageIndex = 1
      this.pageMsg.isLoadMore = true
      this.shopData = []
      this.onClose()
      this.getShopList()
    },
    onClose () {
      this.isShow = false
    }
  },
  onReachBottom () {
    if (this.pageMsg.isLoadMore) {
      this.pageMsg.pageIndex += 1
      this.getShopList()
    }
  },
  onShow () {
    if (this.homeserverPart.ServerPart_Id === this.appointServerPart.ServerPart_Id) {
      if (this.serverPart.ServerPart_Id !== this.appointServerPart.ServerPart_Id) {
        this.serverPart = this.homeserverPart
        this.shopData = []
        this.pageMsg.pageIndex = 1
        this.pageMsg.isLoadMore = true
        // this.getLocalServer()
        this.getShopList()
      }
    }
  },
  onPullDownRefresh () {
    let _this = this
    _this.shopData = []
    _this.pageMsg.isLoadMore = true
    _this.pageMsg.pageIndex = 1
    _this.getLocalServer()

    setTimeout(function () {
      mpvue.stopPullDownRefresh()
    }, 1000)
  },
  onLoad () {
  }
}
</script>

<style lang="stylus" scoped>
.mr32 
  margin-right 32rpx
.mt8
  margin-top 16rpx
.text263
  font-size 26rpx
  color #333
.text246
  font-size 24rpx
  color #666
.flex-s
  display flex
  align-items center
.flex-b
  display flex
  align-items center
  justify-content space-between
.mtb16
  margin 16rpx 0 24rpx 0
hr
  color #eeeeee
  height 2rpx
  width 100%
  background: #eee

.shoplist-service {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  font-size: 24rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  background:#fff;
}
.service-btn 
  border-radius 8rpx
  /* width: 120rpx; */
  height 40rpx
  color #d5c59d
  background #383838
  padding 8rpx 16rpx
  border-radius 16rpx
  line-height 40rpx
  display flex
  align-items baseline


.service-name {
  color: #555;
  font-weight: bolder;
  font-size: 28rpx;
  display: inline-block;
}

.sj {
  width:0;
  height:0;
  border: 0;
  border-left: 16rpx solid transparent;
  border-bottom: 14rpx solid #C6A375;
  margin-left: 16rpx;
}
.shoplist 
  
  margin-top 16rpx

.Service {
  background-color: #f2f2f2;
}

.title-ico 
  background url(https://eshangtech.com/wanmeiyizhanImg/shoplist/kyy.png) no-repeat
  width 80rpx
  height 34rpx
  background-size contain
  margin-left 16rpx

.shop-unit
  // margin 36rpx 36rpx
  padding 26rpx 26rpx 0 26rpx 
  background-color #ffffff
  // border-radius 16rpx
.icon-coupon
  background url(https://eshangtech.com/ShopICO/icos/y-yhq.png) no-repeat left center
  background-size contain
  padding-left 40rpx
  height 27rpx
  line-height 27rpx
  font-size 24rpx
  color #EC5930
.icon-trade
  display flex
  align-items center
.icon-trade:before
  content ''
  background url(https://eshangtech.com/wanmeiyizhanImg/trade.png) no-repeat center
  background-size contain
  width 27rpx
  height 24rpx
  margin-right 4rpx
  
.shop-comment-text
  color #F3B680
  background #FDF5EC
  padding 0 4rpx 
  border-radius 2rpx
  font-size 20rpx
  max-width 318rpx
.coupon-card 
  display flex
  // justify-content space-between
  align-items center
  font-family 'PingFang SC '
  // padding-bottom 24rpx

.conpon-img 
  margin-right 24rpx
  width 190rpx
  height 190rpx
.conpon-img image
  width 180rpx
  height 180rpx
  border-radius 8rpx
.coupon-title 
  font-size 30rpx
  font-family 'PingFang SC Bold'
  color #313131
  font-weight bolder
.coupon-store 
  font-size 28rpx
  color #444
  
.coupon-detail 
  display flex
  justify-content space-between
  align-items flex-end 
.coupon-price
  color #D74942
  font-size 40rpx
.coupon-price-unit
  color #d7493f
  font-size 20rpx
.coupon-price-though
  // text-decoration line-through
  color #a1a1a1
  font-size 24rpx
  margin-left 32rpx
.coupon-price-sell
  color #454246
  font-size 24rpx
  display flex
  justify-content space-between
  align-items center
.coupon-get-btn
  background #C6A375
  border-radius 32rpx
  width 164rpx
  height 50rpx
  color #fff
  line-height 50rpx
  font-size 24rpx
  text-align center
  box-shadow none

// 定位权限
.set-qx
  position fixed
  top 50%
  left 50%
  width 80%
  transform translate(-50%,-50%)
  text-align center
  font-size 30rpx

.set-btn
  padding  0rpx 40rpx
  /* background  #444 */
  display inline-block
  border-radius 10rpx
  text-align center
  margin-top 60rpx
  font-size  24rpx

.loading-text
  text-align center
  font-size 24rpx
  color #a1a1a1
  line-height 80rpx
</style>