<!--
  @description: 商品详情
  @Modifier：sxm/wxy
  @routerPath:goodsClassDetail
  @date：  2020/7/14-15:00
-->
<template>
  <div v-if="is_Reload">
    <div class="nav_w">
      <!--搜索-->
      <search :search-children-data="seenData" :goods-list-data="goodsList" :is-dorpdown="true" />
    </div>
    <section class="middle_width1190">
      <!--当前位置-面包屑-->
      <div class="crumbs_nav_main">
        <span class="pos_title">
          <i class="iconfont icon-dizhi" />当前位置：
        </span>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/shop/shopHome' }">
            首页
          </el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/shop/goodsClassList' ,query:{id:goodsInfo.category}}">
            <span @click="navClick">{{ shopInfo.departName }}</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>{{ goodsInfo.productClassification ? goodsInfo.productClassification :"" }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!--商品信息-->
      <div class="goods_detail">
        <div class="left">
          <!--商品图片-->
          <div id="magnifier" class="item-pic__box">
            <div id="small-box" class="small-box">
              <el-image :src="goodsInfo.productPicture" class="cover" />
              <span class="hover" />
            </div>
            <div class="thumbnail-box">
              <a href="javascript:;" class="btn-default btn-prev">
                <i class="iconfont icon-arrow-left" @click="iconLeft" />
              </a>
              <div class="thumb-list">
                <ul class="wrapper clearfix">
                  <li
                    v-for="(item, index) in pictureList"
                    :key="index"
                    :class="{'wrapper_item': true, 'active': pic_flag===index}"
                    @mouseenter="pic_flag = index;big_pic_flag = true"
                    @mouseleave="big_pic_flag = false"
                  >
                    <a href="#">
                      <img :src="item" class="cover">
                    </a>
                  </li>
                </ul>
              </div>
              <a href="javascript:;" class="btn-default btn-next">
                <i class="iconfont icon-arrow-right" @click="iconRight" />
              </a>
            </div>
            <div :class="{'big_pic':big_pic_flag, 'big-box': true}">
              <img :src="pictureList[pic_flag]" alt style="width: 420px;height: 420px;">
            </div>
          </div>
        </div>
        <!--商品信息-->
        <div class="center">
          <p class="goods_title goods_item_title_two">
            {{ goodsInfo.productName }}
          </p>
          <div class="sell_price">
            <div class="price_box">
              <span class="align_right">{{ isLogin ? '售价：' : '市场价：' }}</span>
              <span v-if="!isLogin" class="now_price">
                ￥{{ goodsInfo.marketPrice }}
              </span>
              <span v-if="isLogin" class="now_price">
                ￥
                <i>{{ goodsInfo.price }}</i>
              </span>
              <span v-if="isLogin" class="former_price" @click="goodsInfoUrl(goodsInfo)">
                [ <i>市场价：￥{{ goodsInfo.marketPrice }}</i> ]
              </span>
              <span v-if=" shopInfo.departName==='京东商城' && shellStatus === '暂停销售'" class="no_sell">{{ shellStatus }}</span>
            </div>

            <div class="already_sold">
              <span style="color:#666;">{{ goodsInfo.salesQuantity ? goodsInfo.salesQuantity:0 }}</span>
              <span>销量</span>
            </div>
          </div>
          <div class="goods_name clearfix">
            <p class="fl">
              <span class="align_right_name">品牌</span>：
              <span class="now_price">{{ goodsInfo.brandName }}</span>
            </p>
            <p class="fr cursor" style="cursor:pointer;" @click="collectionGood(goodsInfo)">
              <i :class="goodsFlg?'el-icon-star-on':'el-icon-star-off'" />收藏商品
            </p>
          </div>
          <div class="goods_name">
            <p>
              <span class="align_right_name">商品编码</span>：
              <span class="now_price">{{ goodsInfo.productCode }}</span>
            </p>
          </div>
          <div class="goods_name">
            <p>
              <span class="align_right_name">库存</span>：
              <span class="now_price">{{ text }}</span>
              <span v-if="!text">亲，请选择区域地址</span>
            </p>
            <p style="display:flex;align-items:center;">
              <span class="align_right_name">区域</span>：
              <!--地区组件-->
              <cascader :region-text="dto.name" :title="dto.name" class="casc_style" @regionData="regionData" />
              <span v-if="flagArea" class="goods_name">{{ flagArea }}</span>
            </p>
            <p>
              <span class="align_right_name">最小起订量</span>：
              <span v-if="goodsInfo.minByNum" class="now_price">{{ goodsInfo.minByNum }}</span>
              <span v-if="!goodsInfo.minByNum" class="now_price">1</span>
            </p>
          </div>
          <div class="goods_name clearfix">
            <p class="fl">
              <span class="purchase_quantity align_right_name">购买数量</span>：
            </p>
            <div class="count fl">
              <span @click="minus">
                <i class="el-icon-minus" />
              </span>
              <input v-model="number" @keyup="inputChange">
              <span @click="add">
                <i class="el-icon-plus" />
              </span>
              <span>单位：{{ goodsInfo.unit || '无' }}</span>
            </div>
            <div class="fl">
              <span class="total_prices">总价：</span>
              <span
                v-if="isLogin"
                class="all_price"
              >￥{{ Number(goodsInfo.price).mul(number) }}</span>
              <span v-else class="all_price">登录可见</span>
            </div>
          </div>
          <div v-if="isLogin&&roleCode&&roleCode==='19'||!isLogin" class="choose_btns">
            <button class="buy_now_btn" @click="buyNow">
              立即购买
            </button>
            <button class="add_car_btn el-icon-shopping-cart-2" :disabled="btnLoading" @click="addToCar">
              加入购物车
            </button>
          </div>
        </div>
        <!--供应商信息商品有售商家信息-->
        <suppilerInfoDetail
          :sale-list="saleList"
          :shop-info-flg="shopInfoFlg"
          :shop-info="shopInfo"
          :is-login="isLogin"
          :addshop-params="addshopParams"
          :shop-info-status="shopInfoStatus"
          @shopInfoFlgEmit="shopInfoFlgEmit"
        />
      </div>
    </section>
    <!--商品详情-->
    <!--同类热卖-->
    <similarHotDetail :same-list="sameList" :good-active="goodActive" :goods-info="goodsInfo" :is-login="isLogin" />
    <cartDialog :join-cart="joinCart" @joinCartFn="joinCartFn" />
  </div>
</template>

<script>
// import $ from 'jquery'
import { getToken } from '@/assets/js/utils/auth'
// import '@/assets/js/magnifier.js'
import { hasMarked, productDetails, salesOfBusinesProducts, redHotProducts, getProductShopInfo, addMarkInfo, saveShoppingCart, productCheckStock, getCheckAreaInfo, saveCheckAreaInfo, getSkuAreaLimit, productCheck } from '@/api/shoppingmall/products'
import { deleteMarkInfo } from '@/api/shoppingmall/tabcenter'
import { getgoodsclassTree } from '@/api/shoppingmall/products'
// 组件
import similarHotDetail from './similarHot-detail'
import suppilerInfoDetail from './suppilerInfo-detail'
// import search from '../../components/shopComponents/search/search'
import search from './search'
import cartDialog from '@/components/shoppingmall/shopLayout/shopComponents/cartDialog.vue'
import cascader from '@comp/common/cascader'// 地区三级联动

export default {
  name: 'GoodsClassDetail',
  // inject: ['reload'],
  components: {
    search,
    cartDialog,
    cascader, // 地区三级联动
    similarHotDetail, // 同类热卖
    suppilerInfoDetail // 供应商信息
  },
  filters: {
    formatMoney(val) {
      let num = 0
      val.forEach(element => {
        num += element.marketPrice * 1
      })
      return num.toFixed(2)
    }
  },
  data() {
    return {
      big_pic_flag: false,
      pic_flag: 0,
      flagArea: '正常配送', // 区域受限
      shellStatus: '', // 售卖情况
      text: '',
      shopInfoFlg: false,
      goodsFlg: false,
      shopInfoStatus: {
        type: 3,
        id: ''
      },
      goodStatus: {
        type: 2,
        id: ''
      },
      // 商品
      product: {
        type: '00',
        id: ''
      },
      // 商家
      getProduct: {
        type: '02',
        id: ''
      },
      bannrIndex: 0, // 图片轮播
      joinCart: false, // 加入购物车成功
      // 动态添加class 是否显示一级全部分类列表
      seenData: {
        seen: false,
        current: 0
      },
      isLogin: false,
      number: 1,
      goodActive: 'first', // 商品详情tab
      saleList: [], // 商品有售的商家列表
      sameList: [], // 同类热卖商品
      goodsInfo: {}, // 商品信息
      shopInfo: {}, // 店铺信息
      // 加入购物车参数
      carData: {
        areaName: '',
        areaCode: '',
        goodsId: '',
        number: '',
        goodsName: '',
        id: null
      },
      // 同类热卖加入购物车
      carDataHot: {
        goodsId: '',
        number: '',
        goodsName: '',
        id: null
      },
      addshopParams: {
        supplierId: '',
        supplierName: '',
        type: '3'
      },
      collectionParams: {
        productCode: '',
        img: '',
        productName: '',
        supplierName: '',
        unitPrice: 0,
        type: '2'
      },
      // 校验库存
      collGet: {
        areaName: '', // 区域选择获得的名称
        areaCode: '', // 区域选择获得的编码
        sku: '', // 商品编码
        type: '', // 供应商名称
        num: '1', // 购买数量
        productId: '' // 产品ID
      },
      dto: { // 保存检验地址数据
        id: '',
        name: '',
        code: ''
      },
      is_Reload: true, // 刷新
      roleCode: '', // 当前登录人的code
      goodsList: [], // 商品分类列表
      pictureList: [], // 缩略图列表
      btnLoading: false // 加入购物车按钮 loading
    }
  },
  watch: {
    // 'number'(n, o) {
    //   if (n > this.goodsInfo.stock) {
    //     this.$message({
    //       type: 'error',
    //       message: '库存不足'
    //     })
    //     this.number = this.goodsInfo.stock
    //     return false
    //   }
    // }
    '$route'() {
      this.getProductDetail()
      this.number = 1
    }
  },
  created() {
    // 校验是否登录
    this.isLogin = !!getToken()
    // 查询分类json树
    const pid = ''
    getgoodsclassTree(pid).then(response => {
      this.goodsList = response.data
    }).catch(() => {

    })
  },
  mounted() {
    // 放大镜
    // $('#magnifier').magnifier()
    this.getProductDetail()
    // $('#box_i').height(this.sameList.length * 332)
    // $('.goods_left').height(this.sameList.length * 332)
  },
  methods: {
    getProductDetail() {
      const goodsId = this.$route.query.id
      this.pictureList = []
      // 商品详情
      productDetails(goodsId).then(res => {
        if (res.header.ret === '0') {
          this.goodsInfo = res.data
          // 建立缩略图列表
          this.pictureList.push(res.data.productPicture)
          if (res.data.auxiliaryPictureOne.slice(-4) !== 'null') {
            this.pictureList.push(res.data.auxiliaryPictureOne)
          }
          if (res.data.auxiliaryPictureTwo.slice(-4) !== 'null') {
            this.pictureList.push(res.data.auxiliaryPictureTwo)
          }
          if (res.data.auxiliaryPictureThree.slice(-4) !== 'null') {
            this.pictureList.push(res.data.auxiliaryPictureThree)
          }
          if (res.data.minByNum) {
            this.collGet.num = res.data.minByNum
          } else {
            this.collGet.num = '1'
          }
          this.collGet.type = res.data.departName
          this.collGet.productId = res.data.id
          this.collGet.sku = res.data.productCode
          this.carData.goodsId = res.data.id
          this.carData.goodsName = res.data.productName
          this.getProductShop(res.data.departId)
          this.goodStatus.id = this.goodsInfo.id
          // 是否登录
          if (this.isLogin) {
            this.roleCode = this.$store.getters.info.currentRol.roleCode
            this.dto.id = this.$store.getters.info.id
            // 是否收藏商家
            hasMarked(this.goodStatus).then(res => {
              this.goodsFlg = res.data
            })
            this.getCheckAreaInfo(this.dto.id)
          }
        }
      }).catch(() => {

      })
      // 商品详情页之商家在售
      salesOfBusinesProducts(goodsId).then(res => {
        if (res.header.ret === '0') {
          this.saleList = res.data
        }
      }).catch(() => {

      })
      // 商品详情页之同类商品热卖
      redHotProducts(goodsId).then(res => {
        if (res.header.ret === '0') {
          this.sameList = res.data
        }
      }).catch(() => {

      })
    },
    // 所在区域三级联动组件使用
    regionData(regionName, location) {
      this.carData.areaName = regionName
      this.carData.areaCode = location.join(',')
      this.collGet.areaName = regionName
      this.collGet.areaCode = location.join(',')
      this.initDas()
    },
    initDas() {
      if (!this.isLogin) {
        this.$message({
          type: 'warning',
          message: '请先登录！'
        })
        return
      }
      this.dto.name = this.collGet.areaName
      this.dto.code = this.collGet.areaCode
      // 保存地区
      saveCheckAreaInfo(this.dto).then(res => {
        if (res.header.ret === '0') {
          // console.log(1111)
        }
      })
      // 库存校验
      productCheckStock(this.collGet).then(res => {
        if (res.header.ret === '0') {
          this.text = res.data
          if (this.text === '有货' && (this.shopInfo.departName === '震坤行' || this.shopInfo.departName === '京东商城')) {
            const data = {
              type: this.shopInfo.departName,
              skuId: this.collGet.sku,
              userId: this.$store.getters.info.id
            }
            // 校验配送是否受限
            getSkuAreaLimit(data).then(res => {
              alert(res.data)
              this.flagArea = res.data
              if (this.shopInfo.departName === '京东商城') {
                const data = {
                  skuIds: this.collGet.sku,
                  queryExts: 'noReasonToReturn'
                }
                // 校验京东商品可售性
                productCheck(data).then(res => {
                  this.shellStatus = res.data
                })
              }
            })
          }
        }
      })
    },
    // 面包屑返回
    navClick() {
      this.$store.commit('SET_BREAD_NAV', this.shopInfo.departName)
      sessionStorage.setItem('firstClassNames', this.shopInfo.departName)
      this.$router.push({ path: '/shop/goodsClassList', query: { departmentType: this.goodsInfo.type }})
    },
    // input值改变
    inputChange() {
      this.number = this.number.replace(/[^\d]/g, '')
      this.collGet.num = this.number.replace(/[^\d]/g, '')
      if (this.goodsInfo.stock) {
        if (this.number === '0') {
          this.$message({
            type: 'warning',
            message: '商品数量不能为0'
          })
          this.number = 1
          return false
        }
        this.initDas()
        if (this.number >= 10000) {
          this.$message({
            type: 'success',
            message: '超过购买数量限制'
          })
          this.number = 9999
          return false
        }
      }
    },
    // 收藏商家传值
    shopInfoFlgEmit(val) {
      this.shopInfoFlg = val
    },
    // 市场价跳转
    goodsInfoUrl(url) {
      if (url.url) {
        window.open(url.url)
      }
    },
    // 放大镜图片轮播左箭头
    iconLeft() {
      this.pic_flag--
      if (this.pic_flag < 0) {
        this.pic_flag = this.pictureList.length - 1
      }
      // console.log(11)
    },
    // 放大镜图片轮播右箭头
    iconRight() {
      this.pic_flag++
      if (this.pic_flag >= this.pictureList.length) {
        this.pic_flag = 0
      }
      // console.log(11)
    },
    joinCartFn(val) {
      setTimeout(() => {
        this.joinCart = val
      }, 1500)
    },
    // 商品详情页之店铺信息
    getProductShop(departId) {
      getProductShopInfo(departId).then(res => {
        if (res.header.ret === '0') {
          this.shopInfo = res.data[0]
          this.shopInfoStatus.id = this.shopInfo.departId
          if (this.isLogin) {
            hasMarked(this.shopInfoStatus).then(res => {
              this.shopInfoFlg = res.data
            })
          }
        }
      }).catch(() => {

      })
    },
    // 减数量
    minus() {
      this.number--
      this.collGet.num = this.number
      this.initDas()
      if (this.number < 1) {
        this.$message({
          type: 'warning',
          message: '商品数量不能为0'
        })
        this.number = 1
        this.collGet.num = this.number
        this.initDas()
        return false
      }
    },
    // 加数量
    add() {
      if (!this.isLogin) {
        this.$message({
          type: 'warning',
          message: '请先登录！'
        })
        return
      }
      if (this.carData.areaName) {
        this.number++
        this.collGet.num = this.number
        this.initDas()
        if (this.goodsInfo.stock) {
          if (this.number >= 10000) {
            this.$message({
              type: 'success',
              message: '超过购买数量限制'
            })
            this.number = 9999
            this.collGet.num = this.number
            this.initDas()
            return false
          }
        }
      } else {
        this.$message({
          type: 'warning',
          message: '请先选择区域'
        })
      }
    },
    // 立即购买
    buyNow() {
      if (this.isLogin) {
        if (this.flagArea !== '正常配送') {
          this.$message({
            type: 'warning',
            message: '区域受限，无法购买'
          })
          return
        }
        if (this.shellStatus === '暂停销售') {
          this.$message({
            type: 'warning',
            message: '该商品暂停销售，无法购买'
          })
          return
        }
        // this.$confirm('没有对比商品，是否直接购买?', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(() => {
        if (this.carData.areaName) {
          if (this.text !== '无货') {
            this.carData.number = this.number
            this.carData.buyerType = '01'
            this.$router.push({
              path: '/shop/settle',
              query: { from: 'goodsClassDetail', goodsId: this.$route.query.id, number: this.number }
            })
          } else {
            this.$message({
              type: 'warning',
              message: '当前选择商品无货'
            })
          }
        } else {
          this.$message({
            type: 'warning',
            message: '请选择区域地址'
          })
        }
        // }).catch(() => {
        //   this.$message({
        //     type: 'info',
        //     message: '已取消购买'
        //   })
        // })
      } else {
        this.$message({
          type: 'warning',
          message: '请先登录！'
        })
      }
    },
    // 加购物车
    addToCar() {
      this.btnLoading = true
      if (this.isLogin) {
        if (this.flagArea !== '正常配送') {
          this.btnLoading = false
          this.$message({
            type: 'warning',
            message: '区域受限，无法加入购物车'
          })
          return
        }
        if (this.shellStatus === '暂停销售') {
          this.btnLoading = false
          this.$message({
            type: 'warning',
            message: '该商品暂停销售，无法加入购物车'
          })
          return
        }
        if (this.$route.query.type) {
          this.carData.number = this.number
          this.carData.buyerType = '02'
          this.carData.compreGoodsIds = this.$route.query.ids
          if (this.carData.areaName) {
            if (this.text !== '无货') {
              // 调用加入购物车接口
              saveShoppingCart(this.carData).then(res => {
                if (res.header.ret === '0') {
                  this.joinCart = true
                  // 调用vuex获取购物车列表方法
                  const data = {
                    pageNo: 1,
                    pageSize: 3
                  }
                  this.btnLoading = false
                  this.$store.dispatch('loadShoppingCart', data).then(() => {
                  }).catch(() => {
                  })
                }
              }).catch((err) => {
                this.btnLoading = false
                // 只有价格变更才会刷新页面
                if (err === '商品价格已变动，正在获取最新价格，请稍等') {
                  this.reload() // 刷新页面
                }
              })
            }
          } else {
            this.btnLoading = false
            this.$message({
              type: 'warning',
              message: '请选择区域地址'
            })
          }
        } else {
          // this.$confirm('没有对比商品，是否加入购物车?', '提示', {
          //   confirmButtonText: '确定',
          //   cancelButtonText: '取消',
          //   type: 'warning'
          // }).then(() => {
          this.carData.number = this.number
          this.carData.buyerType = '02'
          if (this.carData.areaName) {
            if (this.text !== '无货') {
              // 调用加入购物车接口
              saveShoppingCart(this.carData).then(res => {
                if (res.header.ret === '0') {
                  this.joinCart = true
                  // 调用vuex获取购物车列表方法
                  const data = {
                    pageNo: 1,
                    pageSize: 3
                  }
                  this.btnLoading = false
                  this.$store.dispatch('loadShoppingCart', data).then(() => {
                  }).catch(() => {

                  })
                }
              }).catch((err) => {
                this.btnLoading = false
                // 只有价格变更才会刷新页面
                if (err === '商品价格已变动，正在获取最新价格，请稍等') {
                  this.reload() // 刷新页面
                }
              })
            } else {
              this.btnLoading = false
              this.$message({
                type: 'warning',
                message: '当前选择商品无货'
              })
            }
          } else {
            this.btnLoading = false
            this.$message({
              type: 'warning',
              message: '请选择区域地址'
            })
          }
          // }).catch(() => {
          //   this.$message({
          //     type: 'info',
          //     message: '已取消加入'
          //   })
          // })
        }
      } else {
        this.btnLoading = false
        this.$message({
          type: 'warning',
          message: '请先登录！'
        })
      }
    },
    // 同类热卖加入购物车
    addToCarHot(item) {
      if (this.isLogin) {
        // this.$confirm('没有对比商品，是否加入购物车?', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(() => {
        this.carDataHot.number = 1
        this.carDataHot.buyerType = '02'
        this.carDataHot.goodsId = item.id
        this.carDataHot.goodsName = item.productName
        // goodsId
        // 调用加入购物车接口
        saveShoppingCart(this.carDataHot).then(res => {
          if (res.header.ret === '0') {
            this.joinCart = true
            // 调用vuex获取购物车列表方法
            const data = {
              pageNo: 1,
              pageSize: 3
            }
            this.$store.dispatch('loadShoppingCart', data).then(() => {
            }).catch(() => {

            })
          }
        }).catch((err) => {
          // 只有价格变更才会刷新页面
          if (err === '商品价格已变动，正在获取最新价格，请稍等') {
            this.reload() // 刷新页面
          }
        })
        // }).catch(() => {
        //   this.$message({
        //     type: 'info',
        //     message: '已取消加入'
        //   })
        // })
      } else {
        this.$message({
          type: 'warning',
          message: '请先登录！'
        })
      }
    },
    // 收藏该商品
    collectionGood(goodsInfo) {
      if (!this.isLogin) {
        this.$message({
          type: 'warning',
          message: '请先登录！'
        })
        return
      }
      // 调用收藏商品接口
      this.collectionParams.img = this.goodsInfo.productPicture
      this.collectionParams.productName = this.goodsInfo.productName
      this.collectionParams.productCode = this.goodsInfo.id
      this.collectionParams.supplierName = this.goodsInfo.departName
      this.collectionParams.unitPrice = this.goodsInfo.price
      if (this.goodsFlg) {
        var type = '00'
        deleteMarkInfo(this.goodsInfo.id, type).then(res => {
          if (res.header.ret === '0') {
            this.$message({
              type: 'success',
              message: '取消收藏成功'
            })
            this.goodsFlg = false
          }
        })
      } else {
        // 调用收藏商品接口
        addMarkInfo(this.collectionParams).then(res => {
          if (res.header.ret === '0') {
            this.$message({
              type: 'success',
              message: '收藏商品成功'
            })
            hasMarked(this.goodStatus).then(res => {
              this.goodsFlg = res.data
            })
          }
        })
      }
    },
    getCheckAreaInfo(userId) {
      getCheckAreaInfo(userId).then(res => {
        if (res.header.ret === '0') {
          if (!res.data) {
            return
          } else {
            this.dto.name = res.data.name
            if (res.data.name) {
              productCheckStock(this.collGet).then(res => {
                if (res.header.ret === '0') {
                  this.text = res.data
                }
              })
            }
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.goods_detail {
  display: flex;
  height: 460px;
  justify-content: space-between;
  .left {
    height: 460px;
    width: 320px;
    .item-pic__box {
      position: relative;
      width: 320px;
      float: left;
      // 首页默认大图
      .small-box {
        position: relative;
        width: 322px;
        height: 322px;
        margin: 0 0 20px 0;
        border: 1px solid #eeeeee;
        .cover {
          width: 320px;
          height: 320px;
          margin: 0px;
        }
        > .hover {
          display: none;
          left: 0;
          top: 0;
          position: absolute;
          border: 1px solid #fff;
          background-color: #000;
          filter: alpha(opacity=15);
          -moz-opacity: 0.15;
          opacity: 0.15;
          cursor: move;
        }
      }
      // 缩略图
      .thumbnail-box {
        position: relative;
        width: 100%;
        .btn-default {
          position: absolute;
          top: 8px;
          &.btn-prev {
            left: -8px;
          }
          &.btn-next {
            right: -8px;
          }
          .iconfont {
            font-size: 30px;
            font-weight: bold;
            color: #e2e2e2;
          }
        }
        .thumb-list {
          overflow: hidden;
          width: 272px;
          margin: 0 auto;
          .wrapper {
            font-size: 0;
            margin-bottom: 0;
            white-space: nowrap;
            .wrapper_item {
              margin: 0 3px;
              cursor: pointer;
              display: inline-block;
              border: 1px solid #eee;
              a {
                display: inline-block;
                width: 56px;
                height: 56px;
                overflow: hidden;
                text-decoration: none;
                outline: 0;
              }
              img {
                width: 56px;
                height: 56px;
                object-fit: cover;
              }
            }
            .active {
              box-sizing: border-box;
              a {
                border: 2px solid #f42233;
                width: 56px;
                height: 56px;
              }
              .cover {
                transform: translate(-2px,-2px);
              }
            }
          }
        }
      }
      // 放大2倍图片
      .big-box {
        z-index: 100;
        display: none;
        overflow: hidden;
        position: absolute;
        left: 362px;
        top: 0;
        border: 1px solid #ccc;
        width: 420px;
        height: 420px;
      }
      .big_pic {
        display: block;
      }
    }
  }
  // 商品信息
  .center {
    width: 46%;
    height: 460px;
    .goods_title {
      font-size: 16px;
      font-weight: bold;
    }
    // 售价
    .sell_price {
      background: #F2F2F2;
      margin-top: 8px;
      display: flex;
      justify-content: space-between;
      padding: 10px 10px;
      margin-bottom: 10px;
      .price_box {
        display: flex;
        align-items: center;
      }
      .align_right {
        color: #333;
        font-size: 12px;
        margin: 0 5px 0 20px;
      }
      .now_price {
        color: @orange;
        font-size: 20px;
        margin-right: 15px;
        i {
          font-weight: bold;
          font-style: normal;
        }
      }
      .former_price {
        color: #999;
        font-size: 12px;
        cursor:pointer;
        i {
          text-decoration-line: line-through;
          font-style: normal;
        }
      }
      .already_sold {
        text-align: center;
        display: flex;
        flex-direction: column;
        width: 80px;
        border-left: 1px dashed #333;
        span:last-of-type {
          color: #333;
          font-size: 12px;
        }
      }
    }
    .goods_name {
      font-size: 12px;
      padding: 0 10px;
      line-height: 31px;
      .align_right_name {
        font-size: 12px;
        padding-right: 2px;
        text-align: justify;
        text-justify: distribute-all-lines; /*ie6-8*/
        text-align-last: justify; /* ie9*/
        -moz-text-align-last: justify; /*ff*/
        -webkit-text-align-last: justify; /*chrome 20+*/
        min-width: 50px;
        display: inline-block;
        color: #7F7F7F;
      }
      .purchase_quantity {
        font-size: 12px;
        display: inline-block;
        color: #7F7F7F;
      }
      .el-icon-star-off {
        margin-right: 5px;
        font-size: 16px;
        color: #666;
      }
      .now_price {
        color: #333;
        font-size: 12px;
      }
      .count {
        display: flex;
        align-items: center;
        margin: 1.5px 40px 0 6px;
        span {
          width: 35px;
          height: 28px;
          line-height: 28px;
          font-size: 12px;
          text-align: center;
          cursor: pointer;
          background-color: #fff;
          border: 1px solid #DCDFE6;
          &:last-of-type {
            border: none;
            margin-left: 10px;
            width: auto;
          }
          i {
            color: #333;
          }
        }
        input {
          width: 70px;
          border-left: none;
          border-right: none;
          height: 28px;
          line-height: 28px;
          border-top: 1px solid rgba(228, 228, 228, 1);
          border-bottom: 1px solid rgba(228, 228, 228, 1);
          text-align: center;
        }
      }
      .total_prices {
        color: #333;
      }
      // 总价
      .all_price {
        font-size: 12px;
        color: #333;
      }
    }
    //立即购买 加入购物车
    .choose_btns {
      margin-top: 25px;
      padding-left: 10px;
      button {
        height: 40px;
        border: none;
        font-size: 14px;
        box-sizing: border-box;
      }
      .buy_now_btn {
        width: 132px;
        color: @orange;
        border: 1px solid @orange;
        background-color: @white;
        margin-right: 20px;
      }
      .add_car_btn {
        width: 157px;
        background-color: @orange;
        color: #fff;
      }
    }
  }
}
.goods_name .el-icon-star-on {
  font-size: 16px;
  color: @orange;
  margin-right: 5px;
}
.no_sell{
  padding: 0 7px;
  font-size: 18px;
  color:orangered ;
}
/deep/.el-cascader--small {
  font-size: 12px;
  line-height: 28px;
  .el-input--small {
    font-size: 12px;
    .el-input__inner {
      height: 28px;
      line-height: 28px;
    }
    .el-input__icon {
      font-size: 12px;
      line-height: 28px;
    }
  }
}
.casc_style {
  margin-left: 5px;
  width: 200px !important;
}
</style>
