<template>
  <div>
    <Myheader></Myheader>

    <div class="rc-header">
      <div class="rc-main">
        <div class="rc-commodity">
          <div class="rc-commondi">
            <img src="../../assets/image/rc-select.png" alt="" />
            <span>商品</span>
          </div>

          <ul>
            <li>单价</li>
            <li>数量</li>
            <li>操作</li>
          </ul>
        </div>

        <div class="rc-select">
          <label>
                        <input type="checkbox" v-model="checkAll">
                        全选
                    </label>

          <div class="select-right">
            <img src="../../assets/image/userupdate.png" alt="" />
            <span @click="useredit">编辑</span>
          </div>
        </div>
       <div>
        <div v-for="(item, index) in goldmedal"
          :key="index"
          class="rc-userdemand"
         
        >
          <div class="rc-userdeman">
             <label>
                                <input type="checkbox" v-model="item.checked">
                            </label>

            <!-- <img :src="item.image" /> -->
            <!-- <img :src="checkone?require('../../assets/image/rc-unselect.png'):require('../../assets/image/rc-select.png')"  @click="userclick(checkone,index)"/> -->
            <img :src="item.productImg" alt="" class="re-message" />
          </div>
          <div class="rc-userdem">
              <div class="rc-userdema">
            <span>{{ item.productName }}</span>
            <em>规格:{{ item.specifications }}</em>
            </div>
            <div class="rc-userd">
              <i>￥{{ item.productPrice }}</i>
                <div class="rc-jia">
                 <img src="../../assets/image/userjian.png" alt=""  @click="sub(item.buyCount,index)"/>
              <strong> {{item.buyCount}} </strong>
                <img src="../../assets/image/userjia.png" alt="" @click="plus(item.buyCount,index)" />
              
              </div>
              <em @click="userdele(item,index)">删除</em>
            </div>
          </div>

      <div class="rc-footer">
        <div class="rc-foote">
          <div class="rc-shop">
            <i>总计:</i>
            <span>￥{{ sumPrice }}</span>
          </div>
          <div class="rc-delete" @click="usejiesuan(item,index)">
            <span>
              {{ userdelete }}
            </span>
          </div>
        </div>
      </div>
          
      </div>
    </div>

       <div class="rc-footera">
        <div class="rc-foote">

            <div class="rc-shop">
             <label>
                        <input type="checkbox" v-model="checkAll">
                        全选
                    </label>
            </div>
            <div class="rc-delete">
              <div class="rc-num">
                  <div class="rc-usernum">
                      <div class="rc-usea">
                    <i >总计:</i>
            <span >{{ sumPrice }}</span>
            </div>
                   <em>共选择{{sumlength}}件商品</em>
               </div>
    
              <strong @click="usejiesuan(item,index)" >{{mustpay}}</strong>
              </div>
                 
            </div>
            </div>
          <!-- <div class="rc-shop">
            <i>总计:</i>
            <span>{{ ordersum }}</span>
          </div>
          <div class="rc-delete">
            <span>
              {{ userdelete }}
            </span>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { List } from 'vant';
import Myheader from "~/components/header.vue";
import instance from "@/config/request";
 import {isexistCart,generateOrderWX,deleteCart} from "../../ajax/getData";
import accMul from "../../config/setDec.js"
export default {
  data() {
    return {
      ordersum: 1,
      usercheckbox:false,
      shopnum:0,
      	checkAllFlag:false,  //是否全选
        checkone:false,
       ys1: true,
                ys2: true,
      userdelete: "结算",
      orderprice:'￥199.00',
      mustpay:'立即结算',
      totalMoney:'',
       allChecked: false,
       userid:null,
      goldmedal: [
      
        // {
        //   ordernumber: "1111111111111111111",
        //   orderstype: 1,
        //   image:require('../../assets/image/rc-select.png'),
        //   sales_num:1,
        //   usereat: "英国短毛猫成猫全价湿粮",
        //   ordernum: 0,
        //   num: "5kg",
        //   specification: "1",
        //   buttontitle: "立即支付",
        //   checked:true,
        //   userprice: "167",
          
        //   catimage: require("../../assets/image/rc-win.png"),
        // },

        // {
        //   ordernumber: "1111111111111111111",
        //   sales_num:1,
        //   usereat: "每年4次免积分产品试吃",
        //          image:require('../../assets/image/rc-select.png'),

        //   checked:true,

        //   ordernum: 0,
        //   buttontitle: "再次购买",
        //   catimage: require("../../assets/image/usereat.png"),
        //   orderstype: 2,
        //   userprice: "167",
        // },
      ],
    };
  },
  mounted() {
  console.log('---');
    this.goldmedal.forEach(item=>{
      item.checked=true;
    })
    
  },
  mounted(){
  this.carmessage();

  },

  components: {
    Myheader,
  },
  methods:{
     //请求猫

       async carmessage() {
         console.log(this.goldmedal);
                 let user= JSON.parse(localStorage.getItem("userInfo"));
                 console.log(user);
                 this.userid=user.data.id;
          let data = await isexistCart(user.data.id);
          this.goldmedal=data;
    },
        async userjie(list) {
                 let user= JSON.parse(localStorage.getItem("userInfo"));
                 console.log(user);
                 this.userid=user.data.id;
          let data = await generateOrderWX(list);
          if(data){
              this.$message({
                                type: 'warning',
                                message: data.msg
                            });
                            console.log(data);
                                      this.$router.push({
        path: "/personal/userpay",
           query: {
          wxdata:data.data
        },
       
      });  
          }
          console.log(data);
         
    },

              //删除购物车
         async deletsmessage(productCode) {
                 let user= JSON.parse(localStorage.getItem("userInfo"));
                 console.log(user);
                 this.userid=user.data.id;
          let data = await deleteCart(user.data.id,productCode);
          if(data){
             this.$message({
                                type: 'warning',
                                message: data.msg
                            });
       this.carmessage();
          }
    },


    //   checkBox(){

    // console.log(event.target.checked)
    // this.usercheckbox=event.target.checked;
    //     this.goldmedal.forEach(item => {
    //                         item.checked = this.usercheckbox
    //                     });
    // },

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

		},
 
    		// 求总价

    useredit(e){
             this.ys1 = !this.ys1
                if(this.ys1==false){
                       this.$nextTick(() => {
                       this.userdelete='删除';
                       console.log(this.userdelete);

      
        })
                }else if(this.ys1==true){
                                this.$nextTick(() => {
                       this.userdelete='结算';

                       console.log(this.userdelete);
      
        })
                }

         if(this.userdelete=="删除"){
  
         }
      
    },
    usejiesuan(item,index){

    let procode=[];
      let list=[];
     let menulist=[];
      this.goldmedal.filter(item=>{
        if(item.checked){
          list.push(item);
          console.log(item);
           procode.push(item.productCode)
        }else{
          list.splice(index,1);
        }
      })
      list=this.goldmedal.filter(item =>
                        item.checked
                    );
                   
              list.forEach(item => {
                   menulist.push({
                     productName:item.productName,
                     buyCount:item.buyCount,
                      productId: item.productCode,
                      payAmount: item.productPrice,
                      memberId:item.memberId,
                     phoneNumber:item.mobile

                   });
              });

       if(this.ys1==false){
            if(list.length==0){
                
                 this.$message({
                                type: 'warning',
                                message: '你还未选择商品'
                            });
                            return;
              }else{
                this.deletsmessage(procode);
              }
          
       }else{
          if(list.length==0){
                
                 this.$message({
                                type: 'warning',
                                message: '你还未选择商品'
                            });
                            return;
              }else{
                 this.userjie(menulist)
              }
       }
    
         

//         list=[
//           {
// "productName":"幼猫全价粮",
// "buyCount":"2",
// "productId":"210352",
// "payAmount":"517",
// "memberId":"844350",
// "phoneNumber":"18112621098"
// },
//           {
// "productName":"幼猫全价粮",
// "buyCount":"2",
// "productId":"210352",
// "payAmount":"517",
// "memberId":"844350",
// "phoneNumber":"18112621098"
// }
//         ]
        
        // instance
        //   .post(`generateOrderWX`, list, configs)
        //   .then((res) => {
        //     console.log(res);
        //   });
             
                    
      
 
    },

    //              async userdelete(item) {
               
    //       let data = await isexistCart( this.userid,);
  
    // },
  },
    computed:{
       checkAll: {
                    // 设置值,当点击全选按钮的时候触发
                    set(v) {
                        this.goldmedal.forEach(item => {
                            item.checked = v
                        });
                    },
                    // 取值,当列表中的选择改变之后触发
                    get() {
                        return this.goldmedal.length === this.goldmedal.filter(item => item.checked == true).length;
                    },
                },
                // 总价计算
                sumPrice() {
                    return this.goldmedal
                        .filter(item => item.checked)
                        .reduce((pre, cur) => {
                          console.log(pre);
                            return pre + cur.buyCount * cur.productPrice;
                            
                        }, 0);
                },

                sumlength(){
                  return  this.goldmedal.filter(item => item.checked == true).length;
                }
                


  },
};
</script>

<style lang="less" scoped>
// 手机端
@media screen and(min-width: 320px) and(max-width:768px) {
    .rc-footera{
        display: none;
    }
  .rc-footer {
    position: fixed;
    bottom: 0;
    width: 100%;

    .rc-foote {
     width: 100%;
      margin: 0 auto;
      height: 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: white;
    }
    .rc-shop {
      display: flex;
      align-items: center;
      i {
        font-style: normal;
        font-size: 14px;
        color: #333333;
      }
      span {
        font-size: 18px;
        color: #E1001A;
        display: block;
        margin-left: 3px;
      }
    }
    .rc-delete {
      span {
        width: 100px;
        height: 48px;
        background: #e2001a;
        border-radius: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        margin-right: 40px;

        color: #ffffff;
      }
    }
  }
  .rc-header {
    width: 100%;
    .rc-main {
      width: 92%;
      margin: 0 auto;
      .rc-commodity{
          display: none;
      }
      .rc-select {
        border-bottom: 1px solid #d8d8d8;
        height: 56px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        .select-left {
          display: flex;
          align-items: center;
          img {
            width: 24px;
            height: 24px;
            display: block;
          }
          span {
            font-size: 14px;
            color: #333333;
            display: block;
            margin-left: 8px;
          }
        }
        .select-right {
          display: flex;
          align-items: center;
          img {
            width: 16px;
            height: 16px;
            display: block;
            margin-right: 8px;
          }
          span {
            font-size: 14px;
            color: #333333;
          }
        }
      }

      .rc-userdemand {
        width: 100%;
        height: 180px;
        border-bottom: 1px solid #d8d8d8;
        display: flex;
        .rc-userdeman {
          display: flex;
          align-items: center;

          img {
            width: 24px;
            height: 24px;
            display: block;
          }
          .re-message {
            width: 96px;
            height: 96px;
            display: block;
            border: 1px solid #d8d8d8;
            margin-left: 8px;
          }
        }
        .rc-userdem {
          display: flex;
          flex-direction: column;
          width: 100%;
          margin-left: 8px;
          justify-content: center;
          span {
            font-size: 16px;
            color: #e1001a;
            display: block;
            font-weight: bold;
          }
          em {
            font-style: normal;
            font-size: 14px;
            display: block;
            margin-top: 8px;

            color: #666666;
          }
          .rc-userd {
              em{
                  display: none;
              }
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-top: 8px;
            i {
              font-size: 18px;
              font-style: normal;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              width: 74%;
              color: #e1001a;
            }
            img {
              width: 23px;
              height: 23px;
              display: block;
              margin-right: 5px;
            }
            img:last-child {
              width: 23px;
              height: 23px;
              display: block;
              margin-left: 10px;
            }
            strong {
              font-style: normal;
              display: flex;
              justify-content: center;
              list-style: none;
              align-items: center;
              width: 24px;

              color: #666666;
              height: 24px;
              border: 1px solid #d7d7d7;
              font-size: 12px;
              border-radius: 3px;
            }
            .rc-jia{
                display: flex;
            }
          }
        }
      }
    }
  }
}
//    /* 最小768px最大1920 *pc端/
@media screen and (min-width: 768px) and (max-width: 1920px) {
    .rc-footer{
        display: none;
    }
  .rc-footera {
    position: fixed;
    bottom: 0;
    width: 100%;

    .rc-foote {
      width: 92%;
      margin: 0 auto;
      box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.1);
      height: 102px;
      display: flex;
      justify-content: space-between;
    }
    .rc-shop {
      display: flex;
      align-items: center;
      img{
          width: 24px;
          height: 24px;
          display: block;
      }

      span{
        font-style: normal;
        font-size: 18px;
        color: #333333;
        margin-left: 16px;
        display: block;
      }
    }
    .rc-delete {
        display: flex;
        align-items: center;
        margin-right: 32px;
        .rc-num{
            display: flex;
            align-items: center;
            .rc-usernum{
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-right: 25px;
                .rc-usea{
                    display: flex;
                    align-items: center;
                }
            }
        }
        i{
font-size: 18px;
font-style: normal;
color: #333333;
margin-right: 8px;
display: block;
        }
        span{
          font-size: 20px;
color: #E1001A;
        }
        em{
            font-style: normal;
            margin-top: 8px;
            
color: #333333;

font-size: 16px;
        }
      strong {
    cursor: pointer;
      width: 164px;
height: 48px;
        background: #e2001a;
        border-radius: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
            margin-right: 40px;
        color: #ffffff;
      }
    }
  }
  .rc-header {
    width: 100%;
    .rc-main {
      width: 92%;
      margin: 0 auto;
      .rc-commodity {
        width: 100%;
        border: 1px solid #d7d7d7;
        border-radius: 3px 3px 0px 0px;
        background: #f6f6f6;
        font-size: 18px;
        color: #666666;
        height: 64px;
        display: flex;
        justify-content: space-between;
        .rc-commondi {
          display: flex;
          align-items: center;
          img {
            display: block;
            margin-left: 24px;
          }
          span {
            display: block;
            margin-left: 56px;
          }
        }
        ul {
          display: flex;
          width: 80%;
          justify-content: space-around;
          align-items: center;
        }
        img {
          width: 24px;
          height: 24px;
        }
      }
      .rc-select {
        border-bottom: 1px solid #d8d8d8;
        height: 56px;
        width: 100%;
       
        display: flex;
         display: none;
        justify-content: space-between;
        .select-left {
          display: flex;
          align-items: center;
          img {
            width: 24px;
            height: 24px;
            display: block;
          }
          span {
            font-size: 14px;
            color: #333333;
            display: block;
            margin-left: 8px;
          }
        }
        .select-right {
          display: flex;
          align-items: center;
          img {
            width: 16px;
            height: 16px;
            display: block;
            margin-right: 8px;
          }
          span {
            font-size: 14px;
            color: #333333;
          }
        }
      }

      .rc-userdemand {
        width: 100%;
        height: 180px;
        border-bottom: 1px solid #d8d8d8;
        display: flex;
        .rc-userdeman {
          display: flex;
          align-items: center;

          img {
            width: 24px;
            height: 24px;
            display: block;
            margin-left: 24px;
          }
          .re-message {
            width: 96px;
            height: 96px;
            display: block;
            border: 1px solid #d8d8d8;
            margin-left: 56px;
          }
        }
        .rc-userdem {
          display: flex;
          width: 100%;
          margin-left: 8px;
          span {
            font-size: 18px;
            color: #e1001a;
            display: block;
            font-weight: bold;
          }
          em {
            font-style: normal;
            font-size: 16px;
            display: block;
            margin-top: 8px;

            color: #666666;
          }
          .rc-userdema{
              display: flex;
              flex-direction: column;
              justify-content: center;
              width: 10%;

          }
          .rc-userd {
            display: flex;
            align-items: center;
            width: 87%;
            justify-content: space-around;
            .rc-jia{
                display: flex;
                align-items: center;
            }
            i {
              font-size: 20px;
              font-style: normal;
              color: #e1001a;
            }
            img {
              width: 23px;
              height: 23px;
              display: block;
              margin-right: 5px;
            }
            img:last-child {
              width: 23px;
              height: 23px;
              display: block;
              margin-left: 10px;
            }
            em{
                font-style: normal;
                font-size: 20px;
                cursor: pointer;
                border-bottom: 1px solid #E2001A;
                display: block;
                margin-left: 40px;
color: #E1001A;
            }
            strong {
              font-style: normal;
              display: flex;
              justify-content: center;
              list-style: none;
              align-items: center;
              width: 24px;

              color: #666666;
              height: 24px;
              border: 1px solid #d7d7d7;
              font-size: 12px;
              border-radius: 3px;
            }
          }
        }
      }
    }
  }
}
</style>