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

        <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>
    </div>

    <div class="pageTop" v-if="false">
      <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 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>

    <scroll-view scroll-y class="shopListBox" :style="{
      height: `${loginType === 'min'
        ? `calc(100vh - ${menu.bottom + 8 + 12}px)`
        : menu.height + 'px'
        }`,
    }">
      <div v-if="shopList && shopList.length > 0">
        <div class="shopItemBox" v-for="(item, index) in shopList" :key="index" @click.stop="goBuy(item)" :style="{
          marginBottom: index + 1 === shopList.length ? '0' : '',
          borderWidth: index + 1 === shopList.length ? '0' : '',
        }">
          <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 class="unit">分</span></span>
                  <span class="monthSales">月售{{ item.MONTHLYSALES || "-" }}</span>
                  <span class="perCapita">人均 ￥{{ item.PERCAPITA || "-" }}</span>
                </div>
                <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="couponList">
                <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">
                  <view class="couponIconBox">
                    <image class="couponIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/useCoupon.svg" />
                  </view>
                  <span class="couponText">优惠券</span>
                </div>
              </div>

              <!-- 去点餐 -->
              <div class="goOrder" v-if="item.SCANCODE_ORDER === 1" @click.stop="goBuy(item)">
                <image class="orderIcon" src="https://eshangtech.com/wanmeiyizhanImg/home/goOrderIcon.svg" />
                <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="https://eshangtech.com/wanmeiyizhanImg/home/useCoupon.png"
                />
                <span class="couponText">优惠券</span>
              </div> -->
            </div>
          </div>

          <div class="shopList" v-if="
            item.GoodsList &&
            item.GoodsList.length > 0 &&
            item.SCANCODE_ORDER === 1
          ">
            <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>
      <div v-else class="noDataBox">
        <no-data text="暂无可点餐门店" :isShow="!(shopList && shopList.length > 0)" />
      </div>
    </scroll-view>
    <CustomLoading :visible="isLoading" />
  </div>
</template>

<script>
import noData from "../../components/noData.vue";
import currentService from "../../components/currentService.vue";
import { mapGetters } from "vuex";
import { handleGetNearThreeService } from "../../utils/publicMethods";
import CustomLoading from "../../components/customLoading.vue";

export default {
  data() {
    return {
      serverPart: {},
      shopList: [],
      allTypeList: [], // 所有业态的
      onShowTypeList: [], // 显示的列表
      selectTypeList: [], // 选择业态的列表
      selectTypeTab: 0, // 选中的业态类型
      menu: {},
      isLoading: false,
      loginType: "",
    };
  },
  async onLoad() {
    let systemInfo = uni.getSystemInfoSync();
    let type = uni.getStorageSync("loginType");
    this.loginType = type;
    if (type === "min") {
      this.menu = uni.getMenuButtonBoundingClientRect();
    } else {
      this.menu = systemInfo.safeArea;
    }
    console.log("this.menu", this.menu);

    let serviceInfo = await handleGetNearThreeService()
    this.serverPart = serviceInfo.currentService
    await this.handleGetShopList();

    // let currentService = uni.getStorageSync("currentService");
    // console.log("currentService", currentService);
    //   获取这个服务区的门店列表 且自己筛选 只留下 可以点餐的门店
    // if (currentService) {
    //   this.serverPart = currentService;
    //   this.handleGetShopList();
    // } else {
    //   let _this = this;
    //   handleHavePointInMin().then((res) => {
    //     console.log("handleHavePointInMin", res);
    //     this.serverPart = res;
    //     _this.handleGetShopList();
    //   });
    // }
  },
  onShow() {
    let currentService = uni.getStorageSync("currentService");
    if (currentService.SERVERPART_ID !== this.serverPart.SERVERPART_ID) {
      this.serverPart = currentService;
      //   获取这个服务区的门店列表 且自己筛选 只留下 可以点餐的门店
      this.handleGetShopList();
    }
  },
  onShareAppMessage() {
    // let _this = this;
    return {
      title: "点餐列表",
      path: "/pages/reservationOrder/index",
      // imageUrl: _this.good.DEFAULT_IMG,
    };
  },
  onShareTimeline() {
    return {
      title: "点餐列表",
      path: "/pages/reservationOrder/index",
      // imageUrl: _this.good.DEFAULT_IMG,
    };
  },
  computed: {
    ...mapGetters({
      user: "user",
    }),
  },
  components: {
    noData,
    currentService, CustomLoading
  },
  methods: {
    handleBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 跳转到地图选择服务区
    goSelectServer() {
      uni.navigateTo({ url: "/pages/newMap/index/index" });
    },
    //   拿到门店列表
    async handleGetShopList() {
      this.shopList = [];
      this.allTypeList = [];
      this.onShowTypeList = [];
      this.selectTypeList = [];
      this.selectTypeTab = 0;

      // uni.showLoading({
      //   title: "加载中...",
      // });
      this.isLoading = true
      let _this = this;
      const data = await this.$api
        .getCoop({
          action_type: "GetSellerList",
          showSales: 1,
          showCoupon: 1,
          showComment: 1,
          serverpartId: this.serverPart.SERVERPART_ID,
          provinceCode: this.serverPart.ProvinceCode || "340000",
          showGoods: 1,
          pageSize: 9999,
          pageIndex: 1,
        })
      let list = data.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();
      _this.isLoading = false
      this.$forceUpdate()
    },
    // 按照查出来的门店的业态进行分类
    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}&buyType=${item.SCANCODE_ORDER}`,
        });
      } 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}&buyType=${item.SCANCODE_ORDER}`,
        });
        this.isLogin = true;
      }
    },
  },
};
</script>
<style scoped lang="less">
.main {
  width: 100%;
  height: 100vh;
  background: #fff;

  .top {
    width: 100%;
    box-sizing: border-box;
    background: #fff;

    .topContent {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 16px;

      .backIcon {
        width: 48rpx;
        height: 48rpx;
        margin-right: 8px;
      }

      .first {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        border: 1rpx solid #e7e7e6;
        border-radius: 48rpx;
        padding: 8rpx 24rpx;

        .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;
        }
      }
    }
  }

  .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: 32rpx;
      border-bottom: 1px solid #ededed;
      padding-bottom: 32rpx;

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

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

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

        .shopDetail {
          width: calc(100% - 136rpx);
          // 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: PingFang SC;
              font-weight: 400;
              font-size: 32rpx;
              color: #130f05;
              line-height: 44rpx;
              text-align: left;
              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 {
                font-family: "DINAlternate";
                font-weight: bold;
                font-size: 32rpx;
                color: #ba922f;
                line-height: 36rpx;
                text-align: justify;
                font-style: normal;

                .unit {
                  font-family: "PingFangSC";
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #ba922f;
                  line-height: 32rpx;
                  text-align: left;
                  font-style: normal;
                }
              }

              .monthSales {
                margin-left: 16rpx;
                font-family: "PingFangSC";
                font-weight: 400;
                font-size: 24rpx;
                color: #716f69;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
              }

              .perCapita {
                margin-left: 16rpx;
                font-family: "PingFangSC";
                font-weight: 400;
                font-size: 24rpx;
                color: #716f69;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
              }
            }

            .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;
              }
            }
          }

          .couponList {
            display: inline-block;
            margin-top: 12rpx;

            .couponBox {
              background: #fef0e5;
              border-radius: 2rpx;
              display: flex;
              align-items: center;

              .couponIconBox {
                width: 40rpx;
                height: 40rpx;
                background: linear-gradient(180deg, #ffddc0 0%, #ffeada 100%);
                border-radius: 4rpx;
                display: flex;
                align-items: center;
                justify-content: center;

                .couponIcon {
                  width: 24rpx;
                  height: 24rpx;
                }
              }

              .couponText {
                margin: 0 10rpx;
                font-family: "PingFangSC";
                font-weight: 400;
                font-size: 22rpx;
                color: #fa5825;
                line-height: 32rpx;
                text-align: left;
                font-style: normal;
              }
            }
          }

          .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";
              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% - 160rpx);
        box-sizing: border-box;
        margin-left: 160rpx;
        overflow-x: auto;
        display: flex;
        margin-top: 24rpx;

        .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";
            font-weight: 400;
            font-size: 22rpx;
            color: #130f05;
            line-height: 32rpx;
            text-align: justify;
            font-style: normal;
          }

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

            .itemPrice {
              font-family: "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;
          }
        }
      }
    }

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