<template>
  <view class="main">
    <view
      class="mainTop"
      :style="{
        paddingTop:
          loginType === 'min' ? menu.top + 'px' : menu.top + 10 + 'px',
        height: loginType === 'min' ? menu.height + 'px' : menu.top  + 'px',
      }"
    >
      <image
        class="backIcon"
        src="https://eshangtech.com/wanmeiyizhanImg/home/backArrow.svg"
        @click="handleBack"
      />

      <div class="selectBox">
        <div class="first" @click="goSelectServer">
          <image
            class="addressIcon"
            src="https://eshangtech.com/wanmeiyizhanImg/home/blackFixed.png"
          />
          <div class="text">{{ serverPart.SERVERPART_NAME || "" }}</div>
          <image
            class="moreIcon"
            src="https://eshangtech.com/wanmeiyizhanImg/home/rightArrow.png"
          />
        </div>
      </div>
    </view>

    <view class="phoneBox">
        <text class="text">汽车维修服务热线 </text>
      <text class="phoneText">{{ servicePhone || "-" }}</text>
     
    </view>

    <view class="projectPublicity">
      <view class="titleBox">
        <text class="normalText">九项</text>
        <text class="lightText">免费</text>
        <text class="normalText">项目公示</text>
      </view>

      <view class="contentBox">
        <view class="contentItem">
          <image
            class="itemIcon"
            src="https://eshangtech.com/wanmeiyizhanImg/home/autoRepairNo1.png"
          />
          <text class="itemText">胎压检查</text>
        </view>

        <view class="contentItem">
          <image
            class="itemIcon"
            src="https://eshangtech.com/wanmeiyizhanImg/home/autoRepairNo2.png"
          />
          <text class="itemText">机油量检查</text>
        </view>

        <view class="contentItem">
          <image
            class="itemIcon"
            src="https://eshangtech.com/wanmeiyizhanImg/home/autoRepairNo3.png"
          />
          <text class="itemText">牌照检查和紧固</text>
        </view>

        <view class="contentItem">
          <image
            class="itemIcon"
            src="https://eshangtech.com/wanmeiyizhanImg/home/autoRepairNo4.png"
          />
          <text class="itemText">轮胎螺丝检查和紧固</text>
        </view>

        <view class="contentItem">
          <image
            class="itemIcon"
            src="https://eshangtech.com/wanmeiyizhanImg/home/autoRepairNo5.png"
          />
          <text class="itemText">雨刮水量检查</text>
        </view>

        <view class="contentItem">
          <image
            class="itemIcon"
            src="https://eshangtech.com/wanmeiyizhanImg/home/autoRepairNo6.png"
          />
          <text class="itemText">车门松动紧固和润滑</text>
        </view>

        <view class="contentItem">
          <image
            class="itemIcon"
            src="https://eshangtech.com/wanmeiyizhanImg/home/autoRepairNo7.png"
          />
          <text class="itemText">底盘螺丝检查和紧固</text>
        </view>

        <view class="contentItem">
          <image
            class="itemIcon"
            src="https://eshangtech.com/wanmeiyizhanImg/home/autoRepairNo8.png"
          />
          <text class="itemText">轮胎充气 (仅轿车免费)</text>
        </view>

        <view class="contentItem" style="margin-bottom: 0">
          <image
            class="itemIcon"
            src="https://eshangtech.com/wanmeiyizhanImg/home/autoRepairNo9.png"
          />
          <text class="itemText">启动搭电 (仅轿车免费)</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loginType: "", // 登录方式
      menu: "", // 用户手机信息
      serverPart: "", // 当前的服务区
      servicePhone: "", // 服务区的汽修电话
    };
  },
  onLoad() {
    let systemInfo = uni.getSystemInfoSync();
    let type = uni.getStorageSync("loginType");
    console.log("type", type);
    this.loginType = type;
    if (type === "min") {
      this.menu = uni.getMenuButtonBoundingClientRect();
    } else {
      this.menu = systemInfo.safeArea;
    }
    // 当前服务区
    let currentService = uni.getStorageSync("currentService");
    this.serverPart = currentService;
  },
  onShow() {
    this.handleGetServiceDetail();
  },
  methods: {
    handleBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 服务区详情
    async handleGetServiceDetail() {
      const req = {
        ServerpartId: this.serverPart.SERVERPART_ID,
      };

      let detailData = await this.$api.$get(
        "/CommercialApi/BaseInfo/GetServerpartInfo",
        req
      );
      let obj = detailData.Result_Data;
      console.log("detailData", obj);
      this.servicePhone = obj.RegionInfo[0].REPAIR_TEL;
    },
    // 跳转到地图选择服务区
    goSelectServer() {
      uni.navigateTo({ url: "/pages/newMap/index/index" });
    },
  },
};
</script>

<style scoped lang="less">
@font-face {
  font-family: "ALIMAMA";
  src: url("/static/font/ALIMAMA/4MehOUFxkPfJ.woff2") format("woff2"),
    url("/static/font/ALIMAMA/4MehOUFxkPfJ.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 控制字体加载期间的显示行为 */
}

.main {
  width: 100%;
  height: 100vh;
  //   background-color: #fff;
  background-image: url("https://eshangtech.com/wanmeiyizhanImg/home/carMaintenanceBg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 0 32rpx;
  padding-bottom: calc(90rpx + env(safe-area-inset-bottom));
  .mainTop {
    width: 100%;
    display: flex;
    align-items: center;
    .backIcon {
      width: 48rpx;
      height: 48rpx;
      margin-right: 8px;
    }
    .selectBox {
      display: inline-block;
      .first {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        border-radius: 48rpx;
        padding: 12rpx 24rpx;
        background: #fff;
        .addressIcon {
          width: 24rpx;
          height: 24rpx;
          margin-right: 8rpx;
        }
        .text {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #090c1a;
          line-height: 40rpx;
          text-align: justify;
          font-style: normal;
        }
        .moreIcon {
          margin-left: 8rpx;
          width: 24rpx;
          height: 24rpx;
        }
      }
    }
  }

  .phoneBox {
    width: 100%;
    box-sizing: border-box;
    padding: 32rpx 40rpx;
    background: linear-gradient(270deg, #f0f7ff 0%, #e6f5ff 100%);
    border-radius: 16rpx;
    border: 2rpx solid #ffffff;
    margin-top: 240rpx;
    display: flex;
    align-items: center;
    .phoneText {
      font-family: "ALIMAMA";
      font-weight: bold;
      font-size: 44rpx;
      color: #166cfe;
      line-height: 64rpx;
      text-align: left;
      font-style: normal;
    }
    .text {
      margin-right: 16rpx;
      font-family: "PingFangSC";
      font-weight: 600;
      font-size: 30rpx;
      color: #091524;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;
    }
  }

  .projectPublicity {
    width: 100%;
    margin-top: 32rpx;
    background: linear-gradient(270deg, #f0f7ff 0%, #e6f5ff 100%);
    border-radius: 16rpx;
    border: 2rpx solid #ffffff;
    box-sizing: border-box;
    padding: 46rpx 40rpx;
    .titleBox {
      display: flex;
      align-items: center;
      .normalText {
        font-family: "ALIMAMA";
        font-weight: bold;
        font-size: 36rpx;
        color: #010b18;
        line-height: 48rpx;
        letter-spacing: 1px;
        text-align: left;
        font-style: normal;
      }
      .lightText {
        font-family: "ALIMAMA";
        font-weight: bold;
        font-size: 40rpx;
        color: #ff6b14;
        line-height: 48rpx;
        letter-spacing: 1px;
        text-align: left;
        font-style: normal;
        margin: 0 8rpx;
      }
    }

    .contentBox {
      width: 100%;
      margin-top: 24rpx;
      .contentItem {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 20rpx;
        .itemIcon {
          width: 56rpx;
          height: 56rpx;
          margin-right: 16rpx;
        }
        .itemText {
          font-family: "PingFangSC";
          font-weight: 500;
          font-size: 28rpx;
          color: #091524;
          line-height: 36rpx;
          text-align: left;
          font-style: normal;
        }
      }
    }
  }
}
</style>