<template>
  <view class="view-main liu-chooseAddress-container">
    <view class="hander" v-if="showSearchIpunt">
      <uni-nav-bar
        title=""
        :fixed="true"
        :statusBar="false"
        :border="false"
        :left-width="'132rpx'"
        :right-width="'0rpx'"
      >
        <block slot="left">
          <view class="left-block" @click="handerSkip">
            <text class="iconfontAili icon-dingwei1"></text>
            <text class="city-block">{{
              originalData.result.addressComponent.city
            }}</text>
            <text class="iconfontAili icon-xiala"></text>
          </view>
        </block>
        <view class="input-view">
          <uni-icons
            type="search"
            size="22"
            color="#666666"
            style="line-height: 60rpx"
          />
          <input
            confirm-type="search"
            class="input"
            type="text"
            placeholder="请输入收货地址"
            @click="onSearch"
            @input="handerAddress"
          />
        </view>
      </uni-nav-bar>
    </view>
    <map
      v-if="!showSearchAddress && !isFound"
      :latitude="latitude"
      :longitude="longitude"
      :scale="16"
      style="width: 100%; height: 100vh; top: -200px"
      ref="map"
      id="map"
      :enable-zoom="isEnableScroll"
      :enable-scroll="isEnableScroll"
      :markers="markers"
      @regionchange="handerRegionchange"
    >
      <image class="map-marker" v-if="isDragMarker" :src="markerIcon"></image>
    </map>
    <view class="page-con" v-if="!showPoisList && !showSearchAddress">
      <view class="con-hd" v-if="showCurrAdd">
        <view class="current-block-left">
          <view class="current-name">{{ currAddress }}</view>
          <view class="current-address">{{ currRoadAddress }}</view>
        </view>
        <view class="current-block-right" @click="chooseAddressView">
          <view class="btn-edit-block">修改地址</view>
        </view>
      </view>
      <view class="con-bd">
        <view
          class="choose-address"
          @click="chooseAddressView"
          v-if="showSelectAddBtn"
        >
          选择收货地址<text class="iconfontAili icon-right"></text>
        </view>
        <view class="con-bd-item">
          <view class="con-bd-item-name">门牌号</view>
          <view class="con-bd-item-con">
            <input
              type="text"
              v-model="formData.detailAddress"
              placeholder="详细地址，例如1层101室"
              placeholder-class="input-placeholder"
            />
          </view>
        </view>
        <view class="con-bd-item">
          <view class="con-bd-item-name">标签</view>
          <view class="con-bd-item-con">
            <view
              :class="
                formData.lableName == index
                  ? 'lable-item lable-item-on'
                  : 'lable-item'
              "
              v-for="(item, index) in labelData"
              :key="index"
              @click="chooseLable(index)"
              >{{ item }}</view
            >
          </view>
        </view>
        <view class="con-bd-item">
          <view class="con-bd-item-name">联系人</view>
          <view class="con-bd-item-con con-bd-item-con2">
            <input
              type="text"
              v-model="formData.userName"
              placeholder="请填写收货人姓名"
              placeholder-class="input-placeholder"
            />
            <view class="con-bd-sex-box" @click="chooseSex(1)">
              <image
                :class="['choose-sex-icon', formData.sexType == 1]"
                :src="formData.sexType == 1 ? sele2Icon : noseleIcon"
                mode=""
              ></image>
              先生
            </view>
            <view class="con-bd-sex-box" @click="chooseSex(2)">
              <image
                class="choose-sex-icon"
                :src="formData.sexType == 2 ? sele2Icon : noseleIcon"
                mode=""
              ></image>
              女士
            </view>
          </view>
        </view>
        <view class="con-bd-item">
          <view class="con-bd-item-name">手机号</view>
          <view class="con-bd-item-con">
            <input
              type="number"
              maxlength="11"
              v-model="formData.userPhone"
              placeholder="请填写收货人手机号码"
              placeholder-class="input-placeholder"
            />
          </view>
        </view>
        <!-- <view class="con-bd-agree" @click="changeAgree">
          <image
            class="agreeicon"
            :src="agreeState ? seleIcon : noseleIcon"
            mode=""
          ></image>
          <view class="agreetext">设为默认地址</view>
        </view> -->
        <view
          :class="[
            'con-ft-btn',
            {
              'con-ft-btn1': addressInfo && addressInfo.address,
              'con-ft-btn3': !addressInfo || !addressInfo.address,
            },
          ]"
          @click="submitAddress"
        >
          保存地址
        </view>
        <view
          v-if="ud_id"
          class="con-ft-btn con-ft-btn2"
          @click="deleteAddress"
        >
          删除地址
        </view>
      </view>
    </view>
    <view class="address-list" v-if="showPoisList && !showSearchAddress">
      <scroll-view
        class="uni-swiper-list"
        scroll-y
        :scroll-top="0"
        enhanced
        :show-scrollbar="false"
      >
        <view
          class="address-item"
          v-for="(item, index) of nearbyAddressList"
          :key="index"
          @click="handerSetAddress(item)"
        >
          <view class="item-left">
            <view class="item-name">{{ item.name }}</view>
            <view class="item-address">{{ item.addr }}</view>
          </view>
          <view class="item-right">
            <image
              class="item-active"
              :src="acitveAddress(item)"
              mode=""
            ></image>
          </view>
        </view>
      </scroll-view>
      <view
        class="reposition-block"
        v-if="showReposition"
        @click="getLocation('found')"
      >
        <text class="iconfontAili icon-zhongxindingwei"></text>
      </view>
      <uMask
        :show="showMask"
        v-if="showMask"
        :zIndex="2"
        @click="showMask = false"
      ></uMask>
    </view>
    <scroll-view
      v-if="showSearchAddress && searchAddress.length > 0"
      class="uni-swiper-search-list"
      scroll-y
      scroll-with-animation="true"
      :scroll-top="scrollTop"
    >
      <view class="search-address-list">
        <view
          class="search-address-item"
          v-for="(item, index) of searchAddress"
          :key="index"
        >
          <view
            class="search-address-item-left"
            @click="handerSetAddress(item)"
          >
            <view class="item-left-name" v-html="item.searchName"></view>
            <view class="item-left-address">{{
              item.detailedInformation
            }}</view>
          </view>
          <view class="search-address-item-right">{{ item.distance }}km</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import uMask from "./umask.vue";
import BMapLib from "../../helpers/GeoUtils.js";
import { mapState, mapMutations } from "vuex";
var bmap = require("../../libs/bmap-wx.js");
export default {
  components: { uMask },
  data() {
    return {
      map: null,
      showMask: false,
      originalData: {
        result: {
          addressComponent: {
            city: "正在定位",
          },
          sematic_description: "定位中..",
        },
      },
      nearbyAddressList: [],
      formData: {
        detailAddress: "",
        userName: "",
        userPhone: "",
        lableName: null,
        sexType: 1, //1 先生 2 女士
      },
      labelData: ["家", "公司", "学校"],
      addressInfo: {}, //选中的地址信息
      agreeState: false, //是否是默认地址
      longitude: null,
      latitude: null,
      markerIcon: "/static/images/marker.png",
      seleIcon: require("./static/sele.png"),
      sele2Icon: "/static/images/sele2.png",
      noseleIcon: require("./static/no-sele.png"),
      oldObj: "",
      showMarkerIcon: false,
      showPoisList: false,
      showSearchAddress: false,
      searchAddress: [],
      map_markers: [],
      markers: [],
      showSelectAddBtn: true,
      showSearchIpunt: false,
      showCurrAdd: false,
      isDragMarker: false,
      isEnableScroll: false,
      showReposition: false,
      currAddress: "",
      currRoadAddress: "",
      ud_id: null,
      areaData: [],
      cityData: [],
      provinceData: [],
      isFound: false,
      issub: false,
      options: {},
      spid: "",
    };
  },
  computed: {
    ...mapState([
      "Config",
      "StateCode",
      "notice",
      "plantformInfo",
      "shopInfo",
      "userInfo",
      "hasLogin",
    ]),
  },
  onUnload() {
    uni.removeStorageSync("city");
  },
  onShow(options) {
    this.getAppDistrict();
    let city = uni.getStorageSync("city");
    if (city) {
      this.originalData.result.addressComponent.city = city;
    } else {
      if (this.ud_id && this.ud_id != "-1") {
        this.getCurrAddress();
      } else {
        this.getLocation();
      }
    }
  },
  onLoad(options) {
    if (options.ud_id) {
      this.ud_id = options.ud_id;
    }

    this.setData({
      issub: options.issub,
      ud_id: options.ud_id || 0,
      spid: options.spid || "",
      options: options,
    });
  },
  methods: {
    getAppDistrict() {
      let that = this;
      // 读取地区数据 【为了不同项目的小程序包体大小考虑，这里不能直接把数据放前端，可以使用服务端缓存和浏览器与小程序的本地存储来优化】
      let district_data = uni.getStorageSync("district_data");
      if (!district_data) {
        that.$.request({
          url: that.cf.URL.getAppDistrict,
          data: {},
          loading: false,
          ajaxCache: {
            timeout: this.cf.CACHE_EXPIRE,
          },
          success: function (data, status, msg, code) {
            if (status == 200) {
              uni.setStorageSync("district_data", data);
              that.setDistrictData(data);
            }
          },
        });
      } else {
        that.setDistrictData(district_data);
      }
    },
    setDistrictData(district_data) {
      this.provinceData = district_data.provinceData;
      this.cityData = district_data.cityData;
      this.areaData = district_data.areaData;
    },
    getCurrAddress() {
      let that = this;

      var params = {
        ud_id: that.ud_id,
      };

      that.$.request({
        url: this.Config.URL.user.address_get,
        data: params,
        success: function (data, status, msg, code) {
          if (status == 200) {
            that.formData.detailAddress = data.ud_street_no;
            that.formData.userName = data.ud_name;
            that.formData.userPhone = data.ud_mobile;
            that.formData.lableName = data.ud_label - 1;
            that.formData.sexType = data.ud_gender;
            let item = {
              name: data.ud_marker,
              location: {
                lat: data.ud_latitude,
                lng: data.ud_longitude,
              },
              addr: data.ud_street_addr,
            };
            that.handerSetAddress(item);

            let moveMarke = {
              id: 94,
              latitude: data.ud_latitude,
              longitude: data.ud_longitude,
              iconPath: that.markerIcon,
              width: 20,
              height: 30,
            };
            that.$nextTick(() => {
              that.markers.push(moveMarke);
            });
          }
        },
      });
    },
    getBaiduOriginalData(location, type, type2) {
      let that = this;

      let BMap = new bmap.BMapWX({
        ak: "LkqqCMB1qZmjYEkzx0Y1PTfmAUrkWPog",
      });

      if (type2 == "found") {
        that.isFound = true;
        uni.removeStorageSync("city");
      }

      let fail = function (res) {
        console.log("fail", res);
      };

      let success = function (res) {
        that.latitude = res.originalData.result.location.lat;
        that.longitude = res.originalData.result.location.lng;

        console.log(that.latitude, that.longitude);

        that.originalData = res.originalData;

        let city = uni.getStorageSync("city");
        if (city) {
          that.originalData.result.addressComponent.city = city;
        }

        let array = res.originalData.result.pois;

        let nearbyObject = array.find((item) => item.distance === "附近");
        let numericDistances = array.filter((item) => item.distance !== "附近");
        numericDistances.sort(
          (a, b) => parseInt(a.distance, 10) - parseInt(b.distance, 10)
        );
        if (nearbyObject) {
          that.nearbyAddressList = [nearbyObject, ...numericDistances];
        } else {
          that.nearbyAddressList = numericDistances;
        }

        if (that.markers.length > 0 && that.isFound) {
          let item = that.nearbyAddressList[0];
          that.markers[0].latitude = that.latitude;
          that.markers[0].longitude = that.longitude;
          that.markers[1].latitude = that.latitude;
          that.markers[1].longitude = that.longitude;
          that.markers[0].callout = {
            content: item.name,
            color: "#000",
            fontSize: 14,
            borderRadius: 6, //边框圆角
            bgColor: "#fff",
            borderWidth: 1,
            borderColor: "rgba(0, 0, 0, 0.4)",
            padding: 8,
            display: "ALWAYS",
            textAlign: "center",
          };
          that.currAddress = "";
        }
        that.isFound = false;
      };

      BMap.regeocoding({
        location: location,
        coordtype: type,
        ret_coordtype: "gcj02ll",
        fail: fail,
        success: success,
      });
    },
    handerSetAddress(item) {
      let that = this;
      that.showMarkerIcon = true;
      that.showCurrAdd = true;
      that.showMask = false;
      that.showSearchAddress = false;
      that.showPoisList = false;
      that.showSelectAddBtn = false;
      that.showSearchIpunt = false;
      that.isEnableScroll = false;
      that.showReposition = false;
      that.currAddress = item.name;
      that.isDragMarker = false;

      that.currRoadAddress = item.addr
        ? item.addr
        : item.province + item.address.replace(/-/g, "");
      var location = item.location
        ? item.location.lat + "," + item.location.lng
        : item.point.y + "," + item.point.x;

      that.getBaiduOriginalData(location, "gcj02ll");
    },
    onSearch() {
      this.showMask = true;
    },
    handerSkip() {
      uni.navigateTo({
        url: `/address/selectCity?isAdd=true`,
      });
    },
    // 地图移动时
    handerRegionchange(e) {
      console.log(e);

      if (e.type == "begin" && this.markers.length > 0) {
        if (this.showPoisList) {
          this.isDragMarker = true;
        }
        this.markers[0].latitude = 0;
        this.markers[0].longitude = 0;
        this.markers[0].iconPath = "";

        if (!this.isDragMarker && this.showCurrAdd) {
          this.clearMarkes();
        }

        console.log("触发了：begin");
      }

      if (e.type == "end" && this.showMarkerIcon && !this.showCurrAdd) {
        console.log("触发了:", "end");
        if (!e.target.centerLocation) return;
        console.log(e.target.centerLocation);
        this.isDragMarker = false;

        let { latitude, longitude } = e.target.centerLocation;

        if (this.markers.length > 0) {
          this.markers[0].latitude = latitude;
          this.markers[0].longitude = longitude;
          this.markers[0].iconPath = this.markerIcon;
        }

        let location = latitude + "," + longitude;

        let that = this;

        let BMap = new bmap.BMapWX({
          ak: "LkqqCMB1qZmjYEkzx0Y1PTfmAUrkWPog",
        });

        let fail = function (res) {
          console.log("fail", res);
        };

        let success = function (res) {
          console.log("结果地址", res);

          that.originalData = res.originalData;
          let array = res.originalData.result.pois;

          let nearbyObject = array.find((item) => item.distance === "附近");
          let numericDistances = array.filter(
            (item) => item.distance !== "附近"
          );
          numericDistances.sort(
            (a, b) => parseInt(a.distance, 10) - parseInt(b.distance, 10)
          );
          if (nearbyObject) {
            that.nearbyAddressList = [nearbyObject, ...numericDistances];
          } else {
            that.nearbyAddressList = numericDistances;
          }

          let item = that.nearbyAddressList[0];

          that.markers[0].callout = {
            content: item.name,
            color: "#000",
            fontSize: 14,
            borderRadius: 6, //边框圆角
            bgColor: "#fff",
            borderWidth: 1,
            borderColor: "rgba(0, 0, 0, 0.4)",
            padding: 8,
            display: "ALWAYS",
            textAlign: "center",
          };
        };

        BMap.regeocoding({
          location: location,
          coordtype: "gcj02ll",
          ret_coordtype: "gcj02ll",
          fail: fail,
          success: success,
        });
      }
    },
    //数据回显时使用此方法
    // setData(obj) {
    //   this.oldObj = obj;
    //   this.formData.detailAddress = obj.detailAddress;
    //   this.formData.userName = obj.userName;
    //   this.formData.userPhone = obj.userPhone;
    //   this.formData.lableName = obj.lableName;
    //   this.formData.sexType = obj.sexType;
    //   this.addressInfo.title = obj.title;
    //   this.addressInfo.address = obj.address;
    //   this.addressInfo.latitude = obj.latitude;
    //   this.addressInfo.longitude = obj.longitude;
    //   this.agreeState = obj.agreeState;
    // },
    //获取当前的地理位置
    getLocation(type) {
      let that = this;

      console.log(that.markers);

      uni.showLoading({
        title: "正在获取定位中...",
      });
      uni.getLocation({
        type: "wgs84",
        isHighAccuracy: true,
        geocode: "true",
        highAccuracyExpireTime: 3500,
        success: (res) => {
          uni.hideLoading();

          var location = res.latitude + "," + res.longitude;

          that.getBaiduOriginalData(location, "wgs84ll", type);
        },
        fail: (res) => {
          if (res.errMsg == "getLocation:fail auth deny") {
            uni.showModal({
              content: "检测到您没打开获取信息功能权限，是否去设置打开？",
              confirmText: "确认",
              cancelText: "取消",
              success: (res) => {
                if (res.confirm) {
                  uni.openSetting({
                    success: (res) => {},
                  });
                } else {
                  return false;
                }
              },
            });
          }
        },
      });
    },
    isValidPhoneNumber(phoneNumber) {
      // 定义正则表达式，校验中国大陆手机号码
      const phoneRegex = /^1[3-9]\d{9}$/;
      return phoneRegex.test(phoneNumber);
    },
    fuzzyMatch(shortStr, longStr) {
      if (!shortStr || !longStr) {
        console.log("找不到地址");
        return;
      }

      const lowerShortStr = shortStr.toLowerCase();
      const lowerLongStr = longStr.toLowerCase();

      return lowerShortStr.includes(lowerLongStr);
    },
    //保存地址
    submitAddress() {
      if (!this.currAddress) {
        uni.showToast({
          title: "请选择收货地址",
          icon: "none",
        });
        return;
      }
      // if (!this.formData.detailAddress) {
      //   uni.showToast({
      //     title: "请输入门牌号",
      //     icon: "none",
      //   });
      //   return;
      // }
      if (!this.formData.userName) {
        uni.showToast({
          title: "请输入联系人",
          icon: "none",
        });
        return;
      }

      if (!this.formData.userPhone) {
        uni.showToast({
          title: "请输入手机号",
          icon: "none",
        });
        return;
      }

      let isValid = this.isValidPhoneNumber(this.formData.userPhone);

      if (!isValid) {
        uni.showToast({
          title: "请输入正确的手机号",
          icon: "none",
        });
        return;
      }

      let item = this.originalData;

      let province = {
        label: "",
        value: 0,
      };

      let city = {
        label: "",
        value: 0,
      };

      let county = {
        label: "",
        value: 0,
      };

      this.provinceData.forEach((group) => {
        let isFind = this.fuzzyMatch(
          item.result.addressComponent.province,
          group.label
        );
        if (isFind) {
          province = group;
        }
      });

      this.cityData.forEach((group) => {
        group.forEach((group1) => {
          let isFind = this.fuzzyMatch(
            group1.label,
            item.result.addressComponent.city
          );
          if (isFind) {
            city = group1;
          }
        });
      });

      this.areaData.forEach((group) => {
        group.forEach((group1) => {
          group1.forEach((group2) => {
            let isFind = this.fuzzyMatch(
              group2.label,
              item.result.addressComponent.district
            );
            if (isFind) {
              county = group2;
            }
          });
        });
      });

      let lableName = this.formData.lableName;
      if (lableName === "" || lableName == -1) {
        lableName = "";
      } else {
        lableName = lableName + 1;
      }

      let parms = {
        ud_id: this.ud_id || 0,
        ud_city: item.result.addressComponent.city,
        ud_gender: this.formData.sexType,
        ud_intl: "+86",
        ud_mobile: this.formData.userPhone,
        ud_name: this.formData.userName,
        ud_marker: this.currAddress,
        ud_street_addr: this.currRoadAddress,
        ud_street_no: this.formData.detailAddress,
        ud_latitude: this.latitude,
        ud_longitude: this.longitude,
        ud_label: lableName || "",
        ud_province_id: province.value, // 省份ID
        ud_province: province.label, // 省份名称
        ud_city_id: city.value, // ud_city_id 城市ID
        ud_city: city.label, // 城市名称
        ud_county_id: county.value, // 区ID
        ud_county: county.label, // 区名字
        ud_address: this.currAddress + this.formData.detailAddress,
        ud_is_default: 1,
      };

      let that = this;
      var options = that.options;

      this.$.request({
        url: this.Config.URL.user.address_edit,
        method: "post",
        data: parms,
        success: (data, status, msg, code) => {
          if (status == 200) {
            this.$.showToast({
              title: "添加成功",
              icon: "success",
              duration: 2e3,
            });
            if (options.issub) {
              that.$.navigateBack(1, function () {
                options.ud_id = data.ud_id;
                that.notice.postNotificationName("RefreshOrder", options);
              });
            } else {
              that.$.navigateBack(1, function () {
                that.notice.postNotificationName("RefreshAddress", 1);
              });
            }
          }
        },
      });
    },
    //删除地址
    deleteAddress() {
      var that = this;
      that.$.showModal({
        title: that.__("提示"),
        content: that.__("确认删除这个地址吗？"),
        showCancel: true,
        success: function (n) {
          if (n.confirm) {
            var params = {
              ud_id: that.ud_id,
            };
            that.$.request({
              url: that.Config.URL.user.address_remove,
              method: "post",
              data: params,
              success: function (data, status, msg, code) {
                if (200 == status) {
                  that.$.showToast({
                    title: that.__("删除成功！"),
                  });

                  that.notice.postNotificationName("RefreshOrder", 0);
                  uni.navigateBack();
                }
              },
            });
          }
        },
      });
    },
    //选择地址、修改编辑地址
    chooseAddressView() {
      this.showMarkerIcon = true;
      this.showPoisList = true;
      this.showSearchIpunt = true;
      this.isEnableScroll = true;
      this.showCurrAdd = false;
      this.showReposition = true;

      var item = {};

      let group = this.nearbyAddressList.find(
        (item) => item.name == this.currAddress
      );
      if (group) {
        item = group;
      } else {
        item = this.nearbyAddressList[0];
      }

      let { x, y } = item.point;
      console.log(x, y);
      let moveMarke = {
        id: 94,
        latitude: y,
        longitude: x,
        iconPath: this.markerIcon,
        width: 20,
        height: 30,
        callout: {
          content: item.name,
          color: "#000",
          fontSize: 14,
          borderRadius: 6, //边框圆角
          bgColor: "#fff",
          borderWidth: 1,
          borderColor: "rgba(0, 0, 0, 0.4)",
          padding: 8,
          display: "ALWAYS",
          textAlign: "center",
        },
      };

      let currMarke = {
        id: 2,
        latitude: Number(this.latitude),
        longitude: Number(this.longitude),
        iconPath: this.sele2Icon,
        width: 25,
        height: 25,
      };

      let list = [];

      list.push(moveMarke);
      list.push(currMarke);

      this.$nextTick(() => {
        this.markers = list;
      });
    },
    //联系人性别选择
    chooseSex(type) {
      this.formData.sexType = type;
    },
    clearMarkes() {
      this.$nextTick(() => {
        console.log(this.latitude, this.longitude);
        this.markers[0].latitude = this.latitude;
        this.markers[0].longitude = this.longitude;
        this.markers[0].iconPath = this.markerIcon;
        this.markers[0].callout = {};
        if (this.markers[1]) {
          this.markers[1].iconPath = "";
          this.markers[1].latitude = 0;
          this.markers[1].longitude = 0;
        }
      });
    },
    //标签选择
    chooseLable(inedx) {
      if (this.formData.lableName == inedx) {
        this.formData.lableName = -1;
      } else {
        this.formData.lableName = inedx;
      }
    },
    //点击隐私协议
    changeAgree() {
      this.agreeState = !this.agreeState;
    },
    acitveAddress(item) {
      if (item.name == this.currAddress) {
        return this.sele2Icon;
      } else {
        return this.noseleIcon;
      }
    },
    // 搜索地址
    handerAddress(e) {
      let that = this;

      let value = e.target.value;
      if (value.length == 0) {
        this.showSearchAddress = false;
      } else {
        this.showSearchAddress = true;
      }

      var fail = function (res) {
        console.log("fail", res);
      };

      var currentPoint = {
        lat: that.originalData.result.location.lat,
        lng: that.originalData.result.location.lng,
      };

      var metersToKilometers = function (meters) {
        let kilometers = meters / 1000;

        // 保留两位小数
        return kilometers.toFixed(2);
      };

      var success = function (res) {
        console.log("结果地址", res);
        if (res.data.status != 0) {
          uni.showToast({
            title: res.message,
            icon: "none",
            duration: 3000,
          });
          return;
        }

        that.searchAddress = res.data.result
          .filter((item) => "location" in item)
          .map((item) => {
            let obj = {
              ...item,
              name: item.name,
              detailedInformation: item.address.replace(/-/g, ""),
              distance: metersToKilometers(
                BMapLib.GeoUtils.getDistance(currentPoint, item.location)
              ),
            };
            return obj;
          });
        console.log("that.searchAddress", that.searchAddress);

        that.searchAddress.forEach((item) => {
          if (item.name.indexOf(value) >= 0) {
            item.searchName = item.name.replaceAll(
              value,
              "<font style='color:#ee852f;padding:0 4px'>" + value + "</font>"
            );
          } else {
            item.searchName = item.name;
          }
        });
        console.log("searchAddress", that.searchAddress);
      };

      let params = {
        query: value,
        region: this.originalData.result.addressComponent.city,
        output: "json",
        city_limit: true,
        ak: "qWKt2xbrqXsp2yK35YYXVBNZgrbiCG5v",
        ret_coordtype: "gcj02ll",
      };

      let city = that.originalData.result.addressComponent.city;
      if (city) {
        params.center = "";
      }

      if (this.time !== null) {
        clearTimeout(this.time);
      }

      this.time = setTimeout(() => {
        uni.request({
          url: `https://api.map.baidu.com/place/v2/suggestion`,
          data: params,
          success: success,
          fail: fail,
        });
      }, 600);
    },
  },
};
</script>

<style lang="scss" scoped>
/* 隐藏滚动条 */
.scroll-view {
  scrollbar-width: none; /* Firefox */
}

.scroll-view::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.liu-chooseAddress-container {
  background: #fff !important;

  .hander {
    .uni-navbar__header {
      align-items: center;
      padding: 10rpx 20rpx !important;
    }

    .left-block {
      display: flex;
      align-items: center;
      line-height: 60rpx;
    }
    .city-block {
      white-space: nowrap; /* 确保文本在一行内显示 */
      overflow: hidden; /* 隐藏超出容器的文本 */
      text-overflow: ellipsis; /* 使用省略符号表示文本超出 */
      max-width: 140rpx;
      padding-right: 4rpx;
    }

    .icon-dingwei {
      font-size: 40rpx;
    }

    .icon-right {
      font-size: 24rpx;
    }
  }

  .uni-swiper-list {
    height: 50vh;
  }

  .current-block-left {
    width: 78%;
    max-width: 78%;
  }

  .current-block-right {
    width: 22%;
  }

  .current-name,
  .current-address {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .current-name {
    font-size: 30rpx;
  }

  .current-address {
    font-size: 24rpx;
    color: #848484;
  }

  .btn-edit-block {
    padding: 8rpx;
    font-size: 14px;
    text-align: center;
    border-radius: 12rpx;
    border: 1px solid #3579ff;
    color: #3579ff;
  }

  .input-view {
    width: 92%;
    display: flex;
    background-color: #f5f5f5;
    height: 60rpx;
    border-radius: 30rpx;
    padding: 0 4%;
    flex-wrap: nowrap;
    margin: 10rpx 0;
    line-height: 60rpx;
    margin-left: 10rpx;
    color: #b9b9b9;
  }

  .input-view .uni-icon {
    line-height: 60rpx !important;
    font-size: 24rpx;
  }

  .input-view .uni-icons {
    font-size: 32rpx !important;
  }

  .input-view .input {
    height: 60rpx;
    line-height: 60rpx;
    width: 94%;
    padding: 0 2%;
    font-size: 24rpx;
  }

  /* 隐藏滚动条 */
  .scroll-view {
    scrollbar-width: none; /* Firefox */
  }

  .scroll-view::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
  }

  .address-list {
    position: fixed;
    bottom: 0;
    left: 26rpx;
    width: 654rpx;
    height: 50vh;
    padding: 8rpx 24rpx 0;
    margin-top: 24rpx;
    background: #ffffff;
    border-radius: 24rpx 24rpx 0rpx 0rpx;

    .address-item {
      display: flex;
      align-items: center;
      padding: 14px 0;
      border-bottom: 1px solid #f8f8f8;

      .item-left {
        width: 90%;
        max-width: 90%;

        .item-name,
        .item-address {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

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

        .item-address {
          font-size: 24rpx;
          color: #848484;
        }
      }

      .item-right {
        width: 10%;

        .item-active {
          margin-left: 28rpx;
          margin-top: 28rpx;
          width: 36rpx;
          height: 36rpx;
        }
      }
    }
  }

  .search-address-list {
    margin: 40rpx;

    .search-address-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx 0;
      border-bottom: 2rpx solid #f0f0f0;

      .search-address-item-left {
        width: 80%;
      }

      .search-address-item-right {
        color: #d7d7d7;
        width: 20%;
        text-align: right;
      }

      rich-text {
        // max-width: 90%;
        max-height: 27px;
        overflow: hidden;
        word-break: break-all; /* break-all(允许在单词内换行。) */
        text-overflow: ellipsis; /* 超出部分省略号 */
        display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 2; /** 显示的行数 **/
      }

      // .item-left-name rich-text {
      //   white-space: nowrap; /* 确保文本在一行内显示 */
      //   overflow: hidden; /* 隐藏超出容器的文本 */
      //   text-overflow: ellipsis; /* 使用省略符号表示文本超出 */
      //   -webkit-box-orient: vertical;
      //   max-width: 90%;
      //   display: -webkit-box;
      //   box-sizing: border-box;
      // }

      .item-left-address {
        font-size: 24rpx;
        color: #848484;
        white-space: nowrap; /* 确保文本在一行内显示 */
        overflow: hidden; /* 隐藏超出容器的文本 */
        text-overflow: ellipsis; /* 使用省略符号表示文本超出 */
        max-width: 90%;
      }
    }
  }

  .reposition-block {
    position: absolute;
    top: -20%;
    right: 24rpx;
    width: 68rpx;
    height: 68rpx;
    line-height: 68rpx;
    border-radius: 12rpx;
    text-align: center;
    background: #fff;
    z-index: 1;

    .icon-zhongxindingwei {
      display: block;
      font-size: 44rpx;
    }
  }
}

.view-main {
  width: 100%;
  height: 100%;
  background: #f3f3f3;
}

.map-marker {
  width: 20px;
  height: 30px;
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.map-tip {
  font-size: 20rpx;
  color: #b6b6b6;
  line-height: 42rpx;
  padding: 0 20rpx;
  position: absolute;
  left: 50%;
  top: 30rpx;
  box-shadow: 0px 1px 10px 1px rgba(153, 153, 153, 0.34);
  background-color: #fff;
  border-radius: 4px;
  transform: translateX(-50%);
}

.poiss-box {
  width: 100%;
  padding: 20rpx 0;
  background-color: #ffffff;
  font-size: 26rpx;
  position: fixed;
  bottom: 0;
  left: 0;
}

.poiss-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 48rpx);
  height: 100rpx;
  padding: 0 24rpx;
  border-bottom: 1px solid #f9f9f9;
}

.poiss-item-l {
  width: calc(100% - 184rpx);
}

.poiss-item-lhd {
  font-size: 32rpx;
  color: #333333;
  line-height: 48rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.poiss-item-lbd {
  font-size: 28rpx;
  color: #b6b6b6;
  line-height: 42rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.poiss-item-r {
  width: 36rpx;
  height: 36rpx;
  margin: 0 30rpx;
}

.primary-btn {
  width: 688rpx;
  height: 88rpx;
  margin: 0 auto;
  margin-top: 28rpx;
  background: #3579ff;
  border-radius: 44rpx;
  font-size: 32rpx;
  color: #ffffff;
  line-height: 88rpx;
  text-align: center;
}

.page-con {
  width: 702rpx;
  height: 75vh;
  position: fixed;
  bottom: 0;
  left: 24rpx;
}

.con-hd {
  display: flex;
  align-items: center;
  width: 654rpx;
  height: 128rpx;
  margin: 0 auto;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(88, 102, 123, 0.2);
  border-radius: 24rpx;
  padding: 0 24rpx;
}

.choose-address {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92%;
  height: 64rpx;
  margin: 36rpx auto;
  border-radius: 12rpx;
  border: 2rpx solid #3579ff;
  font-size: 32rpx;
  color: #3579ff;

  .icon-right {
    padding-left: 12rpx;
  }
}

.choose-address2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 48rpx);
  padding: 0 24rpx;
}

.address2-l {
  width: calc(100% - 184rpx);
}

.address2-lhd {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  line-height: 48rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.address2-lbd {
  font-size: 28rpx;
  color: #999999;
  line-height: 42rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.address2-r {
  width: 144rpx;
  height: 60rpx;
  background: #ffffff;
  border-radius: 12rpx;
  border: 2rpx solid #3579ff;
  font-size: 28rpx;
  color: #3579ff;
  line-height: 60rpx;
  text-align: center;
}

.con-bd {
  width: 654rpx;
  height: calc(90vh - 160rpx);
  padding: 8rpx 24rpx 0;
  margin-top: 24rpx;
  background: #ffffff;
  border-radius: 24rpx 24rpx 0rpx 0rpx;
}

.con-bd-item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 110rpx;
}

.con-bd-item-name {
  width: 120rpx;
  height: 110rpx;
  text-align: left;
  font-size: 28rpx;
  font-weight: bold;
  color: #333333;
  line-height: 110rpx;
}

.con-bd-item-con {
  display: flex;
  align-items: center;
  width: calc(100% - 120rpx);
  height: 108rpx;
  border-bottom: 2rpx solid #f7f7f7;
}

.con-bd-item-con input {
  width: 100%;
  height: 60rpx;
}

.lable-item {
  width: 88rpx;
  height: 48rpx;
  margin-right: 18rpx;
  background: #ffffff;
  border-radius: 6rpx;
  border: 2rpx solid #e3e3e3;
  font-size: 24rpx;
  color: #333333;
  line-height: 48rpx;
  text-align: center;
}

.lable-item-on {
  background: #3579ff !important;
  border: 2rpx solid #3579ff;
  color: #ffffff !important;
}

.con-bd-item-con2 input {
  width: 50%;
  height: 60rpx;
}

.con-bd-sex-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 16rpx;
  font-size: 28rpx;
}

.choose-sex-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 12rpx;
}

.con-bd-agree {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 40rpx;
  width: 100%;
}

.agreeicon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 20rpx;
  margin-top: 2rpx;
}

.agreetext {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  line-height: 28rpx;
  color: #999999;
}

.con-ft-btn {
  width: 644rpx;
  height: 72rpx;
  margin-top: 60rpx;
  border-radius: 12rpx;
  font-size: 32rpx;
  line-height: 72rpx;
  text-align: center;
}

.con-ft-btn:last-child {
  margin-top: 32rpx;
}

.con-ft-btn1 {
  background: #3579ff;
  color: #ffffff;
}

.con-ft-btn2 {
  background: #ffffff;
  border: 2rpx solid #dedede;
}

.con-ft-btn3 {
  background: #3579ff;
  border: 2rpx solid #dedede;
  font-size: 32rpx;
  color: #ffffff;
}

.input-placeholder {
  font-size: 28rpx;
  color: #999999;
}
</style>