<script setup lang="ts">
import { PageQuery } from '~/types/global'
import {
  cartAddApi,
  collectAddApi,
  collectCancelApi,
  productDetailApi,
} from '~/server/goodsApi'
import { ProductsInfo } from '~/types/goods'
import useOrder from '~/composables/useOrder'
import { shallowRef, watch,ref, reactive} from 'vue'
const { handlerNuxtLink } = useOrder()
const {getMerId} = useAppStore()

const route = useRoute()
const loading = ref(false)

/**
 * 商品详情
 */
onMounted(() => {
  getProductDetail()
})
const unique = ref('')
const stock = ref(1)
const count = ref(1)
const couponList = ref<Array<string>>([])
const attrSelected = ref<Array<string>>([])
const productAttr = ref<Array<string>>([])
const productValue = ref({}) //规格数据
const attrValueSelected = reactive({}) //选中规格的数据
const productInfo = reactive<ProductsInfo>({}) //商品信息
const merchantInfo = reactive({}) //商户信息
const productId = Number(route.params.id) //商品id
const masterProductId = ref(0) // 秒杀商品中普通商品id
const sliderImage = ref<Array<string>>([])
const slideIndex = ref(0)
const type = ref<string>(<string>route.query.type)
const userCollect = ref(false) //是否收藏
const merId = ref(0) //店铺id
const guaranteeList = ref<FromData[]>([]) //协议
const oneQuota = ref(0) // 活动单次限购
const queryParams = reactive<FromData>({
  id: Number(route.params.id),
  type: type.value,
})
const router = useRouter()
const { getSeckillInfo, seckillStatus, seckillTime, replyInfo, getReplyList, productReplyConfig, replyList } =
  useProductDetail() //秒杀详情
const where = reactive<PageQuery>({ page: 1, limit: 10, type: 0 }) //评论列表
const getProductDetail = async () => {
  //loading.value = true
  try {
    const data = await productDetailApi(queryParams)
    if (data) Object.assign(productInfo, data.productInfo)
    masterProductId.value = data.masterProductId
    //秒杀
    await getSeckillInfo(data, route.query)

    Object.assign(productValue, data.productValue)
    Object.assign(merchantInfo, data.merchantInfo)
    //评论数据
    await productReplyConfig(masterProductId.value > 0 ? masterProductId.value : queryParams.id)
    //评论列表
    await getReplyList(where, masterProductId.value > 0 ? masterProductId.value : queryParams.id)
    guaranteeList.value = data.guaranteeList ? data.guaranteeList : []
    productAttr.value = data.productAttr
    userCollect.value = data.userCollect
    oneQuota.value = data.oneQuota
    couponList.value = data.couponList ? data.couponList : []
    merId.value = data.productInfo.merId
    await getMerId(merId.value)
    let arrayImg = productInfo.sliderImage
    sliderImage.value = JSON.parse(arrayImg)
    loading.value = false
  } catch (e) {
    loading.value = false
   await router.back()
  }
}

//评论切换
const replyTypeChange = (type: number) => {
  where.type = type
  getReplyList(where, masterProductId.value > 0 ? masterProductId.value : queryParams.id)
}
const callPaginate = (num: number) => {
  where.page = num
  getReplyList(where, masterProductId.value > 0 ? masterProductId.value : queryParams.id)
}

//轮播
const swiperData = reactive({
  spaceBetween: 14,
  slidesPerView: 5,
  boxWidth: 'w-486px',
  slideWidth: 'w-86px',
  navigationColor: 'color:#999',
  navigationBgColor: ''
})

watch(
  productAttr,
  (newValue, oldValue) => {
    if (newValue) {
      let attr = newValue
      let checked = [];
      for (const key of Object.keys(productValue)) {
        if(productValue[key]){
            if (productValue[key].stock > 0) {
              checked = attr.length ? key.split(",") : [];
              break;
            }else{
              checked = attr.length ? key.split(",") : [];
            }
        }
      }
      for (let i = 0; i < checked.length; i++) {
        attrSelected.value[i] = checked[i]
      }


    } else {
      unique.value = productValue[''].unique
    }
  },
)
watch(
  attrSelected,
  (newValue, oldValue) => {
    if (newValue) {
      let name = newValue.join()
      let checked = productValue[name]

      if (checked) {
        Object.assign(attrValueSelected, checked)
        stock.value = checked.stock
        unique.value = checked.id
        // this.unique = value.id;
      } else {
        Object.assign(attrValueSelected, null)
        stock.value = 0
        unique.value = ''
      }
    } else {
      unique.value = productValue[''].id
      stock.value = productInfo.value.stock;
      unique.value = productValue[""].value.id
    }
  },
  { deep: true },
)
watch(
  attrValueSelected,
  (newValue, oldValue) => {
    if (newValue) {
      let sliderImage = productInfo.value ? JSON.parse(productInfo.value.sliderImage) : []
      sliderImage[0] = newValue.image
      slideIndex.value = 0
    }
  },
  { deep: true },
)

 const getFileType = (fileName: string) => {
  //后缀获取
  // let suffix = ''
 // 获取类型结果
  let result = ''
  try {
    const flieArr = fileName.split('.')
    suffix = flieArr[flieArr.length - 1]
  } catch (err) {
    suffix = ''
  }
  // fileName无后缀返回 false
  if (!suffix) {
    return false
  }
  suffix = suffix.toLocaleLowerCase()
  // 图片格式
  const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
  // 进行图片匹配
  result = imglist.find((item) => item === suffix)
  if (result) {
    return 'image'
  }
  // 匹配 视频
  const videolist = ['mp4', 'm2v', 'mkv', 'rmvb', 'wmv', 'avi', 'flv', 'mov', 'm4v']
  result = videolist.find((item) => item === suffix)
  if (result) {
    return 'video'
  }
  // 其他 文件类型
  return 'other'
}

const swiperMouseover = (index) => {
  slideIndex.value = index
}

/**
 * 详情、评论切换
 */
const tabIndex = ref<number>(0)
const handleChangeTab = (type: number) => {
  tabIndex.value = type
}

/**
 * 收藏
 */
const handleCollect = Debounce(async () => {
  let id = type.value === 'seckill' ? masterProductId.value : route.params.id
  if (userCollect.value) {
    await collectCancelApi({ ids: id })
    userCollect.value = !userCollect.value
    await feedback.msgSuccess('取消成功')
  } else {
    await collectAddApi({
      productId: id,
      category: 0,
    })
    userCollect.value = !userCollect.value
    await feedback.msgSuccess('收藏成功')
  }
},500)

/**
 * 立即购买
 */
import { useUserStore } from '@/stores/user'
const { onGetCartCount } = useOrder()
const userStore = useUserStore()
const btnloading = ref<boolean>(false)
const nuxtApp = useNuxtApp()
const handleBuy = Debounce(async (type: number, event: any) => {
  if (!userStore.isLogin) {
    nuxtApp.$onHandlerLogin()
  } else {
    await onGoCat(type)
  }
},500)

/**
 * 加入购物车、立即购买
 * @param type：1加入购物车，0立即购买
 */
const goBuyloading = ref<boolean>(false)
const onGoCat = async (type: number) => {
  if (type === 1) {
    let data = {
      productId: parseFloat(route.params.id),
      cartNum: parseFloat(count.value),
      isNew: false,
      productAttrUnique: parseFloat(unique.value),
    }
    goBuyloading.value = true
    await cartAddApi(data)
      .then((res) => {
        feedback.msgSuccess('添加购物车成功')
        //购物车数量
        onGetCartCount()
        goBuyloading.value = false
      })
      .catch((res) => {
        goBuyloading.value = false
      })
  } else {
    onPreOrder()
  }
}
//立即购买
import { Mul, Debounce } from '~/utils/util'
import SeckillCard from '~/pages/product/seckillCard.vue'
import ReceiveCouponList from '~/pages/product/receiveCouponList.vue'
import MerchantNews from '~/components/merchantNews.vue'
import {useAppStore} from "~/stores/app";
const { getPreOrder } = useOrder()
const onPreOrder = () => {
  let types = ''
  switch (type.value) {
    case 'normal':
      types = 'buyNow'
      break
    case 'video':
      types = 'video'
      break
    case 'seckill':
      types = 'seckill'
      break
  }
  getPreOrder(
    types,
    [
      {
        attrValueId: parseFloat(unique.value),
        productId: parseFloat(route.params.id),
        productNum: parseFloat(count.value),
      },
    ],
    seckillStatus?.value,
    seckillTime?.value,
  )
}

/**
 * 加购数量加减变化
 */
const handleMinus = () => {
  count.value--
}
const handlePlus = () => {
  count.value++
}
const inputNum = () => {
  count.value = parseInt(count.value) >= stock.value ? stock.value : count.value
  count.value = parseInt(count.value) <= 1 ? 1 : count.value
}

/**
 * 优惠券弹窗
 */
const receiveCouponRef = shallowRef() //成功弹窗
// const dialogVisibleCoupon = ref<boolean>(false)
const handleGetCoupon = () => {
  receiveCouponRef.value.DialogOpen()
  nuxtApp.$onHandlerCoupon()
}

//关注店铺回调
const handleSubmitSuccess = () => {
  merchantInfo.isCollect = !merchantInfo.isCollect
}
</script>

<template>
  <div class="goods_count">
    <div class="goods-detail pt-30px" v-loading="loading">
      <div class="wrapper_1200 acea-row">
        <div class="goods-main">
          <!--上边-->
          <div class="acea-row row-top" style="position: relative">
            <!--轮播图-->
            <div class="carousel w-530px">
              <el-image :src="sliderImage[slideIndex]" class="w-530px h-530px borRadius mb-20px" lazy></el-image>
              <div class="w-530px">
                <swiper-index :swiperSlideList="sliderImage" :swiperData="swiperData" ref="swiperRef">
                  <template v-slot:default="slotProps">
                    <el-image
                        @click="swiperMouseover(slotProps.value.swiperIndex)"
                        :src="slotProps.value.swiperItem"
                        class="w-86px h-86px b-rd-6px cursors"
                    ></el-image>
                  </template>
                </swiper-index>
              </div>
            </div>
            <!--商品价格-->
            <div class="text-wrapper pt-20px">
              <div class="flex flex-justify-between mbtom20">
                <div class="title text-#333 text-18px w570px lh-28px font-400">{{ productInfo.name }}</div>
              </div>
              <div class="w-630px priceCard bg-#F3F3F3 b-rd-12px overflow-hidden mb-20px pb-20px">
                <seckill-card
                  v-if="type === 'seckill'"
                  :seckillStatus="seckillStatus"
                  :seckillTime="seckillTime"
                  :productInfo="productInfo"
                ></seckill-card>
                <!--价格-->
                <div class="flex-between-center px-20px pt-20px">
                  <div class="acea-row" style="align-items: end">
                    <div class="price font-color text-14px font-600 mr-14px dinProSemiBold">
                      ￥<span class="text-30px lh-30px inline-block dinProSemiBold">{{
                        attrValueSelected ? attrValueSelected.price : productInfo.price
                      }}</span>
                    </div>
                    <div class="money-wrap text-14px fontColor6 dinProRegular">
                      <del class="dinProRegular">￥{{ attrValueSelected ? attrValueSelected.otPrice : productInfo.otPrice }}</del>
                    </div>
                  </div>
                  <div class="text-12px fontColor6">
                    销量
                    {{ Math.floor(productInfo.sales) + Math.floor(productInfo.ficti) || 0 }}
                  </div>
                </div>
                <!--优惠券-->
                <div v-if="couponList.length" class="flex flex-justify-between px-20px items-center">
                  <div class="acea-row">
                    <span
                      v-for="item in couponList"
                      :key="item.id"
                      class="square text-14px text-#fff lh-25px px-10px mt-20px mr-10px"
                    >
                      {{ item.minPrice === 0 ? '无门槛减' + item.money : '满' + item.minPrice + '减' + item.money }}
                    </span>
                  </div>
                  <div class="text-12px font-color cursors mt-20px" @click="handleGetCoupon">领券</div>
                </div>
              </div>
              <div class="attribute mb-6px">
                <div v-for="(item, index) in productAttr" :key="index" class="size-wrapper mb-6px">
                  <div class="text-14px fontColor6 m-b-15px">{{ item.attrName }}</div>
                  <div class="acea-row list">
                    <label v-for="(itm, idx) in item.attrValues.split(',')" :key="idx" class="item cursors">

                      <input v-model="attrSelected[index]"
                        type="radio"
                        :name="index"
                        :value="itm"
                        :checked="attrSelected[index] ===itm"
                        hidden
                      />
                      <div class="acea-row cont h-36px b-rd-6px mr14px">
                        <div class="acea-row row-middle name">{{ itm }}</div>
                      </div>
                    </label>
                  </div>
                </div>
              </div>
              <div class="number-wrapper mb-20px">
                <div class="text-14px fontColor6 m-b-15px">数量</div>
                <div class="counter-wrap acea-row">
                  <div class="counter">
                    <button
                      class="iconfont cursors icon-shangpinshuliang-jian h-36px w-36px b-rd-6px"
                      :disabled="count === 1 || !stock"
                      @click="handleMinus"
                    >
                      —
                    </button>
                    <input v-model="count" @input="inputNum" />
                    <button
                      style="font-size: 20px"
                      class="iconfont cursors icon-shangpinshuliang-jia h-36px w-36px b-rd-6px"
                      :disabled="count === stock || !stock || count === oneQuota"
                      @click="handlePlus"
                    >
                      +
                    </button>
                  </div>
                  <span>( 库存：{{ stock || 0 }}{{ productInfo.unitName || '' }} )</span>
                </div>
              </div>
              <!--按钮-->
              <div class="acea-row items-center">
                <!--普通商品-->
                <template v-if="type === 'normal'">
                  <div class="acea-row" v-if="stock">
                    <div class="button-wrapper mr-20px">
                      <button
                          class="btn cursors"
                          v-loading="goBuyloading"
                          :disabled="!stock"
                          @click="handleBuy(1, $event)"
                      >
                        加入购物车
                      </button>
                    </div>
                    <div class="button-wrapper">
                      <button
                          class="handleBtn cursors h-50px lh-50px w-150px borderSolE9"
                          v-loading="btnloading"
                          :disabled="!stock"
                          @click="handleBuy(0, $event)"
                      >
                        立即购买
                      </button>
                    </div>
                  </div>
                  <div class="button-wrapper" v-else>
                    <button class="btn btn-out" disabled>已售罄</button>
                  </div>
                </template>
                <!--秒杀商品-->
                <template v-if="type === 'seckill'">
                  <div class="button-wrapper" v-if="seckillStatus === 1 && stock">
                    <button
                        class="handleBtn cursors h-50px lh-50px w-150px borderSolE9"
                        v-loading="btnloading"
                        :disabled="!stock"
                        @click="handleBuy(0, $event)"
                    >
                      立即购买
                    </button>
                  </div>
                  <div class="button-wrapper" v-if="seckillStatus === 1 && !stock">
                    <button class="btn btn-out" disabled>已售罄</button>
                  </div>
                  <div class="button-wrapper" v-if="seckillStatus !== 1">
                    <button class="btn btn-out" disabled>{{ seckillStatus === 0 ? '活动已结束' : '活动未开始' }}</button>
                  </div>
                </template>
                <!--收藏-->
                <el-divider direction="vertical" />

                <div
                    class="iconfont cursors mr-6px"
                    :class="!userCollect ? 'text-#333 icon-baobeishoucang' : 'font-color icon-yishoucang'"
                    @click="handleCollect"
                >
                </div>
                <div  :class="!userCollect ? 'text-#333' : 'font-color'"  @click="handleCollect" class="text-14px oppoSans-R cursors">{{!userCollect?'收藏':'已收藏'}}</div>
              </div>

              <div class="acea-row mt-40px">
                <div v-for="item in guaranteeList" :key="item.id">
                  <el-popover
                    placement="bottom-start"
                    :width="200"
                    trigger="hover"
                    :content="item.content"
                    popper-class="text-19px c-\#999"
                  >
                    <template #reference>
                      <div class="text-14px fontColor333 mr-20px cursors">
                        <span class="iconfont icon-yanzhengma"></span>
                        {{ item.name }}
                      </div>
                    </template>
                  </el-popover>
                </div>
              </div>
            </div>
          </div>
          <!--下边-->
          <div class="detail-wrapper acea-row">
            <div class="w-210px mr-20px">
              <MerchantNews
                :merchantInfo="merchantInfo"
                :merId="merId"
                fromType="productDetail"
                @handleSubmitSuccess="handleSubmitSuccess"
              ></MerchantNews>
              <div class="borderSol-eee b-rd-12px w-210px px-20px pt-20px mt-20px mb-20px">
                <el-divider><div class="text-16px text-#333 w-64px">好物推荐</div></el-divider>
                <div v-if="merchantInfo.proList && merchantInfo.proList.length" class="cursors">
                  <div v-for="item in merchantInfo.proList" class="mb-25px" @click="handlerNuxtLink(item.id, 'normal')">
                    <el-image :src="item.image" class="w-170px h-170px b-rd-8px"></el-image>
                    <div class="line1 w-170px text-14px text-#333 mt-15px lh-14px">{{ item.name }}</div>
                    <div class="flex-between-center mt-15px">
                      <div class="text-12px font-color">
                        <span class="oppoSans-M">￥</span><span class="text-20px lh-20px dinProRegular">{{ item.price }}</span>
                      </div>
                      <div class="text-12px text-#999">已售{{ item.sales }}{{ item.unitName }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="w-970px">
              <div class="detail-hd acea-row">
                <div class="acea-row">
                  <div
                    class="item acea-row row-center-wrapper"
                    :class="tabIndex === 0 ? 'on' : 'text-16px'"
                    @click="handleChangeTab(0)"
                  >
                    详情
                  </div>
                  <div
                    class="item acea-row row-center-wrapper"
                    :class="tabIndex === 1 ? 'on' : 'text-16px'"
                    @click="handleChangeTab(1)"
                  >
                    评论({{ replyInfo.sumCount }})
                  </div>
                </div>
              </div>
              <el-divider border-style="double" />
              <div class="w-100%">
                <div v-show="tabIndex === 0">
                  <div v-if="productInfo.content" class="w-100% detail-bd">
                    <div v-html="productInfo.content"></div>
                  </div>
                  <div v-else>
                    <empty-page title="暂无商品详情~" m-top="2%">
                      <template v-slot:emptyImage>
                        <img src="@/assets/images/wudizhi.png" />
                      </template>
                    </empty-page>
                  </div>
                </div>
                <!--评论-->
                <div v-show="tabIndex === 1">
                  <div class="flex-between-center">
                    <div class="flex comment">
                      <div
                        @click="replyTypeChange(0)"
                        :class="where.type === 0 ? 'check-color' : ''"
                        class="item px-15px b-rd-17px h-34px lh-32px text-14px mr-10px cursors"
                      >
                        全部({{ replyInfo.sumCount || 0 }})
                      </div>
                      <div
                        @click="replyTypeChange(1)"
                        :class="where.type === 1 ? 'check-color' : ''"
                        class="item px-15px b-rd-17px h-34px lh-32px text-14px mr-10px cursors"
                      >
                        好评({{ replyInfo.goodCount || 0 }})
                      </div>
                      <div
                        @click="replyTypeChange(2)"
                        :class="where.type === 2 ? 'check-color' : ''"
                        class="item px-15px b-rd-17px h-34px lh-32px text-14px mr-10px cursors"
                      >
                        中评({{ replyInfo.inCount || 0 }})
                      </div>
                      <div
                        @click="replyTypeChange(3)"
                        :class="where.type === 3 ? 'check-color' : ''"
                        class="item px-15px b-rd-17px h-34px lh-32px text-14px cursors"
                      >
                        差评({{ replyInfo.poorCount || 0 }})
                      </div>
                    </div>
                    <div class="flex-y-center text-14px fontColor6">
                      评分
                      <el-rate
                          class="ml-10px"
                        v-model="replyInfo.replyStar"
                        disabled
                        :colors="['#e93323', '#e93323', '#e93323']"
                        score-template="{replyInfo.replyStar}"
                      >
                      </el-rate>
                      <div class="rate ml-20px">
                         <span class="text-14px text-#666">好评率</span><span class="font-color ml-10px">{{ Mul(replyInfo.replyChance, 100) }}%</span>
                      </div>
                    </div>
                  </div>
                  <div class="comment-bd mt-30px">
                    <div v-if="replyList && replyList.total > 0">
                      <div v-for="item in replyList.list" :key="item.id" class="item">
                        <div class="acea-row row-middle item-hd flex-justify-between">
                          <div class="acea-row">
                            <div class="image mr-10px">
                              <img v-if="item.avatar" :src="item.avatar" />
                              <!--                          <img v-else src="~assets/images/f.png" alt="">-->
                            </div>
                            <div class="text">
                              <div class="flex-between-center text-16px text-#333 mb-8px lh-16px">
                                {{ item.nickname }}
                              </div>
                              <div class="text-#999999 text-12px">
                                {{ item.createTime }} <span class="ml-10px">{{ item.sku }}</span>
                              </div>
                            </div>
                          </div>
                          <div class="star">
                            <el-rate
                              v-model="item.star"
                              disabled
                              :colors="['#e93323', '#e93323', '#e93323']"
                              score-template="{item.star}"
                            >
                            </el-rate>
                          </div>
                        </div>
                        <div class="item-bd">
                          <div class="mt-20px mb-20px">{{ item.comment }}</div>
                          <div class="image-wrapper" v-if="item.pics && item.pics.length && item.pics[0]">
                            <div v-for="(itm, idx) in item.pics" :key="idx" class="image" @click="isDialog = true">
                              <el-image
                                style="width: 86px; height: 86px; border-radius: 8px"
                                :src="itm"
                                :preview-src-list="item.pics"
                                lazy
                              ></el-image>
                            </div>
                          </div>
                          <div v-if="item.merchantReplyContent" class="reply mb-30px">
                            <div class="item"><span>回复：</span>{{ item.merchantReplyContent }}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div v-else>
                      <empty-page title="暂无评论~" m-top="2%">
                        <template v-slot:emptyImage>
                          <img src="@/assets/images/wupinlun.png" />
                        </template>
                      </empty-page>
                    </div>
                    <div v-if="replyList && replyList.total > 0" class="acea-row row-middle mt-20px pb-20px">
                      <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="replyList.total"
                        class="page-item"
                        :page-size="where.limit"
                        :current-page="where.page"
                        @update:current-page="callPaginate"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 优惠券抽屉-->
    <receive-coupon-list ref="receiveCouponRef" :productId="productId"></receive-coupon-list>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-divider--vertical){
  margin: 0 20px !important;
}
:deep(.merchantNews) {
  border-radius: 12px 12px 12px 12px;
  border: 1px solid #eeeeee;
}
:deep(.el-drawer__header) {
  margin-bottom: 0 !important;
  padding: 10px !important;
  border-bottom: 1px solid #dddddd;
  font-size: 14px;
  color: #3d3d3d;
}
.detail-wrapper {
  :deep(.el-divider--horizontal) {
    margin: 20px 0 20px 0 !important;
  }
  :deep(.el-divider__text) {
    --el-bg-color: #fff !important;
  }
}
.goods_count {
  :deep(.el-drawer__body) {
    padding: 0 15px 20px 15px !important;
  }
}

:deep(.el-drawer) {
  box-shadow: none;
  --el-drawer-bg-color: #f5f5f5;
  --el-transition-duration: 1s;
}

.bbbbb {
  z-index: 2011;
  position: fixed;
  inset: 0px;
}
.drawerCoupon {
  right: 0;
  height: 100%;
  top: 0;
  bottom: 0;
  position: absolute;
  box-sizing: border-box;
  background-color: var(--el-drawer-bg-color);
  display: flex;
  flex-direction: column;
  box-shadow: var(--el-box-shadow-dark);
  overflow: hidden;
  transition: all var(--el-transition-duration);
  animation: slideOut 1s ease-in-out forwards;
}
@keyframes slideOut {
  from {
    right: 0%;
  }
  to {
    right: 278px;
  }
}
.square {
  height: 26px;
  background-color: #e93323;
  position: relative;
  display: inline-block;
}
.square::before,
.square::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #f3f3f3;
  position: absolute;
  top: 9px;
}
.square::before {
  left: -3px;
}

.square::after {
  right: -3px; /* 右侧 */
}
.priceCard {
  width: 630px;
  background-image: url('@/assets/images/spb.png');
}
.goods_count {
  background: #fff;
}
.comment {
  .item {
    color: #282828;
    background: #f7f7f7;
  }
  .check-color {
    color: #ffffff !important;
    background: #e93323 !important;
  }
}
.detail-bd {
  :deep div {
    width: 100% !important;
  }
  :deep img {
    display: block;
    width: 100% !important;
  }
}
.coupons-get {
  font-size: 14px;
  font-weight: 400;
  color: #666666;
}
.coupon_list {
  padding: 5px 10px 5px 30px;
  .list {
    flex-direction: column;
  }
}
.ml30 {
  margin-left: 30px;
}
.mb22 {
  margin-bottom: 22px;
}
.mb12 {
  margin-bottom: 12px;
}
.activity {
  height: 24px;
  padding: 0 10px;
  background: #e93323;
  color: #fff;
  font-size: 14px;
  line-height: 24px;
  position: relative;
  margin: 0 10px 5px 0;
}
.activity:before {
  content: ' ';
  position: absolute;
  width: 3px;
  height: 5px;
  border-radius: 0 3px 3px 0;
  border: 1px solid #e93323;
  background-color: #fff !important;
  bottom: 50%;
  left: -2px;
  margin-bottom: -3px;
  border-left-color: #fff !important;
}
.activity:after {
  content: ' ';
  position: absolute;
  width: 3px;
  height: 5px;
  border-radius: 3px 0 0 3px;
  border: 1px solid #e93323;
  background-color: #fff;
  right: -2px;
  bottom: 50%;
  margin-bottom: -3px;
  border-right-color: #fff !important;
}
.store-banner {
  width: 100%;
  height: 130px;
  img {
    object-fit: none;
    width: 100%;
    height: 100%;
  }
}
.menu-count {
  width: 100%;
  height: 40px;
  background: #dfdfdf;
}
.store-name {
  display: inline-block;
  width: 117px;
  position: relative;
  top: 11px;
  font-size: 16px;
  margin-bottom: 10px;
}
.user-menu {
  position: relative;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 1200px;
  margin: 0 auto;
  .category {
    position: absolute;
    top: 40px;
    left: 0;
    background-color: rgba(254, 248, 248, 0.96);
    width: 100%;
    padding: 40px 20px 20px;
    z-index: 10;

    .name {
      width: 130px;
      position: relative;
      padding-right: 20px;
      margin-right: 30px;
      cursor: pointer;
      .iconfont {
        font-size: 10px;
        position: absolute;
        right: 0;
        top: 3px;
        color: #282828;
      }
    }
    .sortCon {
      width: 1000px;
      .sub-item {
        margin: 0 15px 15px;
        color: #666666;
        cursor: pointer;
      }
    }
    .erSort {
      align-items: center;
    }
    .item {
      margin-bottom: 20px;
      align-items: baseline;
    }
    .moreBtn {
      color: #282828;
      font-size: 12px;
      width: 100px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      border-radius: 13px;
      border: 1px solid #666666;
    }
  }
  .menu-main {
    width: 300px;
    height: 40px;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    .menu-item {
      display: inline-block;
      height: 26px;
      line-height: 26px;
      color: #282828;
      padding: 0 10px;
      cursor: pointer;
      &.active {
        color: #fff;
        background: #282828;
        color: #fff;
        border-radius: 15px;
      }
    }
  }
  .menu-search {
    width: 220px;
    height: 24px;
    background-color: #fff;
    border-radius: 17px;
    .text {
      width: 175px;
    }
    input {
      border: none;
      height: 24px;
      line-height: 24px;
      color: #999999;
      padding: 0 15px;
      border-radius: 17px 0 0 17px;
      &:focus {
        border: none;
        outline: none;
      }
    }
    .bnt {
      width: 44px;
      background-color: #282828;
      color: #fff;
      border-radius: 0 17px 17px 0;
      line-height: 24px;
      text-align: center;
      cursor: pointer;
    }
  }
}
.product_content .title {
  text-align: center;
  font-size: 18px;
  margin: 5px 0;
}
.dropdown-box {
  .el-dropdown-menu {
    z-index: 10 !important;
  }
}
.goods-detail {
  .goods-main {
    flex: 1;
    min-width: 0;
  }
  .carousel {
    .btn {
      margin-right: 30px;
      font-size: 12px;
      color: #4b4b4b;
      cursor: pointer;
      position: relative;

      .qrcode1 {
        display: none;
        box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.08);
        background: #fff;
        padding: 6px;
        position: relative;
        width: 100px;
        img {
          width: 100%;
        }

        &.contactService {
          position: absolute;
          left: 50%;
          top: 25px;
          z-index: 10;
          width: 100px;
          height: 100px;
          margin-left: -50px;
        }
      }
    }

    .contactBtn:hover {
      .qrcode1 {
        display: inline;
      }
    }

    .iconfont {
      margin-right: 6px;
      font-size: 14px;
      color: #e93323;
    }
  }

  .text-wrapper {
    flex: 1;
    min-width: 0;
    margin-left: 40px;
    width: 735px;

    .integral_count {
      display: inline-block;
      margin-top: 18px;
      color: #ff6200;
      line-height: 27px;
      background: #fff4e6;
      padding: 0 15px;
      border-radius: 2px;
    }
    .money-wrapper {
      width: 730px;
      margin-top: 6px;
      border-radius: 1px;
      color: #ffffff;
      justify-content: space-between;
      .priceBox {
        padding: 14px 0;
      }
      .prict-title {
        width: 119px;
        font-size: 14px;
        font-family: ArialMT;
        color: #666666;
        padding-left: 13px;
      }

      .vip {
        width: 100px;
        height: 25px;
        border-radius: 2px;
        margin-left: 14px;
        background: linear-gradient(205deg, #fdcaa4 0%, #fce3c3 100%);
        overflow: hidden;
        font-size: 12px;
        color: #0f0f0f;

        .iconfont {
          width: 32px;
          height: 25px;
        }

        .iconfontVip {
          width: 32px;
          height: 25px;
        }

        .money {
          flex: 1;
          min-width: 0;

          span {
            font-size: 14px;
          }
        }
      }
      .saleBox {
        .el-divider--vertical {
          height: 70px;
          background: #e93323;
          border-radius: 1px;
          opacity: 0.2;
        }
      }
      .sales {
        position: relative;
        height: 100%;
        padding-right: 20px;
        padding-left: 12px;
        font-size: 14px;
        color: #e93323;

        &::before {
          content: '';
          position: absolute;
          top: 14px;
          bottom: 12px;
          left: 0;
          width: 1px;
          border-left: 1px solid rgba(255, 255, 255, 0.24);
        }

        .num {
          margin-bottom: 3px;
          font-weight: bold;
          font-size: 20px;
        }
      }

      .timer-wrapper {
        width: 180px;
        margin-right: 15px;
        font-size: 12px;
        color: #ffffff;

        .styleAll {
          font-size: 22px;
        }
        .progress-group {
          margin-top: 10px;
        }

        .progress {
          width: 120px;
          height: 8px;
          border: 1px solid #ffffff;
          border-radius: 4px;
          font-size: 0;

          span {
            display: inline-block;
            width: 50%;
            height: 100%;
            border-radius: 4px;
            background-color: #ffffff;
          }
        }
      }
    }

    .attribute {
      .size-wrapper {
        .label {
          width: 119px;
          font-size: 14px;
          color: #5a5a5a;
          margin-right: 2px;
          word-break: break-all;
          padding-top: 2px;
          padding-left: 13px;
        }

        .list {
          flex: 1;
          min-width: 0;
        }

        .item {
          margin-bottom: 14px;
          .cont {
            border: 1px solid #d3d3d3;
          }

          &:hover {
            .cont {
              border-color: #e93323;
              color: #e93323;
            }
          }

          input:checked {
            + .cont {
              border-color: #e93323;
              color: #e93323;

              .iconfont {
                display: block;
              }
            }
          }
        }

        .image {
          width: 36px;
          height: 36px;
        }

        img {
          display: block;
          width: 100%;
          height: 100%;
        }

        .name {
          padding-right: 20px;
          padding-left: 20px;
          font-size: 12px;
        }

        .iconfont {
          position: absolute;
          right: -3px;
          bottom: -3px;
          display: none;
          font-size: 22px;
        }
      }
    }
    .guaranteeList {
      margin-top: 24px !important;
    }
    .number-wrapper {
      .guaranee_tel {
        position: absolute;
        top: 20px;
        left: 0;
        background: #ffffff;
        z-index: 10;
        padding: 0 24px 24px;
        display: none;
        box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.08);
        .item {
          margin-top: 24px;
          .name {
            font-size: 16px;
            color: #000000;
          }
          .info {
            font-size: 12px;
            color: #969696;
            margin-top: 6px;
          }
        }
      }
      .icon-duoshanghupc-shuomingdanchuang {
        color: #e93323;
        font-size: 12px;
        position: relative;
      }
      .label {
        cursor: pointer;
      }
      .guaranteeAttr {
        display: inline-block;
        width: 445px;
      }
      .atterTxt1 {
        margin-bottom: 9px;
        .icon-gou {
          display: inline-block;
          font-size: 12px;
          color: #e93323;
          margin-right: 2px;
        }
      }

      .label {
        width: 119px;
        font-size: 14px;
        color: #5a5a5a;
        margin-right: 2px;
        word-break: break-all;
        padding-top: 2px;
        padding-left: 13px;
      }

      .counter-wrap {
        flex: 1;
        min-width: 0;

        span {
          vertical-align: bottom;
          font-size: 14px;
          color: #5a5a5a;
          margin-top: 9px;
          margin-left: 15px;
        }
      }

      .counter {
        button {
          border: none;
          outline: none;
          font-weight: inherit;
          font-size: 12px;
          font-family: inherit;
          vertical-align: middle;
          background: #f7f7f7;
          &:disabled {
            color: #d0d0d0;
            cursor: not-allowed;
          }
        }

        input {
          width: 64px;
          height: 36px;
          border: none;
          outline: none;
          font-weight: inherit;
          font-size: 14px;
          font-family: inherit;
          text-align: center;
          color: #5a5a5a;
          vertical-align: middle;
        }
      }
    }

    .button-wrapper {
      .btn {
        width: 150px;
        height: 50px;
        border-radius: 25px 25px 25px 25px;
        opacity: 1;
        border: 1px solid #cccccc;
        font-size: 16px;
        color: #333;
        &.btn-out {
          width: 120px;
          color: #ffffff;
          background: #d0d0d0;
        }
        &.btn-notify {
          width: 120px;
          border-color: #e93323;
          color: #e93323;
        }

        ~ .btn {
          margin-left: 18px;
        }
      }

      button {
        font-size: 16px !important;
        background: none;
        outline: none;
        vertical-align: middle;

        &:disabled {
          border-color: #ebeef5;
          color: #c0c4cc;
          cursor: not-allowed;
        }

        &.cart {
          background-color: #e93323;
          color: #ffffff;

          &:disabled {
            border-color: #fab6b6;
            background-color: #fab6b6;
          }
        }

        ~ button {
          margin-left: 18px;
        }
      }

      a {
        display: inline-block;
        background-color: #e93323;
        vertical-align: middle;
        line-height: 50px;
        text-align: center;

        &.btn {
          color: #ffffff;
        }
      }
    }
  }

  .detail-wrapper {
    margin-top: 70px;
    .detail-hd {
      .item {
        position: relative;
        padding-right: 30px;
        padding-left: 30px;
        cursor: pointer;
        line-height: 16px;

        &.on {
          color: #e93323;
          font-size: 18px;
          font-weight: 500 !important;
          //&::before {
          //  content: '';
          //  position: absolute;
          //  top: 31px;
          //  bottom: 18px;
          //  height: 2px;
          //  width: 22px;
          //  background: #e93323;
          //}
        }

        &:hover {
          color: #e93323;
        }
      }
    }

    .comment-bd {
      > img {
        width: 200px;
        margin: 50px auto;
      }

      .item {
        padding-bottom: 20px;

        .item-hd {
          .image {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
          }

          img {
            display: block;
            width: 100%;
            height: 100%;
          }

          .star {
            margin-left: 12px;
            font-size: 0;
          }

          .iconfont {
            font-size: 12px;
            color: #e6e6e6;

            &.on {
              color: #e93323;
            }

            ~ .iconfont {
              margin-left: 5px;
            }
          }
        }

        .item-bd {
          border-bottom: 1px dashed #e3e3e3;
          margin-left: 52px;
          font-size: 14px;
          color: #333333;

          .image-wrapper {
            font-size: 0;
          }

          .image {
            display: inline-block;
            margin-right: 8px;
            margin-bottom: 10px;
          }

          .reply {
            margin-top: 10px !important;
            background: #f7f7f7;
            border-radius: 6px 6px 6px 6px;
            .item {
              padding: 7px 10px;
              font-size: 14px;
              color: #333333;

              span {
                color: #e93323;
              }
            }
          }
        }
      }
    }
  }

  .nothing {
    margin-top: 100px;
    font-size: 16px;
    text-align: center;
    color: #999999;

    img {
      margin: 0 auto;
    }
  }
}
.store-favorites {
  margin-top: 20px;
  .collection {
    width: 180px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #333333;
    border: 1px solid #c8c8c8;
    border-radius: 2px;
    background: #fff;
    &.care {
      color: #e93323;
      border-color: #e93323;
    }
  }
}
</style>
