<template>
  <view class="main" @click="handleGoDetail">
    <view class="serviceMessage">
      <view class="leftMessage">
        <view class="leftTop">
          <view class="massageNameBox">{{
            currentServiceMessage.SERVERPART_NAME || ""
          }}</view>
          <span class="state">营业中</span>
        </view>
        <view class="leftBottom">
          <image class="pointIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/address.png" />
          <span class="distanceText">{{
            currentServiceMessage.SERVERPART_DISTANCE
              ? currentServiceMessage.SERVERPART_DISTANCE + "km"
              : "-"
          }}</span>
          <span class="line"></span>
          <span
            class="address"
            v-if="currentServiceMessage && currentServiceMessage.ServerpartInfo"
            >{{ currentServiceMessage.SERVERPART_ADDRESS || "" }}</span
          >
        </view>
      </view>
      <view
        class="rightMessage"
        @click.stop="handleToMap(currentServiceMessage)"
        v-if="currentServiceMessage.SERVERPART_DISTANCE > 0"
      >
        <image
          class="navigationIcon"
          src="https://eshangtech.com/ShopICO/discovery/navigationIcon.png"
        />
        导航
        <!-- <span class="distance">{{
        currentServiceMessage.SERVERPART_DISTANCE
          ? currentServiceMessage.SERVERPART_DISTANCE + "km"
          : ""
      }}</span> -->
      </view>
    </view>

    <div class="serviceTypeTabs" v-if="!noIcon">
      <div class="serviceTypeItem">
        <image
          class="itemIcon"
          :src="
            currentServiceMessage.HASCHARGE
              ? 'https://eshangtech.com/wanmeiyizhanImg/home/Charging.svg'
              : 'https://eshangtech.com/wanmeiyizhanImg/home/noCharging.svg'
          "
        />

        <!-- <image
          class="itemIcon"
          :src="
            serviceMessage.chargingStation
              ? 'https://eshangtech.com/ShopICO/discovery/chargingStationSelect.png'
              : 'https://eshangtech.com/ShopICO/discovery/chargingStationNo.png'
          "
        /> -->
        <!-- <span class="itemText">充电桩</span> -->
      </div>
      <div class="serviceTypeItem">
        <image
          class="itemIcon"
          :src="
            currentServiceMessage.HASPILOTLOUNGE
              ? 'https://eshangtech.com/wanmeiyizhanImg/home/jinCar.svg'
              : 'https://eshangtech.com/wanmeiyizhanImg/home/noJinCar.svg'
          "
        />
        <!-- <image
          class="itemIcon"
          src="https://eshangtech.com/ShopICO/discovery/gasStationSelect.png"
        /> -->
        <!-- <span class="itemText">加油站</span> -->
      </div>
      <div class="serviceTypeItem">
        <image
          class="itemIcon"
          :src="
            currentServiceMessage.SERVERPART_TYPE
              ? 'https://eshangtech.com/wanmeiyizhanImg/home/health.svg'
              : 'https://eshangtech.com/wanmeiyizhanImg/home/noHealth.svg'
          "
        />

        <!-- <image
          class="itemIcon"
          :src="
            serviceMessage.nursery
              ? 'https://eshangtech.com/ShopICO/discovery/nurserySelect.png'
              : 'https://eshangtech.com/ShopICO/discovery/nurseryNo.png'
          "
        /> -->
        <!-- <span class="itemText">母婴室</span> -->
      </div>
      <div class="serviceTypeItem">
        <image
          class="itemIcon"
          :src="
            currentServiceMessage.HASMOTHER
              ? 'https://eshangtech.com/wanmeiyizhanImg/home/baby.svg'
              : 'https://eshangtech.com/wanmeiyizhanImg/home/nobaby.svg'
          "
        />

        <!-- <image
          class="itemIcon"
          :src="
            serviceMessage.parkingSpace
              ? 'https://eshangtech.com/ShopICO/discovery/parkingSpaceSelect.png'
              : 'https://eshangtech.com/ShopICO/discovery/parkingSpaceNo.png'
          "
        /> -->
        <!-- <span class="itemText">停车位</span> -->
      </div>
      <div class="serviceTypeItem">
        <image
          class="itemIcon"
          :src="
            currentServiceMessage.HASGUESTROOM
              ? 'https://eshangtech.com/wanmeiyizhanImg/home/hotel.svg'
              : 'https://eshangtech.com/wanmeiyizhanImg/home/nohotel.svg'
          "
        />
        <!-- <image
          class="itemIcon"
          :src="
            serviceMessage.store
              ? 'https://eshangtech.com/ShopICO/discovery/storeSelect.png'
              : 'https://eshangtech.com/ShopICO/discovery/storeNo.png'
          "
        /> -->
        <!-- <span class="itemText">便利店</span> -->
      </div>
    </div>
  </view>
</template>
<script>
export default {
  data() {
    return {
      // currentServiceInfo: {},
    };
  },
  props: ["goDetail", "noIcon", "currentServiceMessage", "NoChange"], // goDetail 是否可以跳转详情 noIcon 为true时不出现 下面的小图标 NoChange  禁止切换服务区
  watch: {
    currentServiceMessage(newVal, oldVal) {
      console.log("newVal", newVal);
      console.log("oldVal", oldVal);
      // this.currentServiceInfo = newVal;
      this.$forceUpdate();
    },
  },
  methods: {
    // 跳转去地图
    handleToMap(obj) {
      uni.openLocation({
        latitude: obj.latitude ? obj.latitude * 1 : obj.SERVERPART_Y * 1,
        longitude: obj.longitude ? obj.longitude * 1 : obj.SERVERPART_X * 1,
        scale: 16, // 缩放比例
        name: obj.SERVERPART_NAME,
        // address: "", // 这个可能会影响地图的定位，所以可以选择不填
        success(data) {
          console.log(data);
        },
        fail(err) {
          console.log(err);
        },
      });
    },
    handleGoDetail() {
      if (this.NoChange) {
        return;
      } else {
        if (this.goDetail) {
          uni.navigateTo({
            url:
              "/pages/serviceDetail/index?id=" +
              this.currentServiceMessage.SERVERPART_ID,
          });
        }
      }
    },
  },
};
</script>
<style scoped lang="less">
.main {
  background: #fff;

  .serviceMessage {
    width: 100%;
    box-sizing: border-box;
    padding: 8rpx 0;
    margin-top: 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .leftMessage {
      width: calc(100% - 178rpx);
      margin-right: 16rpx;
      box-sizing: border-box;

      .leftTop {
        flex: 1;
        display: flex;
        align-items: center;

        .leftIcon {
          width: 32rpx;
          height: 32rpx;
          margin-right: 8rpx;
        }

        .massageNameBox {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 32rpx;
          color: #282622;
          line-height: 44rpx;
          text-align: left;
          font-style: normal;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }

        .state {
          display: inline-block;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #1ba74d;
          line-height: 36rpx;
          text-align: left;
          font-style: normal;
          padding: 2rpx 8rpx;
          background: #e9f8ee;
          border-radius: 4rpx;
          margin-left: 16rpx;
        }
      }

      .leftBottom {
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        display: flex;
        align-items: center;
        margin-top: 8rpx;
        .pointIcon {
          width: 24rpx;
          height: 24rpx;
          margin-right: 8rpx;
        }
        .distanceText {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #130f05;
          line-height: 36rpx;
          text-align: left;
          font-style: normal;
        }
        .line {
          display: inline-block;
          width: 2rpx;
          height: 24rpx;
          background: #e7e7e6;
          margin: 0 12rpx;
        }

        .address {
          width: 300rpx;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          display: inline-block;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #5f5b52;
          line-height: 32rpx;
          text-align: left;
          font-style: normal;
          // margin-left: 36rpx;
        }
      }
    }

    .rightMessage {
      border-radius: 16px;
      border: 1px solid #ae8d3e;
      padding: 14rpx 24rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #ba922f;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;
      display: flex;
      align-items: center;
      .navigationIcon {
        width: 24rpx;
        height: 24rpx;
        margin-right: 8rpx;
      }
    }
  }

  .serviceTypeTabs {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 16rpx;
    .serviceTypeItem {
      width: 40rpx;
      height: 40rpx;
      margin-right: 16rpx;
      .itemIcon {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>