<template>
  <view class="productList-container">
    <navBar
      class="nav-bar"
      :statusBar="true"
      :border="false"
      :fixed="true"
      :height="'44px'"
      rightWidth="0"
      :leftWidth="30"
      backgroundColor="#f5f6fa"
    >
      <block slot="left">
        <u-icon
          name="arrow-left"
          color="#000"
          size="20"
          @click="pageBack()"
        ></u-icon>
      </block>
      <block slot="default">
        <u-search
          class="search"
          placeholder="请输入商品名称查找"
          :showAction="false"
          bgColor="#fff"
        ></u-search>
      </block>
    </navBar>
    <view class="productList-content">
      <scroll-view
        scroll-y
        scroll-with-animation
        class="tab-view"
        :scroll-into-view="scrollViewId"
        :style="{ height: height - 130 + 'px', top: top + 'px' }"
      >
        <block v-for="(item, index) of tabbar" :key="index">
          <tui-collapse
            :index="index"
            :current="current"
            hdBgColor="f5f6fa"
            :arrow="item.children.length > 0 ? true : false"
            @click="handerCollApse"
          >
            <template v-slot:title>
              <view
                class="tab-bar-item"
                :class="[
                  { active: currentTab === index },
                  { active2: current === index },
                ]"
              >
                {{ item.label }}
              </view>
            </template>
            <template v-slot:content v-if="item.children.length > 0">
              <view
                class="tab-bar-item tab-bar-item-2"
                :class="[currentTab == group.id ? 'active' : '']"
                v-for="(group, index2) of item.children"
                @click="handerCollApseChildren(index, index2)"
              >
                {{ group.label }}
              </view>
            </template>
          </tui-collapse>
        </block>
      </scroll-view>
      <view
        class="right-box"
        :style="{ height: height + 'px', top: top + 'px' }"
      >
        <view class="commodity-status">
          <u-tabs
            class="u-tabs"
            ref="tabsRef"
            :list="commodityStatusList"
            @click="handerCommodityStatus"
            itemStyle="padding-left: 15px; padding-right: 15px; height: 57px;"
            activeStyle="font-weight: bold;color: #000;"
            inactiveStyle="color:#999999;"
            lineColor="#e41f19"
          ></u-tabs>
        </view>
        <favorite-loading
          class="commodity-loading"
          v-show="loadingCommodityData"
          :color="'#fe4119'"
          text=""
          animation="spinner15"
        ></favorite-loading>
        <view
          class="no-data"
          v-if="commodityList.length <= 0 && isNoCommodityData"
        >
          <view class="no-data-bg"></view>
          <view class="no-data-tips">暂无商品</view>
        </view>
        <scroll-view
          v-if="commodityList.length > 0 && !loadingCommodityData"
          scroll-y
          :style="{ height: height - 200 + 'px', top: top + 'px' }"
          :show-scrollbar="false"
          @scrolltolower="handerScrolltolower"
          refresher-enabled
          :refresher-triggered="isRefreshing"
          @refresherrefresh="handleRefresh"
        >
          <view class="commodity-list">
            <view
              class="commodity-item"
              v-for="(item, index) of commodityList"
              :key="index"
            >
              <view class="commodity-info">
                <view
                  :class="[
                    'commodity-img',
                    { 'commodity-img-sold-out': item.product_state_id == 1002 },
                  ]"
                >
                  <u--image
                    :src="item.product_image"
                    radius="8"
                    width="60px"
                    height="60px"
                  ></u--image>
                </view>
                <view class="commodity-info-box">
                  <view class="commodity-name">
                    {{ item.product_name }}
                  </view>
                  <view class="commodity-inventory">
                    库存{{ item.itemQuantity }}
                  </view>
                  <view class="commodity-price">
                    <text class="currency">¥</text>
                    {{ item.product_unit_price }}
                  </view>
                </view>
              </view>
              <view class="commodity-btn-content">
                <u-button
                  @click="handerShowPricePopup(item)"
                  class="commodity-btn-item"
                  :hairline="true"
                  :plain="true"
                  shape="circle"
                >
                  价格/库存
                </u-button>
                <u-button
                  v-if="item.product_state_id == 1002"
                  class="commodity-btn-item commodity-btn-item-2"
                  :hairline="true"
                  :plain="true"
                  shape="circle"
                  @click="updateProductPutaway(item, index, 1001)"
                >
                  上架
                </u-button>
                <u-button
                  v-if="item.product_state_id == 1001"
                  class="commodity-btn-item commodity-btn-item-2"
                  :hairline="true"
                  :plain="true"
                  shape="circle"
                  @click="updateProductPutaway(item, index, 1002)"
                >
                  下架
                </u-button>
                <u-button
                  class="commodity-btn-item commodity-btn-item-2"
                  :hairline="true"
                  :plain="true"
                  shape="circle"
                >
                  编辑
                </u-button>
              </view>
            </view>
          </view>
          <view
            class="m-loading-box"
            v-if="commodityList.length > 0 && !isNoCommodityData"
          >
            <block v-if="loadingDownCommodityData">
              <view class="u-loadmore">
                <view class="u-loading"></view>
                <text class="u-loadmore-tips">正在加载...</text>
              </view>
            </block>
            <block v-else>
              <view class="u-loadmore u-loadmore-line">
                <text class="u-loadmore-tips">没有更多商品了 ~</text>
              </view>
            </block>
          </view>
        </scroll-view>
      </view>
    </view>
    <view class="productList-bottom">
      <view class="bottom-item">分类管理</view>
      <view class="bottom-item">
        <u-icon
          class="u-icon"
          custom-prefix="custom-icon-piliangcaozuo custom-icon"
          size="14"
          color="#000"
        ></u-icon>
        <view class="bottom-item-name" @click="skipuBatch">批量操作</view>
      </view>
      <view class="bottom-item">
        <u-icon
          class="u-icon"
          custom-prefix="custom-icon-xinjiantuopu custom-icon"
          size="16"
          color="#000"
        ></u-icon>
        <view class="bottom-item-name">商品新建</view>
      </view>
    </view>
    <u-popup
      class="productList-price-popup"
      :show="showBottomPopup"
      mode="bottom"
      :closeable="true"
      zIndex="10075"
      @close="handerClosePopup"
    >
      <view
        class="productList-price-popup-content"
        v-if="currSpecificationList.length > 0"
      >
        <view class="productList-price-popup-title">价格/库存修改</view>
        <view class="select-commodity-price-list">
          <scroll-view
            scroll-y
            class="select-commodity-list-price-scroll-view"
            :show-scrollbar="false"
            :style="{
              maxHeight: currSpecificationList.length >= 2 ? '500px' : 'none',
              overflowY: currSpecificationList.length >= 2 ? 'auto' : 'visible',
            }"
          >
            <view
              class="popup-commodity-item"
              v-for="(item, index) of currSpecificationList"
              :key="index"
            >
              <view class="popup-commodity-info">
                <view class="popup-commodity-info-name">
                  {{ item.item_name }}
                </view>
                <view class="commodity-info-item">
                  <view class="popup-commodity-info-lable">价格</view>
                  <u--input
                    class="input-price"
                    :placeholder="String(item.item_unit_price)"
                    border="surround"
                    v-model="item.item_unit_price_2"
                    prefixIcon="¥"
                    type="number"
                    @change="haderPopupPriceInputChange($event, index)"
                  ></u--input>
                </view>
                <view class="commodity-info-item">
                  <view class="popup-commodity-info-lable">库存</view>
                  <u--input
                    class="input-price"
                    :placeholder="String(item.item_quantity)"
                    border="surround"
                    type="number"
                    v-model="item.item_quantity_2"
                    @change="haderPopupRepertoryInputChange($event, index)"
                  ></u--input>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="bottom-btn">
          <u-button
            class="btn-item"
            :hairline="true"
            :plain="true"
            shape="circle"
            @click="handerSave"
          >
            保存
          </u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  GetProductCategoryTree,
  GetProductList,
  UpdateProductPutaway,
  GetCommoditSpecification,
} from "@/api/warehouse/productList";
import navBar from "@/components/uni-nav-bar/uni-nav-bar";
import tuiCollapse from "../manage/components/tui-collapse/tui-collapse.vue";
import favoriteLoading from "@/components/favorite-loading/favorite-loading.vue";

export default {
  name: "productList",
  components: {
    navBar,
    tuiCollapse,
    favoriteLoading,
  },
  data() {
    return {
      tabbar: [],
      height: 0, //scroll-view高度
      top: 0,
      currentTab: 0, //预设当前项的值
      current: -1,
      scrollViewId: "id_0",
      commodityStatusList: [
        {
          value: null,
          name: "全部",
          badge: {
            value: 0,
          },
        },
        {
          // 1001-正常;1002-下架仓库中;1000-违规禁售
          value: 1001,
          name: "销售中",
          badge: {
            value: 0,
          },
        },
        {
          value: 1002,
          name: "仓库中",
          badge: {
            value: 0,
          },
        },
        {
          value: 1000,
          name: "违规禁售",
          badge: {
            value: 0,
          },
        },
        {
          value: 1003,
          name: "待审核",
          badge: {
            value: 0,
          },
        },
      ],
      commodityList: [],
      pageNum: 1,
      pageSize: 20,
      currCategoryId: null,
      collApseIndex: 0,
      currTabChildrenIndex: 0,
      currProductStateId: null,
      loadingCommodityData: false,
      loadingDownCommodityData: false,
      isNoCommodityData: false,
      isNoDownCommodityData: false,
      isRefreshing: false,
      time: null,
      time2: null,
      showBottomPopup: false,
      currSpecificationList: [],
    };
  },
  computed: {},
  onLoad: function (options) {
    setTimeout(() => {
      uni.getSystemInfo({
        success: (res) => {
          let header = 60;
          let top = 0;
          //#ifdef H5
          top = 44;
          //#endif
          //#ifdef APP-PLUS
          top = 70;
          //#endif
          this.height = res.windowHeight - uni.upx2px(header);
          this.top = top + uni.upx2px(header);
        },
      });
    }, 50);
  },
  onReady() {},
  onShow() {
    this.getProductCategoryTree();
    this.getProductList();
  },

  mounted() {},
  methods: {
    pageBack() {
      uni.navigateBack();
    },
    // 点击标题切换当前页时改变样式
    swichNav: function (e) {
      let cur = e.currentTarget.dataset.current;
      if (this.currentTab == cur) {
        return false;
      } else {
        this.currentTab = cur;
        this.checkCor();
      }
    },
    //判断当前滚动超过一屏时，设置tab标题滚动条。
    checkCor: function () {
      if (this.currentTab > 6) {
        this.scrollViewId = `id_${this.currentTab - 2}`;
      } else {
        this.scrollViewId = `id_0`;
      }
    },
    handerClosePopup() {
      this.showBottomPopup = false;
    },
    async handerShowPricePopup(item) {
      let params = {
        product_id: item.product_id,
      };

      let res = await GetCommoditSpecification(params);

      if (res && res.status == 200) {
        this.currSpecificationList = res.data;
        this.showBottomPopup = true;
      }
    },
    async getProductCategoryTree() {
      let res = await GetProductCategoryTree();
      if (res && res.status == 200) {
        this.tabbar = [
          {
            id: null,
            label: "全部",
            children: [],
          },
          ...res.data,
        ];
      }
    },
    async getProductList() {
      if (this.loadingDownCommodityData) {
        this.loadingCommodityData = false;
      } else {
        this.loadingCommodityData = true;
      }

      if (this.isRefreshing) {
        this.pageNum = 1;
        this.isNoCommodityData = false;
        this.isNoDownCommodityData = false;
      }

      let params = {
        kind_id: "1201,1202,1203",
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        product_state_id: this.currProductStateId,
        category_id: this.currCategoryId,
        openCount: true,
      };

      let res = await GetProductList(params);
      if (res && res.status == 200) {
        if (this.loadingDownCommodityData) {
          if (res.data.items.length <= 0) {
            this.loadingDownCommodityData = false;
            this.isNoDownCommodityData = true;
            return;
          } else {
            this.commodityList = [...this.commodityList, ...res.data.items];
          }
        } else {
          this.commodityList = res.data.items;
        }

        if (this.commodityList.length <= 0) {
          this.isNoCommodityData = true;
        }

        var {
          allRecords,
          normalRecords,
          offRecords,
          illegalRecords,
          unCheckedRecords,
        } = res.data;

        this.commodityStatusList[0].badge.value = allRecords;
        this.commodityStatusList[1].badge.value = normalRecords;
        this.commodityStatusList[2].badge.value = offRecords;
        this.commodityStatusList[3].badge.value = illegalRecords;
        this.commodityStatusList[4].badge.value = unCheckedRecords;

        this.$nextTick(() => {
          this.$refs.tabsRef.init();
        });
      }

      this.loadingDownCommodityData = false;
      this.loadingCommodityData = false;
      this.isRefreshing = false;
    },
    handleRefresh() {
      this.isRefreshing = true;
      this.getProductList();
    },
    updateProductPutaway(item, index, type) {
      clearTimeout(this.time2);

      let params = {
        product_id: item.product_id,
        product_state_id: type,
      };

      this.time2 = setTimeout(async () => {
        let res = await UpdateProductPutaway(params);
        if (res && res.status) {
          uni.$u.toast("操作成功");

          this.commodityList[index].product_state_id = type;

          let params = {
            kind_id: "1201,1202,1203",
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            product_state_id: this.currProductStateId,
            category_id: this.currCategoryId,
            openCount: true,
          };

          let result = await GetProductList(params);

          if (result && result.status == 200) {
            var {
              allRecords,
              normalRecords,
              offRecords,
              illegalRecords,
              unCheckedRecords,
            } = result.data;

            this.commodityStatusList[0].badge.value = allRecords;
            this.commodityStatusList[1].badge.value = normalRecords;
            this.commodityStatusList[2].badge.value = offRecords;
            this.commodityStatusList[3].badge.value = illegalRecords;
            this.commodityStatusList[4].badge.value = unCheckedRecords;
          }
        }
      }, 500);
    },
    handerScrolltolower() {
      clearTimeout(this.time);
      if (this.isNoDownCommodityData) return;
      this.loadingDownCommodityData = true;
      this.time = setTimeout(() => {
        this.pageNum = this.pageNum + 1;
        this.getProductList();
      }, 500);
    },
    handerCommodityStatus(e) {
      this.pageNum = 1;
      this.pageSize = 10;
      this.isNoDownCommodityData = false;
      this.isNoCommodityData = false;
      this.currProductStateId = e.value;
      this.commodityList = [];
      this.getProductList();
    },
    handerCollApse(e) {
      let index = e.index;
      //手风琴展开状态  -1 == 不展开
      const oldCategoryId = this.currCategoryId;
      this.current = this.current == index ? -1 : e.index;

      // 如果current没有实际变化（点击的是已经展开的项），直接返回

      if (this.current != -1 && this.tabbar[index].children.length > 0) {
        this.currentTab =
          this.tabbar[index].children[this.currTabChildrenIndex].id;
        this.currCategoryId =
          this.tabbar[index].children[this.currTabChildrenIndex].id;
      } else {
        this.currentTab = index;
        this.currCategoryId = this.tabbar[index].id;

        if (this.current != -1) {
          this.currTabChildrenIndex = 0;
        }
      }

      this.pageNum = 1;
      this.pageSize = 20;

      if (this.collApseIndex == index) {
        return;
      }
      if (this.currCategoryId != oldCategoryId && this.current != -1) {
        this.getProductList();
        this.collApseIndex = index;
      }
    },
    // 点击子集时触发
    handerCollApseChildren(index1, index2) {
      const oldCategoryId = this.currCategoryId;

      //获取当前子集下的坐标
      this.currTabChildrenIndex = index2;
      //active状态
      this.currentTab = this.tabbar[index1].children[index2].id;
      //当前子集id
      this.currCategoryId = this.tabbar[index1].children[index2].id;
      if (this.currCategoryId != oldCategoryId) {
        this.getProductList();
      }
    },
    detail(e) {
      uni.navigateTo({
        url: "../productDetail/productDetail",
      });
    },
    productList(e) {
      let key = e.currentTarget.dataset.key;
      uni.navigateTo({
        url: "../productList/productList?searchKey=" + key,
      });
    },
    search: function () {
      uni.navigateTo({
        url: "../../news/search/search",
      });
    },
    haderPopupPriceInputChange(e, index) {
      this.currSpecificationList[index].item_unit_price_2 = e;
    },
    haderPopupRepertoryInputChange(e, index) {
      this.currSpecificationList[index].item_quantity_2 = e;
    },
    handerSave() {},
    skipuBatch() {
      uni.navigateTo({
        url: "/pages/warehouse/manage/batch",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.productList-container {
  height: calc(100vh);
  background: #f5f6fa;
  .nav-bar {
    padding-top: 20rpx;
  }

  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
  }

  .tui-searchbox {
    width: 100%;
    height: 92rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    /* #ifdef H5 */
    top: 44px;
    /* #endif */
    z-index: 100;
  }

  .tui-searchbox::after {
    content: "";
    position: absolute;
    border-bottom: 1rpx solid #d2d2d2;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    bottom: 0;
    right: 0;
    left: 0;
  }

  .tui-search-input {
    width: 100%;
    height: 60rpx;
    background: #f1f1f1;
    border-radius: 30rpx;
    font-size: 26rpx;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tui-search-text {
    padding-left: 16rpx;
  }

  .tab-view {
    /* height: 100%; */
    width: 200rpx;
    position: fixed;
    left: 0;
    z-index: 10;
  }

  .tab-bar-item {
    width: 200rpx;
    min-height: 57px;
    background: #f5f6fa;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 30rpx;
    color: #666666;
    font-weight: 400;
    padding: 12rpx;
    padding-left: 28px;
    padding-right: 32rpx;
    word-wrap: break-word;
    word-break: break-all;
  }

  .active {
    position: relative;
    color: #000;

    font-weight: 600;
    background: #fff;
  }

  .tab-bar-item-2 {
    font-size: 28rpx;
    background: #fff !important;
  }

  .active2 {
    background: #fff;
  }

  .active::before {
    content: "";
    position: absolute;
    border-left: 8rpx solid #e41f19;
    height: 30rpx;
    left: 0;
  }

  /* 左侧导航布局 end*/

  .right-box {
    width: 100%;
    position: fixed;
    padding-left: 210rpx;
    box-sizing: border-box;
    left: 0;
    background: #fff;
  }

  .page-view {
    width: 100%;
    overflow: hidden;
    padding-top: 20rpx;
    padding-right: 20rpx;
    box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .swiper {
    width: 100%;
    height: 220rpx;
    border-radius: 12rpx;
    overflow: hidden;
    transform: translateZ(0);
  }

  /* #ifdef MP-WEIXIN */
  .swiper .wx-swiper-dot {
    width: 8rpx;
    height: 8rpx;
    display: inline-flex;
    background: none;
    justify-content: space-between;
  }

  .swiper .wx-swiper-dot::before {
    content: "";
    flex-grow: 1;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16rpx;
    overflow: hidden;
  }

  .swiper .wx-swiper-dot-active::before {
    background: #fff;
  }

  .swiper .wx-swiper-dot.wx-swiper-dot-active {
    width: 16rpx;
  }

  /* #endif */

  /* #ifndef MP-WEIXIN */
  ::v-deep .swiper .uni-swiper-dot {
    width: 8rpx;
    height: 8rpx;
    display: inline-flex;
    background: none;
    justify-content: space-between;
  }

  ::v-deep .swiper .uni-swiper-dot::before {
    content: "";
    flex-grow: 1;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16rpx;
    overflow: hidden;
  }

  ::v-deep .swiper .uni-swiper-dot-active::before {
    background: #fff;
  }

  ::v-deep .swiper .uni-swiper-dot.uni-swiper-dot-active {
    width: 16rpx;
  }

  /* #endif */

  .slide-image {
    width: 100%;
    height: 220rpx;
  }

  .class-box {
    padding-top: 30rpx;
  }

  .class-item {
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    padding: 20rpx;
    margin-bottom: 20rpx;
    border-radius: 12rpx;
  }

  .class-name {
    font-size: 22rpx;
  }

  .g-container {
    /* padding-top: 20rpx; */
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .g-box {
    width: 33.3333%;
    text-align: center;
    padding-top: 40rpx;
  }

  .g-image {
    width: 120rpx;
    height: 120rpx;
  }

  .g-title {
    font-size: 22rpx;
  }

  .tui-content {
    padding: 20rpx 30rpx;
    background-color: #fff;
    color: #555;
    font-size: 26rpx;
  }

  .u-tabs {
    border-bottom: 1px solid #f3f3f3;
  }

  .commodity-status {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    background: #fff;
  }

  .m-loading-box {
    text-align: center;
    margin: 40rpx;
    color: #aaaa;
    font-size: 28rpx;
  }

  .commodity-list {
    padding: 20rpx;

    .commodity-item {
      margin-bottom: 60rpx;

      .commodity-info {
        display: flex;
        margin-bottom: 40rpx;

        .commodity-img {
          position: relative;
          margin-right: 20rpx;
          width: 60px;
          height: 60px;
          border: 1px solid #ebebeb;
          border-radius: 16rpx;
        }

        .commodity-img-sold-out {
          &::before {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 20px;
            line-height: 20px;
            content: "已下架";
            text-align: center;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            z-index: 99;
            font-size: 14px;
            border-bottom-left-radius: 16rpx;
            border-bottom-right-radius: 16rpx;
          }
        }

        .commodity-info-box {
          display: flex;
          flex-flow: column;
          justify-content: space-between;

          .commodity-name {
            font-weight: 700;
            font-size: 32rpx;
            word-break: break-all; /* 允许在任意字符间断行 */
            overflow-wrap: break-word; /* 优先在单词间断行 */
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 限制最多2行 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis; /* 超出部分显示省略号 */
          }

          .commodity-inventory {
            font-size: 24rpx;
            color: #626262;
            margin: 20rpx 0;
          }

          .commodity-price {
            font-size: 32rpx;
            font-weight: bold;
            color: #ea3938;

            .currency {
              margin-right: 4px;
              font-size: 24rpx;
            }
          }
        }
      }

      .commodity-btn-content {
        display: flex;
        justify-content: flex-end;
        .commodity-btn-item {
          margin: 0;
          margin-right: 20rpx;
          width: 160rpx;
          height: 60rpx;
          font-size: 24rpx;
          border-color: #d2d2d2;
          color: #000;

          &::after {
            border: none;
          }
        }

        .commodity-btn-item-2 {
          width: 104rpx;
        }
      }
    }
  }

  .no-data {
    .no-data-bg {
      margin: 60% auto;
      margin-bottom: 0;
      width: 300rpx;
      height: 200rpx;
      background-image: url("../../../static/no-commodity.png");
      background-size: 100%;
    }
    .no-data-tips {
      margin: 80rpx auto;
      color: #aaaaaa;
      text-align: center;
    }
  }

  .productList-bottom {
    position: fixed;
    bottom: 0;
    z-index: 99;
    display: flex;
    padding: 40rpx;
    width: 100%;
    background: #fff;
    border-top: 2px solid #f3f3f3;
    // box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.1);

    .bottom-item {
      display: flex;
      align-items: center;
      margin-bottom: 40rpx;
      margin-right: 80rpx;

      .u-icon {
        margin-right: 8rpx;
      }
    }
  }

  .productList-price-popup {
    ::v-deep.u-popup__content {
      border-top-left-radius: 16rpx;
      border-top-right-radius: 16rpx;
      background: #f8f8f8;
    }

    .productList-price-popup-content {
      // width: 100%;

      .productList-price-popup-title {
        padding: 40rpx;
        text-align: center;
        font-weight: 500;
        background: #fff;
        border-top-left-radius: 16rpx;
        border-top-right-radius: 16rpx;
      }

      .select-commodity-price-list {
        background: #f8f8f8;
      }

      .popup-commodity-item {
        margin-bottom: 20px;
        background: #fff;

        .popup-commodity-info {
          .popup-commodity-info-name {
            font-size: 36rpx;
            font-weight: bold;
            padding-left: 24rpx;
            padding-top: 20rpx;
          }

          .commodity-info-item {
            display: flex;
            align-items: center;
            padding: 12px;
            border-bottom: 1px solid #efefef;

            .popup-commodity-info-lable {
              margin-right: 60px;
            }

            ::v-deep .input-price {
              font-weight: bold;
              color: 0 !important;
              .u-icon__icon {
                color: #000 !important;
              }
            }
          }
        }
      }
    }

    .bottom-btn {
      padding: 40rpx;
      background: #fff;

      .btn-item {
        height: 80rpx;
        background: $base-color;
        color: #fff;

        &::after {
          border: none;
        }
      }
    }
  }

  .commodity-loading {
    margin: 70% auto;
    display: flex;
  }
}
</style>
