<template>
  <view class="page-content">
    <!--主要内容-->
    <view class="main-content">
      <!--顶部搜索-->
      <view class="search-content">
        <view class="search-main">
          <input class="search-input" type="text" placeholder="请输入商品名称...">
          <view class="search-btn" @click="getGoodsList(1)">搜索</view>
        </view>
      </view>
      <!--顶部提示-->
      <view class="top-tips">
        请添加你需要的商品进行进货！
        <view class="record-btn" @click="withGoodsRecord">进货记录</view>
      </view>
      <!--商品列表-->
      <view class="list">
        <view class="item" v-for="(item,index) in Object.values(list)" :key="index">
          <view class="goods">
            <view class="image">
              <image class="goods-image" :src="item.image"></image>
            </view>
            <view class="info">
              <view class="title">{{ item.store_name }}</view>
              <view class="price">¥{{ item.price }}</view>
            </view>
          </view>
          <view class="buy">
            <view class="left" @click="changeBatchType(item.product_id)">
              <template v-if="item.is_batch == 1">
                <view v-if="(batch_list[item.product_id] || 0) == 1"  class="buy-unit">按{{ item.batch_unit }}购买</view>
                <view v-else class="buy-unit">按{{ item.unit_name }}购买</view>
                <text class="iconfont icon-jiantou_shangxiaqiehuan_o"></text>
              </template>
            </view>
            <view class="right">
              <text v-if="!buyList[item.product_id]" @click="buyFlowAddBuyNum('add', item)" class="iconfont icon-gengduozhankai1"></text>
              <view v-else class="buy-num">
                <view class="num-change">
                  <text class="iconfont icon-shangpinshuliang-jian" @click="buyFlowAddBuyNum('reduce', item)"></text>
                  <input
                      :value="buyList[item.product_id] ? buyList[item.product_id].total_num : 0"
                      class="num-input"
                      type='number'
                      @click="buyFlowAddBuyNum('click', item)"
                      :disabled="Object.values(item.attrValue).length > 1"
                      @input="buyFlowInputBuyNum($event, item.attrValue[0], item)"
                  />
                  <text class="iconfont icon-shangpinshuliang-jia" @click="buyFlowAddBuyNum('add', item)" ></text>
                </view>
                <view v-if="(batch_list[item.product_id] || 0) == 1"  class="unit">
                  {{ item.batch_unit }} 共{{ (buyList[item.product_id].total_num || 0) * (buyList[item.product_id].batch_num || 1) }}{{ item.unit_name }}
                </view>
                <view v-else class="unit">{{ item.unit_name }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!--结算按钮-->
      <view class="settlement">
        <view class="left">
          <text class="iconfont icon-gouwuche-mendian">
            <text class="total-num" v-if="totalNum > 0">{{ totalNum > 99 ? '99+' : totalNum }}</text>
          </text>
          <view class="total">
            合计：<text class="total-price">¥{{ totalPrice }}</text>
          </view>
        </view>
        <view class="settlement-btn" @click="settlementCart" v-if="Object.values(buyList).length > 0">立即结算</view>
        <view class="settlement-btn not-btn" v-else>立即结算</view>
      </view>
    </view>
    <!-- 授权登录 -->
    <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
    <!-- 多规格商品选择弹框 -->
    <uni-popup ref="moreSpecsSelect" type="bottom" :is-mask-click="false">
      <view class="more-spec-content">
        <!--顶部商品信息-->
        <view class="goods-info">
          <view class="image">
            <image class="goods-image" :src="currentGoods.selected.image"></image>
          </view>
          <view class="info">
            <view class="title">{{ currentGoods.store_name }}</view>
            <view class="price">
              <text class="price-icon">¥</text>
              {{ currentGoods.selected.price || '' }}
            </view>
            <view v-if="(batch_list[currentGoods.product_id] || 0) == 1" class="stock">
              库存：{{ Math.floor((currentGoods.selected.stock || 0) / currentGoods.batch_num) }}
            </view>
            <view v-else class="stock">库存：{{ currentGoods.selected.stock || '' }}</view>
          </view>
          <text class="iconfont icon-cha2 close-btn" @click="closeMoreSpecsSelect"></text>
        </view>
        <!--规格-->
        <view class="goods-spec">
          <view class="spec-block" v-for="(item,index) in currentGoods.attr" :key="index">
            <view class="spec-title">{{ item.attr_name || '' }}</view>
            <view class="spec-list">
              <view
                  v-for="(specItem,specIndex) in item.attr_values"
                  :key="specIndex"
                  :class="['spec-list-tag',{'spec-list-tag-active': Object.values(currentGoods.selected_spec).includes(specItem)}]"
                  @click="buyFlowChangeSpec(item.attr_name, specItem)"
              >
                {{ specItem || '' }}
              </view>
            </view>
          </view>
        </view>
        <!--数量变更-->
        <view class="bottom-content">
          <!--操作按钮-->
          <view class="num-change">
            <text class="iconfont icon-shangpinshuliang-jian" @click="buyFlowChangeNum('reduce', currentGoods.selected)"></text>
            <input
                :value="specInputValue"
                class="num-input"
                type='number'
                @input="buyFlowInputBuyNum($event, currentGoods.selected, currentGoods)"
            />
            <text class="iconfont icon-shangpinshuliang-jia" @click="buyFlowChangeNum('add', currentGoods.selected)"></text>
          </view>
          <!--单位-->
          <view v-if="(batch_list[currentGoods.product_id] || 0) == 1"  class="unit">
            {{ currentGoods.batch_unit }} 共{{ (specInputValue) * (buyList[currentGoods.product_id].batch_num || 1) }}{{ currentGoods.unit_name }}
          </view>
          <view v-else class="unit">{{ currentGoods.unit_name }}</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {mapGetters} from "vuex";
import authorize from '@/components/Authorize';
import {supplierGoodsList, withGoodsCartAdd} from "@/api/supplier";
import {withGoodsCartDel, withGoodsCartIds, withGoodsCartList, withGoodsChangeNum} from "../../../api/supplier";

export default {
  name: 'business',
  components: {
    authorize,
  },
  computed: {
    specInputValue(){
      let selected = this.currentGoods.selected || {};
      let productId = selected.product_id || 0;
      let unique = selected.unique || '';
      let good = this.buyList[productId] || {};
      let specs = good.specs || {};
      let spec = specs[unique] || {};

      return spec.cart_num || 0;
    },
    ...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor', 'shopIsLogin', 'shopMerId'])
  },
  data() {
    return {
      // 登录相关
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false,//是否隐藏授权
      // 商品列表相关
      list: [],
      search:{
        page: 1,
        store_name: '',
      },
      // 购买选中商品相关
      totalNum: 0,
      totalPrice: 0.00,
      buyList: {},
      batch_list: {},
      currentGoods: {}
    }
  },
  onLoad(options) {
    // 判断：是否登录
    if (!this.isLogin) {
      this.isAuto = true;
      this.isShowAuth = true;// 未登录  授权登录
    }
    else this.init();// 已登录  获取信息
  },
  watch: {
    // 多规格  选中规格改变
    'currentGoods.selected_spec': {
      handler() {
        let good = Object.assign({}, this.currentGoods)
        if(good.selected_spec){
          let defaultName = Object.values(good.selected_spec).join(',');
          // 赋值
          this.$set(this.currentGoods, 'selected', good.attrValue[defaultName] || {});
        }else{
          this.$set(this.currentGoods, 'selected', {});
        }
      },
      deep: true
    },
    // 购买信息列表变更
    'buyList': {
      handler() {
        this.BuyFlowComputeTotal();
      },
      deep: true
    },
    // 购买类型列表信息变更
    'batch_list':{
      handler() {
        this.BuyFlowComputeTotal();
      },
      deep: true
    }
  },
  methods: {
    // 授权回调
    onLoadFun() {
      if(this.isLogin){
        this.isShowAuth = false;
        this.init();
      }
    },
    // 授权关闭
    authClose(e) {
      this.isShowAuth = e
    },
    // 授权成功 初始化
    init () {
      // 判断：商户是否登录
      if(!this.shopIsLogin){
        uni.showModal({
          title: '未登录',
          content: '请先登录酒道馆账号!',
          confirmText: '去登录',
          cancelText: '返回首页',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url:'/pages/admin/business/index?is_sys=2'
              })
            }else{
              uni.switchTab({
                url: '/pages/index/index'
              });
            }
          }
        });
        return false;
      }
      // 商户已经登录  进行后续操作
      this.getGoodsList();
      // 获取购物车列表
      this.cartGetList();
    },
    // 供应商商品列表
    getGoodsList(page = 0) {
      let _this = this;
      let params = _this.search;
      if(Number(page) > 0) params.page = page;
      // 数据查询
      supplierGoodsList(params).then(res => {
        let list = res.data.list || {};
        if (Object.values(list).length > 0) {
          _this.list = _this.$util.SplitArray(list, _this.list);
          _this.$set(_this, 'list', _this.list);
          _this.search.page++;
        }
      }).catch(err => {
        this.$util.Tips({title: err});
      });
    },
    // 输入购买数量
    buyFlowInputBuyNum(event, spec, currentGoods){
      // 指定数量
      spec.input_num = Number(event.detail.value || event.target.value);
      this.currentGoods = currentGoods;

      this.buyFlowChangeNum('input', spec);
    },
    // 购买流程 - 添加购买数量
    buyFlowAddBuyNum(type, item){
      let isMoreSpecs = Object.values(item.attrValue).length || 0;
      let good = Object.assign({}, item);
      good.is_batch = this.batch_list[good.product_id] || 0;
      if(Number(isMoreSpecs) > 1){
        // 多规格  初始化选中项
        let selected_spec = {};
        Object.values(good.attr).forEach((val,index) => {
          selected_spec[val.attr_name] = (val.attr_values ? val.attr_values[0] : '');
        })
        // 赋值
        good.selected_spec = selected_spec;
        this.currentGoods = Object.assign({}, good);
        this.$refs.moreSpecsSelect.open('bottom');
      }
      else if(['add', 'reduce', 'input'].includes(type)){
        // 单规格
        good.selected_spec = {};
        this.currentGoods = Object.assign({}, good);
        let spec = item.attrValue[0];
        this.buyFlowChangeNum(type, spec)
      }
    },
    // 购买流程 - 数量改变(添加 || 减少)
    buyFlowChangeNum(type, spec){
      let isBatch = this.batch_list[spec.product_id] || 0;// 0=单个购买，1=批量购买
      let currentProduct = Object.assign({}, this.buyList[spec.product_id] || {});
      if(Object.values(currentProduct).length > 0){
        // 商品已经存在
        let currentSpec = currentProduct.specs[spec.unique] || {};
        if(Object.values(currentSpec).length <= 0) {
          if(type === 'reduce') return false;
          spec.cart_num = 0;
          currentSpec = spec;
        }
        // 记录变更前数量
        let oldNum = currentSpec.cart_num || 0;
        // 数量变更
        if(type === 'add') currentSpec.cart_num += 1;
        else if(type === 'reduce') currentSpec.cart_num -= 1;
        else if(type === 'input') currentSpec.cart_num = spec.input_num || 0;
        // 判断：是否超出库存
        let stock = currentSpec.stock || 0;
        if(isBatch == 1) stock = Math.floor(stock / (this.currentGoods.batch_num || ''));//批量购买时  库存需要除以每批数量
        if(Number(stock) < Number(currentSpec.cart_num)) currentSpec.cart_num = stock;
        // 计算变更数量
        let currentNum = currentSpec.cart_num || 0;
        let changeNum = Number(oldNum) - Number(currentNum);
        // 判断：购买数量是否已经为0  是则删除
        if(currentSpec.cart_num <= 0) {
          this.cartDel(currentSpec);
          delete currentProduct.specs[spec.unique];
        } else {
          currentProduct.specs[spec.unique] = currentSpec;
          // 增加购物车信息  存在即修改
          currentSpec.batch_num = this.currentGoods.batch_num || '';
          currentSpec.is_batch = this.currentGoods.is_batch || 0;
          this.cartSubmitEdit(currentSpec);
        }
        // 判断：当前商品不存在任何购买规格
        if(Object.values(currentProduct.specs).length <= 0){
          this.$set(this.buyList, spec.product_id, {});
          delete this.buyList[spec.product_id];
        }else{
          currentProduct.total_num -= changeNum;

          this.$set(this.buyList, spec.product_id, currentProduct);
        }
      }
      else{
        // 商品不存在
        if(type === 'add') spec.cart_num = 1;
        else if(type === 'reduce') return false;
        else if(type === 'input') spec.cart_num = spec.input_num || 0;
        // 判断：是否超出库存
        let stock = spec.stock || 0;
        if(isBatch == 1) stock = Math.floor(stock / (this.currentGoods.batch_num || ''));//批量购买时  库存需要除以每批数量
        if(Number(stock) < Number(spec.cart_num)) spec.cart_num = stock;
        // 初始化
        this.$set(this.buyList, spec.product_id, {
          // 购买单位类型
          is_batch: this.currentGoods.is_batch,// 是否支持按照批次购买
          batch_num: this.currentGoods.batch_num,// 一批等于多少件
          batch_unit: this.currentGoods.batch_unit,// 一批次的单位
          // 其他信息
          product_id: spec.product_id,
          total_num: spec.cart_num,
          store_name: this.currentGoods.store_name,
          specs: {
            [spec.unique]: spec,
          },
        });

        // 增加购物车信息
        spec.batch_num = this.currentGoods.batch_num || '';
        spec.is_batch = this.currentGoods.is_batch || 0;
        this.cartSubmitEdit(spec);
      }

      this.$forceUpdate();
    },
    // 购买流程 - 多规格弹框关闭
    closeMoreSpecsSelect(){
      this.$refs.moreSpecsSelect.close();
    },
    // 购买流程 - 多规格切换
    buyFlowChangeSpec(attrName, specItem){
      this.currentGoods.selected_spec[attrName] = specItem;
    },
    // 购买流程 - 切换购买单位
    changeBatchType(productId){
      // 获取切换后购买单位
      let currentBatchType = this.batch_list[productId] || 0;
      let negation = currentBatchType == 0 ? 1 : 0;
      // 切换商品购买数量
      let currentProduct = Object.assign({}, this.buyList[productId] || {});
      this.$set(this.batch_list, productId, negation);
      if(Object.values(currentProduct).length > 0){
        let specs = currentProduct.specs || {};
        let totalNum = 0;
        Object.values(specs).forEach(item => {
          let stock = item.stock || 0;
          let cartNum = 0;
          if(negation == 1){
            // 批量购买  当前购买数量除以每批的数量
            cartNum = Math.floor(item.cart_num / currentProduct.batch_num);
            stock = Math.floor(stock / currentProduct.batch_num);
          }else{
            // 单个购买  当前购买数量乘以每批的数量
            cartNum = Math.floor(item.cart_num * currentProduct.batch_num);
          }
          // 判断：是否超出库存
          cartNum = cartNum <= 0 ? 1 : cartNum;
          if(stock < cartNum) cartNum = stock;
          totalNum += cartNum;
          currentProduct.specs[item.unique].cart_num = cartNum || 1;
          // 修改购物车信息
          let spec = currentProduct.specs[item.unique] || {};
          spec.batch_num = currentProduct.batch_num || '';
          spec.is_batch = negation || 0;
          this.cartSubmitEdit(spec);
        })
        currentProduct.total_num = totalNum;
        this.$set(this.buyList, productId, currentProduct);
      }
      // 赋值
      this.$forceUpdate();
    },
    // 购买流程 - 计算总价值和总数量
    BuyFlowComputeTotal(){
      let totalNum = 0;
      let totalPrice = 0.00;
      Object.values(this.buyList).forEach(item => {
        totalNum += item.total_num;
        Object.values(item.specs).forEach(value => {
          let price = value.price * value.cart_num;
          let currentBatchType = this.batch_list[value.product_id] || 0;
          // 判断：如果是批量购买 当前价格需要乘以每批的数量
          if(currentBatchType == 1) price = price * item.batch_num;

          totalPrice += price;
        })
      })
      // 赋值
      this.totalNum = totalNum.toFixed(0);
      this.totalPrice = totalPrice.toFixed(2);
    },
    // 购物车 - 获取已存在列表
    cartGetList(){
      let _this = this;
      // 数据查询
      withGoodsCartList().then(res => {
        if(res.status == 200){
          let data = res.data || {};
          let buyList = {};
          let batchList = {};
          Object.values(data).forEach( item => {
            // 获取规格信息
            let spec = item.productAttr || {};
            spec.cart_num = item.cart_num || 0;
            // 赋值
            let good = buyList[item.product_id] || {};
            if(Object.values(good).length > 0){
              // 商品已经存在
              buyList[item.product_id].specs[item.product_attr_unique] = spec;
              buyList[item.product_id].total_num += item.cart_num;
            }else{
              // 商品不存在
              buyList[item.product_id] = {
                // 购买单位类型
                is_batch: item.is_batch,// 是否支持按照批次购买
                batch_num: item.batch_num,// 一批等于多少件
                unit_name: item.product.unit_name,// 单件单位
                batch_unit: item.product.batch_unit,// 一批次的单位
                // 其他信息
                product_id: item.product_id,
                total_num: item.cart_num,
                store_name: item.product.store_name,
                specs: {
                  [item.product_attr_unique]: spec,
                },
              };
            }
            // 购买类型
            batchList[item.product_id] = item.is_batch || 0;
          });

          this.buyList = Object.assign({}, buyList);
          this.batch_list = Object.assign({}, batchList);
        }
      }).catch(err => {
        _this.$util.Tips({title: err});
      });
    },
    // 购物车 - 提交购物车
    cartSubmitEdit(spec){
      let _this = this;
      let params = {
        cart_num: spec.cart_num,
        product_attr_unique: spec.unique,
        product_id: spec.product_id,
        // 购买单位类型
        is_batch: spec.is_batch || 0,// 0=单个购买，1=批量购买
        batch_num: spec.batch_num || '',// 一批等于多少件
      };
      // 数据查询
      withGoodsCartAdd(params).then(res => {
        // console.log(res)
      }).catch(err => {
        _this.cartGetList();
        this.$util.Tips({title: err});
      });
    },
    // 购物车 - 删除购物车商品信息
    cartDel(spec){
      let _this = this;
      let params = {
        product_attr_unique: spec.unique,
        product_id: spec.product_id,
      };
      // 数据查询
      withGoodsCartDel(params).then(res => {
        // console.log(res)
      }).catch(err => {
        _this.cartGetList();
        this.$util.Tips({title: err});
      });
    },
    // 立即结算
    settlementCart(){
      let _this = this;
      // 数据查询
      withGoodsCartIds().then(res => {
        if(res.status == 200){
          let data = res.data || {};
          if(Object.values(data).length <= 0){
            _this.$util.Tips({title: '请选择商品！'});
            return false;
          }
          // 去结算
          uni.navigateTo({
            url: '/pages/users/order_confirm/index?is_with_goods=1&cartId=' + data.join(',')
          });
        }
      }).catch(err => {
        _this.$util.Tips({title: err});
      });
    },
    // 查看进货记录
    withGoodsRecord(){
      uni.navigateTo({
        url: '/pages/users/order_list/index?is_with_goods=1'
      });
    }


  },
  // 滚动到底部
  onReachBottom() {
    this.getGoodsList();
  },
}
</script>

<style scoped lang="scss">
.page-content{
  width: 100vw;
  min-height: 100vh;
  background-color: #f6f6f6;
  // 主要内容
  .main-content{
    padding-bottom: 150rpx;
    // 搜索
    .search-content{
      background: #F9F0DA;
      .search-main{
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 15rpx;
        .search-input{
          border-top-left-radius: 10rpx;
          border-bottom-left-radius: 10rpx;
          width: calc(100% - 110rpx);
          padding: 0 20rpx;
          height: 60rpx;
          line-height: 60rpx;
          border: 4rpx solid #c5464a;
          background: transparent;
          outline: none;
        }
        .search-btn{
          background: #c5464a;
          border-top-right-radius: 10rpx;
          border-bottom-right-radius: 10rpx;
          width: 110rpx;
          height: calc(60rpx + (4rpx * 2));
          line-height: calc(60rpx + (4rpx * 2));
          font-size: 26rpx;
          color: #F9F0DA;
          text-align: center;
        }
      }
    }
    // 提示
    .top-tips{
      background: #F9F0DA;
      color: #813d40;
      font-size: 30rpx;
      font-weight: bold;
      text-align: center;
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      position: relative;
      .record-btn{
        position: absolute;
        top: calc((80rpx - 40rpx) / 2);
        right: 0;
        font-size: 26rpx;
        padding: 0 15rpx;
        border: 2rpx solid #813d40;
        height: 40rpx;
        line-height: 40rpx;
        border-radius: 6rpx;
        margin-right: 15rpx;
      }
    }
    // 商品列表
    .list{
      --item-padding-: 30rpx;
      .item:not(:last-child){
        margin-bottom: var(--item-padding-);
      }
      .item{
        padding: var(--item-padding-);
        background: #FFFFFF;
        .goods{
          width: 100%;
          padding-bottom: var(--item-padding-);
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: flex-start;
          align-items: center;
          .image{
            width: 120rpx;
            height: 120rpx;
            .goods-image{
              width: 100%;
              height: 100%;
            }
          }
          .info{
            width: calc(100% - 120rpx);
            height: 120rpx;
            padding-left: 20rpx;
            display: inline-flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: space-evenly;
            align-items: flex-start;
            .title{
              width: 100%;
              font-size: 32rpx;
              font-weight: bold;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .price{
              font-size: 26rpx;
              color: #d84b40;
              font-weight: bold;
            }
          }
        }
        .buy{
          padding-top: var(--item-padding-);
          border-top: 2rpx solid #F6F6F6;
          width: 100%;
          height: 75rpx;
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: center;
          .left{
            display: inline-flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;
            .buy-unit{
              font-size: 26rpx;
            }
            .icon-jiantou_shangxiaqiehuan_o{
              transform: rotate(90deg);
              font-size: 36rpx;
              font-weight: bold;
              margin-left: 15rpx;
            }
          }
          .right{
            .icon-gengduozhankai1{
              font-size: 42rpx;
            }
            .buy-num{
              --border-color-: #f2f2f2;

              display: inline-flex;
              flex-direction: row;
              flex-wrap: nowrap;
              justify-content: flex-start;
              align-items: center;
              .num-change{
                border: 2rpx solid var(--border-color-);
                display: inline-flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: flex-start;
                align-items: center;
                border-radius: 100rpx;
                padding: 0 15rpx;
                height: 45rpx;
                .iconfont{
                  text-align: center;
                  font-size: 30rpx;
                }
                .icon-shangpinshuliang-jian{
                  padding-right: 15rpx;
                }
                .icon-shangpinshuliang-jia{
                  padding-left: 15rpx;
                }
                .num-input{
                  border-left: 2rpx solid var(--border-color-);
                  border-right: 2rpx solid var(--border-color-);
                  width: 100rpx;
                  text-align: center;
                }
              }
              .unit{
                font-size: 26rpx;
                margin-left: 10rpx;
              }
            }
          }
        }
      }
    }
    // 结算按钮
    .settlement{
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #FFFFFF;
      padding: 20rpx 20rpx 50rpx 20rpx;
      box-shadow: 0 0 10px 0 #f3f3f3;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      .left{
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        .icon-gouwuche-mendian{
          font-size: 30rpx;
          margin-right: 20rpx;
          border: 2rpx solid #000000;
          border-radius: 50%;
          padding: 15rpx;
          position: relative;
          .total-num{
            position: absolute;
            top: -5px;
            right: -5px;
            font-size: 20rpx;
            background: #ef2c1c;
            color: #ffffff;
            border-radius: 50%;
            width: 35rpx;
            height: 35rpx;
            text-align: center;
            line-height: 35rpx;
          }
        }
        .total{
          font-size: 30rpx;
          .total-price{
            font-weight: bold;
            color: #ef2c1c;
          }
        }
      }
      .settlement-btn{
        background: #ef2c1c;
        color: #FFFFFF;
        height: 55rpx;
        line-height: 55rpx;
        width: 200rpx;
        text-align: center;
        border-radius: 100rpx;
      }
      .not-btn{
        background-color: #909399!important;
        border-color: #909399!important;
        color: #fff!important;
      }
    }
  }
  // 多规格选择弹框
  .more-spec-content{
    height: 80vh;
    width: 100vw;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    background: #f6f6f6;
    padding: 20rpx;

    .goods-info{
      width: 100%;
      padding-bottom: 20rpx;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      .image{
        width: 120rpx;
        height: 120rpx;
        .goods-image{
          width: 100% !important;
          height: 100% !important;
        }
      }
      .info{
        width: calc(100% - (120rpx + 60rpx));
        padding-left: 15rpx;
        .title{
          font-size: 32rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          height: 50rpx;
          line-height: 50rpx;
        }
        .price{
          .price-icon{
            font-size: 20rpx;
          }
          color: #d14e42;
          font-size: 28rpx;
          font-weight: bold;
          height: 40rpx;
          line-height: 50rpx;
        }
        .stock{
          color: #a8a8a8;
          font-size: 22rpx;
        }
      }
      .close-btn{
        width: 60rpx;
        text-align: right;
        position: absolute;
        top: 0;
        right: 0;
        font-size: 50rpx;
      }
    }

    .goods-spec{
      max-height: calc(100% - 70rpx - 30rpx - 120rpx - 20rpx);
      overflow: auto;
      .spec-block{
        .spec-title{
          width: 100%;
          height: 50rpx;
          line-height: 50rpx;
          color: #a8a8a8;
          font-size: 30rpx;
          font-weight: bold;
        }
        .spec-list{
          display: inline-flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: center;
          .spec-list-tag{
            border: 2rpx solid #a6a6a6;
            height: 45rpx;
            line-height: 45rpx;
            padding: 0 15rpx;
            font-size: 26rpx;
            margin-right: 15rpx;
            margin-bottom: 15rpx;
          }
          .spec-list-tag-active{
            background: #e93423;
            color: #f3f3f3;
            border-color: #e93423;
          }
        }
      }
    }

    .bottom-content{
      --border-color-: #000000;

      width: 100%;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-end;
      align-items: center;
      margin-top: 30rpx;
      .num-change{
        border: 2rpx solid var(--border-color-);
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        border-radius: 100rpx;
        padding: 0 15rpx;
        height: 70rpx;
        float: right;

        .iconfont{
          text-align: center;
          font-size: 30rpx;
          width: 70rpx;
        }
        .icon-shangpinshuliang-jian{
          padding-right: 15rpx;
        }
        .icon-shangpinshuliang-jia{
          padding-left: 15rpx;
        }
        .num-input{
          border-left: 2rpx solid var(--border-color-);
          border-right: 2rpx solid var(--border-color-);
          width: 150rpx;
          height: 70rpx;
          text-align: center;
        }
      }
      .unit{
        font-size: 26rpx;
        margin-left: 10rpx;
      }
    }
  }
}
</style>
