<template>
  <view
    class="map-wrapper"
    :class="{ 'map-wrapper--elder': $uiStyle === 'elder' }"
  >
    <view class="map-cont">
      <map
        class="map"
        :markers="markers"
        :latitude="addressInfo.latitude"
        :longitude="addressInfo.longitude"
        @markertap="handleMarkerTap"
      >
        <cover-view class="map-cover">
          <view class="address">
            <text class="address__detail">{{ addressInfo.title }}</text>
            <text class="address__area">{{ addressInfo.address }}</text>
          </view>
          <view
            class="navigation"
            @tap="handleAddressGo"
            :data-addressinfo="addressInfo"
          >
            <image
              class="navagation-icon"
              src="/static/images/home/navigation.png"
            ></image>
          </view>
        </cover-view>
      </map>
    </view>
    <view class="address-list">
      <view>
        <view
          class="list-cell"
          v-for="(item, index) in addressList"
          :key="index"
        >
          <view
            class="list-cell__cont"
            @click="handleMarker"
            :data-addressinfo="item"
          >
            <image
              class="point-icon"
              mode="aspectFit"
              src="/static/images/common/life_point.png"
            >
            </image>
            <view class="list-cell--middle">
              <view class="list-cell__title">{{ item.title }}</view>
              <view class="list-cell__distance">距离{{ item.distance }}KM</view>
              <view class="list-cell__address">{{ item.address }}</view>
            </view>
          </view>
          <image
            class="phone-icon"
            src="/static/images/common/phone_icon.png"
            @click="handlePhoneCall(item)"
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { geocoder, apiSearch } from "@/api/map.js";
import { maskPhoneCall, getPointResByLabel } from "@/utils";
const app = getApp();
export default {
  props: {
    category: {
      type: String,
      default: "",
    },
    keyword: {
      type: String,
      default: "服务",
    },
  },
  watch: {
    category(newVal, oldVal) {
      console.log("category change", newVal, oldVal);
      // this.nearbySearch();
    },
  },
  data() {
    return {
      addressList: [],
      addressInfo: {
        title: "",
        address: "",
        latitude: 29.65945,
        longitude: 121.4405,
      },
      longitude: "",
      latitude: "",
      markers: [],
      doorMarker: [],
    };
  },
  mounted() {
    console.log("keyword", this.keyword, "category", this.category);
    this.setAddressInfo();
  },
  methods: {
    async setAddressInfo() {
      let address = "";
      // 为了防止请求经纬度失败去展示默认信息
      this.addressInfo = {
        title: app.globalData.doorInfo.baseInfo.bzdz,
        address: app.globalData.doorInfo.baseInfo.bzdz1,
      };
      if (
        app.globalData.doorInfo.baseInfo.x1 &&
        app.globalData.doorInfo.baseInfo.y1
      ) {
        this.longitude = Number(app.globalData.doorInfo.baseInfo.x1);
        this.latitude = Number(app.globalData.doorInfo.baseInfo.y1);
      } else {
        address = app.globalData.doorInfo.baseInfo.bzdz1;
        if (
          app.globalData.doorInfo.baseInfo.bzdz1.indexOf("宁波市奉化区") === -1
        ) {
          address = "宁波市奉化区" + app.globalData.doorInfo.baseInfo.bzdz1;
        } else {
          address = app.globalData.doorInfo.baseInfo.bzdz1;
        }
        try {
          const res = await geocoder({
            address,
          });
          const location = res.geocodes[0].location.split(",").map(Number);
          this.longitude = location[0];
          this.latitude = location[1];
        } catch {
          uni.showToast({ title: "该门牌地址没有经纬度" });
        }
      }
      this.addressInfo = {
        title: app.globalData.doorInfo.baseInfo.bzdz,
        address: app.globalData.doorInfo.baseInfo.bzdz1,
        longitude: this.longitude,
        latitude: this.latitude,
      };
      this.initDoorMarker();
      this.nearbySearch();
    },
    /* 获取门牌信息后初始化打点 */
    initDoorMarker() {
      /* 打点 */
      this.doorMarker = [
        {
          id: 10000,
          iconPath: "/static/images/common/point_common.png",
          longitude: this.longitude,
          latitude: this.latitude,
          width: 22,
          height: 32,
        },
      ];
    },
    async nearbySearch() {
      console.log("category", this.category);
      console.log("keyword", this.keyword);
      const { addressList, markers } = await apiSearch({
        location: `${this.longitude},${this.latitude}`,
        /*   keyword: this.keyword, */
        querytypes: this.category,
      });
      console.log("markers", markers);
      this.addressList = addressList;
      const pointRes = getPointResByLabel(this.keyword);
      console.log("pointRes", pointRes);
      markers.forEach((item) => {
        item.iconPath = pointRes.iconPath;
        item.width = 40;
        item.height = 40;
      });
      this.markers = [...this.doorMarker, ...markers];
      console.log("markers>>>>>>>>>", this.markers);
    },

    handleMarker(e) {
      console.log("打点位置", e.currentTarget.dataset["addressinfo"]);
      this.addressInfo = e.currentTarget.dataset["addressinfo"];
      this.marker();
    },

    marker() {
      const targetAddress = this.addressInfo;
      const pointRes = getPointResByLabel(this.keyword);
      let markers = JSON.parse(JSON.stringify(this.markers));
      markers.forEach((item) => {
        if (item.title === targetAddress.title) {
          item.iconPath = pointRes.iconPathSelected;
          item.width = 50;
          item.height = 54;
        } else {
          if (item.id !== 10000) {
            item.iconPath = pointRes.iconPath;
            item.width = 40;
            item.height = 40;
          }
        }
      });
      this.markers = markers;
      this.latitude = targetAddress.latitude;
      this.longitude = targetAddress.longitude;
    },
    handleAddressGo(e) {
      console.log("导航去那些位置");
      console.log(e);
      console.log(e.currentTarget.dataset["addressinfo"]);
      const targetAddress = e.currentTarget.dataset["addressinfo"];
      uni.openLocation({
        latitude: targetAddress.latitude,
        longitude: targetAddress.longitude,
        scale: 5,
        name: targetAddress.title,
        address: targetAddress.address,

        success(res) {
          console.log(res, "wx.getLocation");
        },
      });
    },
    handlePhoneCall(item) {
      if (!item.tel.length) {
        uni.showToast({
          title: "该商家暂未提供电话",
        });
        return;
      }
      const phoneNumber = item.tel.split(";")[0];
      maskPhoneCall(phoneNumber);
    },
    /* 地图上点击的打点 */
    handleMarkerTap(e) {
      console.log("地图上被点击的点", e.detail.markerId);
      // 10000代表门牌地址
      if (e.detail.markerId === 10000) {
        return;
      }
      const pointRes = getPointResByLabel(this.keyword);
      let markers = JSON.parse(JSON.stringify(this.markers));
      markers.forEach((item) => {
        if (item.id === e.detail.markerId) {
          console.log("选中的点", item);
          item.iconPath = pointRes.iconPathSelected;
          item.width = 50;
          item.height = 54;
          this.addressInfo = {
            title: item.title,
            address: "宁波市奉化区" + item.address,
            latitude: item.latitude,
            longitude: item.longitude,
          };
        } else {
          if (item.id !== 10000) {
            item.iconPath = pointRes.iconPath;
            item.width = 40;
            item.height = 40;
          }
        }
      });

      this.markers = markers;
    },
  },
};
</script>
<style lang="scss" scoped>
.map-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .map-cont {
    padding: 10px 0;
    .map {
      // margin-top: 20rpx;
      border-radius: 8rpx;
      width: 100%;
      height: 80vw;
      // margin-bottom: 20rpx;
      .map-cover {
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 10px 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: auto;
        width: 100%;
        background-color: #fff;
        box-sizing: border-box;
        white-space: normal; /* 关键，如果父元素flex布局，子元素换行效果 */
        .address {
          display: flex;
          flex-direction: column;
          &__detail {
            font-size: 36rpx;
            line-height: 56rpx;
            font-weight: bold;
          }
          &__area {
            font-size: 26rpx;
            line-height: 48rpx;
          }
        }
        .navigation {
          image {
            width: 96rpx;
            height: 96rpx;
          }
        }
      }
    }
  }
  .address-list {
    flex: 1;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    margin-bottom: 20rpx;
    background: #fff;
    .list-cell {
      display: flex;
      padding: 20rpx 40rpx;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px dashed #dedede;
      // height: 87px; // iphonexmax 高度塌陷
      &__cont {
        flex: 1;
        display: flex;
        // height: 64px;
        // flex-direction: column;
        .point-icon {
          width: 16px;
          height: 16px;
          margin-right: 5px;
          margin-top: 2px;
        }
      }
      .list-cell--middle {
        display: flex;
        flex-direction: column;
      }
      &__title {
        font-size: 28rpx;
        font-weight: bold;
        padding: 0 0 14rpx 0;
      }
      &__distance {
        font-size: 20rpx;
        line-height: 28rpx;
        color: #999999;
      }
      &__address {
        font-size: 20rpx;
        line-height: 28rpx;
        color: #999999;
      }
      /* 电话图标 */
      .phone-icon {
        width: 36px;
        height: 36px;
      }
    }
  }
}
.map-wrapper--elder {
  .map-cont {
    .map {
      .map-cover {
        .address {
          &__detail {
            font-size: calc(18px * $zlb-elder-font-scale);
            line-height: calc(28px * $zlb-elder-font-scale);
          }
          &__area {
            font-size: calc(13px * $zlb-elder-font-scale);
            line-height: calc(24px * $zlb-elder-font-scale);
          }
        }
      }
    }
  }
  .address-list {
    .list-cell {
      &__title {
        font-size: calc(14px * $zlb-elder-font-scale);
      }
      &__distance {
        font-size: calc(10px * $zlb-elder-font-scale);
        line-height: calc(14px * $zlb-elder-font-scale);
      }
      &__address {
        font-size: calc(10px * $zlb-elder-font-scale);
        line-height: calc(14px * $zlb-elder-font-scale);
      }
    }
    .phone-icon {
      width: calc(36px * $zlb-elder-font-scale);
      height: calc(36px * $zlb-elder-font-scale);
    }
  }
}
</style>
