<template>
  <div class="page-cont" :style="isShow ? 'overflow:hidden' : ''">
    <div class="store-cont">
      <div class="store-detail">
        <div class="store-img">
          <image
            mode="aspectFit"
            lazy-load="true"
            :src="
              merchatsMsg.MERCHANTS_LOGO ||
              'https://eshangtech.com/ShopICO/no-picture.png'
            "
          />
        </div>
        <div>
          <div class="store-title">{{ merchatsMsg.MERCHANTS_NAME }}</div>
          <div class="store-has-c">
            <text>公告：欢迎光临</text>
            <image
              v-if="couponList.length > 0"
              @click="handleOpenPopup"
              src="https://eshangtech.com/ShopICO/icos/shop-coupon.png"
            ></image>
          </div>
          <div class="store-info">
            评价{{ merchatsMsg.MERCHANTS_SCORE || "-" }}
            <span style="margin: 0 8rpx; color: #fff; font-size: 22rpx">|</span>
            月售{{ merchatsMsg.MONTHLYSALES || 0 }}
          </div>
        </div>
      </div>
    </div>

    <div class="tabsBox">
      <div
        :class="activeTabs === item.value ? 'tabItem selectTabItem' : 'tabItem'"
        v-for="(item, index) in tabList"
        :key="index"
        @click="changeActive(item.value)"
      >
        {{ item.label }}
        <span class="smallNumber" v-if="item.value === 2">{{
          merchatsMsg.COMMENT_COUNT || ""
        }}</span>
      </div>
      <!-- CAA97F  -->
    </div>
    <div class="nowContent" v-if="activeTabs === 1">
      <div class="goods" :style="{ height: goodsH + 'px' }">
        <!-- 左侧产品分类列表 -->
        <div class="menu-wrapper" :style="{ height: goodsH + 'px' }">
          <scroll-view
            scroll-y
            scroll-with-animation="true"
            style="height: 100%; -webkit-overflow-scrolling: touch"
            :scroll-into-view="leftToView"
          >
            <div
              class="menu-item"
              :class="{ current: catLightIndex == index }"
              v-for="(item, index) in catList"
              :key="index"
              :id="'left_' + index + '_' + item.USERDEFINEDTYPE_ID"
              @click="catClickFn"
            >
              <!-- <i :class="{'hot-ico':item.USERDEFINEDTYPE_NAME==='热销','recommend-ico':item.USERDEFINEDTYPE_NAME==='推荐'}"></i> -->
              <div class="menu-item-title">
                {{ item.name }}<br />{{ item.catename }}
              </div>
              <i
                class="cate-count"
                v-show="shoppingCateCount[item.USERDEFINEDTYPE_ID]"
                >{{ shoppingCateCount[item.USERDEFINEDTYPE_ID] }}</i
              >
            </div>
          </scroll-view>
        </div>
        <!-- 右侧产品分类列表 :style="{height: totalPay > 0 ? (goodsH-100 + 'px'): (goodsH + 'px')}"-->
        <div class="foods-wrapper">
          <scroll-view
            scroll-y
            style="height: 100%; -webkit-overflow-scrolling: touch"
            @scroll="getIndexFromHArr"
            :scroll-into-view="toView"
            scroll-with-animation="true"
          >
            <view
              v-for="(item, findx) in catList"
              :key="findx"
              class="food-block"
            >
              <div
                class="goodlist-title"
                :id="'catGood_' + item.USERDEFINEDTYPE_ID"
              >
                {{ item.USERDEFINEDTYPE_NAME }}
              </div>
              <view
                v-for="(good, s) in item.COMMODITYLIST"
                class="newFoodsItem"
                :key="s"
              >
                <view class="leftItem">
                  <image
                    class="leftImg"
                    mode="aspectFit"
                    lazy-load="true"
                    :src="
                      good.IMAGE_PATH ||
                      'https://eshangtech.com/ShopICO/no-picture.png'
                    "
                  ></image>
                </view>
                <view class="rightItem">
                  <view class="shopName">{{ good.COMMODITY_NAME }}</view>

                  <view class="shopPrice">
                    <view class="leftPrice">
                      <span class="unit">¥</span>
                      <span class="price">{{ good.COMMODITY_CURRPRICE }}</span>
                    </view>
                    <!-- 右边的加减器 -->
                    <view class="rightPrice">
                      <image
                        v-show="
                          shoppingCart[
                            good.USERDEFINEDTYPE_ID + '_' + good.id
                          ] &&
                          shoppingCart[
                            good.USERDEFINEDTYPE_ID + '_' + good.id
                          ] > 0
                        "
                        @click="decreaseGoodToCartFn($event, good)"
                        class="icon"
                        :id="
                          'decrease_' +
                          good.COMMODITY_ID +
                          '_' +
                          good.USERDEFINEDTYPE_ID
                        "
                        src="/static/images/home/reduce.png"
                      />

                      <text class="acount" v-if="good.id">{{
                        shoppingCart[good.USERDEFINEDTYPE_ID + "_" + good.id]
                          ? shoppingCart[
                              item.USERDEFINEDTYPE_ID + "_" + good.id
                            ]
                          : ""
                      }}</text>

                      <image
                        @click="touchOnGoods($event, good)"
                        :id="
                          'add_' +
                          good.COMMODITY_ID +
                          '_' +
                          good.USERDEFINEDTYPE_ID
                        "
                        class="icon"
                        src="/static/images/home/add.png"
                      />
                    </view>
                  </view>
                </view>

                <view v-if="false">
                  <text class="title">{{ good.COMMODITY_NAME }}</text>
                  <view class="content">
                    <image
                      class="good-img"
                      mode="aspectFit"
                      lazy-load="true"
                      :src="
                        good.IMAGE_PATH ||
                        'https://eshangtech.com/ShopICO/no-picture.png'
                      "
                    ></image>

                    <div class="detail-price">
                      <div class="price">
                        <span class="unit">¥</span
                        >{{ good.COMMODITY_CURRPRICE }}
                        <span v-show="good.SKULIST.length > 0">起</span>
                      </div>
                      <!--加减器-->

                      <view class="cartcontrol">
                        <span
                          v-show="
                            shoppingCart[
                              good.USERDEFINEDTYPE_ID + '_' + good.id
                            ] &&
                            shoppingCart[
                              good.USERDEFINEDTYPE_ID + '_' + good.id
                            ] > 0
                          "
                          @click="decreaseGoodToCartFn($event, good)"
                          class="cart-decrease"
                          :id="
                            'decrease_' +
                            good.COMMODITY_ID +
                            '_' +
                            good.USERDEFINEDTYPE_ID
                          "
                        ></span>

                        <text class="cart-count" v-if="good.id">{{
                          shoppingCart[good.USERDEFINEDTYPE_ID + "_" + good.id]
                            ? shoppingCart[
                                item.USERDEFINEDTYPE_ID + "_" + good.id
                              ]
                            : ""
                        }}</text>

                        <span
                          @click="touchOnGoods($event, good)"
                          :id="
                            'add_' +
                            good.COMMODITY_ID +
                            '_' +
                            good.USERDEFINEDTYPE_ID
                          "
                          class="cart-add icon-add_circle"
                        >
                        </span>
                      </view>
                    </div>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </div>
      </div>
      <!--选择商品区域-->
      <view class="shopcart" v-show="totalPay > 0">
        <view class="content">
          <view class="content-left" @click="showShopCartFn">
            <view class="logo-wrapper">
              <view class="iconBox">
                <image
                  class="shopCarFood"
                  src="/static/images/home/shopCarFoodIcon.svg"
                />
              </view>

              <!-- <van-icon
                name="cart-circle"
                size="100rpx"
                :color="totalNum > 0 ? '#CAA97F' : '#ddd'"
                custom-style="margin-right:8rpx"
              />

              <i class="icon-shopping_cart"></i> -->

              <view class="num" v-if="totalNum">{{ totalNum }}</view>
            </view>
            <view class="price">￥{{ totalPay }}</view>
          </view>
          <view class="content-right">
            <view @click="goPayFn" class="pay-btn">去结算</view>
          </view>
        </view>
        <div class="cover" @click="showShopCartFn" v-show="showShopCart"></div>
        <view class="shopcart-list" :class="showShopCart ? '' : 'hidden'">
          <view class="list-header">
            <text class="title-line">已选商品</text>
            <van-icon
              name="delete"
              @click="clearShopCartFn"
              size="40rpx"
              class="empty"
            />
          </view>
          <scroll-view class="list-content" scroll-y style="max-height: 257px">
            <view class="food" v-for="(good, o) in shopCart" :key="o">
              <view class="name">{{
                good.COMMODITY_RULE
                  ? good.COMMODITY_NAME +
                    "(" +
                    good.COMMODITY_RULE +
                    good.SALEDETAIL_DESC +
                    ")"
                  : good.COMMODITY_NAME + "(" + good.SALEDETAIL_DESC + ")"
              }}</view>
              <view class="price">￥{{ good.COMMODITY_CURRPRICE }}</view>

              <view class="cartcontrol">
                <span
                  @click="decreaseGoodToCartFn($event, good)"
                  :id="
                    'decrease_' +
                    good.COMMODITY_ID +
                    '_' +
                    good.USERDEFINEDTYPE_ID
                  "
                  class="cart-decrease"
                ></span>
                <text class="cart-count">{{ good.count }}</text>

                <span
                  @click="addGoodToCartFn($event, good)"
                  :id="
                    'add_' + good.COMMODITY_ID + '_' + good.USERDEFINEDTYPE_ID
                  "
                  class="cart-add icon-add_circle"
                ></span>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </div>

    <div class="nowContent" v-if="activeTabs === 2">
      <merchant-evaluation
        ref="merchantEvaluation"
        :storeMsg="merchatsMsg"
        :merchantsId="merchatsMsg.MERCHANTS_ID"
      />

      <div class="rate-box" @click="goEvaluate">
        <div class="rate-gray">评价一下这家店...</div>
        <div class="rate-ico"><i></i>评论</div>
      </div>
    </div>

    <div class="nowContent" v-if="activeTabs === 3">
      <div style="padding: 0 16rpx 40rpx 32rpx">
        <div v-if="false">
          <div class="info-desc-title" v-if="merchatsMsg.ImgList">
            <van-icon
              name="photo-o"
              size="40rpx"
              color="#CAA97F"
              custom-style="margin-right:16rpx;vertical-align:middle;"
            ></van-icon>
            <text>商家实景</text>
          </div>
          <div class="store-photo-box" v-if="merchatsMsg.ImgList">
            <swiper
              scroll-x="true"
              class="swiper-image"
              :display-multiple-items="merchatsMsg.ImgList.length > 1 ? 2 : 1"
              next-margin="120rpx"
              :style="merchatsMsg.ImgList.length == 1 ? 'width:405rpx' : ''"
            >
              <swiper-item
                v-for="(item, i) in merchatsMsg.ImgList"
                :key="i"
                class="store-photo"
                @click="seePhoto(merchatsMsg.ImgList, i)"
              >
                <image mode="aspectFill" :src="item.IMAGE_URL"></image>
              </swiper-item>
            </swiper>
          </div>
          <block v-if="foodImages.length > 0">
            <div class="info-desc-title">
              <van-icon
                name="photo-o"
                size="40rpx"
                color="#CAA97F"
                custom-style="margin-right:16rpx;vertical-align:middle;"
              ></van-icon>
              <span>推荐商品</span>
            </div>
            <div class="store-photo-box">
              <swiper
                scroll-x="true"
                class="swiper-image"
                :display-multiple-items="foodImages.length > 1 ? 2 : 1"
                next-margin="120rpx"
                :style="foodImages.length == 1 ? 'width:405rpx' : ''"
              >
                <swiper-item
                  v-for="(item, i) in foodImages"
                  :key="i"
                  class="store-photo"
                  @click="seePhoto(foodImages, i)"
                >
                  <image mode="aspectFill" :src="item.IMAGE_URL"></image>
                  <div class="photo-name">{{ item.TITLE }}</div>
                </swiper-item>
              </swiper>
            </div>
          </block>
        </div>

        <div class="storeDetail">
          <div class="storeItem">
            <div class="itemTop">
              <div class="imgBox">
                <image
                  class="storeIcon"
                  src="/static/images/home/MERCHANTSDESC.png"
                />
              </div>

              <span class="desc">商家介绍：</span>
            </div>
            <div class="infoDesc">
              {{ merchatsMsg.MERCHANTS_DESC || "暂无" }}
            </div>
          </div>

          <div class="storeItem">
            <div class="itemTop">
              <div class="imgBox">
                <image
                  class="storeIcon"
                  src="/static/images/home/onlineTime.png"
                />
              </div>

              <span class="desc">营业时间：</span>
            </div>
            <div class="infoDesc">
              {{ merchatsMsg.BUS_STARTDATE || "暂无" }}
            </div>
          </div>

          <div class="storeItem">
            <div class="itemTop">
              <div class="imgBox">
                <image
                  class="storeIcon"
                  src="/static/images/home/detailPhone.png"
                />
              </div>

              <span class="desc">电话：</span>
            </div>
            <div class="infoDesc">
              {{ merchatsMsg.MERCHANTS_TELEPHONE || "暂无" }}
            </div>
          </div>

          <div class="storeItem">
            <div class="itemTop">
              <div class="imgBox">
                <image
                  class="storeIcon"
                  src="/static/images/home/addressIcon.png"
                />
              </div>

              <span class="desc">地址：</span>
            </div>
            <div class="infoDesc">
              {{ merchatsMsg.MERCHANTS_ADDRESS || "暂无" }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <UniPopup
      :show="isShow"
      position="bottom"
      overlay="false"
      ref="popup"
      closeable
      @close="handleClosePopup"
      :safe-area="false"
    >
      <div class="popup-coupon">
        <h3 class="popup-title">优惠券</h3>
        <scroll-view
          class="coupon-list-box"
          scroll-y
          style="-webkit-overflow-scrolling: touch"
          :style="{ height: goodsH - 100 + 'px' }"
        >
          <card
            :props="item"
            v-for="(item, i) in couponList"
            :key="i"
            :type="1"
            @drop="goDetail"
          />
        </scroll-view>
      </div>
    </UniPopup>
    <UniPopup :show="rulePop" @close="rulePop = false" duration="50">
      <div class="rule-pop">
        <div class="rule-pop-head">
          <image
            class="good-img"
            mode="aspectFit"
            lazy-load="true"
            :src="
              popMsg.IMAGE_PATH ||
              'https://eshangtech.com/ShopICO/no-picture.png'
            "
          ></image>
          <div>
            <div class="">{{ popMsg.COMMODITY_NAME }}</div>
            <!-- <div class="text">已选: {{popMsg.COMMODITY_RULE}}</div> -->
            <div class="price">￥{{ popMsg.COMMODITY_CURRPRICE }}</div>
          </div>
        </div>
        <div class="rule-pop-center">
          <div v-if="popMsg.SKULIST && popMsg.SKULIST.length">
            <div class="rule-tags-title">规格</div>
            <div class="rule-pop-tags">
              <span
                class="rule-tag"
                v-for="(r, rindex) in popMsg.SKULIST"
                :key="rindex"
                :class="{ active: popMsg.COMMODITY_RULE === r.COMMODITY_RULE }"
                @click="selectPop(r)"
                >{{ r.COMMODITY_RULE }}</span
              >
            </div>
          </div>
          <div v-if="popMsg.BATCHINGLIST && popMsg.BATCHINGLIST.length > 0">
            <div v-for="(batching, index) in popMsg.BATCHINGLIST" :key="index">
              <div class="rule-tags-title">
                {{ batching.BATCHINGTYPE_NAME }}
              </div>
              <div class="rule-pop-tags">
                <span
                  class="rule-tag"
                  v-for="(batchingName, rindex) in batching.BatchingInfo"
                  :key="rindex"
                  :class="{
                    active: popMsg.SALEDETAIL_DESC[index] == batchingName,
                  }"
                  @tap="selectSaleDetail(index, batchingName)"
                  >{{ batchingName }}</span
                >
              </div>
            </div>
          </div>
        </div>
        <div class="rule-pop-btn" @tap="selectRule">选好了</div>
      </div>
    </UniPopup>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import MerchantEvaluation from "./components/merchantEvaluation.vue";
import card from "../../../components/card.vue";
import UniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";

export default {
  data() {
    return {
      stroreId: "",
      tableNum: 0,
      isShow: false,
      catList: [],
      shoppingCart: {},
      shoppingCateCount: {},
      shopCart: [], // 购物车的物品列表
      catLightIndex: 0,
      totalNum: 0,
      totalPay: 0,
      goodsH: 0,
      leftToView: "", // 左边菜单栏随右侧菜单滚动的距离
      //   scrollToGoodsView: 0,
      toView: "",
      //   GOODVIEWID: 'catGood_',
      goodsNumArr: [0], // 记录了每个类型商品占用的高度
      //   chooseGoodArr: [], // 购物车的物品列表
      showShopCart: false, // 购物列表是否展示
      fromClickScroll: false, // 标记左侧的滚动来源，false是来自于本身的滚动，true是点击引导的滚动,
      rulePop: false,
      popMsg: {},
      //   popRule: [],
      //   selectId: '',
      merchatsMsg: {}, // 商户信息
      couponList: [], // 商户优惠券
      foodImages: [], // 商户推荐菜品
      activeTabs: 1,
      tabList: [
        { label: "点餐", value: 1 },
        { label: "评价", value: 2 },
        { label: "商家", value: 3 },
      ],
      storeMsg: {},
    };
  },
  computed: {
    ...mapGetters({
      //   'store': 'nowStore',
      shopcartOrder: "shopcartOrder",
      user: "user",
      //   'provinceCode': 'provinceCode'
    }),
  },
  components: {
    MerchantEvaluation,
    card,
    UniPopup,
  },
  methods: {
    // ...mapMutations(['setprovinceCode']),
    // 显示悬浮框
    handleOpenPopup() {
      this.isShow = true;
      this.$refs.popup.open("bottom");
    },
    handleClosePopup() {
      this.isShow = false;
      this.$refs.popup.close();
    },
    changeActive(value) {
      this.activeTabs = value;
      this.$forceUpdate();
      if (value === 2) {
        setTimeout(() => {
          this.$refs.merchantEvaluation.loading();
        });
      }
    },
    seePhoto(item, i) {
      let urls = [];
      item.map((n) => {
        urls.push(n.IMAGE_URL);
      });
      uni.previewImage({
        current: urls[i], // 当前显示图片的http链接
        urls: urls, // 需要预览的图片http链接列表
      });
    },
    getNewGood(servePartId, provinceCode) {
      let _this = this;
      let height = (294 / 750) * uni.getSystemInfoSync().windowWidth;
      let _height = (64 / 750) * uni.getSystemInfoSync().windowWidth;
      this.$api
        .getCoop({
          action_type: "UserDefinedTypeAndGoods",
          action_data: servePartId,
          province_code: provinceCode || "530000",
        })
        .then((res) => {
          let HArr = [0];
          let list = [];
          res.List.map((n, i) => {
            if (n.USERDEFINEDTYPE_NAME.indexOf("(") > -1) {
              let _name = n.USERDEFINEDTYPE_NAME.split("(");
              n.catename = _name[1].replace(")", "");
              n.name = _name[0];
            } else if (n.USERDEFINEDTYPE_NAME.indexOf("（") > -1) {
              let _name = n.USERDEFINEDTYPE_NAME.split("（");
              n.catename = "(" + _name[1].replace("）", "") + ")";
              n.name = _name[0];
            } else {
              n.catename = "";
              n.name = n.USERDEFINEDTYPE_NAME;
            }

            let s = [];
            n.COMMODITYLIST.map((m) => {
              let {
                COMMODITY_ID,
                COMMODITY_CODE,
                COMMODITY_NAME,
                COMMODITY_BARCODE,
                COMMODITY_UNIT,
                COMMODITY_RULE,
                COMMODITY_CURRPRICE,
                SKULIST,
                IMAGE_PATH,
                USERDEFINEDTYPE_ID,
                BATCHINGLIST,
              } = m;
              let id = Number(
                Math.random().toString().substr(3, 5) + Date.now()
              ).toString(36);
              let newData = {
                COMMODITY_ID,
                COMMODITY_CODE,
                COMMODITY_NAME,
                COMMODITY_BARCODE,
                COMMODITY_UNIT,
                COMMODITY_RULE,
                COMMODITY_CURRPRICE,
                IMAGE_PATH,
                USERDEFINEDTYPE_ID,
                SKULIST,
                BATCHINGLIST,
                id,
              };
              if (SKULIST.length > 0) {
                let newskulist = [];
                SKULIST.map((n) => {
                  newskulist.push({
                    COMMODITY_ID: n.COMMODITY_ID,
                    COMMODITY_CODE: n.COMMODITY_CODE,
                    COMMODITY_BARCODE: n.COMMODITY_BARCODE,
                    COMMODITY_RULE: n.COMMODITY_RULE,
                    COMMODITY_CURRPRICE: n.COMMODITY_CURRPRICE,
                    COMMODITY_UNIT: n.COMMODITY_UNIT,
                  });
                });
                newData.SKULIST = newskulist;
              }
              s.push(newData);
            });

            list.push({
              ...n,
              COMMODITYLIST: s,
            });
            HArr.push(s.length * height + _height + HArr[i]); // 计算每个类别的滚动条高度
          });
          _this.catList = list;
          // 存下项目下的产品个数
          _this.goodsNumArr = HArr;
          // 初始化右侧商品一开始滚动的位置
          _this.toView = "";
        });
    },
    // 右侧列表滚动事件
    // 传入滚动的值，去让右侧的类型也跟着变动
    getIndexFromHArr: function (e) {
      let value = e.mp.detail.scrollTop;
      // 找出滚动高度的区间，则找出展示中的商品是属于哪个类型
      for (let j = 0; j < this.goodsNumArr.length; j++) {
        if (
          value >= this.goodsNumArr[j] &&
          (value < this.goodsNumArr[j + 1] ||
            this.goodsNumArr[j + 1] === undefined)
        ) {
          if (!this.fromClickScroll) {
            this.catLightIndex = j;
          }
        }
      }
      this.fromClickScroll = false;
    },
    // 左侧列表点击事件
    catClickFn: function (e) {
      //   let that = this
      let _index = e.currentTarget.id.split("_")[1];
      let goodListId = e.currentTarget.id.split("_")[2];

      // //左侧点击高亮
      this.fromClickScroll = true;

      this.catLightIndex = _index;

      // 右侧滚动到相应的类型
      this.toView = "catGood_" + goodListId;
      this.leftToView = "left_" + _index + "_" + goodListId;
    },
    // 添加商品到购物车
    addGoodToCartFn: function (e, item) {
      let shoppingCart = JSON.parse(JSON.stringify(this.shoppingCart));
      let {
        COMMODITY_ID,
        COMMODITY_CODE,
        COMMODITY_NAME,
        COMMODITY_BARCODE,
        COMMODITY_UNIT,
        COMMODITY_RULE,
        COMMODITY_CURRPRICE,
        IMAGE_PATH,
        USERDEFINEDTYPE_ID,
        count,
        id,
      } = item;
      let addItem = {
        COMMODITY_ID,
        COMMODITY_CODE,
        COMMODITY_NAME,
        COMMODITY_BARCODE,
        COMMODITY_UNIT,
        COMMODITY_RULE,
        COMMODITY_CURRPRICE,
        IMAGE_PATH,
        USERDEFINEDTYPE_ID,
        count,
        id,
      };
      let _id = addItem.COMMODITY_ID;
      let _cateid = addItem.USERDEFINEDTYPE_ID;
      addItem.SALEDETAIL_DESC =
        typeof item.SALEDETAIL_DESC === "object"
          ? item.SALEDETAIL_DESC.toString()
          : "";
      if (!this.shoppingCateCount[_cateid]) {
        // 品类商品计数
        this.$set(this.shoppingCateCount, _cateid, 1);
        this.shopCart.push(addItem);
        addItem.count = 1;
      } else {
        this.$set(
          this.shoppingCateCount,
          _cateid,
          this.shoppingCateCount[_cateid] + 1
        );

        let s = this.shopCart.findIndex((c) => {
          let cid = c.COMMODITY_ID;
          return cid === _id && c.SALEDETAIL_DESC === addItem.SALEDETAIL_DESC;
        }); // 添加到购物车

        if (s === -1) {
          this.shopCart.push(addItem);
          addItem.count = 1;
        } else {
          this.shopCart[s].count += 1;
        }
      }

      if (addItem.id) {
        // 如果该商品是多规格商品， 则主商品数量也加1
        let nowCount = shoppingCart[_cateid + "_" + addItem.id];
        if (nowCount) {
          shoppingCart[_cateid + "_" + addItem.id] = Number(nowCount) + 1;
        } else {
          shoppingCart[_cateid + "_" + addItem.id] = 1;
        }
      }

      this.shoppingCart = shoppingCart;

      this._resetTotalNum();
      //   this.selectId = ''
      // this.isCliking = false
    },
    selectPop(n) {
      let item = {
        ...this.popMsg,
        COMMODITY_ID: n.COMMODITY_ID,
        COMMODITY_CODE: n.COMMODITY_CODE,
        COMMODITY_BARCODE: n.COMMODITY_BARCODE,
        COMMODITY_RULE: n.COMMODITY_RULE,
        COMMODITY_CURRPRICE: n.COMMODITY_CURRPRICE,
        COMMODITY_UNIT: n.COMMODITY_UNIT,
      };

      this.popMsg = { ...item };
      this.$forceUpdate();
    },
    selectSaleDetail(index, saledetail) {
      let item = { ...this.popMsg };
      item.SALEDETAIL_DESC = [...this.popMsg.SALEDETAIL_DESC];
      item.SALEDETAIL_DESC[index] = saledetail;
      this.popMsg = { ...item };
      this.$forceUpdate();
    },
    selectRule() {
      this.rulePop = false;

      this.addGoodToCartFn("", this.popMsg);
    },
    closeRule() {
      this.rulePop = false;
    },
    touchOnGoods: function (e, item) {
      if (item.SKULIST.length > 1 || item.BATCHINGLIST.length > 0) {
        // this.popRule = item.SKULIST
        let saledetail = item.BATCHINGLIST.map((n) => {
          return n.BatchingInfo[0];
        });
        this.popMsg = { ...item }; // this.popRule[0]
        saledetail && (this.popMsg.SALEDETAIL_DESC = saledetail);
        // this.selectId = item.id
        this.rulePop = true;
      } else {
        this.addGoodToCartFn(e, item);
      }
    },

    // 移除商品的事件
    decreaseGoodToCartFn: function (e, item) {
      let shoppingCart = JSON.parse(JSON.stringify(this.shoppingCart));

      let _cateid = item.USERDEFINEDTYPE_ID;

      if ((!item.count && item.SKULIST) || item.BATCHINGLIST) {
        this.showShopCart = true;
        return false;
      }
      let s = this.shopCart.findIndex((el) => {
        return (
          el.COMMODITY_ID === item.COMMODITY_ID &&
          el.SALEDETAIL_DESC === item.SALEDETAIL_DESC
        );
      });
      if (s > -1) {
        item.count -= 1;
        if (item.count === 0) {
          this.shopCart.splice(s, 1);
        }
      }
      //   }

      if (this.shoppingCateCount[_cateid] > 0) {
        // 品类商品计数
        this.$set(
          this.shoppingCateCount,
          _cateid,
          this.shoppingCateCount[_cateid] - 1
        );
      }

      let itemid = item.id;
      if (itemid) {
        if (shoppingCart[_cateid + "_" + itemid] > 0) {
          // 已经存在购物车，只是数量变化
          shoppingCart[_cateid + "_" + itemid] =
            Number(shoppingCart[_cateid + "_" + itemid]) - 1;
        }
      }

      this.shoppingCart = shoppingCart;
      this._resetTotalNum();
    },
    // 重新计算选择的商品的总数和总价
    _resetTotalNum: function () {
      let totalNum = 0;
      let totalPay = 0;

      this.shopCart.map((u) => {
        let goodNum = Number(u.count);
        totalNum += Number(goodNum);
        totalPay += Number(u.COMMODITY_CURRPRICE) * goodNum;
      });

      this.totalNum = totalNum;
      this.totalPay = totalPay.toFixed(2);
      //   this.chooseGoodArr = this.shopCart
      if (totalNum === 0 && this.showShopCart) {
        this.showShopCart = false;
      }
    },
    // 购物车，购物列表切换隐藏或者现实
    showShopCartFn: function (e) {
      if (this.totalPay > 0) {
        this.showShopCart = !this.showShopCart;
      }
    },
    // 清空购物车
    clearShopCartFn: function (e) {
      this.toView = "";
      this.totalNum = 0;
      this.totalPay = 0;

      this.shoppingCart = {};
      this.shopCart = [];
      this.shoppingCateCount = {};
      this.showShopCart = false;
    },
    // 结算
    goPayFn: function (e) {
      if (!this.user.MEMBERSHIP_ID) {
        uni.showModal({
          title: "温馨提示",
          content: "请您授权登录后再操作。",
          success(res) {
            if (res.confirm) {
              uni.navigateTo({ url: "/pages/register/index" });
            }
          },
        });
        return;
      }

      console.log("shopCart", this.shopCart);
      if (this.shopCart.length > 0) {
        let s = [];

        this.shopCart.map((el) => {
          s.push({
            ...el,
            ORDER_COUNT: el.count,
            ORDER_AMOUNT: el.COMMODITY_CURRPRICE * el.count,
            DISCOUNT_AMOUNT: 0,
            AVERAGE_PRICE: el.COMMODITY_CURRPRICE,
          });
        });
        let o = {};
        let id = Number(
          Math.random().toString().substr(3, 5) + Date.now()
        ).toString(36);
        o[id] = s;
        this.$store.commit("shopcartOrder", o);
        console.log("tableNum", this.tableNum);
        console.log("o", o);
        // eslint-disable-next-line eqeqeq
        if (this.tableNum !== 0) {
          uni.navigateTo({
            url: `/pages/shopPages/settlementFood/index?tableNum=${
              this.tableNum
            }&id=${id}&sid=${this.stroreId}&province=${
              this.merchatsMsg.PROVINCE_CODE || "530000"
            }`,
          });
        } else {
          uni.navigateTo({
            url: `/pages/shopPages/settlementFood/index?id=${id}&sid=${
              this.stroreId
            }&province=${this.merchatsMsg.PROVINCE_CODE || "530000"}`,
          });
        }
      }
    },
    getNewShop(type, provinceCode) {
      let arr = {};
      let _this = this;
      arr = {
        action_type: "GetSacnShopDetail",
        serverpartId: this.merchatsMsg.SERVERPART_ID,
        shopShortName: this.merchatsMsg.MERCHANTS_NAME,
        provinceCode: provinceCode,
        showCoupon: 1,
      };

      if (type) {
        // 代表有确定门店
        arr = {
          action_type: "GetSacnShopDetail",
          provinceCode: provinceCode,
          serverpartShopId: this.merchatsMsg.MERCHANTS_ID,
          showCoupon: 1,
        };
      }

      console.log("arr3231", arr);

      this.$api.getCoop(arr).then(function (res) {
        console.log("getNewShop", res);
        if (res.ResultCode === "100") {
          let _data = res.Data;
          console.log("_data", _data);
          let storeMsg = {
            id: _this.stroreId,
            ShopList: _data.ShopList,
          };

          _this.$store.commit("nowStore", storeMsg);
          _this.$forceUpdate();
        }
      });
    },

    goDetail(item) {
      uni.navigateTo({ url: "/pages/couponDetail/index?id=" + item.CouponId });
    },
    getShop(id, type) {
      let _this = this;
      this.$api
        .getCoop({
          action_type: "GetMerchantsDetails",
          merchantsId: id,
        })
        .then(function (res) {
          let _data = res.Data;
          console.log("_datagetShop", _data);
          _this.merchatsMsg = _data;
          _this.getCouponList(_data.MERCHANTS_ID); // 获取商家优惠
          _this.getFoodImages(_data.MERCHANTS_ID); // 加载商家商品推荐
          _this.getNewShop(type, _data.PROVINCE_CODE || "530000"); // 获取方向信息
          setTimeout(function () {
            _this.$refs.merchantEvaluation.loading();
          }, 500);
        });
    },
    getCouponList(id) {
      let _this = this;
      _this.$api
        .$get("/WeChat/GetCouponList", { sellerId: id })
        .then(function (data) {
          _this.couponList = data.Result_Data.List || [];
          console.log("_this.couponList", _this.couponList);
        });
    },
    getFoodImages(id) {
      let _this = this;
      _this.$api
        .getCoop({
          action_type: "GetRcmContent",
          rcmtagKey: "RCM_COMMODITY",
          sellerId: id,
        })
        .then(function (data) {
          _this.foodImages = data.Data.List;
        });
    },
    goEvaluate() {
      uni.navigateTo({
        url:
          "/pages/newEvaluate/index?merchantsId=" +
          this.merchatsMsg.MERCHANTS_ID,
      });
    },
  },
  onReady() {},
  onLoad(options) {
    console.log("optionsshop", options);
    this.stroreId = options.id;
    // this.merchatsMsg.MERCHANTS_ID = options.mid
    this.getShop(options.mid, options.type || 0); // 获取商户信息
    this.tableNum = options.tableNum || 0; //  tableNum 桌号 不等于0说明是门店扫码进入 则当确认订单时 不要选择相关的方向
    this.$store.commit("orderTable", options.tableNum || 0);

    this.getNewGood(options.id, options.province);

    let systemInfo = uni.getStorageSync("systemInfo");

    let goodsHeight = systemInfo.windowHeight + systemInfo.statusBarHeight - 96; // - 44

    if (systemInfo.safeArea) {
      this.goodsH = goodsHeight - systemInfo.safeArea.top;
    } else {
      this.goodsH = goodsHeight;
    }
    this.$utils.addUserBehaviorNew();
  },
  onUnload() {
    this.$store.commit("couponPrice", "");
    this.$store.commit("orderRemark", "");
    this.totalNum = 0;
    this.totalPay = 0;
    this.toView = "";

    this.shoppingCart = {};
    this.shopCart = [];
    this.shoppingCateCount = {};
    this.catList = [];
    this.storeMsg = {};
    this.rulePop = false;
    this.isShow = false;
  },
  onShow() {
    // eslint-disable-next-line eqeqeq
    if (this.shopcartOrder == "") {
      this.$store.commit("orderRemark", "");
      this.$store.commit("couponPrice", "");
      this.totalNum = 0;
      this.totalPay = 0;
      this.toView = 0;
      this.shoppingCart = {};
      this.shopCart = [];
      this.shoppingCateCount = {};
    }

    if (this.activeTabs === 2) {
      setTimeout(() => {
        this.$refs.merchantEvaluation.loading();
      });
    }
    this.$forceUpdate();
  },
};
</script>

<style lang="less" scoped>
// $bgGradient = linear-gradient(#C4B294, #9C835B);

.page-cont {
  background: #fff;
}

.tabsBox {
  width: 100%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;

  .tabItem {
    width: calc((100% / 3));
    padding: 6px 0;
    text-align: center;
    line-height: 30px;
    color: #6d6b6b;

    .smallNumber {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 20rpx;
      color: #716f69;
      line-height: 28rpx;
      text-align: justify;
      font-style: normal;
      margin-left: 4rpx;
    }
  }

  .selectTabItem {
    color: #000000;
    position: relative;
  }

  .selectTabItem:after {
    position: absolute;
    content: "";
    width: 80px;
    height: 4px;
    border-radius: 4px;
    background-color: #a18153;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

.nowContent {
  width: 100%;
  height: calc(100vh - 160px);
  overflow-y: auto;
}

.store-title {
  display: flex;
  font-size: 36rpx;
  color: #130f05;
}

.store-info {
  color: #716f69;
  font-size: 22rpx;
  margin: 16rpx 0;
}

.store-has-c {
  display: flex;
  align-items: center;
  color: #716f69;

  text {
    font-size: 22rpx;
    color: #716f69;
  }

  image {
    width: 155rpx;
    height: 37rpx;
    margin-left: 16rpx;
  }
}

.store-detail {
  // background: $bgGradient;
  display: flex;
  font-size: 24rpx;
  color: #666;
  align-items: flex-start;
  padding: 16rpx 32rpx 16rpx 32rpx;
}

// 商家信息
.store-info-box {
  overflow: hidden;
  font-size: 24rpx;
  background: #fff;
  padding: 16rpx 0rpx;
}

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

  .storeItem {
    margin-bottom: 24rpx;

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

      .imgBox {
        width: 2rem;
        display: flex;
        align-items: center;
        justify-content: flex-end;

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

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

    .infoDesc {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #130f05;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      width: 100%;
      text-indent: 2rem;
      margin-top: 4rpx;
    }
  }
}

.info-desc-title {
  font-size: 28rpx;
  font-weight: bolder;
  padding-bottom: 32rpx;
  display: flex;
  align-items: center;
}

.store-photo-box {
  white-space: nowrap;
  overflow: auto;
  padding-bottom: 16rpx;
  width: 100%;
}

.swiper-image {
  height: 250rpx;
}

.store-photo {
  display: inline-block;
  vertical-align: middle;
  width: 266rpx;
  height: 250rpx;
  text-align: center;
}

.store-photo image {
  background-color: #eee;
  width: 266rpx;
  height: 193rpx;
  border-radius: 8rpx;
}

.photo-name {
  padding-top: 12rpx;
  font-size: 28rpx;
  text-align: center;
}

.info-desc {
  color: #999;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
  line-height: 1.8;
  font-size: 24rpx;
  text-indent: 50rpx;
}

.info-unit {
  display: flex;
  align-items: flex-start;
  min-height: 60rpx;
  padding-top: 20rpx;
  color: #999;
  font-size: 28rpx;
}

.info-unit-title {
  color: #333;
  margin-right: 40rpx;
  font-weight: bolder;
  min-width: 114rpx;
}

.store-name + .store-name:before {
  content: "|";
  margin: 0 10rpx;
}

// end

// 评价
.rate-box {
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  padding: 12rpx 24rpx;
  box-shadow: 0 0 8rpx 2rpx #ececec;
  background: #fff;
  min-height: 96rpx;

  .rate-gray {
    background: #f0f0f0;
    font-size: 26rpx;
    width: 514rpx;
    height: 72rpx;
    line-height: 72rpx;
    border-radius: 72rpx;
    color: #797979;
    padding: 0 24rpx;
    margin-right: 24rpx;
  }

  .rate-ico {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: #b88e53;
  }

  i {
    width: 44rpx;
    height: 42rpx;
    background: url("/static/images/home/rate.png") no-repeat center;
    background-size: contain;
    margin-right: 16rpx;
  }
}

// 评价 end
.popup-coupon {
  padding-top: 20rpx;
  padding-bottom: 40rpx;
  min-height: 250rpx;
  width: 100%;
  background: #fff;
}

.popup-title {
  font-size: 30rpx;
  text-align: center;
  margin-top: 20rpx;
  color: #000;
  padding-bottom: 24rpx;
  font-weight: blod;
}

// 优惠券列表
.coupon-list-box {
  height: 888rpx;
  padding: 0 24rpx;
  overflow: auto;
  width: 100%;
  box-sizing: border-box;
}

// .hot-ico {
// background: url('../../../../static/images/shop/hot.png') no-repeat;
// width: 36rpx;
// height: 36rpx;
// background-size: contain;
// margin-right: 10rpx;
// margin-left: 10rpx;
// }

// .recommend-ico {
// background: url('../../../../static/images/shop/recommend.png') no-repeat;
// width: 36rpx;
// height: 36rpx;
// background-size: contain;
// margin-right: 10rpx;
// margin-left: 10rpx;
// }
.store-img {
  display: flex;
  align-items: center;
  margin-right: 24rpx;
}

.store-img image {
  width: 160rpx;
  height: 160rpx;
}

.hidden {
  display: none !important;
}

.good-title {
  padding: 0 15rpx;
  color: #333;
}

.goods {
  display: flex;
  width: 100%;
  overflow: hidden;
  height: 100%;
  /* padding-bottom: 35rpx; */
}

.menu-wrapper {
  flex: 0 0 100rpx;
  width: 160rpx;
  background: #f8f8f8;
  box-sizing: border-box;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  /* height: 80rpx; */
  width: 160rpx;
  line-height: 44rpx;
  position: relative;
  padding: 24rpx 12rpx;
  box-sizing: border-box;
}

.menu-item:last-child {
  margin-bottom: 160rpx;
}

.menu-item-title {
  color: #393939;
  font-size: 24rpx;
  text-align: center;
  /* white-space: nowrap; */
  overflow: hidden;
  /* text-overflow: ellipsis; */
}

.cate-count {
  position: absolute;
  top: 0;
  right: 4rpx;
  width: 36rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  border-radius: 32rpx;
  font-size: 18rpx;
  font-weight: 700;
  color: #fff;
  background: rgba(240, 20, 20, 0.808);
  box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.4);
}

.menu-item.current {
  color: #464245;
  background: #fff;
  position: relative;
}

.menu-item.current::before {
  content: "";
  height: 32rpx;
  width: 10rpx;
  background-color: #caa97f;
  position: absolute;
  left: 0;
  top: 24rpx;
}

.menu-item.current .menu-item-title {
  color: #464245;
}

.foods-wrapper {
  flex: 1;
  background: #fff;
}

.goodlist-title {
  padding-top: 20rpx;
  font-size: 28rpx;
  padding-left: 36rpx;
  color: #999;
}

.newFoodsItem {
  margin: 24rpx 32rpx;
  padding: 0 24rpx 0 0;
  // border-radius: 12rpx;
  background: #fff;
  // box-shadow: 2rpx 2rpx 10rpx #d3d3d3;
  display: flex;
  align-items: flex-start;

  .leftItem {
    width: 176rpx;
    height: 176rpx;
    background: #f5f5f5;
    border-radius: 16rpx;
    overflow: hidden;
    margin-right: 20rpx;

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

  .rightItem {
    width: calc(100% - 196rpx);
    height: 176rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

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

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

      .leftPrice {
        .unit {
          font-family: DINAlternate, DINAlternate;
          font-weight: bold;
          font-size: 24rpx;
          color: #130f05;
          line-height: 24rpx;
          text-align: left;
          font-style: normal;
          margin-right: 2px;
        }

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

      .rightPrice {
        height: 100%;
        display: flex;
        align-items: center;

        .icon {
          width: 40rpx;
          height: 40rpx;
        }

        .acount {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #130f05;
          line-height: 36rpx;
          text-align: center;
          font-style: normal;
          width: 60rpx;
        }
      }
    }
  }
}

.foods-item {
  margin: 24rpx 32rpx;
  padding: 16rpx 32rpx;
  border-radius: 12rpx;
  background: #fff;
  box-shadow: 2rpx 2rpx 10rpx #d3d3d3;
}

.food-block:last-child {
  padding-bottom: 160rpx;
}

.good-img {
  width: 260rpx;
  height: 180rpx;
}

.foods-item .icon {
  display: inline-block;
  width: 100%;
  height: 180rpx;
  margin-right: 16rpx;
  border-radius: 4rpx;
}

.detail-price {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 16rpx;
}

.foods-item .title {
  display: block;
  color: #2c2c2c;
  font-size: 30rpx;
  text-align: right;
  font-weight: bolder;
}

.foods-item .content {
  display: flex;
  justify-content: space-between;
  margin-top: 16rpx;
}

.foods-item .price {
  font-size: 36rpx;
  color: #333;
  font-weight: bolder;
  text-align: right;
}

.foods-item .price .unit {
  font-size: 24rpx;
}

.cartcontrol {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.cart-decrease {
  width: 50rpx;
  height: 50rpx;
  border: 4rpx solid #f9efe2;
  position: relative;
  border-radius: 50%;
}

.cart-decrease:before {
  content: "";
  height: 4rpx;
  width: 27rpx;
  background: #caa97f;
  display: block;
  position: absolute;
  left: 13rpx;
  top: 25rpx;
  border-radius: 4rpx;
}

.cart-add {
  width: 54rpx;
  height: 54rpx;
  background: #f9efe2;
  position: relative;
  border-radius: 50%;
}

.cart-add:before {
  content: "";
  height: 4rpx;
  width: 27rpx;
  background: #caa97f;
  display: block;
  position: absolute;
  left: 14rpx;
  top: 25rpx;
  border-radius: 4rpx;
}

.cart-add:after {
  content: "";
  height: 27rpx;
  width: 4rpx;
  background: #caa97f;
  display: block;
  position: absolute;
  top: 14rpx;
  left: 25rpx;
  border-radius: 4rpx;
}

.cart-count {
  width: 60rpx;
  line-height: 40rpx;
  text-align: center;
  font-size: 20rpx;
  color: rgb(147, 153, 159);
  height: 40rpx;
  font-size: 28rpx;
}

/* 底部的购物车 */
.shopcart {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 50;
  width: 100%;
  line-height: 44rpx;
  font-size: 24rpx;
  color: #80858a;
  background: #fff;
}

.shopcart .content {
  display: flex;
  background: #fff;
  font-size: 0;
  color: #141d27;
  border-top: 1rpx solid #eee;
  padding-top: 16rpx;
  padding-bottom: 16rpx;
  padding-right: 36rpx;
  padding-left: 16rpx;
}

.shopcart .content .content-left {
  flex: 1;
}

.shopcart .logo-wrapper {
  display: inline-block;
  vertical-align: top;
  position: relative;
  top: -36rpx;
  margin: 0 12rpx;
  width: 108rpx;
  height: 96rpx;
  box-sizing: border-box;
  border-radius: 50%;
  background: #fff;
}
.logo-wrapper .iconBox {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.iconBox .shopCarFood {
  width: 56rpx;
  height: 56rpx;
}

.shopcart .num {
  position: absolute;
  top: 0;
  right: 0;
  width: 48rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  border-radius: 32rpx;
  font-size: 18rpx;
  font-weight: 700;
  color: #fff;
  background: rgb(240, 20, 20);
  box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.4);
}

.shopcart .price {
  display: inline-block;
  line-height: 76rpx;
  padding-right: 24rpx;
  box-sizing: border-box;
  font-size: 32rpx;
  font-weight: 700;
  color: #333;
}

.shopcart .content-right {
  flex: 0 0 210rpx;
  width: 210rpx;
}

.content-right .pay-btn {
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  font-size: 28rpx;
  font-weight: 700;
  color: #caa97f;
  background: #333;
  border-radius: 48rpx;
}

/* 点击购物车弹出来的购买物品的列表 */
.shopcart-list {
  position: absolute;
  left: 0;
  bottom: 112rpx;
  z-index: -1;
  width: 100%;
  background: #fff;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.food {
  border-bottom: 1px solid rgba(7, 17, 27, 0.1);
}

.list-header {
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 32rpx;
  background: #f3f5f7;
  border-bottom: 1rpx solid rgba(7, 17, 27, 0.1);
  font-size: 28rpx;
  color: rgb(7, 17, 27);
}

.list-header .title-line {
  margin: 20rpx 0;
  height: 40rpx;
  line-height: 40rpx;
  padding-left: 12rpx;
}

.list-header .empty {
  float: right;
  font-size: 24rpx;
  color: #666;
  margin-top: 20rpx;
}

.list-content {
  padding: 0 32rpx;
  overflow: hidden;
  background: #fff;
  box-sizing: border-box;
}

.list-content .food {
  position: relative;
  padding: 24rpx 0;
  display: flex;
  justify-content: space-between;
  align-content: center;
}

.list-content .name {
  line-height: 48rpx;
  font-size: 28rpx;
  color: rgb(7, 17, 27);
  width: 340rpx;
}

.list-content .price {
  line-height: 48rpx;
  font-size: 28rpx;
  font-weight: 700;
  color: #666;
}

.cover {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  z-index: -2;
}

.rule-pop {
  width: 630rpx;
  min-height: 700rpx;
  padding: 24rpx;
  display: flex;
  flex-direction: column;
  border-radius: 8rpx;
}

.rule-pop .good-img {
  width: 220rpx;
  height: 158rpx;
  border-radius: 8rpx;
  overflow: hideen;
  margin-right: 16rpx;
}

.rule-pop-head {
  display: flex;
  align-items: flex-start;
}

.rule-pop-head .text {
  font-size: 28rpx;
  color: #444;
  margin-top: 12rpx;
  margin-bottom: 32rpx;
}

.rule-pop-head .price {
  color: crimson;
  margin-top: 24rpx;
}

.rule-tags-title {
  margin-top: 12rpx;
  font-size: 28rpx;
}

.rule-pop-center {
  flex: 1;
}

.rule-pop-tags {
  padding: 24rpx 0;
  display: flex;
  flex-wrap: wrap;
}

.rule-tag {
  text-align: center;
  padding: 10rpx 12rpx;
  min-width: 108rpx;
  background-color: #f2f2f2;
  font-size: 24rpx;
  margin-right: 24rpx;
  margin-bottom: 16rpx;
}

.rule-tag.active {
  color: #caa97f;
  font-weight: bolder;
  background-color: #f9efe2;
}

.rule-pop-btn {
  text-align: center;
  width: 92%;
  height: 80rpx;
  line-height: 80rpx;
  background: #444;
  color: #caa97f;
  font-size: 28rpx;
  margin-top: 94rpx;
  border-radius: 12rpx;
  margin: auto;
}

@supports (bottom: env(safe-area-inset-bottom)) {
  .rate-box {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .cover {
    bottom: env(safe-area-inset-bottom);
    bottom: constant(safe-area-inset-bottom);
  }

  .shopcart .content {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
</style>
