<template>
  <view :class="[posterImageStatus ? 'noscroll product-con' : 'product-con']" v-show="domStatus">
		<view class="header">
			<cu-custom :isBack="true" :isCenter="true" >
				<block slot="backText">
					<view class="backImg">
						<image src="@/static/images/back-btn.png" mode=""></image>
					</view>
				</block>
				<!-- <block slot="content">
					<view class="tab-title">活动专区</view>
				</block> -->
			</cu-custom>
		</view>
		
    <product-con-swiper :imgUrls="imgUrls"></product-con-swiper>

    <view class="tui-pro-detail">
      <!-- <view class="tui-product-title tui-border-radius"> -->
        <!-- <view class="tui-price__box">
          <view class="tui-pro-pricebox tui-padding">
            <view class="tui-pro-price">
              <view>
                <text>￥</text>
                <text class="tui-price">{{ formatPrice(storeInfo.price, 0) }}</text>
                <text>.{{ formatPrice(storeInfo.price, 1) }}</text>
              </view>
              <view class="tui-original-price tui-white__gray" v-text="'￥' + storeInfo.otPrice"></view>
            </view>
            <view class="tui-sold tui-white__gray">
              <text>已抢{{ storeInfo.sales }}件</text>
              <tui-tag v-if="seckillStatus != 2" type="white" plain size="24rpx" padding="8rpx" :scaleMultiple="0.94">限时秒杀</tui-tag>
            </view>
          </view>
          <view class="tui-right__box">
            <image v-if="seckillStatus == 2" src="https://www.thorui.cn/images/mall/img_seckillgood_seckill.png" class="tui-seckill__img" mode="widthFix"></image>
            <tui-button v-if="seckillStatus == 2" type="danger" disabled shape="circle" width="140rpx" height="42rpx" :size="24">{{ seckillStatus == 1 ? '活动已结束' : '即将开抢' }}</tui-button>
            <text v-if="seckillStatus != 2" class="tui-color-red">距结束还剩:</text>
            <count-down :isDay="false" :tipText="' '" :dayText="' '" :hourText="' : '" :minuteText="' : '" :secondText="' '" :datatime="datatime"></count-down>
          </view>
        </view> -->
					
				<view class="activity-info-box">
					<view class="tui-right__box">
						<view class="acea-row row-middle row-center">
							<image class="icon" src="../../../static/images/order-status1.png" mode=""></image>
							<!-- <image class="icon" src="../../../static/images/seckill-icon.png" mode=""></image> -->
							<text>{{ seckillStatus != 2 ? '限时秒杀中' : seckillStatus == 1 ? '活动已结束' : '即将开抢' }}</text>
						</view>
						<view class="count-down-box">
							<count-down :isSecond="false" :datatime="datatime" :styleAllStyle="styleAllStyle" :timeTxtStyle="timeTxtStyle"></count-down>
						</view>
					</view>
				</view>
					
				<view class="tui-pro-price">
					<text class="tui-price">¥{{storeInfo.price}}</text>
				  <view class="tui-original-price">¥{{storeInfo.otPrice}}</view>
				</view>
					
        <!-- <view class="tui-pro-titbox"> -->
				<view class="tui-pro-title">{{ storeInfo.title }}</view>
				<view class="tui-pro-info">{{ storeInfo.info }}</view>
        <!-- </view> -->
        <!-- <view class="tui-padding"> -->
				<view class="tui-sale-info">
					<view class="tips acea-row">
						<view class="tip">甄选品牌</view>
					</view>
					<view>库存：{{ storeInfo.stock }}{{ storeInfo.unitName }}</view>
					<!-- <view>月销{{ storeInfo.sales }}</view> -->
				</view>
        <!-- </view> -->
      <!-- </view> -->
    </view>

    <!-- 规格 -->
    <view class="attribute acea-row row-between-wrapper" @click="selecAttrTap">
			<view>选规格</view>
      <view class="acea-row attr-content">
				<image v-if="item.image" :src="item.image" v-for="(item,index) in productValue" :key="index" mode="aspectFill"></image>
				<view class="attrs">共{{attr.productAttr[0].attrValueArr.length}}个{{attr.productAttr[0].attrName}}可选</view>
        <!-- <text>{{ attrTxt }}：</text> -->
        <!-- <text class="atterTxt">{{ attrValue }}</text> -->
      </view>
			<view class="jiantou-right"></view>
      <!-- <view class="iconfont icon-jiantou"></view> -->
    </view>
		
		<view class="safeguard-info acea-row row-between-wrapper">
			<view class="safeguard-item">
				<image class="img" src="@/static/images/by.png" mode=""></image>
				<view>满{{199}}包邮</view>
			</view>
			<view class="line"></view>
			<view class="safeguard-item">
				<image class="img" src="@/static/images/fxt.png" mode=""></image>
				<view>7天无理由</view>
			</view>
			<view class="line"></view>
			<view class="safeguard-item">
				<image class="img" src="@/static/images/bj.png" mode=""></image>
				<view>30天保价</view>
			</view>
		</view>
		
		<!-- 用户评价 -->
		<view class="userEvaluation" v-if="replyCount">
		  <view class="title acea-row row-between-wrapper" @click="goEvaluateList(storeInfo.productId)">
		    <view class="acea-row row-middle"><text>评价</text><text class="replyCount">{{ replyCount }}</text></view>
		    <!-- <view @click="goEvaluateList(id)" class="praise acea-row row-middle">
		      <view>好评率{{ replyChance }}%</view>
		      <view class="jiantou-right"></view>
		    </view> -->
		  </view>
		  <user-evaluation :reply="reply"></user-evaluation>
		</view>
		
    <view class="product-intro">
      <view class="title">商品展示</view>
      <view class="conter" v-html="storeInfo.description"></view>
    </view>

    <!-- 操作栏 -->
    <view :style="addBottom?'height: 162rpx;':'height: 122rpx;'"></view>

    <!--底部操作栏-->
    <view class="tui-operation acea-row row-between" :style="addBottom?'height: 162rpx;':'height: 122rpx;'">
      <view class="tui-operation-left acea-row">
        <!-- #ifdef MP-WEIXIN -->
				<view class="">
					<button class="tui-operation-item" open-type="contact" hover-class="tui-opcity" :hover-stay-time="150">
						<image src="@/static/images/service-icon.png" mode=""></image>
						<!-- <view class="iconfont icon-kefu"></view> -->
						<view class="tui-operation-text">客服</view>
					</button>
				</view>
        <!-- #endif -->
				
				<view class="stock">库存剩余：{{ storeInfo.stock }} {{ storeInfo.unitName }}</view>
        <!-- <view class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150" @click="setCollect" v-if="userCollect">
          <view class="iconfont icon-shoucang1"></view>
          <view class="tui-operation-text tui-scale-small">收藏</view>
        </view>
        <view class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150" @click="setCollect" v-if="!userCollect">
          <view class="iconfont icon-shoucang"></view>
          <view class="tui-operation-text tui-scale-small">收藏</view>
        </view> -->
      </view>

      
      <view class="tui-operation-right" v-if="seckillStatus == 1 && storeInfo.num > 0 && storeInfo.stock > 0">
				<view class="btn" @click="tapBuy">立即购买</view>
        <!-- <view class="tui-flex-1">
          <tui-button height="68rpx" :size="26" type="warning" shape="circle" @click="openAlone">单独购买</tui-button>
        </view>
        <view class="tui-flex-1">
          <tui-button height="68rpx" :size="26" type="danger" shape="circle" @click="tapBuy">立即购买</tui-button>
        </view> -->
      </view>
			
      <view class="tui-operation-right" v-if="seckillStatus == 1 && storeInfo.num <= 0 && storeInfo.stock <= 0">
				<view class="btn">已售罄</view>
        <!-- <view class="tui-flex-1">
          <tui-button height="68rpx" :size="26" type="warning" shape="circle" disabled>已售罄</tui-button>
        </view>
        <view class="tui-flex-1">
          <tui-button height="68rpx" :size="26" type="danger" shape="circle" @click="openAlone">原价购买</tui-button>
        </view> -->
      </view>
			
      <view class="tui-operation-right" v-if="seckillStatus == 2">
				<view class="btn">即将开始</view>
        <!-- <view class="tui-flex-1">
          <tui-button height="68rpx" :size="26" type="warning" shape="circle" disabled>即将开始</tui-button>
        </view>
        <view class="tui-flex-1">
          <tui-button height="68rpx" :size="26" type="danger" shape="circle" @click="openAlone">原价购买</tui-button>
        </view> -->
      </view>
			
      <view class="tui-operation-right" v-if="seckillStatus == 0">
				<view class="btn">活动已结束</view>
        <!-- <view class="tui-flex-1">
          <tui-button height="68rpx" :size="26" type="warning" shape="circle" disabled>活动已结束</tui-button>
        </view>
        <view class="tui-flex-1">
          <tui-button height="68rpx" :size="26" type="danger" shape="circle" @click="openAlone">原价购买</tui-button>
        </view> -->
      </view>
    </view>

    <ProductWindow v-on:changeFun="changeFun" :attr="attr" :cartNum="cartNum" :storeInfo="storeInfo.info" :unitName="storeInfo.unitName"></ProductWindow>
    <StorePoster v-on:setPosterImageStatus="setPosterImageStatus" :posterImageStatus="posterImageStatus" :posterData="posterData"></StorePoster>
  </view>
</template>
<style scoped lang="less">
.noscroll {
  height: 100%;
  overflow: hidden;
}
</style>
<script>
import ProductConSwiper from '@/components/ProductConSwiper'
import CountDown from '@/components/CountDown'
import ProductWindow from '@/components/ProductWindow'
import StorePoster from '@/components/StorePoster'
import UserEvaluation from '@/components/UserEvaluation';
import { getSeckillDetail } from '@/api/activity'
import { postCartAdd } from '@/api/store'
import { imageBase64 } from '@/api/public'
import { getCoupon, getCollectAdd, getCollectDel, getUserInfo } from '@/api/user'
const NAME = 'SeckillDetails'

export default {
  name: 'SeckillDetails',
  components: {
    ProductConSwiper,
    CountDown,
    ProductWindow,
    StorePoster,
		UserEvaluation
  },
  props: {},
  data: function() {
    return {
			addBottom: this.addBottom,
      seckillStatus: '',
      domStatus: false,
      posterData: {
        image: '',
        title: '',
        price: '',
        code: '',
      },
      posterImageStatus: false,
      action: '',
      imgUrls: [],
      storeInfo: [],
      replyCount: 0,
			// replyChance: '',
      reply: [],
      cartNum: 1,
      attrTxt: '请选择',
      productValue: [],
      attrValue: '',
      attr: {
        cartAttr: false,
        productAttr: [],
        productSelect: {},
      },
      datatime: 0,
      userCollect: false,
			styleAllStyle: 'width:30rpx;height:24rpx;background:#F5F6F8;border-radius:8rpx;font-size:20rpx;color:#3A3A3C;line-height:24rpx;',
			timeTxtStyle: 'font-size:20rpx;color:#F5F6F8;line-height:24rpx;padding:0rpx 4rpx;',
    }
  },
  onShow: function() {
    this.mountedStart()
  },
  methods: {
    formatPrice(price, index) {
      console.log(price)
      if (price) {
        return price.split('.')[index]
      }
      return ''
    },
    onShareAppMessage: function() {
      return {
        title: this.storeInfo.title,
        imageUrl: this.storeInfo.image,
        path: 'pages/activity/GoodsSeckill/index?id=' + this.storeInfo.id + '&spread=' + uni.getStorageSync('uid') + '&pageType=good&codeType=routine',
        success(res) {
          uni.showToast({
            title: '分享成功',
          })
        },
        fail(res) {
          uni.showToast({
            title: '分享失败',
            icon: 'none',
          })
        },
      }
    },
    openAlone: function() {
      this.$yrouter.push({
        path: '/pages/shop/GoodsCon/index',
        query: {
          id: this.storeInfo.productId,
        },
      })
      // this.$yrouter.replace({ path: "/detail/" + this.storeInfo.productId });
    },
    routerGo(item) {
      this.$yrouter.push({
        path: '/pages/user/CustomerList/index',
      })
    },
    //收藏商品
    setCollect: function() {
      let that = this,
        id = that.storeInfo.id,
        category = 'product'
      if (that.userCollect) {
        getCollectDel(id, category).then(function() {
          that.userCollect = !that.userCollect
        })
      } else {
        getCollectAdd(id, category).then(function() {
          that.userCollect = !that.userCollect
        })
      }
    },
    mountedStart: function() {
      var that = this
      console.log(this)
      let id = that.$yroute.query.id
      this.seckillStatus = that.$yroute.query.status
      that.datatime = parseInt(that.$yroute.query.time)
      getSeckillDetail(id).then(res => {
        that.userCollect = res.data.userCollect
        res.data.storeInfo.description = res.data.storeInfo.description.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
        that.$set(that.attr, 'productAttr', res.data.productAttr)
        that.$set(that, 'productValue', res.data.productValue)
        that.$set(that, 'storeInfo', res.data.storeInfo)
        that.$set(that, 'imgUrls', res.data.storeInfo.sliderImageArr)
        that.$set(that, 'replyCount', res.data.replyCount)
        that.$set(that, 'reply', res.data.reply)
        that.posterData.image = that.storeInfo.image_base
        that.updateTitle()
        if (that.storeInfo.title.length > 30) {
          that.posterData.title = that.storeInfo.title.substring(0, 30) + '...'
        } else {
          that.posterData.title = that.storeInfo.title
        }
        that.posterData.price = that.storeInfo.price
        that.posterData.code = that.storeInfo.code_base
        // that.setProductSelect();
        that.domStatus = true
        that.DefaultSelect()
      })
    },
    updateTitle() {
      // document.title = this.storeInfo.title || this.$yroute.meta.title;
    },
    setPosterImageStatus: function() {
      // var sTop = document.body || document.documentElement;
      // sTop.scrollTop = 0;
      this.posterImageStatus = !this.posterImageStatus
    },
    DefaultSelect: function() {
      let productAttr = this.attr.productAttr
      let value = []
      for (let i = 0; i < productAttr.length; i++) {
        this.$set(productAttr[i], 'index', 0)
        value.push(productAttr[i].attrValueArr[0])
      }
      //sort();排序函数:数字-英文-汉字；
      let productSelect = this.productValue[value.sort().join(',')]
      console.log(productSelect)
      if (productSelect && productAttr.length) {
        this.$set(this.attr.productSelect, 'store_name', this.storeInfo.title)
        this.$set(this.attr.productSelect, 'image', productSelect.image)
        this.$set(this.attr.productSelect, 'price', productSelect.seckillPrice)
				this.$set(this.attr.productSelect, 'otPrice', productSelect.otPrice)
				// this.$set(this.attr.productSelect, 'otPrice', productSelect.price)
        this.$set(this.attr.productSelect, 'stock', productSelect.seckillStock)
        this.$set(this.attr.productSelect, 'unique', productSelect.unique)
        this.$set(this.attr.productSelect, 'cart_num', 1)
        this.$set(this, 'attrValue', value.sort().join(','))
        this.$set(this, 'attrTxt', '已选择')
      } else if (!productSelect && productAttr.length) {
        this.$set(this.attr.productSelect, 'store_name', this.storeInfo.title)
        this.$set(this.attr.productSelect, 'image', this.storeInfo.image)
        this.$set(this.attr.productSelect, 'price', this.storeInfo.seckillPrice)
				this.$set(this.attr.productSelect, 'otPrice', this.storeInfo.otPrice)
				// this.$set(this.attr.productSelect, 'otPrice', this.storeInfo.price)
        this.$set(this.attr.productSelect, 'stock', 0)
        this.$set(this.attr.productSelect, 'unique', '')
        this.$set(this.attr.productSelect, 'cart_num', 0)
        this.$set(this, 'attrValue', '')
        this.$set(this, 'attrTxt', '请选择')
      } else if (!productSelect && !productAttr.length) {
        this.$set(this.attr.productSelect, 'store_name', this.storeInfo.title)
        this.$set(this.attr.productSelect, 'image', this.storeInfo.image)
        this.$set(this.attr.productSelect, 'price', this.storeInfo.seckillPrice)
				this.$set(this.attr.productSelect, 'otPrice', this.storeInfo.otPrice)
				// this.$set(this.attr.productSelect, 'otPrice', this.storeInfo.price)
        this.$set(this.attr.productSelect, 'stock', this.storeInfo.seckillStock)
        this.$set(this.attr.productSelect, 'unique', this.storeInfo.unique || '')
        this.$set(this.attr.productSelect, 'cart_num', 1)
        this.$set(this, 'attrValue', '')
        this.$set(this, 'attrTxt', '请选择')
      }
    },
    //将父级向子集多次传送的函数合二为一；
    changeFun: function(opt) {
      if (typeof opt !== 'object') opt = {}
      let action = opt.action || ''
      let value = opt.value === undefined ? '' : opt.value
      this[action] && this[action](value)
    },
    changeattr: function(res) {
      var that = this
      that.attr.cartAttr = res
    },
    // ChangeCartNum: function (res) {
    //   var that = this;
    //   if (res) {
    //     if (that.attr.productSelect.cart_num < that.storeInfo.seckillStock) {
    //       that.attr.productSelect.cart_num += 1;
    //       this.cartNum += 1;
    //       console.log(this.cartNum)
    //     }
    //   } else {
    //     if (that.attr.productSelect.cart_num > 1) {
    //       that.attr.productSelect.cart_num -= 1;
    //       this.cartNum -= 1;
    //     }
    //   }
    // },
    ChangeCartNum: function(changeValue) {
      //changeValue:是否 加|减
      //获取当前变动属性
      let productSelect = this.productValue[this.attrValue]
      //如果没有属性,赋值给商品默认库存
      if (productSelect === undefined && !this.attr.productAttr.length) {
        productSelect = this.attr.productSelect
      }
      //无属性值即库存为0；不存在加减；
      if (productSelect === undefined) return
      let stock = productSelect.stock || 0
      let num = this.attr.productSelect
      if (changeValue) {
        if (num) num.cart_num++
        if (num.cart_num > this.storeInfo.num) {
          num.cart_num = this.storeInfo.num
          uni.showToast({
            title: '限购' + this.storeInfo.num,
            icon: 'none',
            duration: 2000,
          })
        }
        if (num.cart_num > stock) {
          this.$set(this.attr.productSelect, 'cart_num', stock)
          this.$set(this, 'cartNum', stock)
        } else {
          this.$set(this.attr.productSelect, 'cart_num', num.cart_num)
          this.$set(this, 'cartNum', num.cart_num)
        }
      } else {
        num.cart_num--
        if (num.cart_num < 1) {
          this.$set(this.attr.productSelect, 'cart_num', 1)
          this.$set(this, 'cartNum', 1)
        } else {
          this.$set(this.attr.productSelect, 'cart_num', num.cart_num)
          this.$set(this, 'cartNum', num.cart_num)
        }
      }
    },
    //选择属性；
    ChangeAttr: function(res) {
      // 修改了规格
      let productSelect = this.productValue[res.value]
      if (productSelect) {
        this.attr.productAttr[res.indexw].index = res.indexn
        this.$set(this.attr.productSelect, 'image', productSelect.image)
        this.$set(this.attr.productSelect, 'price', productSelect.seckillPrice)
				this.$set(this.attr.productSelect, 'otPrice', productSelect.otPrice)
				// this.$set(this.attr.productSelect, 'otPrice', productSelect.price)
        this.$set(this.attr.productSelect, 'stock', productSelect.seckillStock)
        this.$set(this.attr.productSelect, 'unique', productSelect.unique)
        this.$set(this.attr.productSelect, 'cart_num', 1)
        this.$set(this, 'attrValue', res.value)
        this.$set(this, 'attrTxt', '已选择')
      } else {
        this.$set(this.attr.productSelect, 'image', this.storeInfo.image)
        this.$set(this.attr.productSelect, 'price', this.storeInfo.seckillPrice)
				this.$set(this.attr.productSelect, 'otPrice', this.storeInfo.otPrice)
				// this.$set(this.attr.productSelect, 'otPrice', this.storeInfo.price)
        this.$set(this.attr.productSelect, 'stock', 0)
        this.$set(this.attr.productSelect, 'unique', '')
        this.$set(this.attr.productSelect, 'cart_num', 0)
        this.$set(this, 'attrValue', '')
        this.$set(this, 'attrTxt', '请选择')
      }
    },
    selecAttrTap: function() {
      this.attr.cartAttr = true
      this.isOpen = true
    },
    tapBuy: function() {
      var that = this
      if (that.attr.cartAttr == false) {
        that.attr.cartAttr = !this.attr.attrcartAttr
      } else {
        var data = {}
        data.productId = that.storeInfo.productId
        data.cartNum = that.attr.productSelect.cart_num
        data.uniqueId = that.attr.productSelect.unique
        data.secKillId = that.storeInfo.id
        data.new = 1
        postCartAdd(data)
          .then(res => {
            that.$yrouter.push({
              path: '/pages/order/OrderSubmission/index',
              query: {
                id: res.data.cartId,
              },
            })
          })
          .catch(err => {
            uni.showToast({
              title: err.msg || err.response.data.msg || err.response.data.message,
              icon: 'none',
              duration: 2000,
            })
          })
      }
    },
  },
}
</script>
<style scoped lang="less">
	.header {
		.tab-title {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #2DB5AE;
			line-height: 42rpx;
		}
		.backImg {
			width: 88rpx;
			height: 62rpx;
			padding-left: 26rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.jiantou-right {
		width: 0;
		height: 0;
		border-top: 6rpx solid transparent;
		border-left: 10rpx solid #2DB5AE;
		border-bottom: 6rpx solid transparent;
		border-right: 0rpx solid transparent;
		margin-left: 8rpx;
	}
	
.product-con .nav {
  padding: 0 0.2 * 100rpx;
}

.product-con .footer .bnt .buy.bg-color-hui {
  background: #ccc;
}

/*内容 部分*/

// .tui-padding {
//   padding: 0 30rpx;
//   box-sizing: border-box;
// }

.tui-ml-auto {
  margin-left: auto;
}

/* #ifdef H5 */
.tui-ptop {
  padding-top: 44px;
}

/* #endif */

// .tui-size {
//   font-size: 24rpx;
//   line-height: 24rpx;
// }

// .tui-gray {
//   color: #999;
// }

// .tui-white__gray {
//   color: rgba(255, 255, 255, 0.8);
//   font-weight: normal;
//   font-size: 26rpx;
// }

// .tui-color-red {
//   color: #eb0909;
// }

// .tui-border-radius {
//   border-bottom-left-radius: 24rpx;
//   border-bottom-right-radius: 24rpx;
//   overflow: hidden;
// }

.tui-radius-all {
  border-radius: 24rpx;
  overflow: hidden;
}

.tui-mtop {
  margin-top: 26rpx;
}

.tui-pro-detail {
  box-sizing: border-box;
  color: #333;
	
	margin: 8rpx 32rpx 20rpx;
	width: 686rpx;
	// height: 230rpx;	
	background: #F5F6F8;
	box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
	border-radius: 16rpx;
	padding: 24rpx;
	
	position: relative;
}

.activity-info-box {
	position: absolute;
	top: 0rpx;
	right: 24rpx;
	width: 220rpx;
	height: 74rpx;
	overflow: hidden;
	.tui-right__box {
		padding-top: 8rpx;
		width: 188rpx;
		height: 74rpx;
		background: #2DB5AE;
		border-radius: 0rpx 0rpx 16rpx 16rpx;
		position: relative;
		z-index: 1;
		margin: 0rpx 16rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 26rpx;
		.icon {
			width: 24rpx;
			height: 24rpx;
			margin-right: 4rpx;
		}
		.count-down-box {
			padding-top: 6rpx;
			padding-left: 10rpx;
		}
	}
	.tui-right__box::after {
		width: 32rpx;
		height: 32rpx;
		content: "";
		position: absolute;
		top: 0;
		left: -32rpx;
		border-radius: 16rpx;
		box-shadow: 16rpx -16rpx 0rpx #2DB5AE;
	}
	.tui-right__box::before {
		width: 32rpx;
		height: 32rpx;
		content: "";
		position: absolute;
		top: 0;
		right: -32rpx;
		border-radius: 16rpx;
		box-shadow: -16rpx -16rpx 0rpx #2DB5AE;
	}
}

// .tui-product-title {
//   background: #fff;
//   padding-bottom: 30rpx;
// }

// .tui-price__box {
//   width: 100%;
//   height: 130rpx;
//   display: flex;
// }

// .tui-pro-pricebox {
//   width: 540rpx;
//   height: 130rpx;
//   display: flex;
//   flex-direction: column;
//   justify-content: center;
//   color: #ffffff;
//   font-size: 26rpx;
//   line-height: 26rpx;
//   background: linear-gradient(-30deg, #ff1f2e, #f52c6c);
//   flex-shrink: 0;
// }

.tui-pro-price {
	font-size: 48rpx;
	font-family: Futura;
	font-weight: 600;
	color: #3A3A3C;
	line-height: 64rpx;
  display: flex;
  // align-items: flex-end;
}

.tui-price {
  // font-size: 44rpx;
  // line-height: 42rpx;
}

// .tui-sold {
//   width: 100%;
//   height: 44rpx;
//   padding-left: 4rpx;
//   display: flex;
//   align-items: flex-end;
//   justify-content: space-between;
// }

.tui-original-price {
	padding-top: 18rpx;
  font-size: 30rpx;
  font-family: Futura;
  font-weight: 600;
  color: #999999;
  line-height: 40rpx;
	padding-left: 16rpx;
  // box-sizing: border-box;
  text-decoration: line-through;
}

// .tui-right__box {
//   flex: 1;
//   background-color: #ffe5e5;
//   font-size: 24rpx;
//   display: flex;
//   flex-direction: column;
//   align-items: center;
//   justify-content: center;
// }

// .tui-right__box text {
//   text-align: center;
//   padding-bottom: 12rpx;
// }

.tui-seckill__img {
  width: 146rpx;
  height: 26rpx;
  margin-bottom: 16rpx;
}

// .tui-pro-titbox {
//   font-size: 32rpx;
//   font-weight: 500;
//   position: relative;
//   padding: 0 150rpx 0 30rpx;
//   box-sizing: border-box;
// }

.tui-pro-title {
  font-size: 34rpx;
  font-family: SourceHanSansSCVF;
  font-weight: 600;
  color: #3A3A3C;
  line-height: 50rpx;
}
.tui-pro-info {
	font-size: 20rpx;
	font-family: SourceHanSansSCVF;
	font-weight: 600;
	color: #999999;
	line-height: 28rpx;
}

// .tui-share-btn {
//   display: block;
//   background: transparent;
//   margin: 0;
//   padding: 0;
//   border-radius: 0;
//   border: 0;
// }

// .tui-share-btn::after {
//   border: 0;
// }

// .tui-share-box {
//   display: flex;
//   align-items: center;
// }

// .tui-share-position {
//   position: absolute;
//   right: 0;
//   top: 30rpx;
// }

// .tui-share-text {
//   padding-left: 8rpx;
// }

// .tui-sub-title {
//   padding: 20rpx 0;
//   line-height: 32rpx;
// }

.tui-sale-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16rpx;
	font-size: 20rpx;
	font-family: SourceHanSansSCVF;
	font-weight: 500;
	color: #999999;
	line-height: 28rpx;
	.tips {
		padding-top: 4rpx;
		.tip {
			width: 80rpx;
			height: 26rpx;
			background: #2DB5AE;
			border-radius: 6rpx;
			margin-right: 4rpx;
			font-size: 16rpx;
			font-family: PingFang SC;
			color: #FFFFFF;
			line-height: 26rpx;
			text-align: center;
			margin-right: 20rpx;
		}
	}
}

// .tui-discount-box {
//   background: #fff;
// }

// .tui-list-cell {
//   width: 100%;
//   position: relative;
//   display: flex;
//   align-items: center;
//   font-size: 26rpx;
//   line-height: 26rpx;
//   padding: 36rpx 30rpx;
//   box-sizing: border-box;
// }

.tui-right {
  position: absolute;
  right: 30rpx;
  top: 30rpx;
}

.tui-top40 {
  top: 40rpx !important;
}

.tui-bold {
  font-weight: bold;
}

// .tui-list-cell::after {
//   content: '';
//   position: absolute;
//   border-bottom: 1rpx solid #eaeef1;
//   -webkit-transform: scaleY(0.5);
//   transform: scaleY(0.5);
//   bottom: 0;
//   right: 0;
//   left: 126rpx;
// }

// .tui-last::after {
//   border-bottom: 0 !important;
// }

// .tui-flex-center {
//   display: flex;
//   align-items: center;
// }

// .tui-cell-title {
//   width: 66rpx;
//   padding-right: 30rpx;
//   flex-shrink: 0;
// }

// .tui-promotion-box {
//   display: flex;
//   align-items: center;
//   padding: 10rpx 0;
//   width: 80%;
// }

// .tui-promotion-box text {
//   width: 70%;
//   white-space: nowrap;
//   overflow: hidden;
//   text-overflow: ellipsis;
// }

// .tui-basic-info {
//   background: #fff;
// }

// .tui-addr-box {
//   width: 76%;
// }

// .tui-addr-item {
//   padding: 10rpx;
//   line-height: 34rpx;
// }

// .tui-guarantee {
//   background: #fdfdfd;
//   display: flex;
//   flex-wrap: wrap;
//   padding: 20rpx 30rpx 30rpx 30rpx;
//   font-size: 24rpx;
// }

// .tui-guarantee-item {
//   color: #999;
//   padding-right: 30rpx;
//   padding-top: 10rpx;
// }

// .tui-pl {
//   padding-left: 4rpx;
// }

// .tui-col-7 {
//   width: 58.33333333%;
// }

// .tui-col-5 {
//   width: 41.66666667%;
// }

.tui-operation {
  width: 100%;
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 0;
  // padding-bottom: env(safe-area-inset-bottom);
	
	background: #F1F1F1;
	box-shadow: 0rpx -4rpx 38rpx 0rpx rgba(0,0,0,0.2);
	border-radius: 28rpx 28rpx 0rpx 0rpx;
}

// .tui-safearea-bottom {
//   width: 100%;
//   height: env(safe-area-inset-bottom);
// }

// .tui-operation::before {
//   content: '';
//   position: absolute;
//   top: 0;
//   right: 0;
//   left: 0;
//   border-top: 1rpx solid #eaeef1;
//   -webkit-transform: scaleY(0.5);
//   transform: scaleY(0.5);
// }

.tui-operation-left {
	padding: 12rpx 28rpx;
  // display: flex;
  // align-items: center;
	.stock {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #3A3A3C;
		line-height: 38rpx;
		padding-top: 20rpx;
		padding-left: 62rpx;
	}
}

.tui-operation-item {
  // flex: 1;
	// width: 50rpx;
	// height: 76rxp;
  display: flex;
  align-items: center;
  // justify-content: center;
  flex-direction: column;
  // position: relative;

  background: none;
  padding: 0;
	margin: 0;
  border: 0;
  // line-height: 1em;
	
	image {
		width: 50rpx;
		height: 50rpx;
	}
  &:after {
    display: none;
  }
  .tui-operation-text {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #3A3A3C;
		line-height: 22rpx;
		
    // margin-top: 9rpx;
    // line-height: 1em;
  }
}

// .tui-operation-text {
//   font-size: 22rpx;
//   color: #333;
// }

// .tui-opacity {
//   opacity: 0.5;
// }

// .tui-scale-small {
//   transform: scale(0.9);
//   transform-origin: center center;
// }

.tui-operation-right {
  // height: 100rpx;
  padding: 18rpx 32rpx;
  // box-sizing: border-box;
	.btn {
		width: 292rpx;
		height: 66rpx;
		background: #2DB5AE;
		border-radius: 16rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 66rpx;
		text-align: center;
	}
}

// .tui-right-flex {
//   display: flex;
//   align-items: center;
//   justify-content: center;
// }

// .tui-flex-1 {
//   flex: 1;
//   padding: 6rpx;
// }

// .tui-img__clock {
//   width: 30rpx;
//   height: 30rpx;
//   margin-right: 8rpx;
// }

.product-con .attribute {
	.attr-content {
		width: 548rpx;
		padding-left: 20rpx;
		padding-right: 12rpx;
		image {
			width: 46rpx;
			height: 46rpx;
			border-radius: 8rpx;
			border: 2rpx solid #E3E3E3;
			margin-right: 20rpx;
		}
		.attrs {
			padding: 0rpx 8rpx;
			min-width: 158rpx;
			height: 46rpx;
			background: #E3E3E3;
			border-radius: 8rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 46rpx;
			text-align: center;
		}
	}
}

.safeguard-info {
	width: 686rpx;
	height: 120rpx;
	background: #F5F6F8;
	box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
	border-radius: 16rpx;
	padding: 18rpx 0rpx;
	margin: 0rpx 32rpx 20rpx;
	.safeguard-item {
		width: 226rpx;
		font-size: 20rpx;
		font-family: SourceHanSansSCVF;
		font-weight: 600;
		color: #999999;
		line-height: 28rpx;
		text-align: center;
		.img {
			width: 46rpx;
			height: 46rpx;
			// background-color: #FFFFFF;
		}
	}
	.line {
		width: 2rpx;
		height: 84rpx;
		background-color: #979797;
	}
}

.userEvaluation .title .replyCount {
	font-size: 20rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #3A3A3C;
	padding-left: 8rpx;
}
</style>
