<template>
<div>

<van-checkbox-group class="card-goods" v-model="checkedGoods">
  <van-checkbox
    class="card-goods__item"
    v-for="(item,index) in list"
    :checked='true'
    :key="index"
    :name="item"
    v-model='checked'
  >
    <van-card
      :price="item.price"
      :desc="item.text"
      :title="item.name"
      :thumb="item.img"
      >
       <div slot="bottom" :style="{float:'right',height:'5vh'}">
        <van-button size="mini" :style="{height:'5vh'}" @click="add($event,index)">+</van-button>
        <span  :style="{height:'5vh',fontSize:'15px'}" >{{item.num}}</span>
        <van-button :style="{height:'5vh'}"  size="mini" @click="jian($event,index)">-</van-button>
       </div>
    </van-card>
    <van-button type="default" @click="remove($event,index)" :style="{float:'right',height:'4vh',lineHeight:'4vh'}">删除</van-button>
  </van-checkbox>
</van-checkbox-group>


<van-submit-bar
  :price="totalPrice"
  :disabled="!checkedGoods.length"
  :button-text="submitBarText"
  @submit="onSubmit(totalPrice)">

<van-checkbox @click=”tap()” v-model=”checked” :style=”{marginLeft:’5vw’,fontSize:’15px’}” >全选</van-checkbox>

</van-submit-bar>

</div>
</template>

<script>
import { Dialog } from ‘vant’;
import axios from ‘axios’;
import { Checkbox, CheckboxGroup, Card, SubmitBar, Toast } from ‘vant’;
export default {
mounted(){

  axios({
         method:'post',
         url:'http://www.tencent.com/api',
         data:{title:0},
       }).then((data)=>{
         this.list=data.data.list;
         this.list.forEach( (item) => {
                this.checkedGoods.push(item);
            });
            this.checked=true;
       });
       
},

data() {

return {
  checkedGoods: [],
  list:[],
  checked:false,
  panduan:true,
  midprc:'',
};

},
computed: {

submitBarText:{
  get:function(){
     var count = this.checkedGoods.length;
     console.log(count)
     return '结算' + (count ? `(${count})` : '');//模板字符串${count}
  },
  set:function(val){
  }

},totalPrice:{
  get:function(){
    return this.list.reduce(
    (total, item) => total + 
    (this.checkedGoods.indexOf(item) !== -1 ? item.price*100*item.num : 0)
    , 0);
  },
   
}

},
methods: {

onSubmit(a) {
  this.$store.state.z_info.tolpri=a/100;
  this.$store.state.z_info.od_name=this.list[0].name;
  this.$store.state.z_info.od_img=this.list[0].img;
  this.$store.state.z_info.od_text=this.list[0].text;
   this.$router.push({path:'/creods'});
},
tap(){
  if(this.checked){
    this.checkedGoods = [];
  }else{
    this.checkedGoods=[];
      this.list.forEach( (item) => {
      this.checkedGoods.push(item);
    });
  }
},
remove(e,a){
  e.cancelBubble = true;
  Dialog.confirm({
    title: '确定删除?',
  }).then(() => {
     this.list.splice(a,1);
      this.checkedGoods=[];
      this.list.forEach( (item) => {
      this.checkedGoods.push(item);
    });
  }).catch(() => {
    // on cancel
  });
 
},
add(e,a){
  e.cancelBubble = true;
  this.list[a].num++;
},
jian(e,a){
  e.cancelBubble = true;
  if(this.list[a].num<=1){
    this.list[a].num = 1;
  }else{
  this.list[a].num--;
  }
}

},
watch:{

checkedGoods:{
  handler:function(){
  if(this.checkedGoods.length==this.list.length){
    this.checked=true;
  }else{
    this.checked=false;
  }
},
}

}
};
</script>
<style lang=”less”>
.van-card__desc{
width: 60vw;
height:30vw
}
.card-goods {
padding: 0;
background-color: #fff;
margin-bottom: 50px;
&__item {

position: relative;
background-color: #fafafa;
.van-checkbox__label {
  width: 100%;
  height: auto; // temp
  padding: 0 10px 0 15px;
  box-sizing: border-box;
}
.van-checkbox__icon {
  top: 40%;
  left: 10px;
  z-index: 1;
  position: absolute;
  margin-top: -10px;
}
.van-card__price {
  color: #f44;
  height: 5vh;
  min-width: 50px;
  font-size: 20px;
  line-height: 5vh;
  text-align: center
}

}
}
.card-goods__item {
margin-bottom: 1vh;

}

.van-card__title{
height: 10vh;
line-height: 5vh;
font-size: 20px
}
.van-button–mini{
min-width: 30px;
font-size: 20px
}

</style>