<template>
  <view class="main">
    <view class="searchBox">
      <view class="search">
        <image class="searchIcon" src="/static/images/home/searchIcon.svg" />
        <input class="searchText" v-model="searchText" confirm-type="search" @confirm="handleGetServiceList"
          placeholder="请输入想去的服务区" placeholder-style="font-size: 14px;color: #A69E9F;" />
      </view>
    </view>
    <view class="content">
      <view class="serviceList" v-if="serviceList && serviceList.length > 0">
        <view class="serviceItem" v-for="(item, index) in serviceList" :key="index"
          @click="handleGoServiceDetail(item)">
          <view class="itemTop">
            <view class="title">{{ item.SERVERPART_NAME || "-" }}</view>
            <view class="status">营业中</view>
          </view>
          <view class="itemBottom">
            <view class="bottmLeft">
              <image class="img" v-if="item.ImageLits && item.ImageLits.length > 0" :src="item.ImageLits[0]" />
              <image class="img" v-else src="/static/images/home/defaultIcon.png" />
            </view>
            <view class="bottmRight">
              <view class="rightTop">
                <view class="toiletItem" v-if="item.sumDetail.HASPANTRY > 0">
                  <view class="itemBlock">
                    <view class="toiletItemLeft">
                      <image class="toiletIcon" src="/static/images/home/manWC.svg" />
                      <text class="toiletText">男厕</text>
                    </view>
                  </view>
                </view>

                <view class="toiletItem" v-if="item.sumDetail.HASWIFI > 0">
                  <view class="itemBlock">
                    <view class="toiletItemLeft">
                      <image class="toiletIcon" src="/static/images/home/woManWC.svg" />
                      <text class="toiletText">女厕</text>
                    </view>
                  </view>
                </view>

                <view class="toiletItem" v-if="item.sumDetail.HASSHOWERROOM > 0">
                  <view class="itemBlock">
                    <view class="toiletItemLeft">
                      <image class="toiletIcon" src="/static/images/home/showerRoom.svg" />
                      <text class="toiletText">淋浴间</text>
                    </view>
                  </view>
                </view>

                <view class="toiletItem" v-if="item.sumDetail.HASWATERROOM > 0">
                  <view class="itemBlock">
                    <view class="toiletItemLeft">
                      <image class="toiletIcon" src="/static/images/home/waterBoiler.svg" />
                      <text class="toiletText">开水器</text>
                    </view>
                  </view>
                </view>

                <view class="toiletItem" v-if="item.sumDetail.MICROWAVEOVEN > 0">
                  <view class="itemBlock">
                    <view class="toiletItemLeft">
                      <image class="toiletIcon" src="/static/images/home/microwave.svg" />
                      <text class="toiletText">微波炉</text>
                    </view>
                  </view>
                </view>

                <view class="toiletItem" v-if="item.sumDetail.WASHERCOUNT > 0">
                  <view class="itemBlock">
                    <view class="toiletItemLeft">
                      <image class="toiletIcon" src="/static/images/home/washingMachine.svg" />
                      <text class="toiletText">洗衣机</text>
                    </view>
                  </view>
                </view>
              </view>
              <view class="rightBottom">
                <div class="goOrder" v-if="pageType === 'food'">
                  <!-- @click.stop="goBuy(item)" -->
                  <image class="orderIcon" src="/static/images/home/goOrderIcon.png" />
                  <span class="goOrderText">去点餐</span>
                </div>
                <image class="navigation" src="/static/images/home/navigationIcon.svg"
                  @click.stop="handleOpenMap(item)" />
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="noDataBox" v-else>
        <no-data text="暂无服务区数据" />
      </view>
    </view>
  </view>
</template>
<script>
import { mapGetters } from "vuex";
import NoData from "../../components/noData.vue";
export default {
  data() {
    return {
      serviceList: [],
      pageType: "",
      searchText: "",
    };
  },
  components: {
    NoData,
  },
  onLoad(query) {
    console.log("query", query);
    uni.setNavigationBarTitle({
      title:
        query.type === "food"
          ? "点餐"
          : query.type === "driver"
            ? "司机之家"
            : "", // 设置为你想要显示的标题
    });
    this.pageType = query.type;
    this.handleGetServiceList();
    this.$utils.addUserBehaviorNew();
  },
  computed: {
    ...mapGetters({
      user: "user",
      tableNum: "orderTable",
      orderRemark: "orderRemark",
      provinceCode: "provinceCode",
      couponPrice: "couponPrice",
      nowStore: "nowStore",
    }),
  },
  methods: {
    // 拿到服务区列表
    async handleGetServiceList() {
      let seatInfo = uni.getStorageSync("seatInfo");
      if (seatInfo) {
        seatInfo = JSON.parse(seatInfo);
      }
      uni.showLoading({
        title: "加载中...",
      });
      let req = {
        Serverpart_Name: this.searchText,
        Province_Code: this.user.PROVINCE_CODE || 530000,
        longitude: seatInfo ? seatInfo.longitude : "",
        latitude: seatInfo ? seatInfo.latitude : "",
        showservice: true,
        HasScanOrder: this.pageType === "food",
        HasDriverHome: this.pageType === "driver",
      };
      const data = await this.$api.$get(
        "/CommercialApi/BaseInfo/GetServerpartList",
        req
      );
      // const data = await this.$api.$javaGet('/third-party/getServerPartList', req)
      let list = data.Result_Data.List;
      let res = [];
      if (list && list.length > 0) {
        list.forEach((item) => {
          let sumObj = {
            LIVESTOCKPACKING: 0, // 充电桩数
            STATEGRIDCHARGE: 0, // 国网充电桩数量
            LIAUTOCHARGE: 0, //  理想5C充电桩数量
            GACENERGYCHARGE: 0, //  广汽能源充电桩数量
            OTHERCHARGE: 0, // 其他充电桩数量
            REFUELINGGUN92: 0, // 加油枪92号
            REFUELINGGUN95: 0, //  加油枪95号
            REFUELINGGUN0: 0, // 加油枪0号
            HASPANTRY: 0, // 男厕数量
            HASWIFI: 0, // 女厕数量
            TOILETCOUNT: 0, // 潮汐厕位
            HASSHOWERROOM: 0, // 淋浴房
            HASWATERROOM: 0, // 开水器
            MICROWAVEOVEN: 0, // 微波炉
            WASHERCOUNT: 0, // 洗衣机数量
            SLEEPINGPODS: 0, // 睡眠仓
            HASPILOTLOUNGE: false, // 有无司机之家
            HASCHILD: false, // 有无车辆维修
            VEHICLEWATERFILLING: false, // 有无车辆加水
            SMALLPARKING: 0, // 轿车车位
            PACKING: 0, // 客车车位
            TRUCKPACKING: 0, // 货车车位
            DANPACKING: 0, // 危化品车位
            DININGBXCOUNT: 0, // 商铺数量
            DININGROOMCOUNT: 0, // 餐饮店
            HASBACKGROUNDRADIO: 0, // 便利店
            POINTCONTROLCOUNT: 0, // 客房
            BUSINESSTYPE: "",
          };
          if (item.RegionInfo && item.RegionInfo.length > 0) {
            item.RegionInfo.forEach((subItem) => {
              sumObj.LIVESTOCKPACKING += subItem.LIVESTOCKPACKING;
              sumObj.STATEGRIDCHARGE += subItem.STATEGRIDCHARGE;
              sumObj.LIAUTOCHARGE += subItem.LIAUTOCHARGE;
              sumObj.GACENERGYCHARGE += subItem.GACENERGYCHARGE;
              sumObj.OTHERCHARGE += subItem.OTHERCHARGE;
              sumObj.REFUELINGGUN92 += subItem.REFUELINGGUN92;
              sumObj.REFUELINGGUN95 += subItem.REFUELINGGUN95;
              sumObj.REFUELINGGUN0 += subItem.REFUELINGGUN0;
              sumObj.HASPANTRY += subItem.HASPANTRY;
              sumObj.HASWIFI += subItem.HASWIFI;
              sumObj.TOILETCOUNT += subItem.TOILETCOUNT;
              sumObj.HASSHOWERROOM += subItem.HASSHOWERROOM;
              sumObj.HASWATERROOM += subItem.HASWATERROOM;
              sumObj.MICROWAVEOVEN += subItem.MICROWAVEOVEN;
              sumObj.WASHERCOUNT += subItem.WASHERCOUNT;
              sumObj.SLEEPINGPODS += subItem.SLEEPINGPODS;
              sumObj.SMALLPARKING += subItem.SMALLPARKING;
              sumObj.PACKING += subItem.PACKING;
              sumObj.TRUCKPACKING += subItem.TRUCKPACKING;
              sumObj.DANPACKING += subItem.DANPACKING;
              sumObj.BUSINESSTYPE = subItem.BUSINESSTYPE;
              if (subItem.HASPILOTLOUNGE) {
                sumObj.HASPILOTLOUNGE = true;
              }
              if (subItem.VEHICLEWATERFILLING) {
                sumObj.VEHICLEWATERFILLING = true;
              }
              if (subItem.HASCHILD) {
                sumObj.HASCHILD = true;
              }
              sumObj.DININGBXCOUNT += subItem.DININGBXCOUNT;
              sumObj.DININGROOMCOUNT += subItem.DININGROOMCOUNT;
              sumObj.HASBACKGROUNDRADIO += subItem.HASBACKGROUNDRADIO;
              sumObj.POINTCONTROLCOUNT += subItem.POINTCONTROLCOUNT;
            });
          }
          item.sumDetail = sumObj;
          res.push(item);
        });
      }
      this.serviceList = res;
      console.log("this.serviceList", this.serviceList);
      uni.hideLoading();
    },
    // 打开导航
    handleOpenMap(obj) {
      uni.openLocation({
        latitude: obj.SERVERPART_Y,
        longitude: obj.SERVERPART_X,
        scale: 16, // 缩放比例
        name: obj.SERVERPART_NAME,
        // address: "", // 这个可能会影响地图的定位，所以可以选择不填
        success(data) {
          console.log(data);
        },
        fail(err) {
          console.log(err);
        },
      });
    },
    // 跳转服务区详情
    handleGoServiceDetail(obj) {
      if (this.pageType === "food") {
        uni.navigateTo({
          url: `/pages/reservationOrder/index?id=${obj.SERVERPART_ID}&pageType=${this.pageType}`,
        });
      } else {
        uni.navigateTo({
          url: `/pages/serviceDetail/index?id=${obj.SERVERPART_ID}&pageType=${this.pageType}`,
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.main {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background-color: #f6f7f8;

  .searchBox {
    width: 100vw;
    box-sizing: border-box;
    padding: 16rpx 32rpx;
    background-color: #fff;

    .search {
      width: 100%;
      background: #f5f6f7;
      padding: 8rpx 16rpx 8rpx 32rpx;
      box-sizing: border-box;
      border-radius: 60rpx;
      display: flex;
      align-items: center;

      .searchIcon {
        width: 30rpx;
        height: 30rpx;
        margin-right: 12rpx;
      }

      .searchText {
        width: calc(100% - 72rpx);
        font-size: 28rpx;
      }
    }
  }

  .content {
    width: 100%;
    height: calc(100vh - 120rpx);
    padding: 32rpx;
    box-sizing: border-box;
    overflow-y: auto;

    .serviceList {
      width: 100%;
      height: 100%;

      .serviceItem {
        width: 100%;
        box-sizing: border-box;
        padding: 24rpx 16rpx;
        background-color: #fff;
        margin-bottom: 24rpx;
        border-radius: 16rpx;

        .itemTop {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 28rpx;
            color: #130f05;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            display: block;
            width: 80%;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }

          .status {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 22rpx;
            color: #01a157;
            line-height: 32rpx;
            text-align: justify;
            font-style: normal;
            background: #e9f8ee;
            border-radius: 2rpx;
            padding: 2rpx 6rpx;
          }
        }

        .itemBottom {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 16rpx;

          .bottmLeft {
            width: 300rpx;
            height: 300rpx;
            overflow: hidden;
            border-radius: 16rpx;

            .img {
              width: 100%;
              height: 100%;
            }
          }

          .bottmRight {
            width: calc(100% - 316rpx);
            height: 300rpx;

            .rightTop {
              width: 100%;
              height: 250rpx;

              .toiletItem {
                width: calc((100% - 16rpx) / 2);
                height: 48rpx;
                box-sizing: border-box;
                background: #f6f6f6;
                padding: 6rpx 16rpx;
                border-radius: 12rpx;
                margin-bottom: 16rpx;
                display: inline-block;
                margin-right: 8rpx;

                .itemBlock {
                  width: 100%;
                  height: 100%;

                  .toiletItemLeft {
                    display: flex;
                    align-items: center;

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

                    .toiletText {
                      font-family: PingFangSC, PingFang SC;
                      font-weight: 400;
                      font-size: 28rpx;
                      color: #160002;
                      line-height: 40rpx;
                      text-align: left;
                      font-style: normal;
                    }
                  }

                  .toiletItemRight {
                    .rightText {
                      font-family: PingFangSC, PingFang SC;
                      font-weight: 400;
                      font-size: 28rpx;
                      color: #999da3;
                      line-height: 40rpx;
                      text-align: left;
                      font-style: normal;
                    }
                  }
                }
              }
            }

            .rightBottom {
              width: 100%;
              height: 50rpx;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .goOrder {
                padding: 10rpx 12rpx;
                border-radius: 4rpx;
                border: 2rpx solid #ae8d3e;
                display: flex;
                align-items: center;

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

                .goOrderText {
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 22rpx;
                  color: #ba922f;
                  line-height: 32rpx;
                  text-align: left;
                  font-style: normal;
                }
              }

              .navigation {
                width: 48rpx;
                height: 48rpx;
              }
            }
          }
        }
      }
    }

    .noDataBox {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .content::-webkit-scrollbar {
    display: none;
  }
}
</style>