<template>
  <div class="main">
    <div class="pageTop">
      <div class="first" @click="goSelectServer">
        <image class="addressIcon" src="/static/images/home/servicePosition.svg" />
        <div class="text">{{ serverPart.SERVERPART_NAME || "" }}</div>
        <image class="moreIcon" src="/static/images/home/rightArrow.png" />
      </div>
      <div class="second">
        距您{{ serverPart.SERVERPART_DISTANCE || "-" }}km
      </div>
    </div>
    <!-- <div style="width: 100%; box-sizing: border-box; padding: 0 32rpx">
      <CurrentService
        :goDetail="false"
        :noIcon="true"
        :currentServiceMessage="serverPart"
      />
    </div> -->

    <div class="newTabList" v-if="false">
      <div :class="selectTypeTab === index ? 'newTabItem selectTabItem' : 'newTabItem'
        " v-for="(item, index) in selectTypeList" :key="index" @click="handleChangeType(index)">
        {{ item.label }}
      </div>
    </div>

    <div class="shopListBox">
      <div v-if="shopList && shopList.length > 0">
        <div class="shopItemBox" v-for="(item, index) in shopList" :key="index" @click.stop="goBuy(item)">
          <div class="shopItemTop">
            <div class="shopImg">
              <image class="shopIcon" :src="item.MERCHANTS_LOGO ||
                'https://eshangtech.com/ShopICO/no-picture.png'
                " mode="aspectFit" />
            </div>
            <div class="shopDetail">
              <div class="shopName">
                <span class="shopTitle">{{ item.MERCHANTS_NAME }}</span>
                <!-- <span class="titleIcon" v-if="item.SCANCODE_ORDER === 1"></span> -->
              </div>
              <div class="otherDetail">
                <div class="leftDetail">
                  <span class="mark">{{ item.MERCHANTS_SCORE }}分</span>
                  <!-- <span class="monthSales"
                    >月售{{ item.MONTHLYSALES || "-" }}</span
                  > -->
                </div>
                <span class="monthSales">月售{{ item.MONTHLYSALES || "-" }}</span>
                <div class="rightDetail">
                  <span class="perCapita">人均 ￥{{ item.PERCAPITA || "-" }}</span>
                  <!-- <span
                    v-show="item.CouponList && item.CouponList.length > 0"
                    class="icon-coupon"
                    >优惠券</span
                  > -->
                </div>
              </div>

              <!-- 去点餐 -->
              <div class="goOrder" v-if="item.SCANCODE_ORDER === 1" @click.stop="goBuy(item)">
                <image class="orderIcon" src="/static/images/home/goOrderIcon.png" />
                <span class="goOrderText">去点餐</span>
              </div>
              <!-- 优惠券 -->
              <div class="couponBox" :style="{
                right:
                  item.SCANCODE_ORDER === 1 &&
                    item.CouponList &&
                    item.CouponList.length > 0
                    ? '160rpx'
                    : '0',
              }" v-if="item.CouponList && item.CouponList.length > 0">
                <image class="couponIcon" src="/static/images/home/useCoupon.png" />
                <span class="couponText">优惠券</span>
              </div>
            </div>
          </div>

          <div class="shopList" v-if="item.GoodsList && item.GoodsList.length > 0">
            <div class="shopItem" v-for="(subItem, subIndex) in item.GoodsList" :key="subIndex">
              <div class="shopImgBox">
                <image class="shopImg" :src="subItem.IMAGE_URL" />
              </div>
              <div class="shopName">{{ subItem.COMMODITY_NAME || "" }}</div>
              <div class="itemPrice">
                <span class="itemUnit">¥</span>
                <span class="itemPrice">{{
                  subItem.COMMODITY_RETAILPRICE || ""
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <no-data v-else text="暂无可点餐门店" />
    </div>
  </div>
</template>

<script>
import noData from "../../components/noData.vue";
import currentService from "../../components/currentService.vue";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      serverPart: {},
      shopList: [],
      allTypeList: [], // 所有业态的
      onShowTypeList: [], // 显示的列表
      selectTypeList: [], // 选择业态的列表
      selectTypeTab: 0, // 选中的业态类型
      thisServerpartId: "",
      seatInfo: {},
      pageType: "",
    };
  },
  async onLoad(query) {
    console.log("query", query);
    if (query.id) {
      this.thisServerpartId = query.id;
    }
    if (query.pageType) {
      this.pageType = query.pageType;
    }
    let currentService = uni.getStorageSync("currentService");
    console.log("currentService", currentService);
    this.serverPart = currentService;
    //   获取这个服务区的门店列表 且自己筛选 只留下 可以点餐的门店
    await this.handleGetServerpartDetail(this.thisServerpartId);
    await this.handleGetShopList();
    this.$utils.addUserBehaviorNew();
  },
  onShow() {
    let currentService = uni.getStorageSync("currentService");
    if (
      currentService.SERVERPART_ID !== this.serverPart.SERVERPART_ID &&
      this.pageType !== "food"
    ) {
      this.serverPart = currentService;
      this.thisServerpartId = currentService.SERVERPART_ID;
      //   获取这个服务区的门店列表 且自己筛选 只留下 可以点餐的门店
      this.handleGetShopList();
    }
  },
  computed: {
    ...mapGetters({
      user: "user",
    }),
  },
  components: {
    noData,
    currentService,
  },
  methods: {
    // 跳转到地图选择服务区
    goSelectServer() {
      uni.navigateTo({ url: "/pages/newMap/index/index" });
    },
    async handleGetServerpartDetail(id) {
      let seatInfo = uni.getStorageSync("seatInfo");
      if (seatInfo) {
        seatInfo = JSON.parse(seatInfo);
      }
      let req = {
        ServerpartId: id,
        latitude: seatInfo.latitude,
        longitude: seatInfo.longitude,
      };
      uni.showLoading({
        title: "加载中...",
      });
      const data = await this.$api.$get(
        "/CommercialApi/BaseInfo/GetServerpartInfo",
        req
      );
      this.serverPart = data.Result_Data;
      console.log("this.serverPart", this.serverPart);
    },
    //   拿到门店列表
    async handleGetShopList() {
      this.shopList = [];
      this.allTypeList = [];
      this.onShowTypeList = [];
      this.selectTypeList = [];
      this.selectTypeTab = 0;

      uni.showLoading({
        title: "加载中...",
      });
      let _this = this;
      // this.$api
      //   .getCoop({
      //     action_type: "GetSellerList",
      //     showSales: 1,
      //     showCoupon: 1,
      //     showComment: 1,
      //     serverpartId: this.thisServerpartId || this.serverPart.SERVERPART_ID,
      //     provinceCode: "530000",
      //     showGoods: 1,
      //     pageSize: 9999,
      //     pageIndex: 1,
      //   })
      //   .then(function (data) {
      const data = await this.$api.$javaGet("/third-party/getMerchantsList", {
        serverpartId: this.thisServerpartId || this.serverPart.SERVERPART_ID,
      });

      // let list = data.Data.List;
      let list = data.Result_Data.List
      console.log("list", list);
      let shopList = [];
      if (list && list.length > 0) {
        list.forEach((item) => {
          if (item.SCANCODE_ORDER === 1) {
            shopList.push(item);
          }
        });
      }
      _this.handleSortShopList(shopList);
      console.log("shopList", shopList);
      _this.shopList = shopList;
      uni.hideLoading();
      // });
    },
    // 按照查出来的门店的业态进行分类
    handleSortShopList(list) {
      let allList = [];
      let tabList = [];
      // 优惠券列表
      let couponList = [];

      // 先遍历出 全部门店的业态
      if (list && list.length > 0) {
        let idList = [];
        list.forEach((item) => {
          if (idList.indexOf(item.SHOPTRADE) === -1) {
            idList.push(item.SHOPTRADE);
            tabList.push({ label: item.SHOPTRADE_TEXT, value: item.SHOPTRADE });
          }
          if (item.CouponList && item.CouponList.length > 0) {
            item.CouponList.forEach((subItem) => {
              let obj = JSON.parse(JSON.stringify(subItem));
              obj.MERCHANTS_LOGO = item.MERCHANTS_LOGO;
              obj.MERCHANTS_NAME = item.MERCHANTS_NAME;
              obj.parent = item;
              couponList.push(obj);
            });
          }
        });
        // 根据遍历出的业态种类 变成一个二维数据
        if (idList && idList.length > 0) {
          idList.forEach((item) => {
            allList.push([]);
          });
          idList.forEach((item, index) => {
            list.forEach((subItem) => {
              if (item === subItem.SHOPTRADE) {
                let oldList = allList[index];
                oldList.push(subItem);
              }
            });
          });
        }
        console.log("allList", allList);
      }

      if (allList && allList.length > 0) {
        // 各种业态类型的二维数组
        this.allTypeList = allList;
        this.onShowTypeList = allList[this.selectTypeTab];
        this.selectTypeList = tabList;
        console.log("this.allTypeList", this.allTypeList);
        console.log("this.allTypeLonShowTypeListist", this.onShowTypeList);
        console.log("this.selectTypeTab", this.selectTypeTab);
        console.log("this.selectTypeList", this.selectTypeList);
      }
    },
    // 修改业态tab
    handleChangeType(value) {
      this.selectTypeTab = value;
      this.onShowTypeList = this.allTypeList[this.selectTypeTab];
    },
    goBuy(item) {
      console.log("goBuy", item);
      if (this.user.MEMBERSHIP_MOBILEPHONE) {
        let id = item.SERVERPARTSHOP_IDS.split(",")[0];
        uni.navigateTo({
          url: `/pages/shopPages/shop/index?id=${id}&mid=${item.MERCHANTS_ID}&province=${item.PROVINCE_CODE}`,
        });
      } else {
        let id = item.SERVERPARTSHOP_IDS.split(",")[0];
        uni.navigateTo({
          url: `/pages/shopPages/shop/index?id=${id}&mid=${item.MERCHANTS_ID}&province=${item.PROVINCE_CODE}`,
        });
        this.isLogin = true;
      }
    },
  },
};
</script>
<style scoped lang="less">
.main {
  width: 100%;
  height: 100vh;
  background: #fff;

  .pageTop {
    width: 100%;
    box-sizing: border-box;
    padding: 12rpx 32rpx;
    background: #fff;

    .first {
      width: 100%;
      display: flex;
      align-items: center;
      box-sizing: border-box;

      .addressIcon {
        width: 24rpx;
        height: 24rpx;
        margin-right: 8rpx;
      }

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

      .moreIcon {
        margin-left: 8rpx;
        width: 24rpx;
        height: 24rpx;
      }
    }

    .second {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #716f69;
      line-height: 36rpx;
      text-align: justify;
      font-style: normal;
      margin-left: 32rpx;
    }
  }

  .newTabList {
    width: 100%;
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
    border-bottom: 1px solid #dddcdc;
    margin-top: 16rpx;

    .newTabItem {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #716f69;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      padding: 0 50rpx 12rpx 50rpx;
      white-space: nowrap;
    }

    .selectTabItem {
      font-family: PingFangSC, PingFang SC;
      font-weight: bold;
      font-size: 28rpx;
      color: #130f05;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      position: relative;
    }

    .selectTabItem:after {
      content: "";
      position: absolute;
      width: 100%;
      height: 4rpx;
      background: #ba922f;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .newTabList::-webkit-scrollbar {
    display: none;
  }

  .shopListBox {
    margin-top: 24rpx;
    width: 100%;
    box-sizing: border-box;
    padding: 0 24rpx;

    .shopItemBox {
      width: 100%;
      margin-bottom: 16rpx;
      border-bottom: 1px solid #ededed;
      padding-bottom: 12rpx;

      .shopItemTop {
        width: 100%;
        display: flex;
        align-items: flex-start;

        .shopImg {
          width: 96rpx;
          height: 96rpx;
          overflow: hidden;
          border-radius: 8rpx;
          margin-right: 16rpx;

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

        .shopDetail {
          width: calc(100% - 112rpx);
          height: 96rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          position: relative;

          .shopName {
            width: 100%;
            display: flex;
            align-items: center;

            .shopTitle {
              display: inline-block;
              max-width: calc(100% - 133rpx);
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #130f05;
              text-align: justify;
              font-style: normal;
            }

            .titleIcon {
              display: inline-block;
              background: url("https://eshangtech.com/ShopICO/icos/to-eat.png") no-repeat center; // eshangtech.com/ShopICO/icos/to-eat.png) no-repeat center;
              background-size: contain;
              width: 133rpx;
              height: 48rpx;
            }
          }

          .otherDetail {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .leftDetail {
              .mark {
                color: #d45e0e;
                font-size: 26rpx;
                font-weight: bold;
              }

              .monthSales {
                margin-left: 12px;
                font-size: 24rpx;
                color: #666;
              }
            }

            .monthSales {
              margin-left: 12px;
              font-size: 24rpx;
              color: #666;
            }

            .rightDetail {
              .perCapita {
                font-size: 24rpx;
                color: #666;
              }

              .icon-coupon {
                background: url("https://eshangtech.com/ShopICO/icos/y-yhq.png") no-repeat left center; // eshangtech.com/ShopICO/icos/y-yhq.png) no-repeat left center
                background-size: contain;
                // width 75rpx
                // height 22rpx
                padding-left: 40rpx;
                height: 27rpx;
                line-height: 27rpx;
                // padding-left 25rpx
                font-size: 24rpx;
                color: #ec5930;
                margin-left: 8px;
              }
            }
          }

          .goOrder {
            position: absolute;
            right: 0;
            top: 0;
            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;
            }
          }

          .couponBox {
            padding: 4rpx 6rpx;
            background: rgba(247, 80, 49, 0.08);
            border-radius: 2rpx;
            display: flex;
            align-items: center;
            position: absolute;
            right: 160rpx;
            top: 0;

            .couponIcon {
              width: 24rpx;
              height: 24rpx;
              margin-right: 4rpx;
            }

            .couponText {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 22rpx;
              color: #f75031;
              line-height: 32rpx;
              text-align: left;
              font-style: normal;
              white-space: nowrap;
            }
          }
        }
      }

      .shopList {
        width: calc(100% - 120rpx);
        box-sizing: border-box;
        margin-left: 120rpx;
        overflow-x: auto;
        display: flex;
        margin-top: 12rpx;

        .shopItem {
          width: 168rpx;
          margin-right: 16rpx;

          .shopImgBox {
            width: 168rpx;
            height: 128rpx;
            overflow: hidden;
            border-radius: 12rpx;
            margin-bottom: 8rpx;

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

          .shopName {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 22rpx;
            color: #130f05;
            line-height: 32rpx;
            text-align: justify;
            font-style: normal;
          }

          .itemPrice {
            .itemUnit {
              font-family: DINAlternate, DINAlternate;
              font-weight: bold;
              font-size: 24rpx;
              color: #130f05;
              text-align: left;
              font-style: normal;
            }

            .itemPrice {
              font-family: DINAlternate, DINAlternate;
              font-weight: bold;
              font-size: 32rpx;
              color: #130f05;
              text-align: left;
              font-style: normal;
            }
          }
        }
      }

      .shopList::-webkit-scrollbar {
        display: none;
      }

      .activitieBox {
        width: 100%;
        box-sizing: border-box;
        padding-top: 24rpx;

        .activeTitle {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #716f69;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          margin-bottom: 16rpx;
        }

        .couponList {
          width: 100%;
          display: flex;
          align-items: center;

          .couponItem {
            width: calc((100% - 24rpx) / 2);
            margin-right: 24rpx;

            .itemImgBox {
              width: 100%;
              height: 192rpx;
              border-radius: 12rpx;
              overflow: hidden;
              margin-bottom: 16rpx;

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

            .couponText {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #130f05;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .couponTime {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #716f69;
              line-height: 36rpx;
              text-align: justify;
              font-style: normal;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }

          .couponItem:nth-child(2n) {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>