<template>
  <view class="page">
    <view v-if="loadComplete">
      <block v-if="isdata && !issshow">
        <scroll-view
          class="m-nearbylist"
          scroll-y="true"
          @scrolltolower="scrollbottom"
        >
          <view
            class="list-box"
            @click="gopage"
            v-for="(item, index) in Info"
            :key="index"
            :data-chain_id="item.chain_id"
            :data-chain_name="item.chain_name"
          >
            <view class="item-box">
              <view class="flex-box">
                <image :src="item.chain_img" class="flex-shop"></image
                ><label class="flex-title">{{ item.chain_name }}</label>
                <view class="flex-postion">
                  <image
                    src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/img/location.png"
                  ></image
                  ><label>{{ item.distance }}</label>
                </view>
              </view>
              <view class="flex-info">
                <view
                  class="flex-info-box"
                  @click.stop="call"
                  :data-phone="item.chain_mobile"
                  ><label class="flex-info-title">{{ __("商家电话：") }}</label
                  ><label style="color: #0095fd">{{
                    item.chain_mobile
                  }}</label></view
                >
                <view
                  class="flex-info-box"
                  @click.stop="gotomap"
                  :data-chain_id="item.chain_id"
                  :data-chain_name="item.chain_name"
                  :data-address="item.chain_district_info"
                  :data-name="item.chain_name"
                  :data-lat="item.chain_lat"
                  :data-lng="item.chain_lng"
                  ><label class="flex-info-title">{{ __("商家地址：") }}</label
                  ><label>{{ item.chain_district_info }}</label></view
                >
                <image
                  src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/img/right.png"
                ></image>
              </view>
            </view>
          </view>
          <view class="m-loading-box">
            <block v-if="ispage && !issshow">
              <view class="u-loadmore">
                <label class="u-loading"></label
                ><text class="u-loadmore-tips">{{ __("正在加载") }}</text>
              </view>
            </block>
            <block v-if="!ispage && !issshow">
              <view class="u-loadmore u-loadmore-line"
                ><text class="u-loadmore-tips">{{
                  __("没有更多数据啦！")
                }}</text></view
              >
            </block>
          </view>
        </scroll-view>
      </block>
      <view class="m-nullcontent" v-if="!isdata">
        <view class="m-nullpage-middle"
          ><label class="iconfont icon-meiyougengduo"></label>
          <view class="m-null-tip"
            ><text>{{ __("亲~什么都没有") }}</text
            ><text>{{ __("附近没什么门店!") }}</text></view
          >
        </view>
      </view>
    </view>
    <view v-if="isdata && issshow" class="open_ba">
      <view
        style="
          width: 200rpx; /*height: 100px*/
          margin: 71px auto 25px auto;
          wxcs_style_margin: 143rpx auto 50rpx auto;
          auto: 50rpx auto;
        "
      >
        <image
          src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/xcxfile/appicon/img/ditulogo.png"
          style="width: 200rpx; height: 200rpx; /*margin: 0 auto;*/"
        ></image>
      </view>
      <view style="font-size: 28rpx">{{
        __(
          "无法获取到您的定位，请开启地理位置权限，将根据你的位置展示附近门店。"
        )
      }}</view
      ><button
        style="
          width: 34%;
          height: 79rpx;
          background: #33cc66;
          margin: 39px auto 0 auto;
          wxcs_style_margin: 79rpx auto 0 auto;
          color: #fff;
          line-height: 80rpx;
          text-align: center;
        "
        open-type="openSetting"
        @opensetting="handler"
      >
        {{ __("去开启") }}
      </button>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  data: function () {
    return {
      options: {},
      page: 1,
      ispage: true,
      flag: true,
      Info: [],
      latitude: 0,
      longitude: 0,
      isdata: false,
      issshow: 0,
      item_id: 0,
      store_id: null,
      chain_id: null,
      rows: 10,
      loadComplete: false, // 没有加载数据前不显示的对应内容
    };
  },
  computed: mapState([
    "Config",
    "StateCode",
    "notice",
    "plantformInfo",
    "shopInfo",
    "userInfo",
    "hasLogin",
  ]),
  onLoad(options) {
    uni.setNavigationBarTitle({
      title: this.__("附近门店"),
    });

    var that = this;
    that.setData({
      options: options,
      store_id: options.store_id ? options.store_id : "",
      item_id: options.item_id ? options.item_id : "",
    });

    that.$.getLocation({
      type: "wgs84",
      success: function (response) {
        that.setData({
          latitude: response.latitude,
          longitude: response.longitude,
        });

        that.getNearbylist();
      },
      fail: function () {
        that.setData({
          isdata: true,
        });

        that.$.confirm(that.__("手机定位失败！"));

        that.getNearbylist();
      },
    });
  },

  methods: {
    ...mapMutations([
      "login",
      "logout",
      "getPlantformInfo",
      "forceUserInfo",
      "getUserInfo",
    ]),
    getNearbylist: function () {
      var that = this;
      var params = {
        lat: that.latitude,
        lng: that.longitude,
        page: that.page,
        rows: that.rows,
        store_id: that.options.store_id ? that.options.store_id : "",
        item_id: that.options.item_id ? that.options.item_id : "",
      };
      that.$.request({
        url: this.Config.URL.store.getNearChain,
        data: params,
        dataType: "json",
        success: function (data, status, msg, code) {
          if (status == 200) {
            for (let i = 0; i < data.items.length; i++) {
              data.items[i]["distance"] = that.$.distanceFormat(
                data.items[i]["distance"]
              );

              let coord = that.$.bMapTransQQMap(
                data.items[i]["chain_lng"],
                data.items[i]["chain_lat"]
              );
              data.items[i]["chain_lng"] = coord.lng;
              data.items[i]["chain_lat"] = coord.lat;
            }

            that.setData({
              isdata: true,
              loadComplete: true,
            });

            if (data.page >= data.total) {
              that.setData({
                flag: false,
                ispage: false,
                Info: that.Info.concat(data.items),
              });
            } else {
              that.setData({
                flag: true,
                ispage: true,
                Info: that.Info.concat(data.items),
              });
            }
          } else {
            that.setData({
              flag: false,
              ispage: false,
              loadComplete: true,
            });
          }
        },
        fail: function (data) {
          that.setData({
            loadComplete: true,
          });
          that.$.alert("网络异常请重试！");
        },
      });
    },
    gotomap: function (e) {
      var that = this;
      if (that.options.issub) {
        that.backCheckout(e.currentTarget.dataset);
      } else {
        that.$.openLocation({
          latitude: parseFloat(e.currentTarget.dataset.lat),
          longitude: parseFloat(e.currentTarget.dataset.lng),
          name: e.currentTarget.dataset.name,
          address: e.currentTarget.dataset.address,
          scale: 28,
        });
      }
    },
    gopage: function (e) {
      var that = this;
      if (that.options.issub) {
        that.backCheckout(e.currentTarget.dataset);
      } else if (that.options.is_flag) {
        that.setChain(e.currentTarget.dataset);
      } else {
        this.$.gotopage(
          "/chain/chain/index?chain_id=" + e.currentTarget.dataset.chain_id
        );
      }
    },
    backCheckout: function (data) {
      let that = this;
      var options = this.options;
      options.chain_id = data.chain_id;

      var params = {};
      var info_list = this.Info;
      for (var r = 0; r < info_list.length; r++) {
        if (info_list[r].chain_id == data.chain_id) {
          params = info_list[r];
        }
      }

      options.ChainInfo = params;

      //uni.setStorageSync('chain_id', data.chain_id);
      //uni.setStorageSync('chain_name', data.chain_name);

      that.$.navigateBack(1, function () {
        that.notice.postNotificationName("RefreshOrderChain", options);
      });
    },
    scrollbottom: function () {
      if (this.flag) {
        var e = this;
        e.setData({
          flag: false,
        }),
          clearTimeout(t);
        var t = setTimeout(function () {
          e.setData({
            type: e.type,
            page: parseInt(e.page) + 1,
            rows: 10,
          }),
            e.getNearbylist();
        }, 500);
      }
    },
    setChain: function (e) {
      var that = this;
      //console.log(e);
      that.$.showModal({
        title: "提示",
        content: "确定该门店成为您的默认自提点吗？",
        success: function (res) {
          if (res.confirm) {
            uni.setStorageSync("chain_id", e.chain_id);
            uni.setStorageSync("chain_name", e.chain_name);

            var params = {
              chain_id: e.chain_id,
            };

            that.$.request({
              url: that.Config.URL.setChain,
              data: params,
              dataType: "json",
              success: function (data, status, msg, code) {
                if (status == 200) {
                  that.$.gopage("/pages/index/index");
                } else {
                  that.$.alert("设置失败，请重新选择");
                }
              },
            });
          }
        },
      });
    },
    selectchain: function (e) {
      var params = {},
        info_list = this.Info;
      for (var r = 0; r < info_list.length; r++)
        info_list[r].chain_id == e.currentTarget.dataset.chain_id &&
          (params = info_list[r]);
      var that = this;
      that.$.navigateBack(1, function () {
        var e = {
          chain_id: that.chain_id,
          spinfo: that.spid,
          ChainInfo: params,
        };
        that.notice.postNotificationName("RefreshOrderChain", e);
      });
    },
    selectAddress: function (e) {
      var params = {},
        info_list = this.Info;
      for (var r = 0; r < info_list.length; r++)
        info_list[r].chain_id == e.currentTarget.dataset.chain_id &&
          (params = info_list[r]);
      var that = this;
      that.$.navigateBack(1, function () {
        var e = {
          chain_id: that.chain_id,
          spinfo: that.spid,
          ChainInfo: params,
        };
        that.notice.postNotificationName("RefreshOrderChain", e);
      });
    },
    call: function (e) {
      let that = this;
      that.$.makePhoneCall({
        phoneNumber: e.currentTarget.dataset.phone,
      });
    },
  },
};
</script>



<style lang="scss">
@import "../../styles/_variables";

.list-box {
  background-color: #fff;
  color: #333;
}

.item-box {
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.flex-box {
  display: flex;
  align-items: center;
  position: relative;
}

.flex-shop {
  width: 34rpx;
  height: 34rpx;
}

.flex-title {
  font-size: 30rpx;
  margin-left: 10rpx;
  max-width: 75%;
  overflow: hidden;
  height: 40rpx;
  line-height: 40rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flex-postion {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
}

.flex-postion image {
  width: 20rpx;
  height: 26rpx;
}

.flex-postion label {
  font-size: 24rpx;
  color: #9b9b9b;
  margin-left: 10rpx;
}

.m-nearbylist {
  position: absolute;
  width: 100%;
  height: 100%;
}

.flex-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flex-info view {
  margin: 10rpx 0 0 0;
  font-size: 28rpx;
}

.flex-info-box {
  display: flex;
  align-items: flex-start;
}

.flex-info label {
  display: inline-block;
  vertical-align: top;
  word-wrap: break-word;
  width: 520rpx;
}

.flex-info image {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  right: 10rpx;
}

.flex-info-title {
  flex-basis: 145rpx;
}

.open_ba {
  width: 80%;
  margin: 0 auto;
}

.open_dl {
  width: 34%;
  height: 79rpx;
  background: #33cc66;
  border-radius: 20rpx;
  text-align: center;
  color: #fff;
  margin: 79rpx auto 0 auto;
  line-height: 75rpx;
}

.nearbylist-item {
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #eee;
  background: white;
}

.nearbylist-item:last-child {
  border: none;
}

.item-info {
  position: relative;
  font-size: 28rpx;
}

.item-name {
  display: inline-block;
  font-size: 30rpx;
}

.item-phone {
  line-height: 45rpx;
  display: flex;
  align-items: center;
}

.item-distance {
  float: right;
  font-size: 26rpx;
  color: #bbb;
}

.item-address {
  position: relative;
  font-size: 26rpx;
  color: #bbb;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  margin-right: 40rpx;
  line-height: 40rpx;
}

.item-info::after {
  content: " ";
  display: inline-block;
  height: 12rpx;
  width: 12rpx;
  border-width: 4rpx 4rpx 0 0;
  border-color: #ebebe7;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  top: -4rpx;
  position: absolute;
  top: 72%;
  right: 4rpx;
  padding: 3rpx;
}

.m-nearbylist {
  height: 100%;
  position: absolute;
}
</style>