<template>
  <div class="main">
    <div class="top" :style="{
      height: `${menu.height + 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="newTabList">
      <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: `calc(100vh - ${menu.top}px - ${menu.height + 8}px - 50px )`,
    }">
      <div v-if="onShowTypeList && onShowTypeList.length > 0">
        <div class="shopItemBox" v-for="(item, index) in onShowTypeList" :key="index" @click.stop="goBuy(item)" :style="{
          marginBottom: index + 1 === onShowTypeList.length ? '0' : '',
          borderWidth: index + 1 === onShowTypeList.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="shopDetailLeft">
                <div class="detailLeftTop">
                  <span class="topShopName">{{ item.MERCHANTS_NAME }}</span>
                </div>

                <div class="detailLeftBottom">
                  <view class="scoreBox">
                    <uni-rate :value="item.MERCHANTS_SCORE" size="16" readonly allowHalf color="#D9D9D9"
                      activeColor="#FFC300" style="margin-right: 8rpx" />
                    {{ item.MERCHANTS_SCORE || '' }}
                  </view>
                  <view class="newOtherDetail">
                    <span class="label">月售</span>
                    <span class="value">{{ item.MONTHLYSALES || "-" }}</span>
                    <span class="label" style="margin-left: 20rpx;">人均</span>
                    <span class="value">￥{{ item.PERCAPITA || "-" }}</span>
                  </view>
                </div>
              </div>
              <div class="shopDetailRight">
                <view class="goFood" v-if="item.SCANCODE_ORDER === 1" @click.stop="goBuy(item)">点餐</view>
                <view class="search" v-else-if="item.GOODSLIST && item.GOODSLIST.length > 0" @click.stop="goBuy(item)">
                  查看</view>
              </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" lazy-load :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>
  </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: {},
      menu: {},
      isFirst: true,// 判断是不是第一次进入到页面
    };
  },
  async onLoad(query) {
    console.log('queryqueryquery', query);

    // 拿到用户手机信息
    this.menu = uni.getMenuButtonBoundingClientRect();
    // 判断有没有传入 id 有的话 用传入的 没有的 就用缓存的当前的
    if (query.id) {
      // 拿到id
      this.thisServerpartId = query.id;
      //   获取这个服务区的门店列表 且自己筛选 只留下 可以点餐的门店
      await this.handleGetServerpartDetail(this.thisServerpartId);
    } else {
      // 没有传入id的话 就默认用当前选择的服务区
      let currentService = uni.getStorageSync("currentService");
      this.serverPart = currentService;
    }
    // 获得该服务区下面的门店列表
    await this.handleGetShopList();
    this.$utils.addUserBehaviorNew();
  },
  onShow() {
    if (!this.isFirst) {
      // 判断有没有去选择服务区页面修改了服务区
      let haveChange = uni.getStorageSync("serviceChange");
      console.log('haveChange', haveChange);

      if (haveChange) {
        uni.setStorageSync("serviceChange", false);
        let currentService = uni.getStorageSync("currentService");
        if (
          currentService.SERVERPART_ID !== this.serverPart.SERVERPART_ID
        ) {
          this.serverPart = currentService;
          this.thisServerpartId = currentService.SERVERPART_ID;
          //   获取这个服务区的门店列表 且自己筛选 只留下 可以点餐的门店
          this.handleGetShopList();
        }
      }
    } else {
      this.isFirst = false
    }

  },
  computed: {
    ...mapGetters({
      user: "user",
    }),
  },
  components: {
    noData,
    currentService,
  },
  methods: {
    handleBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 跳转到地图选择服务区
    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);
      }
      allList.unshift(list)

      if (allList && allList.length > 0) {
        // 各种业态类型的二维数组
        this.allTypeList = allList;
        this.onShowTypeList = allList[this.selectTypeTab];
        tabList.unshift({
          label: "全部",
          value: "0"
        })
        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) {
      console.log('value', 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;
  box-sizing: border-box;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

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


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


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

    .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: 2rem;
      height: 4rpx;
      background: #009DFF;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .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: 130rpx;
          height: 130rpx;
          overflow: hidden;
          border-radius: 16rpx;
          margin-right: 28rpx;

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

        .shopDetail {
          width: calc(100% - 158rpx);
          height: 130rpx;
          // height: 96rpx;
          display: flex;
          align-items: center;
          // flex-direction: column;
          // justify-content: space-between;
          // position: relative;

          .shopDetailLeft {
            width: calc(100% - 150rpx);
            height: 130rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .detailLeftTop {
              .topShopName {
                font-family: "Microsoft YaHei";
                font-weight: 400;
                font-size: 29rpx;
                color: #000000;
                text-align: left;
                font-style: normal;
              }
            }

            .detailLeftBottom {
              .scoreBox {
                display: flex;
                align-items: center;
                font-family: "Microsoft YaHei";
                font-weight: 400;
                font-size: 22rpx;
                color: #FF6200;
                text-align: left;
                font-style: normal;
                text-transform: none;
              }

              .newOtherDetail {
                width: 100%;
                display: flex;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                margin-top: 12rpx;

                .label {
                  font-family: "Microsoft YaHei";
                  font-weight: 400;
                  font-size: 22rpx;
                  color: rgba(0, 0, 0, 0.5);
                  text-align: left;
                  font-style: normal;
                  text-transform: none;
                  display: inline-block;
                  width: 50rpx;
                }

                .value {
                  font-family: "Microsoft YaHei";
                  font-weight: 400;
                  font-size: 22rpx;
                  color: #009DFF;
                  text-align: left;
                  font-style: normal;
                  text-transform: none;
                  display: inline-block;
                  width: 70rpx;
                }
              }
            }
          }

          .shopDetailRight {
            width: 150rpx;
            display: flex;
            justify-content: flex-end;

            .goFood {
              font-family: "Microsoft YaHei";
              font-weight: 400;
              font-size: 26rpx;
              color: #FFFFFF;
              text-align: center;
              font-style: normal;
              text-transform: none;
              padding: 8rpx 28rpx;
              background-color: #FF6200;
              border-radius: 32rpx;
              display: inline-block;
            }

            .search {
              font-family: "Microsoft YaHei";
              font-weight: 400;
              font-size: 26rpx;
              color: #FFFFFF;
              text-align: center;
              font-style: normal;
              text-transform: none;
              padding: 8rpx 28rpx;
              background-color: #009DFF;
              border-radius: 32rpx;
              display: inline-block;

            }
          }

          .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: 146rpx;
            // height: 96rpx;
            height: 146rpx;
            overflow: hidden;
            border-radius: 10rpx;
            margin-bottom: 12rpx;

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

          .shopName {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            font-family: "Microsoft YaHei";
            font-weight: 400;
            font-size: 24rpx;
            color: #000000;
            text-align: left;
            font-style: normal;
          }

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

            .itemPrice {
              font-family: "DINAlternate";
              font-weight: bold;
              font-size: 32rpx;
              color: #FF6200;
              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;
    }
  }

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