<template>
<div>
  <div class="user" v-for="(item,index) in newlist" :key="index">
    <Myheader></Myheader>
	<div class="rc-top"></div>
    <div class="rc-usermain ts-product-detail">
    <magnifier v-bind:parentmsg="msg" ></magnifier>
    <div class="ts-product-header" >
        <div class="usermain">
			<div class="online bold rc-md-down"></div>
			<div class="rc-main">
				<div class="rc-title">
					<h2>{{ item.productName }}</h2>
				</div>
			</div>
			<div class="online rc-md-down"></div>
			<div class="rc-main">
				<div class="productdetails">
					<div class="rc-productdetail">
						<i class="ts-row-title">商品价格：</i>
						<span class="ts-realprice">￥{{ item.rsp }}</span>
						<span class="ts-remove ts-ecprice">￥{{ item.ecPrice }} </span>
					</div>
					<div class="rc-productdetai">
						<div>
							<i class="ts-row-title">活动促销：</i>
							<span>全场商品限时优惠</span>
						</div>
						<em @click="userget()">立即领取</em>
					</div>
				</div>
			</div>
			<div class="online bold rc-md-down"></div>
			<div class="rc-main rc-md-up">
				<div class="online"></div>
			</div>

        <div class="rc-productdeta" v-if="userbuy">
			<div class="rc-main">
          <div class="rc-prodtop">
            <div>
            <i class="ts-row-title">商品规格：</i>
            </div>
            <!-- <em v-for="(item, index) in stype" :key="index"  @click="selectsearch(item, index)" :class="activeIndexa == index ? 'active' : 'unactive'">
              {{ item.title }}
            </em> -->

             <em class='active'>
              {{ item.specifications }}
            </em>
          </div>
		  </div>
		  <div class="rc-main">
			  <div class="rc-produnnum">
				<div><i class="ts-row-title">商品数量：</i></div>
				<img src="../../assets/image/userjian.png" alt="" @click="sub()" />
				<strong>{{sales_num}}</strong>
				<img src="../../assets/image/userjia.png" alt="" @click="plus()" />
			  </div>
		  </div>
		  <div class="rc-main rc-md-up">
		  	<div class="online"></div>
		  </div>
		  <div class="online rc-md-down"></div>
		    <div class="rc-main">
				<div class="certification">
					<ul>
						<li>
						  <span
						><i class="ts-row-title">服务说明：</i><i>当天14点前完成付款即日安排发货;当天14点后完成付款次日安排发货(周日及国家法定节假日顺延至下一个工作日发货,活动期间发货或有延迟敬请理解)</i></span
						>
					</li>
					<li>
						<span
						><i class="ts-row-title">商品运费：</i><i>全场包邮(港澳除外)</i></span
						>
					</li>

					<li>
						<span
						><i class="ts-row-title">商品编号：</i><i>{{ item.brandCode }}</i></span
						>
					</li>
					</ul>
				</div>
				<div class="rc-button" v-if="!userbuy">
					<span @click="usertanchu(item,0)">加入购物车</span>
					<span @click="usertanchu(item,1)">立即购买</span>
				</div>
			</div>
        </div>
</div>
    
    </div>
    </div>
        <div class="rc-footimage rc-main">
          <img :src=item.showImgFile alt="">

        </div>
         <Myfooter v-on:litentop='showmesg'></Myfooter>
  </div>
      <el-dialog
    :visible.sync="dialogInfo1"
    hegight="700px"
     @close='userclose'
  >
       <div class="rs-dis">
          <div
            class="rc-discount"
            v-for="(item, index) in usernewlist"
            :key="index"
          >
            <img :src="userimage" alt="" />
            <div class="rc-contair">
              <div class="rc-left">
                <div>
                  <i>￥</i><span>{{ item.couponAmount }}</span>
                </div>
              </div>
              <div class="rc-right">
                <i>
                  {{ item.couponDesc }}
                </i>
                <div class="rc-main" id="rc-main">
                  <span>有效期</span>
                  <em>{{ item.validTo }}</em>
                </div>
                <div class="rc-footer">
                  <span @click="usergetconf(item)">立即领取</span>
                </div>
              </div>

       
            </div>
          </div>

       </div>

  </el-dialog>
      <el-dialog
    :visible.sync="dialogInfo2"
    @close='userclose'
  >
    <div class="rc-headera">
      <div class="rc-title">
     <img src="../../assets/error.png" alt="">
     </div> 
       <div class="rc-logmain">
            <h3>温馨提示</h3>
            <span>请先点击下方进行登录/注册</span>

       </div>
         <nuxt-link :to="`/userlogin/login/`">
       <div class="userer">
           <span>立即登录</span>
       
       </div>
           </nuxt-link>
    </div>


  </el-dialog>
     <div class="rc-button rc-md-down">
              <span @click="usertanchu(item,0)">加入购物车</span>
              <span @click="usertanchu(item,1)">立即购买</span>
            </div>
  </div>
</template>

<script>
import Myheader from "~/components/header.vue";
import Magnifier from "@/components/magnifier.vue";
import { mapMutations } from "vuex";
  import Myfooter from "~/components/rc-footer.vue";
  import { goodsmessage,getConfig,postCourseId,getdraw,alldiscount } from "../../ajax/getData";
  const settings = require("@/config");
export default {
  data() {
    return {
       tableLabelTest:[],    
      userimage: require("../../assets/image/unused.png"),
      activeIndexa:0,
      dialogInfo1:false,
      name: [],
      userlist:[],
      drawlist:[],//用户可以领取的优惠券
      alldraw:[],
      userlistmenu:[],
      msg:['11111111'],
      parent_msg:['111'],
      usermessage:[],
         dialogInfo2:false,
         productCode:'',//商品code
         productlist:[],
         userbuy:true,
            sales_num:1,
        usernewlist: [
        {
          price: "30",
          pricestype: "新客优惠券",
          special: "全场每满299-30",
          period: "有效期",
          starttime: "2021.11.29-2022.01.28",
          catimage: require("../../assets/image/unused.png"),
        },
        {
          price: "30",
          pricestype: "新客优惠券",
          special: "全场每满299-30",
          period: "有效期",
          starttime: "2021.11.29-2022.01.28",
          catimage: require("../../assets/image/unused.png"),
        },
      ],


      newlist: [
        {
          price: "167.00",
          pricestype: "英国短毛猫成猫全价湿粮",
          special: "限时折扣全场商品8折",
          period: "今晚20:00前付款，明日12:00前发货",
          starttime: "商品未满199元  快递费:9.00元",
          shangbianhao: "6212263798102432",
          catimage: require("../../assets/image/rc-new.png"),
        },
      ],
      stype: [
        {
          title: "3kg",
        },
        {
          title: "5kg",
        },
      ],
    };

  },
   components: {
    Myheader,
    Magnifier,
    Myfooter

  },
    mounted() {
     
    if(this.usermessage!=='' ||this.usermessage.data!==undefined){
this.usermessage= JSON.parse(localStorage.getItem("userInfo"));
         let stype=this.$route.query.stype;
         this.productCode=this.$route.query.productCode;
   console.log(this.productCode)
         this.userquery(this.productCode);
             console.log(this.userlistmenu)
         this.$nextTick(()=>{
              
         })
         if(stype==1){
            this.userbuy=true;
         }else if(stype==2){
           console.log('这是要消失的')
              this.$nextTick(() => {
              this.userbuy=false;
      
        })
   

         }
    }


  },
  methods: {
    ...mapMutations(["changemessage"]),
    showmesg(){
         console.log('-----');
       this.toTop();
       },
            toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果 
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 400;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },

    //领取优惠券
usergetconf(item){
  console.log(item);
if(this.usermessage.data!==''||this.usermessage.data!==undefined){
  this.getconf(this.usermessage.data.id,item.couponId);
}
},

        //获取用户领取的优惠券
          async getconf(memberId,couponId) {
      let data = await getConfig(memberId,couponId);
      if(data){

           this.$message({
                                type: 'warning',
                                message: data.msg
                            });
        
        console.log(data);
      }
            
    },



    //  changeName(newName){
    //             this.name = newName;
    //         },
    
 
       userclose(){
       console.log('这是关闭的');
       this.userlist=[];
       },
       async userquery() {
      console.log("-----");

      let data = await goodsmessage(this.productCode);
      if(data){
        this.newlist=data.data;
             
      }
          
           this.userlistmenu=this.newlist[0].productAttachmentList;
             let changemess=JSON.stringify(this.userlistmenu);
             console.log(changemess);
               this.changemessage({ data: changemess });
           this.parent_msg=this.userlistmenu;
           console.log( this.userlistmenu)

      
    },
 
          //获取用户领取的优惠券
          async userdraw(mobile) {
      let data = await getdraw(mobile);
      if(data){
        this.drawlist=data.data;
      }
            
    },

             //获取所有的优惠券
          async alldrawlist(memberId) {
      let data = await alldiscount(memberId);
      let userlist=[];
      let menulsit=[];
      if(data){
        this.alldraw=data;
        // console.log(this.alldraw.data);
        let alllist=[];
        this.userlist=this.alldraw.data;
       this.userlist.forEach((element,index)=>{
         if(typeof element.productCodes=='string'){
           userlist.push(element);
          //  let s=element.productCodes.split(',');
          //     console.log(s.indexOf(this.productCode) != -1 )
          //  console.log('这是字符串')

         }
   
       })
           let menualist=[];
          userlist.filter(item=>{
            console.log(item);
            item.productCodes=item.productCodes.split(',')
            item.productCodes.forEach(element=>{
              if(element==this.productCode &&item.activityId!==10){
                console.log(element)
                 console.log(this.productCode)
                 menualist.push(item);
                
                console.log('----');
              }
            })
   
          
            })
            this.usernewlist=menualist;
         console.log(this.usernewlist);
        
      }
            
    },

    plus(num,index){
 
	this.sales_num= parseInt(this.sales_num) + 1;
  console.log(	this.sales_num);
} ,
		// 数量减方法
		sub(num,index){
			if(	this.sales_num <= 1){
				this.sales_num = 1;
			}
			else{
					this.sales_num = parseInt(this.sales_num) - 1;
			}

		},

          async courseId(item) {
            console.log(item);
            console.log(this.usermessage);
            // let userid=JSON.parse(location.getItem('userInfo'));
            // let mobile=JSON.parse(location.getItem('userInfo'));
            // console.log(userid,mobile);
      let data = await postCourseId(  this.productCode,this.sales_num,this.usermessage.data.id,this.usermessage.data.mobile,item.picFile,item.productName,item.basePrice,item.specifications);
      if(data){
        this.productlist=data;
      }
            console.log(data);
    },
usertanchu(item,orderm){

 let user= localStorage.getItem("userInfo");
 if(user==undefined||user==null||user==''){
 this.dialogInfo2=true;
 return
 }else{
    
      this.courseId(item);
      if(orderm==0){
          this.$message({
                                type: 'warning',
                                message: '加入购物车成功'
                            });
    }
  if(orderm==1){
  this.$router.push({
        path: "/myorder/userrecord",
       
      });
  }
     
 }


     

},
    userget(){
       this.userdraw(this.usermessage.data.mobile);
       this.alldrawlist(this.usermessage.data.id);
        this.dialogInfo1=true;
    },
           selectsearch(item, index) {
         
             this.activeIndexa=index;
    },
  },

  onceproduct(){

  },
 
};

</script>

<style lang="less" scoped>
@import url("../../assets/css/global.less");
@import url("../../assets/css/producted.less");
</style>