<template>
<div>
  <div class="user" v-for="(item,index) in newlist" :key="index">
    <Myheader></Myheader>
    <div class="rc-usermain" >
    <magnifier v-bind:parentmsg="msg" ></magnifier>
    <div class="rc-header" >
      <div class="rc-main" >
        <div class="usermain">
        <div class="rc-title">
          <h2>{{ item.productName }}</h2>
        </div>

        <div class="productdetails">
          <div class="rc-productdetail">
            <i>商品价格</i>
            <span>￥{{ item.rsp }}</span>
            <i style="font-size:12px;color:#999999">￥{{item.ecPrice}}</i>
          </div>
          <div class="rc-productdetai">
            <div>
            <i>活动促销:</i>
            <span>全场商品限时优惠</span>
            </div>
            <em @click="userget()">立即领取</em>
          </div>
           <div class="rc-button"  v-if="!userbuy">
              <span @click="usertanchu(item,0)">加入购物车</span>
              <span @click="usertanchu(item,1)">立即购买</span>
            </div>
        </div>
<div class="online" style="height:3px;width:100%;background:#DDDDDD;margin-top:0.33rem"></div>


        <div class="rc-productdeta" v-if="userbuy">
          <div class="rc-prodtop">
            <div>
            <span>商品规格</span>：
            </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 class="rc-produnnum">
            <div>
            <span>商品数量</span>：
            </div>
            <img src="../../assets/image/userjian.png" alt="" @click="sub()" />
            <strong>{{sales_num}}</strong>
                <img
            src="../../assets/image/userjia.png" alt="" @click="plus()"
              class="rc-message"
              
              
            />
          </div>

          <div class="certification">
            <ul>
            <li>
                      <span
                >服务说明：<i>当天14点前完成付款即日安排发货;当天14点后完成付款次日安排发货(周日及国家法定节假日顺延至下一个工作日发货,活动期间发货或有延迟敬请理解)</i></span
              >
              </li>
              <li>
                <span
                  >商品运费：<i>全场包邮(港澳除外)</i></span
                >
              </li>
        
              <li>
                      <span
                >商品编号：<i>{{ item.brandCode }}</i></span
              >
              </li>
            </ul>
         
          </div>
        </div>
</div>
      
      </div>

    
    </div>
    </div>
        <div class="rc-footimage">
          <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" style="width:100%">
              <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>
// 手机端
@media screen and(min-width: 320px) and(max-width:768px) {
              .rc-button{
          width: 100%;
          display: flex;
          align-items: center;
          position: fixed;
          justify-content: center;
          height: 60px;
          bottom: 0;
          background-color: white;

          span{
            width: 160px;
height: 48px;
background: #E2001A;
border-radius: 30px;
font-size: 16px;
color:#FFFFFF;
display: block;
display: flex;
align-items: center;
justify-content: center;
          }
          span:last-child{
              margin-left: 40px;
          }
        }
  .rc-headera{
 display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    h3{
      color:#333333;
      font-size: 26px;
    }
  .rc-title{
     img{
       width: 96px;
       height: 96px;

     }
  }
  .userer{
    span{
  width: 130px;
height: 40px;
border: 2px solid #E2001A;
border-radius: 30px;
display: block;
color: #E2001A;
line-height: 40px;
margin-top: 42px;
font-size: 14px;
    }
    i{
        font-size: 18px;
          font-style: normal;
           display: block;
           margin-top: 32px;
color: #E1001A;
    }
  }
}
        /deep/.el-dialog {
 width: 80%;
 position: relative;
}
    .rc-discount {
    position: relative;
    width: 100%;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
    .rc-contair {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
    .rc-left {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #e1001a;
      padding-right: 21px;
      width: 30%;
      float: left;
      height: 100%;
      i {
        font-style: normal;
        font-size: 12px;
      }
      span {
        font-size: 26px;
      }
      strong {
        font-style: normal;
        font-size: 12px;
        display: block;
        margin-top: 8px;
      }
    }
    .rc-right {
      display: flex;
      flex-direction: column;
      margin-left: 36px;
      justify-content: center;
      height: 100%;
      i {
        font-style: normal;
        font-size: 16px;
        color: #e1001a;
      }
      .rc-main {
        color: #999999;
        font-size: 12px;
      }
      span {
        display: block;
        margin-top: 8px;
      }
      em {
        font-style: normal;  
      }
    }
    .rc-footer {
      display: flex;
      justify-content: flex-end;
      margin-right: 10px;
      span {
        width: 72px;
        height: 25px;
        background: #e2001a;
        text-align: center;
        line-height: 25px;
        font-size: 12px;
        color: #ffffff;
        margin-bottom: 8px;
        border-radius: 100px;
        margin-right: 8px;
        cursor: pointer;
      }
    }
    }
   .active{
     border: 2px solid #E2001A;
    color:#666666;
      cursor: pointer;
      font-size: 16px;
    }
    .unactive{
      border: 2px solid #808285;
      color:#666666;
      cursor: pointer;
           font-size: 16px;
     }
       .rc-footimage{
        overflow: hidden;
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        margin-top: 20px;
        img{
          width: 100%;
        }
         
      }
  .rc-header {
    width: 100%;
  
    .rc-main {
  
      width: 92%;
      margin: 0 auto;
      .rc-title {
        height: 85px;
        width: 100%;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #d8d8d8;
        h2 {
          font-size: 22px;

          color: #e1001a;
        }
      }
      .productdetails {
   
        margin-top: 19px;
        .rc-productdetail {
          display: flex;
          align-items: center;
          i {
            font-style: normal;
            font-size: 14px;

            color: #333333;
          }

          span {
            font-size: 18px;
            margin-left: 8px;
            color: #e1001a;
          }
        }
        .rc-productdetai {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 10px;
          i {
            font-style: normal;
            font-size: 14px;
            color: #333333;
          }
          span {
            font-size: 14px;
            color: #666666;
            margin-left: 8px;
          }
          em {
            font-size: 14px;
            font-style: normal;
            margin-left: 68px;
            color: #e2001a;
          }
        }
      }

      .rc-productdeta {
        margin-top: 20px;
        .rc-prodtop {
          display: flex;
          align-items: center;
          span {
            font-size: 14px;
            color: #333333;
          }
          em {
            font-style: normal;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 59px;
            font-size: 16px;
            margin-left: 4px;
            height: 39px;
            border-radius: 3px;
          }
        }
      }
      .rc-produnnum {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        margin-top: 16px;
        border-bottom: 1px solid #d7d7d7;
        span {
          font-size: 14px;
          color: #333333;
        }
        img {
          width: 29px;
          height: 29px;
          display: block;
          margin-left: 5px;

        }
        .rc-message {
          width: 29px;
          margin-left: 8px;
          height: 29px;
          display: block;
        }

        strong {
          font-style: normal;
          list-style: none;
          width: 30px;
          height: 30px;
          border: 1px solid #d7d7d7;
          opacity: 1;
          border-radius: 3px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          margin: 0 5px 0 5px;
          color: #666666;
        }
      }
      .certification {
               .rc-button{
          width: 100%;
          padding-top: 33px;
          display: flex;
          align-items: center;
          span{
            width: 160px;
height: 48px;
background: #E2001A;
border-radius: 30px;
font-size: 16px;
color:#FFFFFF;
display: block;
display: flex;
align-items: center;
justify-content: center;
          }
          span:last-child{
              margin-left: 40px;
          }
        }
        margin-top: 16px;
        ul {
          display: flex;
          flex-direction: column;
          line-height: 30px;
          li {
            float: left;
            width: 100%;
            text-align: left;
            span {
              font-size: 14px;
              color: #333333;
            }
            i{
              font-style: normal;
              font-size: 14px;
              color: #666666;
              margin-left: 8px;
            }
          }
        }
      }
    }
  }
}
//    /* 最小768px最大1920 *pc端/
@media screen and (min-width: 768px) and (max-width: 1920px) {
  .rc-headera{
    
 display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    h3{
      color:#333333;
      font-size: 26px;
    }
  .rc-title{
     img{
       width: 96px;
       height: 96px;

     }
  }
  .userer{
    span{
  width: 130px;
height: 40px;
border: 2px solid #E2001A;
border-radius: 30px;
display: block;
color: #E2001A;
line-height: 40px;
margin-top: 42px;
font-size: 14px;
    }
    i{
        font-size: 18px;
          font-style: normal;
           display: block;
           margin-top: 32px;
color: #E1001A;
    }
  }
}
  .rc-header{
 display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    h3{
      color:#333333;
      font-size: 26px;
    }
  .rc-title{
     img{
       width: 96px;
       height: 96px;

     }
  }
  .userer{
    img{
      width: 210px;
      height: 210px;
      display: flex;
    justify-content: center;
    flex-direction: column;

    } 

    span{
        font-size: 16px;

color: #333333;
    }
    i{
        font-size: 18px;
          font-style: normal;
           display: block;
           margin-top: 32px;
color: #E1001A;
    }
  }
}
      /deep/.el-dialog {
 width: 440px;
 height: 432px;
 position: relative;
}

  .rc-discount {
    position: relative;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
    .rc-contair {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
    .rc-left {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #e1001a;
      padding-right: 21px;
      width: 30%;
      float: left;
      height: 100%;
      i {
        font-style: normal;
        font-size: 12px;
      }
      span {
        font-size: 26px;
      }
      strong {
        font-style: normal;
        font-size: 12px;
        display: block;
        margin-top: 8px;
      }
    }
    .rc-right {
      display: flex;
      flex-direction: column;
      margin-left: 36px;
      justify-content: center;
      height: 100%;
      i {
        font-style: normal;
        font-size: 16px;
        color: #e1001a;
      }
      .rc-main {
        color: #999999;
        font-size: 12px;
      }
      span {
        display: block;
        margin-top: 8px;
      }
      em {
        font-style: normal;  
      }
    }
    .rc-footer {
      display: flex;
      justify-content: flex-end;
      margin-right: 10px;
      span {
        width: 72px;
        height: 25px;
        background: #e2001a;
        text-align: center;
        line-height: 25px;
        font-size: 12px;
        color: #ffffff;
        margin-bottom: 8px;
        border-radius: 100px;
            margin-right: 8px;
            cursor: pointer;
      }
    }
    }
  .rc-usermain{
        display: flex;
        align-items: center;
  }
  .active{
     border: 2px solid #E2001A;
    color:#666666;
      cursor: pointer;
      font-size: 16px;
    }
    .unactive{
      border: 2px solid #808285;
      color:#666666;
      cursor: pointer;
           font-size: 16px;
     }
  .rc-header {
    width: 100%;
       margin-left: 80px;
          .rc-footimage{
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
          width: 100%;
        }
      }
    .rc-main {
   
      width: 92%;
      margin: 0 auto;
      .rc-title {
        height: 85px;
        width: 100%;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #d8d8d8;
        h2 {
          
font-size: 30px;
          color: #e1001a;
        }
      }
      .productdetails {
               .rc-button{
          width: 100%;
          padding-top: 33px;
          display: flex;
          align-items: center;
          span{
            width: 160px;
height: 48px;
background: #E2001A;
border-radius: 30px;
font-size: 16px;
color:#FFFFFF;
display: block;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
          }
          span:last-child{
              margin-left: 40px;
          }
        }
        margin-top: 19px;
        .rc-productdetail {
          display: flex;
          align-items: center;
          i {
            font-style: normal;
            font-size: 18px;

            color: #333333;
          }

          span {
            font-size: 18px;
            margin-left: 8px;
            color: #e1001a;
          }
        }
        .rc-productdetai {
         display: flex;
    align-items: center;
    margin-top: 10px;
    border-bottom: 1px solid #d7d7d7;
    padding-bottom: 17px;
          i {
            font-style: normal;
          

font-size: 18px;
            color: #333333;
          }
          span {
            
font-size: 20px;
            color: #666666;
            margin-left: 8px;
          }
          em {
            font-size: 16px;
            font-style: normal;
             width: 40%;
             text-align: right;
             display: block;            
color: #E2001A;
            cursor: pointer;
          }
        }
      }

      .rc-productdeta {
        margin-top: 16px;
        .rc-prodtop {
          display: flex;
          align-items: center;
          span {
            
font-size: 18px;
            color: #333333;
          }
          em {
            font-style: normal;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 59px;
            font-size: 16px;
            margin-left: 10px;
            height: 39px;
            border-radius: 3px;
            color:#666666;
          }
        }
      }
      .rc-produnnum {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        margin-top: 16px;
        border-bottom: 1px solid #d7d7d7;
        span {
          font-size: 18px;
          color: #333333;
        }
        img {
          width: 29px;
          height: 29px;
          display: block;
        }
        .rc-message {
          width: 29px;
          margin-left: 8px;
          height: 29px;
          display: block;
        }

        strong {
          font-style: normal;
          list-style: none;
          width: 30px;
          height: 30px;
          border: 1px solid #d7d7d7;
          opacity: 1;
          border-radius: 3px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          margin: 0 5px 0 5px;
          color: #666666;
        }
      }
      .certification {
        .rc-button{
          width: 100%;
          padding-top: 33px;
          display: flex;
          align-items: center;
          span{
            width: 160px;
height: 48px;
background: #E2001A;
border-radius: 30px;
font-size: 16px;
color:#FFFFFF;
display: block;
display: flex;
align-items: center;
justify-content: center;
          }
          span:last-child{
              margin-left: 40px;
          }
        }
        margin-top: 16px;
        ul {
          display: flex;
          flex-direction: column;
          line-height:40px;
          text-align: left;
          li {
            width: 100%;
            float: left;
            span {
              font-size: 18px;
              color: #333333;
            }
            i{
              font-style: normal;
              font-size: 16px;
              color: #666666;
              margin-left: 8px;
            }
          }
        }
      }
    }
  }

}
</style>