<template>
  <div class="card">
    <headerNav title="购物车"/>
       <van-cell  value="编辑商品" class="head">
        <template slot="title">
          <van-checkbox v-model="checkedAll" >全选</van-checkbox>
        </template>
      </van-cell>
        
    <van-checkbox-group class="card-goods" v-model="checkedGoods">
      
      <div class="promotion-group">
        <div  v-for="(item,index) in goods"
          :key="index" class="card-goods__item"> 
          <van-checkbox :name="item.id"></van-checkbox>

          <product-card :product='item' :iscard='true' >
            <template slot>
              <van-cell value="修改" >
                  <template slot="title">
                      <van-tag type="danger">促销</van-tag>
                      <span class="van-cell-text" >满60元减5元</span>
                  </template>
              </van-cell>
            </template>
          </product-card>
        </div>
        </div>
    
      <div class="promotion-group">
        
       <van-cell  is-link class="head">
        <template slot="title">
          <van-checkbox v-model="checkedAll" >京东自营</van-checkbox>
        </template>
      </van-cell>
      
      
      <div  v-for="(item,index) in goods"
        :key="index+10" class="card-goods__item"> 
        <van-checkbox :name="item.id"></van-checkbox>
      
        <product-card :product='item' :iscard='true' >
          <template slot>
            <van-cell value="修改" >
                <template slot="title">
                    <van-tag type="danger">促销</van-tag>
                    <span class="van-cell-text" >满60元减5元</span>
                </template>
            </van-cell>
          </template>
        </product-card>
      </div>
      <van-cell value="去凑单" is-link class="promotion">
        <template slot="title">
          <p><van-tag type="danger">满减</van-tag>购满60元,可减5元</p>
        </template>
      </van-cell>
      <div  v-for="(item,index) in goods"
        :key="index+20" class="card-goods__item"> 
        <van-checkbox :name="item.id"></van-checkbox>
      
        <product-card :product='item' :iscard='true' >
          <template slot>
            <van-cell value="修改" >
                <template slot="title">
                    <van-tag type="danger">促销</van-tag>
                    <span class="van-cell-text" >满60元减5元</span>
                </template>
            </van-cell>
          </template>
        </product-card>
      </div>
        </div>
    </van-checkbox-group>
    
    <div style="height:50px;"></div>
    <van-submit-bar
      :price="totalPrice"
      :disabled="!checkedGoods.length"
      :button-text="submitBarText"
      @submit="onSubmit"
    >
    <template slot>
      <van-checkbox v-model="checkedAll" >全选</van-checkbox>
    </template>
    </van-submit-bar>
  </div>
</template>

<script>

export default {
  components: {
  },
  data() {
    return {
      checkedAll:true,
      checkedGoods: ['1', '2', '3'],
      goods: [{
        id: '1',
        title: '星巴克(Starbucks)星冰乐 轻盈香草味 咖啡饮料 281ml*6瓶礼盒装低脂减糖',
        desc: '3.18kg/件',
        price: '200.00',
        quantity: 1,
        imageURL: 'https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg',
        imageTag:'比加入时降5元',
      }, {
        id: '2',
        title: '陕西蜜梨',
        desc: '约600g',
        price: '690.00',
        quantity: 1,
        imageURL: 'https://img.yzcdn.cn/public_files/2017/10/24/f6aabd6ac5521195e01e8e89ee9fc63f.jpeg',
          gift: [
            {
              title: "星巴克(Starbucks)星冰乐小熊吊饰星巴克(Starbucks)星冰乐小熊吊饰",
              quantity: 2
            },
            {
              title: "星巴克(Starbucks)星冰乐小熊吊饰星巴克(Starbucks)星冰乐小熊吊饰",
              quantity: 1
            }
          ]
      }, {
        id: '3',
        title: '美国伽力果',
        desc: '约680g/3个',
        price: '2680.00',
        quantity: 1,
        imageURL: 'https://img.yzcdn.cn/public_files/2017/10/24/320454216bbe9e25c7651e1fa51b31fd.jpeg'
      }]
    };
  },
  computed: {
    submitBarText() {
      const count = this.checkedGoods.length;
      return '结算' + (count ? `(${count})` : '');
    },
    totalPrice() {
      return this.goods.reduce((total, item) => total + (this.checkedGoods.indexOf(item.id) !== -1 ? parseFloat(item.price): 0), 0);
    },
  },
  methods: {
    onSubmit() {
      
      this.$router.push('/order')
    }
  }
};
</script>

<style lang="less">
.card-goods {
  font-size: 12px;
  &__item {
    position: relative;
    .van-checkbox{
      width: 20px;
      height: 20px;
      top: 40px;
      left: 5px;
      z-index: 1;
      position: absolute;
    }
    .additional{
      width: 100%;
        padding-left: 15px;
    box-sizing: border-box;
    }
  }
}
.head{
      padding-left: 5px;
  border-bottom: 1px solid #eee;
}
.card{
  background: #f7f7f7;
  .van-submit-bar__bar {
      border-top: 1px solid #f7f7f7;
      .van-checkbox{
        padding-left: 5px;
      }
  }
  .promotion{
      .van-tag {
          line-height: 12px;
          margin-right: 5px;
      }
      .van-cell__title{

      flex: 4;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      }
    }
    .promotion-group{
      margin-top: 10px;
      box-shadow: 5px 5px 5px #e5e5e5;
    }
}

    
</style>